Creating custom Drag & Drop in WebDriver

#1

In case you need custom drag & drop (or similar actions) performed you should implement a custom helper following commands from webdriverio api.

There are two versions of API:

So for compatibility, you should implement Drag & Drop for both using different methods.

Here is my sample function to drag by a specific offset:

  // inside a helper
  async dragToPoint(el, x, y) {
    const browser = this.helpers.WebDriver.browser;
    await this.helpers.WebDriver.moveCursorTo(el);

    if (browser.isW3C) {
      // W3C version
      return browser.performActions([
        {"type": "pointerDown", "button": 0},
        {"type": "pointerMove", "origin": "pointer", "duration": 1000, x, y },
        {"type": "pointerUp", "button": 0}
      ]);
    }
    // JSON Wire version
    await browser.buttonDown(0);
    await browser.moveToElement(null, x, y);
    await browser.buttonUp(0);
  }