如何在angular2中模拟量角器中的拖放动作? [英] How to simulate a drag and drop action in protractor in angular2?

问题描述

我有两个 div.

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

我想在 e2 中删除 e1 .即实现拖动&加入 angular2 的 e2e 测试用例.

I want to drop e1 in e2 .i.e. implementing drag & drop in e2e test case for angular2.

我试过下面的代码:

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);

但它不工作.我的 chrome 被打开但没有任何反应.

but its not working.My chrome gets opened but nothing happens.

任何输入?

谢谢.

推荐答案

您的页面实现了 HTML5 拖放，Selenium dragAndDrop 操作不支持.

Your page implements an HTML5 drag and drop which is not supported by the Selenium dragAndDrop action.

但是，您可以通过使用 executeScript 注入 dragenter、dragover、drop、dragend 事件来模拟操作:

You can however simulate the action by injecting the dragenter, dragover, drop, dragend events with executeScript:

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#文件拖放-js

这篇关于如何在angular2中模拟量角器中的拖放动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！