Search code examples
webdriver-io

dragAndDrop using webdriverio

I have tried every single thing to perform dragAndDrop using webdriverio but nothing works. I have also posted a question in the webdriverio gitter but no response. below posted code is one of the ways I tried and its supposed to work but it just doesn't! 

`   await this.driver.moveToObject(source); 
    await sleep(2000);
    await this.driver.buttonDown(0);
    await sleep(2000);
    await this.driver.moveToObject(destination);    
    await sleep(2000);
    await this.driver.buttonUp(0);`
Solution

  • I'm not sure what properties are on the source and destination objects you are using but here is an example of how I was able to get it to work using the same commands you are trying.

    In my example I have a table with columns that can be re-ordered by dragging and dropping them wherever I want them to be. First I get the two column headers I want to switch

    let docIdHeader = browser.element('div[colid="documentid1"]');
let pageCountHeader = browser.element('div[colid="_PAGE_COUNT1"]');

    If I log these objects out to the console I can see the properties stored in them. 

    > docIdHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
  value:
   { ELEMENT: '0.3568346822568915-1',
     'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-1' },
  selector: 'div[colid="documentid1"]',
  _status: 0 }

> pageCountHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
  value:
   { ELEMENT: '0.3568346822568915-2',
     'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-2' },
  selector: 'div[colid="_PAGE_COUNT1"]',
  _status: 0 }

    Now using the same technique you are using and the selector property off of these objects I can get it to work in two ways.

    browser.dragAndDrop(docIdHeader.selector, pageCountHeader.selector);

    Or

    browser.moveToObject(docIdHeader.selector)
browser.buttonDown(0)
browser.moveToObject(pageCountHeader.selector)
browser.buttonUp(0)

    I ran this in the REPL interface so I know it works as I could see each step being executed after I sent the commands. If you are not familiar with how to use the REPL I highly recommend learning. You can play around with commands in the console until you figure something out and then add those commands to your tests.

    Also, as I stated in my comments above. dragAndDrop() and moveToObject() are going to be deprecated soon and you will likely see a lot of warnings about it when you use these. The correct way to implement a drag and drop action going forward is to use browser.actions(). Unfortunately, I don't have an example of how to do it that way as I haven't played with it yet. If no one provides an example by tonight I will try to get one together for you.