How to perform drag and drop actions in WebdriverIO?

WebdriverIO can perform mouse operations like drag and drop using the dragAndDrop method. With this, we execute clicking and holding events on the present object(source), then pass the object to the target element. Finally, release the mouse.

Syntax

let p = $('#loc')
let t = $('#target')
p.dragAndDrop(t)

Here, p is the source locator and t is the destination locator.

Let us perform the drag and drop functionality for the below elements −

In the above image, the element with the name - Drag me to my target has to be dragged and dropped on the element - Dropped!.

Example

Code Implementation

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Drag and Drop', function(){

      // launch url
      browser.url('https://jqueryui.com/droppable/')

      //maximize browser
      browser.maximizeWindow()

      //switch to frame
      browser.switchToFrame($(".demo-frame"))

      //identify source element
      const src = $('#draggable')

      //identify target element
      const trg = $('#droppable')

      //drag and drop
      src.dragAndDrop(trg)
   });
});

Output

After execution, the element with the name - Drag me to my target has been dragged and dropped on the element - Dropped!.