Drag and Drop in selenium:
What is Drag and Drop:
- HTML drag and drop interface enables applications to use drag and drop features in Firefox and other browsers.
- With these characteristics, the user can select draggable elements with the mouse, dragging the elements into a droppable element, releasing the mouse button and leaving those elements.
- One Drag Element can be Drop into Other Element.
Different Methods to Perform Drag and Drop:
- Drag and Drop using Action Class dragAndDrop Method.
- Drag and Drop using clickAndHold, moveToElement and release Method.
- Drag and Drop using dragAndDropBy and offset method.
1. Drag and Drop using Action Class dragAndDrop method:
- dragAndDrop is an inbuilt method in the Actions class.
- We create Two WebElement’s to perform dragAndDrop operation.
- Then using the dragAndDrop inbuilt method we pass Drag and Drop elements and do build(.perform() operation.
1 2 3 4 5 6 7 8 9 10 11 | // Create object of actions class Actions act=new Actions(driver); // Find element xpath which we need to drag WebElement drag=driver.findElement(By.xpath("put x path")); // Find element xpath where we need to drop WebElement drop=driver.findElement(By.xpath("put x path")); // Drag element to destination act.dragAndDrop(drag, drop).build().perform(); |
Example of Drag and Drop using dragAndDrop method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDrop { public static void main(String[] args) { System.setProperty("webdriver.gecko.driver","D:\\geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.stqatools.com"); // Create object of actions class Actions act=new Actions(driver); // Find element xpath which we need to drag WebElement drag=driver.findElement(By.xpath("put x path")); // Find element xpath where we need to drop WebElement drop=driver.findElement(By.xpath("put x path")); // Drag element to destination act.dragAndDrop(drag, drop).build().perform(); } } |
2. Drag and Drop using clickAndHold, moveToElement and release Method.
- Hold the source
- Move the element
- Release the element
The different methods of Action class we will be using here for Drag and Drop in Selenium:
- clickAndHold(WebElement element) – Clicks a web element at the middle(without releasing).
- moveToElement(WebElement element) – Moves the mouse pointer to the middle of the web element without clicking.
- release(WebElement element) – Releases the left click (which is in pressed state).
- build() – Generates a composite action
DragandDrop using clickAndHold, moveToElement and release method:
1 2 3 4 5 6 7 8 9 10 11 | // Create object of actions class Actions act = new Actions(driver); // Click & Hold drag Webelement act.clickAndHold(drag).build().perform(); // Move to drop Webelement act.moveToElement(drop).build().perform(); // Release drag webelement into drop webelement act.release(drop).build().perform(); |
Example of DragandDrop using clickAndHold, moveToElement and release method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDrop { public static void main(String[] args) { System.setProperty("webdriver.gecko.driver","D:\\geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.stqatools.com"); // Store Drag and Drop location into WebElement WebElement drag = driver.findElement(By.id("Drag_id")); WebElement drop = driver.findElement(By.id("Drop_id")); // Create object of actions class Actions act = new Actions(driver); // Click & Hold drag Webelement act.clickAndHold(drag).build().perform(); // Move to drop Webelement act.moveToElement(drop).build().perform(); // Release drag webelement into drop webelement act.release(drop).build().perform(); } } |
3. Drag and Drop using dragAndDropBy and offset method:
- Using dragAndDropBy Method we drop WebElement on particular WebPage offset location.
1 2 3 4 5 | // Store draggable location into webelement WebElement draggable = browser.findElement(By.id("draggable")); // Using DragAndDrop method release draggable webelement into offset. new Actions(driver).dragAndDropBy(draggable, 200, 10).build().perform(); |
Example of Drag and Drop using dragAndDropBy and offset method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDrop { public static void main(String[] args) { System.setProperty("webdriver.gecko.driver","D:\\geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.stqatools.com"); // Store draggable location into webelement WebElement draggable = driver.findElement(By.id("draggable")); // Using DragAndDrop method release draggable webelement into offset. new Actions(driver).dragAndDropBy(draggable, 200, 10).build().perform(); } } |
How to Drag and Drop in Selenium WebDriver and Drag And Drop Using Actions Class In Selenium WebDriver and How to perform Drag and Drop action in Selenium using Action Class
