如何在angular2中模拟量角器中的拖放动作？

Question

我有两个 div。

var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));

我想在 e2 中删除 e1 .i.e.在 angular2 的 e2e 测试用例中实现拖放。

我尝试了以下代码：

var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));
browser.driver.actions().dragAndDrop(e1.getWebElement(),e2.getWebElement()).perform();
browser.sleep(2000);

但它不是 working.My chrome 打开但没有任何反应。

有任何输入吗？

谢谢。

Answer 1

您的页面实现了 HTML5 拖放功能，Selenium dragAndDrop 操作不支持该功能。

然而，您可以通过使用 executeScript:

注入 dragenter, dragover, drop, dragend 事件来模拟操作

const JS_HTML5_DND = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})';

var e1 = element(by.id('draggable-0'));
var e2 = element(by.id('dropContainer-0'));
browser.executeScript(JS_HTML5_DND, e1.getWebElement(), e2.getWebElement());

拖放脚本来源：

https://gist.github.com/florentbr/60ef7cb8d9b1ae690cafc82aad52da73#file-drag-drop-js

如何在angular2中模拟量角器中的拖放动作？

How to simulate a drag and drop action in protractor in angular2?

drag-and-drop

protractor

e2e-testing

angular