Drag and Drop in Protractor

🗄️ Archive
1

I appreciate this is a bit of an old chestnut and much has been said about automating drag and drop as part of E2E testing. However after many, many hours of fiddling around, I cannot get any of the methods seen on other forums to work…that is using Functions, coordinates etc etc. Oddly enough, console.log maintains the tests have passed, but the screenshots clearly show nothing has happened.

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,"dataT
ransfer",{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)})})})})';


describe('Drag and Drop Test', function() {
it('should drag', function () {



 var e1 = element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-
visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img'));
var e2 = element(by.css('.db-project-designer'));

element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[2]/div/digitalbridge-shortlist/div/div/ul/li[1]/a/img')).click();
//element(by.xpath('html/body/webapp-app/div/div/webapp-johnlewis-visualiser/div/div[1]/div/div/digitalbridge-project/div/digitalbridge-project-designer/canvas')).click();

browser.driver.actions().dragAndDrop(e1.getWebElement(),e2.getWebElement()).perform();

browser.sleep(2000);
});
});`

The constant is showing an error: cons is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104) - I do have ES6 installed in Node_Modules.

I inserted the click line to see if pre-selecting the item made any difference…it didn’t!

Thank you

David