Drag and drop is not working in protractor typescript

Questions
#1

Hi everyone,

I am working on protractor typescript scripts. I am trying to automate drag and drop on a website but unable to do that.

What all I have tried:

let source=element(by.xpath(“abc”));
let destinaton=element(by.xpath(“xyz”));

  1. await browser.driver.actions().dragAndDrop(await source.getWebElement(),await destinaton.getWebElement()).perform();
  2. browser.actions().dragAndDrop(source,destination).perform();
  3. await browser.driver.actions().mouseMove(await source.getWebElement()).
    mouseDown(await source.getWebElement()).
    mouseMove(await destinaton.getWebElement()).
    mouseUp(await destinaton.getWebElement()).
    perform();
  4. await browser.driver.actions()
    .mouseMove({x: srcx, y: srcy})
    .mouseDown()
    .mouseMove({x: destx, y:desty})
    .mouseUp().perform();
  5. var fs = require(“fs”);
    var dnd_js = fs.readFileSync("/abc/drag_and_drop_helper.js");
    browser.driver.executeScript(dnd_js+source+".simulateDragDrop({ dropTarget: “+destination+”});")
  6. var dragAndDrop = require(‘html-dnd’).code;
    browser.driver.executeScript(dragAndDrop, source, destination);

All the approaches mentioned above I have tried, and many more approaches but nothing is working. It is only hovering on source and destination element but dragging is not happening.

Technologies used:

Typescript : 3.0.1
protractor : 7.0.0

Please help me if there is any working work around.

1 Like
#2

Oh, just read your question again - i dont think this will work in some cases where the drop target is not “clickable” , when that happens you need to use JS to click on or drag. Not sure how to help.

I assume you looked at Is it possible to automate drag and drop from a file in system to a website in selenium using TestNG - Software Quality Assurance & Testing Stack Exchange

1 Like
#3

Thank you for the reply.
I am not trying to drag some file in website. I trying to drag and drop some element in website only.

I have tried with js for dragging but it did not work.

#4

Earlier this week my boss told me off, and reminded me of something. “Just because we can do something with software, does not mean we should. Computers, can do anything we imagine.”

Basically you are trying to create a test fixture that emulates a human dragging stuff about on the screen. BUT, that’s not even remotely what you are wanting to test at all. Probably not even remotely what the end user is experiencing. Using automation will hide the fact that the user gets no GUI feedback like a drag animation, so since we are not testing that, we should really just test what we need to, and that is much simpler if you just call the underlying api calls, be they in JS or any other interface. I would speak to the developers in your team, and ask them if there is another way to verify the same thing, via code, since you are not verifying the GUI here at all really.

I can tell so many horror stories of times I made similar automation mistakes, but not to say you should not use selenium to do this, but rather to think if it’s the best way to satisfy the real reason for testing something. Did the customer complain that the drag animation was wrong, or that their particular browser behaved differently to the one you officially support, or did they complain that dragging an element that was a certain state did not work? All of these can be answered, probably without using this kind of selenium Actions, but perhaps via Javascript, or other means. If the customer complained that dragging when there was an alertbox or something else popping up did not work, this kind of test would never detect that case.

Still, it’s a good thing to try make this work, but maybe it’s not what you are testing. I’m not telling you what to do here, but that there may be other ways, depending on the context, but mostly depending on what is most valuable.