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.

1. Example 1: Drag one square to another.

Steps in the selenium webdriver java code:

1. Go to page https://jqueryui.com/droppable/
2. Wait until the iframe which include the action demo javascript to load complete.
3. Find the source draggable web element which is a movable square.
4. Find the target droppable web element which is a fixed square.
5. Drag the source square and drop it to the target.
6. Verify that the action success by checking the text in the target square.
7. You can see the code comments for detailed explanations 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();
    }
    }

2. Example 2: Drag a green square to javascript tree Node.

 

 @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 javascript tree load complete.*/
 WebDriverWait waitObj = new WebDriverWait(this.ffDriver, 10);
 
 /* Go to the javascript tree object. */
 By byIdTree = By.id("treeboxbox_tree");
 
 /* Wait for the javascript 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);
 }

3. Example 3: Drag source tree Node and drop to target Node.

 

@Test
 /* Drag one Node from source javascript 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 javascript 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);
 }