Home » Posts tagged 'drag and drop in selenium not working'

Tag Archives: drag and drop in selenium not working

Newly Updated Posts

How to perform Drag and Drop Action in Selenium

Previous Topic, In the tutorial we will discuss the How to perform Drag and Drop Action in Selenium . The method that are used under Drag and Drop Action Class in Selenium Webdriver.

How to perform Drag and Drop Action in Selenium?

Drag and Drop Action is basically moving any element from one place and another. Or in other words taking the control of an element from one location and dropping it to another location (releasing the control).

Performing Drag and Drop in Selenium

In selenium webdriver using Action Class, we can perform Drag and Drop operation. The method exposed to drag element and drop to any defined location are as below:

  • dragAndDrop(source, target)
  • dragAndDropBy(source, xOffset, yOffset)

Lets discuss both the methods in Actions class in details

1) dragAndDrop(source, target): This method is called in selenium webdriver once we created the instance variable of Action class, and calling the instance variable followed by (.) . We can call the method. So lets code.

So to under this consider a scenario.

package SeleniumArchitecture;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.Point;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class FiestTestScriptChrome {
public Boolean Flag =false;
public static void main(String[] args) throws InterruptedException  {
	
//System property of the Chrome driver 
			  System.setProperty("webdriver.chrome.driver","C:\\Users\\XXXXX\\Desktop\\Eclipse_Installer\\GeckoDriver\\chromedriver.exe");
			  
 // Create oject of chrome driver 
 WebDriver driver =  new ChromeDriver();
 Thread.sleep(3000);
driver.get("https://www.seleniumeasy.com/test/drag-and-drop-demo.html");
			 
 driver.manage().window().maximize();
 driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
  try {
WebElement fromLocation =driver.findElement(By.xpath("//div[@id='todrag']//span[1]"));
WebElement toLocation =driver.findElement(By.id("mydropzone"));
							
Actions mouseActn=new Actions(driver);
// Thread.sleep(3000);						mouseActn.dragAndDrop(fromLocation, toLocation).build().perform();
Thread.sleep(3000);
} catch (Exception e) {
e.printStackTrace();
				
}
 driver.quit();
}
}

So lets discuss code in details

In the above code after opening the website and maximize the browser, we have created the xpath for element “Draggable 1” by xpath function as WebElement fromLocation =driver.findElement(By.xpath(“//div[@id=’todrag’]//span[1]”));

we have created the xpath for element “Drop here” by id attribute as WebElement toLocation =driver.findElement(By.id(“mydropzone”));

After that we have instanciated the Actions class and passing the driver as parameter as Actions mouseActn=new Actions(driver);

After creating the object of Actions class, we used the instance variable (mouseActn) and click to (.) and called the method (dragAndDrop) along with build().perform().

The reason for calling the build() method and perform method id as below:

  • Build(): This method is called to generate all the actions on a single action.It helps to build the composite method action and perform the action.
  • perform(): This method is used to perform all the actions defined but we initially provide build method get in a single action.

Drag and drop in selenium through co-ordinates

2) dragAndDropBy(source, xOffset, yOffset):Till now we have leaned how to drag and drop in selenium using drapAndDrop() method by passing Webelement , but using this method we drag and drop at the mid of the element at a defined position and trigger the event, but in some of the web page we have to drag and drop the mouse action using the x offset and y offset, these x and y offsets are in pixels.

So in that case we have the to provide the location x offset and y offset as a parameter in dragAndDropBy(source, xOffset, yOffset) method. We have to perform the action the same way as we did earlier, just need to pass extra parameters to the method as below:

Consider xoffset is 40 and y offset is 10, so the code will as

Actions mouseActn=new Actions(driver);
mouseActn.dragAndDropBy(source, 40, 10)

So in the Above tutorial we have covered the Drag and Drop action using selenium and Along with Action Class.