2

I am trying to use drag and drop method of WebDriver.io and it is not work. I used the example drag & drop on the website: https://www.w3schools.com/html/html5_draganddrop.asp I need this for automation of drag and drop function of an angular app.

Can someone help me or find a workaround please.

dlitmano
  • 21
  • 1
  • 3

1 Answers1

3

You can create your custom drag&drop using buttonDown and buttonUp methods:

dragAndDrop(element, x = 0, y = 0) {
  element.moveTo();
  browser.buttonDown(0);
  element.moveTo(x, y);
  browser.buttonUp(0);
}

You can use otherElement.moveTo(); insted of element.moveTo(x, y); in order to move to specific element.

Also you can use performActions() function, like this:

const dragAndDrop = (element, x = 0, y = 0) => {
  const location = getElementLocation(element);
  browser.performActions([
    {
      type: 'pointer',
      id: 'finger1',
      parameters: { pointerType: 'mouse' },
      actions: [
        { type: 'pointerMove', duration: 0, x: location.x, y: location.y },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerMove', duration: 0, x: location.x + x, y: location.y + y },
        { type: 'pointerUp', button: 0 },
      ],
    },
  ]);
};
Dzmitry
  • 31
  • 1
  • 1
    The custom `performActions()` function worked well for me with wdio v6. Only commenting to add that my element had rounded borders therefore didn't work initially. I updated the x / y to target the middle of the element by using `element.getSize()` and then adding half the height to y and half the width to x. I hope this helps anyone else who might get stuck. – Matt Dell Nov 05 '21 at 17:53
  • In webdriverio 8 one should use `browser.actions`/`browser.action` API – d.k Jan 08 '23 at 08:08