可以做到!!
browser.executeScript
我的同事在同一个 dragula.js 测试中检测到了解决方法
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
我们将发送一个脚本来执行,该脚本将使用正确的参考元素调度自定义事件。
你可以使用这样的东西(打字稿版本):
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 版本中直接在浏览器上测试:
https://valor-software.com/ng2-dragula/
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 测试。