无法使用ng2-dragula在网站中使用量角器进行拖放 [英] Cannot drag and drop with protractor in website using ng2-dragula
问题描述
我的公司项目网站上有一个基于ng2-dragula的拖放块.这是基本功能，但是即使我尝试了很多方法，我也无法使用量角器成功拖放. 有人对我有同样的问题.据我所知，没有办法用Dragula进行端到端测试
My company project website has a drag and drop block based on ng2-dragula. This is fundamental function but i cannot use protractor to drag and drop successfully even i tried a lot of ways. Someone has the same issue with me. As i know there is no way to proceed E2E test with dragula
-
https://github.com/bevacqua/angularjs-dragula/Issues/86 .
WebDriver使用Dragula拖放到应用程序中
仅限于Protractor/Jasmine拖放抓取文字而不是元素
https://github.com/bevacqua/dragula/issues/452
https://github.com/bevacqua/angularjs-dragula/issues/86.
WebDriver Drag and Drop in application using Dragula
Protractor/Jasmine drag and drop only grabbing text not the element
https://github.com/bevacqua/dragula/issues/452
================================================ =======================
========================================================================
但是因为ng2-dragula现在很流行，所以我认为我们将有很多使用此库的网站，如果量角器不能这样做，那一定是一个大问题吗?
But because ng2-dragula is quite popular now, i think that we will have a lot of website using this library and if protractor cannot do, it must be a big issue?
import {code as dragAndDrop} from 'html-dnd';
...........
p_Login.openUrl("http://valor-software.com/ng2-dragula/");
let ele1=element(by.xpath("//example-app//div[contains(text(),'Whenever an')]"));
let ele2=element(by.xpath("//example-app//div[contains(text(),'DOM as a result')]/.."));
browser.driver.executeScript(dragAndDrop, ele1.getWebElement(), ele2.getWebElement());
推荐答案
可以做到！
browser.executeScript
browser.executeScript
我的同事在相同的dragula.js测试中检测到了解决方法
The workaround was detected by my co-worker inside the same dragula.js test
https://github.com/bevacqua/dragula/blob/master/test/drag.js
完全
events.raise(o.containerClick ? div : item, 'mousedown', eventOptions);
在上声明了提升功能
https://github.com/bevacqua/dragula/blob/master/test/lib/events.js
我们将发送一个要执行的脚本，该脚本将分派具有正确参考元素的自定义事件.
We are going to send a script to execute which will dispatch custom events with the correct reference elements.
您可以使用类似以下内容(打字稿版本):
You could use something like this (typescript version):
import { browser } from 'protractor';
/*
* @param target css selector of element to drag & drop
* @param destination css selector of destination element
*/
async function simulateDragAndDrop(target: string,destination: string): Promise<void> {
await browser.executeScript(() => {
let getEventOptions = (el, relatedElement) => {
//coordinates from destination element
const coords = el.getBoundingClientRect();
const x = coords.x || coords.left;
const y = coords.y || coords.top;
return {
x: x,
y: y,
clientX: x,
clientY: y,
screenX: x,
screenY: y,
//target reference
relatedTarget: relatedElement
};
};
let raise = (el, type, options?) => {
const o = options || { which: 1 };
const e = document.createEvent('Event');
e.initEvent(type, true, true);
Object.keys(o).forEach(apply);
el.dispatchEvent(e);
function apply(key) {
e[key] = o[key];
}
};
let targetEl = document.querySelector(target);
let destinationEl = document.querySelector(destination);
let options = getEventOptions(destinationEl, targetEl);
//start drag
raise(targetEl, 'mousedown');
raise(targetEl, 'mousemove');
//set event on location
raise(destinationEl, 'mousemove', options);
//drop
raise(destinationEl, 'mouseup', options);
}, target, destination);
}
或以javascript版本直接在浏览器上进行测试:
Or in javascript version to test directly on browser:
var target = 'body > example-app > div > example-a div.container:first-child > div:first-child'; //css selector of element to drag & drop
var destination = 'body > example-app > div > example-a div.container:last-child'; //css selector of destination element
var getEventOptions = function (el, relatedElement) {
//coordinates from element
var coords = el.getBoundingClientRect();
var x = coords.x || coords.left;
var y = coords.y || coords.top;
return {
x: x,
y: y,
clientX: x,
clientY: y,
screenX: x,
screenY: y,
relatedTarget: relatedElement
};
};
var raise = function (el, type, options) {
var o = options || { which: 1 };
var e = document.createEvent('Event');
e.initEvent(type, true, true);
Object.keys(o).forEach(apply);
el.dispatchEvent(e);
function apply(key) {
e[key] = o[key];
}
};
var targetEl = document.querySelector(target);
var destinationEl = document.querySelector(destination);
var options = getEventOptions(destinationEl, targetEl);
//start drag
raise(targetEl, 'mousedown');
raise(targetEl, 'mousemove');
//set event on location
raise(destinationEl, 'mousemove', options);
//drop
raise(destinationEl, 'mouseup', options);
此解决方案对我有用，也许应该适合ng2-dragula测试.
This solution work for me, maybe should be adapted to ng2-dragula tests.
这篇关于无法使用ng2-dragula在网站中使用量角器进行拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
