Selenium
What is Selenium WebDriver? Difference with RC
What is Selenium Webdriver? Selenium Webdriver is an open-source collection of APIs which is used...
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.
The Actions class has two methods that support Drag and Drop. Let's study them-
Actions.dragAndDrop(Sourcelocator, Destinationlocator)
In dragAndDrop method, we pass the two parameters -
Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)
dragAndDropBy method we pass the 3 parameters -
Let's practically show you the drag and drop of an element using the selenium webdriver with following 3 scenarios
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.
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(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element which needs to drag. WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Element on which need to drop. WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li")); //Using Action class for drag and drop. Actions act=new Actions(driver); //Dragged and dropped. act.dragAndDrop(From, To).build().perform(); } }
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
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?
Open the URL in Chrome or FireFox and click on the Blue color arrow.
Next click on any element for which you want to know the pixel.
You will find the pixel above the element as shown in below screenshot.
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(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element(BANK) which need to drag. WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Using Action class for drag and drop. Actions act=new Actions(driver); //Drag and Drop by Pixel. act.dragAndDropBy(From,135, 40).build().perform(); } }
NOTE: 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(); driver.get("http://demo.guru99.com/test/drag_drop.html"); //Element(BANK) which need to drag. WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a")); //Element(DEBIT SIDE) on which need to drop. WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li")); //Element(SALES) which need to drag. WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a")); //Element(CREDIT SIDE) on which need to drop. WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li")); //Element(500) which need to drag. WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a")); //Element(DEBIT SIDE) on which need to drop. WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li")); //Element(500) which need to drag. WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a")); //Element(CREDIT SIDE) on which need to drop. WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li")); //Using Action class for drag and drop. Actions act=new Actions(driver); //BANK drag and drop. act.dragAndDrop(From1, To1).build().perform(); //SALES drag and drop. act.dragAndDrop(From2, To2).build().perform(); //500 drag and drop debit side. act.dragAndDrop(From3, To3).build().perform(); //500 drag and drop credit side. act.dragAndDrop(From4, To4).build().perform(); //Verifying the Perfect! message. 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.
What is Selenium Webdriver? Selenium Webdriver is an open-source collection of APIs which is used...
Firefox profile is the collection of settings, customization, add-ons and other personalization...
What is Cross Browser Testing? Cross Browser Testing is a type of functional test to check that...
In this tutorial, we look at commands that will make your automation script more intelligent and...
What are Locators? Locator is a command that tells Selenium IDE which GUI elements ( say Text Box,...
We will use the Mercury Tours website as our web application under test. It is an online flight...