如何在角度2中的量角器中模拟拖放动作？ [英] 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'));

我想删除 e1 in e2 .ie实施拖拉

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.

任何输入？

谢谢。

推荐答案

p>您的网页实现了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 ＃file-drag-drop-js

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