webdriverio: [🐛 Bug]: Drag drop is not working

Hello, I found a solution, we must to move after mouseDown and to move again with 1 point when the pointer is on the target.

export const dragAndDrop = async (from: WebdriverIO.Element, to: WebdriverIO.Element) => {
  return await browser
    .action('pointer')
    .move({ duration: 0, origin: from, x: 0, y: 0 })
    .down({ button: 0 })
    .move({ duration: 0, origin: 'pointer', x: 0, y: 0 })
    .pause(10)
    .move({ duration: 0, origin: to, x: 0, y: 0 })
    .move({ duration: 0, origin: 'pointer', x: 1, y: 0 })
    .move({ duration: 0, origin: 'pointer', x: -1, y: 0 })
    .up({ button: 0 })
    .perform();
};

It’s not wokring for Angualr CDK drag drop. Perform actions and html-dnd also didn’t work. can someone let me know how to make this work? Reproducible code.

    await browser.url('https://material.angular.io/cdk/drag-drop/overview');
    const draggable = await $(`(.//div[text()='Get to work'])[1]`);
    const dropTo = await $(`(.//div[text()='Get up'])[1]`);
    await draggable.dragAndDrop(dropTo);

@all I can see that the drag action selects the element but doesn’t move it. what i am doing wrong

it(‘LAM SalesTeamRRT’, async () => { await leadManagement.salesTeamRRT(‘A43’, ‘Automate1324’); const AboutMe = await $(“//mat-list-item[contains(@id,‘About Me’)]”) const AddField = await $(“//div[@id=‘cdk-drop-list-0’]”) await browser.actions([ browser.action(‘pointer’) .move({ duration: 2000, AboutMe, x: 1340, y: 230 }) .down({ button: 0 }) //Code Working till this step .move({ duration: 2000, AddField, x: 950, y: 216 }) .up({ button: 0 }) ])

@tv2022 thanks for the example, however it doesn’t help much as the Selenium client is not using the Actions API. I found the following requests are being made:

[0-0] /session/3442d763bf0ce4cf498813b787e9d2b7/moveto { element: '0.07021713713084221-1' }
[0-0] /session/3442d763bf0ce4cf498813b787e9d2b7/buttondown { button: 0 }
[0-0] /session/3442d763bf0ce4cf498813b787e9d2b7/moveto { element: '0.07021713713084221-2' }
[0-0] /session/3442d763bf0ce4cf498813b787e9d2b7/moveto { element: '0.07021713713084221-2' }
[0-0] /session/3442d763bf0ce4cf498813b787e9d2b7/buttonup { button: 0 }

Can you make it to use the W3C Actions API?

Yes as said I had to use Selenium 3 actions API as the W3C actions API was not working.

@tv2022 do you have a working example for Selenium? I wasn’t able to get your code working. I tried the following:

import { remote } from './packages/webdriverio/build/index.js'
const http = await import('selenium-webdriver/http/index.js')
const webDriver = await import('selenium-webdriver')

const browser = await remote({
    capabilities: {
        browserName: 'chrome',
    }
})

const sessionId = browser.sessionId
const client = new http.HttpClient('http://localhost:4444/')
const executor = new http.Executor(client)
const driver = new webDriver.WebDriver(sessionId, executor)

await browser.url('https://material.angular.io/cdk/drag-drop/overview')
await browser.pause(2000)

const source = await driver.findElement(webDriver.By.xpath(`(.//div[text()='Get to work'])[1]`))
const target = await driver.findElement(webDriver.By.xpath(`(.//div[text()='Get up'])[1]`))
const actions = driver.actions({ async: true })
await actions.dragAndDrop(source, target).perform()

await browser.pause(5000)
await browser.deleteSession()

I can see that the drag&drop action selects the element but doesn’t move it.

@M4sterShake it is not entirely broken folks. There are many ways you can implement a drag&drop behavior and it is almost impossible to guarantee the command works for all of them. I am happy to revisit this issue once v8 is released but generally you all have all capabilities to build a drag&drop function yourself by using the performActions command.

Thanks @christian-bromann but that’s the problem, it doesn’t work even when using performActions. It behaves exactly the same as it does when using dragAndDrop. There are many people in https://github.com/webdriverio/webdriverio/issues/4134 that have the same problem. I’ve tried with many permutations but nothing seems to work. Once pointerDown is fired, mouseMove doesn’t seem to work properly anymore. The app being tested is a React app by the way.

performActions() is not working in our app, which uses React. Any working examples or tips?

@iamatharva If this is blocking you, then you can use this in the mean time until we figure out the bug issue. I have used this package and it works pretty well. https://www.npmjs.com/package/html-dnd

@davefogo instead of: draggable.dragAndDrop(droppable);

use: dndAction(draggable, droppable);

I have the same problem. Can’t drop a li element (when I drag a li element and try to move it to the 2nd li, it’s not moving, only pressed). I tried different options: dragAndDrop(), performActions(), html-dnd, etc. Nothing helped me.

My capabilities, I’m using a hub and chrome Version 99.0.4844.51 :

 capabilities: [
    {
      maxInstances: 4,
      browserName: 'chrome',
      acceptInsecureCerts: true,
      'goog:chromeOptions': {
        args: ['--disable-backgrounding-occluded-windows', '--window-size=1980,1080', '--disable-gpu'],
      },
    },
  ],