<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – Drag and Drop in WebDriverIO

Drag and Drop command is used to Drag an Element to its Destination Element on Webpage.

Syntax: – $(selector).dragAndDrop(target, duration) Where Target is the destination selector and duration is the time for how long the drag should take place until it reach to its Final Destination.

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to Drag an Element to its destination Element on webpage, using dragAndDrop command in WebDriverIO.

Using Drag and Drop Command

First, I will demonstrate the exercise where we will navigate to page and then pick the Draggable item and then Drag it until it reaches to its final Destination i.e., Drop Location by the use of dragAndDrop command of WebDriverIO, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

1)  Navigate to http://jquery.com/droppable/

2) Find Xpath of both the Draggable Item and where it needs to be drop i.e., Droppable Item.

3) Final Part is to Drag the Draggable Item to its Drop Location i.e., on to Droppable Item

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. navigate to page then find xpath of draggable and droppable item and making draggable item to reach to its destination location i.e., on droppable item by dragAndDrop command of WebDriverIO) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

1)  Open Visual Studio Code on your system

2)  Click on File and Select Open Folder. Select the project folder on which your workspace is present.

3)  Expand ‘test’ from the Explorer, right click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4) Give any name of the newly created file say “DragAndDrop_test.js” and copy the below given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for dragging a draggable item and to dropping it to its destination location i.e., droppable item which is done by dragAndDrop command of WebDriverIO on ‘https://jqueryui.com/droppable/’ application:

You can understand this code, by reading the comments provided in the below code:

Copy the code from here:-

describe('Drag and Drop command moves Drag Box from its position to Destination i.e., Drop Box',()=> {
      it('should make Drag Box to reach out to Drop Box', () => {
      browser.url('https://jqueryui.com/droppable/')
      const frame1 = $('/html/body/div[1]/div[2]/div/div[1]/iframe')
      browser.switchToFrame(frame1)
      const drag = $('#draggable')
      drag.waitForExist(5000)
      console.log(drag)
      const drop =$('#droppable')
      console.log(drop)
      drag.dragAndDrop(drop, 5000)
      browser.pause(8000);
    })
})

5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:

6) Click on Terminal and Open New Terminal.

7) By Default, Powershell Terminal will open as shown below:

8) Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

9) Open Another Terminal in the same way we did in the step 6 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘DragAndDrop_test.js will get executed successfully, the Firefox Browser will launch and respective action will be taken by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how, we can take help of dragAndDrop Command of WebDriverIO to drag Draggable Item of webpage to Droppable Element of Webpage, and I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles ­­

This is how, we can take help of saveScreenshot Command of WebDriverIO to take screenshot of page view of webpage, and I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles ­­

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                             Next Post>>