Trending September 2023 # How To Drag And Drop In Selenium (Example) # Suggested October 2023 # Top 9 Popular

You are reading the article How To Drag And Drop In Selenium (Example) updated in September 2023 on the website Phuhoabeautyspa.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 How To Drag And Drop In Selenium (Example)

Drag and Drop in selenium

Some web application, have a functionality to drag web elements and drop them on defined area or element. We can automate drag and drop of such elements using Selenium Webdriver.

Drag and Drop Syntax

The Actions class has two methods that support Drag and Drop. Let’s study them-

Actions.dragAndDrop(Sourcelocator, Destinationlocator) How to Drag and Drop in Selenium

Here is how to drag and drop an element using Selenium Webdriver

In dragAndDrop method, we pass the two parameters –

First parameter “Sourcelocator” is the element which we need to drag

Second parameter “Destinationlocator” is the element on which we need to drop the first element

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

dragAndDropBy method we pass the 3 parameters –

First parameter “Sourcelocator” is the element which we need to drag

The second parameter is x-axis pixel value of the 2nd element on which we need to drop the first element.

The third parameter is y-axis pixel value of the 2nd element on which we need to drop the first element.

Let’s practically show you the drag and drop of an element using the selenium webdriver with following 3 scenarios

Scenario 1: BANK element is dragged and dropped on the specific cell by DragAndDrop method.

In the following code, we launch the given URL in Firefox browser and then drag the BANK element and drop on the DEBIT SIDE block through dragAndDrop method.

Code Explanation: In the above code we launch the given URL in Firefox browser and then drag the BANK element and drop on the DEBIT SIDE block through dragAndDrop method. Explained briefly below:

First, we capture the 1st element which we need to drag in variable “From.”

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

Second, we capture the 2nd element on which we need to drop the 1st element in variable “To”.

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

Third, we create object of Actions class as we use methods of Actions class.

Actions act=new Actions(driver);

For drag and drop element we use dragAndDrop method of Actions class and passes the parameters as the first element(Sourcelocator) “From” and the second element(Destinationlocator) “To”. Below line will drag the 1st element and drop it on the 2nd element.

act.dragAndDrop(From, To).build().perform();

Execution of the script.

Now you can execute the above script one by one from eclipse as shown in below screenshot.

Here is the output when you run the script

Scenario 2: BANK element is dragged and dropped on the specific cell by DragAndDropBy method.

In this scenario, we launch the given URL in the browser and then drag the BANK element and drop on the DEBIT SIDE block through dragAndDropBy method. To dragAndDropBy, we need to find the pixel of the element.

How to find Pixel?

You will find the pixel above the element as shown in below screenshot.

NOTE: The pixels values change with screen resolution and browser size. This method is hence not reliable and not widely used.

Scenario 3: Few elements are dragged and dropped and then verify the message is displayed or not.

The pixels values change with screen resolution and browser size. This method is hence not reliable and not widely used.

In the following code, we launch the given URL in the browser and then drag the elements like BANK, SALES, 500 and drop on the respective block. Once done we verify the output message.

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; import org.testng.annotations.Test; public class DragAndDrop { WebDriver driver; @Test public void DragnDrop() { System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chromedriver.exe"); driver= new ChromeDriver(); WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a")); WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li")); WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a")); WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li")); WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a")); WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li")); WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a")); WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li")); Actions act=new Actions(driver); act.dragAndDrop(From1, To1).build().perform(); act.dragAndDrop(From2, To2).build().perform(); act.dragAndDrop(From3, To3).build().perform(); act.dragAndDrop(From4, To4).build().perform(); if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed()) { System.out.println("Perfect Displayed !!!"); } else { System.out.println("Perfect not Displayed !!!"); } }

Output analysis

In Output, you can see the element is dragged and dropped on the defined element. You can check the GIF of the output.

Your browser does not support the video tag.

Summary

In the above tutorials, we illustrate the drag and drop functionality of the web application through Action methods in Webdriver:

dragAndDrop(Sourcelocator, Destinationlocator)

dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

To drag and drop the element first we used DragAndDrop method from the Actions class in which we pass the 2 parameters, 1st parameter is the element which we need to drag, and 2nd parameter is the element on which we need to drop the 1st element.

Second, we used the dragAndDropBy method from the Actions class in which we pass the 3 parameters, the 1st parameter is the element which we need to drag, 2nd parameter is the x-axis pixel value of the 2nd element, 3rd parameter is the y-axis pixel value of the 2nd element.

You're reading How To Drag And Drop In Selenium (Example)

Update the detailed information about How To Drag And Drop In Selenium (Example) on the Phuhoabeautyspa.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!