Drag And Drop In Selenium

Hello everybody, today we will show you how to implement drag and drop actions in selenium webdriver automation test scripts. To implement this you need to use WebDriver’s Actions class and it’s dragAndDrop method.

Example 1: Drag one square to another.

Steps in the selenium webdriver java code:

  1. Go to page 

You can see the code comments for detail explanation line by line.

 @Test /* Test drag and drop action use selenium webdriver. */ public void testDragAndDrop() throws InterruptedException { /* Go to jquery example page which can trigger drag and drop action. */ this.ffDriver.get("https://jqueryui.com/droppable/"); /* WebDriverWait object will wait 10 seconds before expected condition complete.*/ WebDriverWait waitObj = new WebDriverWait(this.ffDriver, 10); /* Go to the demo iframe that demo drag and drop action. */ By byXPathFrame = By.xpath("//iframe[@class='demo-frame']"); /* Wait for the frame loading complete and switch to it. */ ExpectedCondition expectedCondition = ExpectedConditions.frameToBeAvailableAndSwitchToIt(byXPathFrame); /* Wait for the condition to come true. The maximal wait time is 10 seconds. */ waitObj.until(expectedCondition); /* Find the source web element by id. */ By byIdDrag = By.id("draggable"); WebElement srcObj = this.ffDriver.findElement(byIdDrag); /* Find the destination drop web element by css selector. */ By byCssDrop = By.cssSelector(".ui-droppable"); WebElement destObj = this.ffDriver.findElement(byCssDrop); /* Do the action. */ dragDrop(srcObj,destObj); /* Verify the drag and drop action success. */ String dropStatusText = destObj.getText(); Assert.assertEquals(dropStatusText, "Dropped!");  }
 /* This method implement the drag and drop action use selenium webdriver. */ public void dragDrop(WebElement srcElement, WebElement targetElement) { try { /* First ensure both source web element and target web element are all displayed. */ if (srcElement.isDisplayed() && targetElement.isDisplayed()) { /* Create the actions object which carry out the drag and drop action. */ Actions actionObj = new Actions(this.ffDriver); /* Drag source web element and Drop it to the destination. */ actionObj.dragAndDrop(srcElement, targetElement).build().perform(); } else { System.out.println("Please make sure the web element is displayed for drag and drop. "); } } catch (StaleElementReferenceException ex) { /* This exception means the source or target web element has be changed (delete or updated) in the page DOM tree. */ ex.printStackTrace(); } catch (NoSuchElementException ex) { /* This exception means can not find the source or target web element in the web page. */ ex.printStackTrace(); } catch (Exception ex) { ex.printStackTrace(); } }READ :   How to use Firefox webdriver to launch Firefox browser automatically in java

Example 2: Drag a green square to jаvascript tree Node.

Drag And Drop In Selenium

 @Test /* Drag one of three color square and one text square and drop it  to a tree node use selenium webdriver. */ public void testDragAndDropToTreeNode() throws InterruptedException { /* Go to dhtmlx example page. */ this.ffDriver.get("https://dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/01_drag_in_simple.html"); /* Wait 10 seconds before the jаvascript tree load complete.*/ WebDriverWait waitObj = new WebDriverWait(this.ffDriver, 10); /* Go to the jаvascript tree object. */ By byIdTree = By.id("treeboxbox_tree"); /* Wait for the jаvascript load complete. */ ExpectedCondition expectedCondition = ExpectedConditions.visibilityOfElementLocated(byIdTree); /* Wait for tree load complete. If not complete in 10 seconds then failed. */ waitObj.until(expectedCondition); /* Drag a red square. */ By byIdDrag = By.id("a2"); WebElement fromSquare = this.ffDriver.findElement(byIdDrag); Thread.sleep(3000); /* Find target tree Node by it's text. */ By byTextCNode = By.xpath("//span[text()='Mystery & Thrillers']"); WebElement toCNode = this.ffDriver.findElement(byTextCNode); /* Do the action. */ dragDrop(fromSquare,toCNode); Thread.sleep(10000); }

Example 3: Drag source tree Node and drop to target Node.Drag And Drop In Selenium

@Test /* Drag one Node from source jаvascript tree to another tree use selenium webdriver. */ public void testDragNodeToAnotherTree() throws InterruptedException { /* Go to dhtmlx example page. */ this.ffDriver.get("https://dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/03_pro_drag_complex.html"); /* Locate Source jаvascript tree by id. */ By byIdTree = By.id("treeboxbox_tree"); /* Wait for the load complete. */ ExpectedCondition expectedCondition = ExpectedConditions.visibilityOfElementLocated(byIdTree); /* Wait for tree load complete. If not complete in 10 seconds then failed. */ WebDriverWait waitObj = new WebDriverWait(this.ffDriver, 10);waitObj.until(expectedCondition); Thread.sleep(10000); /* Find source tree node by XPath. */ By byXPathSrc = By.xpath("//div[@id='treeboxbox_tree']//span[text()='Katie Macalister']"); WebElement srcTreeNode = this.ffDriver.findElement(byXPathSrc); Thread.sleep(3000); /* Find target Node by XPath. */ By byXPathDest = By.xpath("//div[@id='treeboxbox_tree2']//span[text()='Books']"); WebElement destTreeNode = this.ffDriver.findElement(byXPathDest); /* Drag source node and drop it to target tree node. */ dragDrop(srcTreeNode,destTreeNode); Thread.sleep(10000); }

Download “TestDragAndDrop-2.zip” TestDragAndDrop-2.zip – Downloaded 142 times – 2 KB

  • 278