Testing with selenium drag and drop action

[Víctor Manuel Calle Sánchez]

Hello.

I am a tester and now we are testing a app that uses Sync fusion. One of the funcionalities it`s drag and drop symbols.

We use selenium and I want to know if it's possible to reproduce the drag and drop action with a selenium test.

Selenium has one action of drag and drop but don't work with Chrome. I have tested it with Firefox and sometimes seems that works but other times don´t do anything.

I have read of possible bugs between html5 and Chrome but I don`t know certainly why don't work.

At first I believed that it's a problem with the browsers but sometimes works at Firefox.

I want to know if somebody has done testing of drag and drop action with Selenium.

Thank you and regards.

[Jesus Arockia Sankaran S]

Hi Víctor, 

Sorry for the delay in getting back to you.  

We assume that you are using Node.js and JavaScript API of Selenium WebDriver to test your project.  We have checked the “Drag and Drop” browser action in our end with Syncfusion Drag and Drop feature but we are not able to reproduce the issue in our end.  

Here, you can download the simple protype test project for emulating your scenario for your reference.  

Sample: https://www.syncfusion.com/downloads/support/forum/152401/ze/SeleniumDragAndDrop-2089371404 

Code Snippet:  

const { Builder, By, Key, until, Capabilities } = require('selenium-webdriver'); 

const chrome = require('selenium-webdriver/chrome'); 

const path = require('chromedriver').path; 

const service = new chrome.ServiceBuilder(path).build(); 

chrome.setDefaultService(service); 

const browser = new Builder() 

    .withCapabilities(Capabilities.chrome()) 

    .build(); 

 

async function example() { 

    browser.get('http://127.0.0.1:5501/app.html'); 

    let draggable = browser.findElement(By.id('draggable')); 

    let droppable = browser.findElement(By.id('droppable')); 

    browser 

        .actions() 

        .dragAndDrop(draggable, droppable) 

        .perform(); 

} 

 

example(); 

We ask you to follow the below steps to run the sample application in your end.  

1. Download, extract the project in your local machine.
2. Run the command “npm install” to install the dependencies.
3. We recommend you to open this application in Visual Studio Code.
4. Move to the Extension menu in right navigation bar.

 

5. Search and install “Live Server” extension.
6. Then, right click on the “app.html” file to open it using Live Server.

 

7. “app.html” file will open in browser and copy the URL.

 

8. Include the copied URL in Selenium.
9. Now, run the command “node index” to start the Selenium server.

 

Please let us know if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Miles, 

We are glad that your problem has resolved and you are more welcome. 

Regards, 

Jesus Arockia Sankaran S 

[Mark Smith]

Nice article!!!

[Jesus Arockia Sankaran S]

Hi Mark Smith, 

You are welcome and thank you for your appreciation.  

Regards, 

Jesus Arockia Sankaran S 

[Florene J Anderson]

Hi Víctor, 

Sorry for the delay in getting back to you.  

We assume that you are using Node.js and JavaScript API of Selenium WebDriver to test your project.  We have checked the “Drag and Drop” browser action in our end with Syncfusion Drag and Drop feature but we are not able to reproduce the issue in our end.  

Here, you can download the simple protype test project for emulating your scenario for your reference.  

Sample: https://www.syncfusion.com/downloads/support/forum/152401/ze/SeleniumDragAndDrop-2089371404 

Code Snippet:  

const { Builder, By, Key, until, Capabilities } = require('selenium-webdriver'); 

const chrome = require('selenium-webdriver/chrome'); 

const path = require('chromedriver').path; 

const service = new chrome.ServiceBuilder(path).build(); 

chrome.setDefaultService(service); 

const browser = new Builder() 

    .withCapabilities(Capabilities.chrome()) 

    .build(); 

 

async function example() { 

    browser.get('http://127.0.0.1:5501/app.html'); 

    let draggable = browser.findElement(By.id('draggable')); 

    let droppable = browser.findElement(By.id('droppable')); 

    browser 

        .actions() 

        .dragAndDrop(draggable, droppable) 

        .perform(); 

} 

 

example(); 

We ask you to follow the below steps to run the sample application in your end.  

1. Download, extract the project in your local machine.
2. Run the command “npm install” to install the dependencies.
3. We recommend you to open this application in Visual Studio Code.
4. Move to the Extension menu in right navigation bar.

 

5. Search and install “Live Server” extension.
6. Then, right click on the “app.html” file to open it using Live Server.

 

7. “app.html” file will open in browser and copy the URL.

 

8. Include the copied URL in Selenium.
9. Now, run the command “node index” to start the Selenium server.

 

Please let us know if you need any further assistance on this. 

I wrote a dissertation related to this issue and the service https://writix.co.uk/write-my-dissertation-for-me helped me a lot, with which I have been collaborating for several months. I really like the quality and price of the services provided.

Regards, 

Jesus Arockia Sankaran S 

Very informative and easily explained. Thank you very much for the information.

[Jesus Arockia Sankaran S]

Hi Florence, 

  

Thank you for your comments, 

  

Regards, 

Jesus Arockia Sankaran S