Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to do drag and drop in protractor ?

See original GitHub issue

Looking at webdriverjs I can see there’s a way to do drag and drop such as this:

 * <p>Example:<pre><code>
 *   new webdriver.ActionSequence(driver).
 *       keyDown(webdriver.Key.SHIFT).
 *       click(element1).
 *       click(element2).
 *       dragAndDrop(element3, element4).
 *       keyUp(webdriver.Key.SHIFT).
 *       perform();
 * </pre></code>

How to use it with protractor?

Issue Analytics

State:
Created 10 years ago
Comments:27 (4 by maintainers)

Top GitHub Comments

3reactions

omlandcommented, Jun 21, 2016

It’s not clean but I was able to get drag and drop to move by doing the following:

browser.actions().mouseDown(el).perform();
browser.actions().mouseMove({x:0, y:100}).perform();
browser.actions().mouseDown(el).perform();
browser.actions().mouseMove({x:0, y:75}).perform();
browser.actions().mouseUp().perform();

This worked for me in chrome Version 51.0.2704.103 (64-bit)

1reaction

KillerCodeMonkeycommented, Mar 14, 2021

Even this issue is closed and very old: My problem occurs with @angular/cdk drag and drop. The solution of @rhartvig was close.

But i first needed to mousemove to the drag element and instead of directly moving the element to the destination, i had to move the mouse some pixels.

async dragAndDrop(dragElement: WebElement, dropElement: WebElement) {
  await browser.actions().mouseMove(dragElement).perform();
  await browser.actions().mouseDown(dragElement).perform();
  await browser.actions().mouseMove({ x: 10, y: 0 }).perform();
  await browser.actions().mouseMove(dropElement).perform();
  await browser.actions().mouseUp().perform();
}