Drag and Drop Operation using Selenium WebDriver

“Drag and Drop” is mouse operation which means grabbing a WebElement and dropping it at another location. Selenium WebDriver provides Actions class to perform all mouse operations, and the method id dragAndDrop().

Dragging card from New to progress . we use drag and drop operation manual in Visual task board.

Selenium has provided an “Actions” class to handle this kind of scenarios.

How does Drag and Drop Works:

//To get source locator

WebElement sourceLocator = driver.findElement(By.xpath("xpath"));

//To get target locator

WebElement targetLocator = driver.findElement(By.xpath("xpath"));

//create object 'action' of Actions class

Actions action = new Actions(driver);

//use dragAndDrop() method. It accepts two parametes source and target.

action.dragAndDrop(sourceLocator, targetLocator).build().perform();

Principle behind it:

• 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).
• Button Release Action: Finally, it releases the mouse
• Build: build() method is used to generate a composite action containing all actions. But if you observe, we have not invoked it in our above command. The build is executed in the perform method internally
• Perform: perform() method performs the actions we have specified. But before that, it internally invokes build() method first. After the build, the action is performed

Scenario

Feature: Launch Edge browser and perform drag and drop operation

Scenario: Perform Drag and drop by using action

Given User navigates to URL "ttps://jqueryui.com/droppable/"

And User find a two WebElements “Drag me to my target” and “Drop here”

And User grab the first WebElement, move it other and drop ther

package com.automation.eng.AutomationProject;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.edge.EdgeDriver;

import org.openqa.selenium.interactions.Actions;

import org.testng.annotations.Test;

import io.github.bonigarcia.wdm.WebDriverManager;

public class DragAndDrop {

public WebDriver driver;

@Test

public void dragAndDrop() {

//setup the Edgedriver using WebDriverManager

WebDriverManager.edgedriver().setup();

driver = new EdgeDriver();

driver.manage().window().maximize();

// delete cookies

driver.manage().deleteAllCookies();

// take this web site

driver.get("https://jqueryui.com/droppable/");

WebElement webFrame = driver.findElement(By.className("demo-frame"));

driver.switchTo().frame(webFrame);

// find element which we need to drag

WebElement source = driver.findElement(By.id("draggable"));

WebElement target = driver.findElement(By.id("droppable"));

// Create object of actions class

Actions action = new Actions(driver);

String colourBeforeDnD = target.getCssValue("color");

// this will drag and hold element to destination

action.moveToElement(source).clickAndHold().moveToElement(target).release().build().perform();

String colorAfterDnD = target.getCssValue("color");

System.out.println("Color before Drag and Drop:"+ colourBeforeDnD);

System.out.println("Color after Drag and Drop:"+ colorAfterDnD);

}

}

/*

* Color before Drag and Drop:rgb(51, 51, 51)

Color after Drag and Drop:rgb(119, 118, 32)

PASSED: dragAndDrop

===============================================

Default test

Tests run: 1, Failures: 0, Skips: 0

===============================================

===============================================

Default suite

Total tests run: 1, Passes: 1, Failures: 0, Skips: 0

===============================================

*/