Home » appium-tutorial » Drag And Drop Action using Appium

Newly Updated Posts

Related Topics

Introduction of related Topics

Drag And Drop Action using Appium

By in appium-tutorial on .

Previous Topic, We are going to learn Drag And Drop Action using Appium in this tutorial using Touch Action.

What is Drag And Drop Action?

Drag And Drop are the two action that are performed simultaneously for moving the element from one place to another specific or defined place.

During the drag and drop event, an element changes its place or in other words its x and y co-ordinates and placed to another place with new x and y co-ordinates.

The movement of the element is done by providing a container which captures an object and changes its DOM structure and DOM gets refresh during run time , results in change in locator element along with its attributes and values.

How to Perform Drag And Drop Action using Appium?

Appium provides a set of commands to perform drag and drop operation with in mobile application. Touch Action Class provides the method to longpress the element , which is to be dragged and moveTo method helps in dropping the element to its destination location on the basis of x and y co-ordinates.

Drag And Drop Action using Appium

Lets consider a scenario to perform drag and drop action in appium.

Scenarion:

  1. Open the “Drag & Drop” in mobile device (if not installed, recommend you install from playstore).
  2. Select the Literature
  3. Answer the question by dragging the first Option and dropping it to Square bracket(???).
  4. close the application.
AndroidElement literature =driver.findElement(MobileBy.AndroidUIAutomator("new UiSelector().text(\"LITERATURE\")"));

literature.click();
					
AndroidElement dragElement =driver.findElement(MobileBy.AndroidUIAutomator("new UiSelector().resourceId(\"dragdrop.stufflex.com.dragdrop:id/chooseA\")"));

AndroidElement dropElement =driver.findElement(MobileBy.AndroidUIAutomator("new UiSelector().resourceId(\"dragdrop.stufflex.com.dragdrop:id/answer\")"));
					
int middleXCoordinate_dragElement =dragElement.getLocation().x + (dragElement.getSize().width/2);

int middleYCoordinate_dragElement =dragElement.getLocation().y + (dragElement.getSize().height/2);
				
int middleXCoordinate_dropElement =dropElement.getLocation().x + (dropElement.getSize().width/2);

int middleYCoordinate_dropElement =dropElement.getLocation().y + (dropElement.getSize().height/2);
				
TouchAction  action =new TouchAction(adriver);
action.longPress(PointOption.point(middleXCoordinate_dragElement, middleYCoordinate_dragElement))
.waitAction(WaitOptions.waitOptions(Duration.ofSeconds(3)))
.moveTo(PointOption.point(middleXCoordinate_dropElement, middleYCoordinate_dropElement))
.release()
.perform();

Code Description:(drag and Drop)

Step 1) Inspect the element Literature using AndroidUIAutomator

AndroidElement literature =driver.findElement(MobileBy.AndroidUIAutomator(“new UiSelector().text(\”LITERATURE\”)”));

Step 2) Click to the element (Literature)

literature.click();

Step 3) Inspect the first Answer element using AndroidUIAutomator, for which the drag event has to be performed.

AndroidElement dragElement =driver.findElement(MobileBy.AndroidUIAutomator(“new UiSelector().resourceId(\”dragdrop.stufflex.com.dragdrop:id/chooseA\”)”));

Step 4) Inspect the Element of Square (???) , where the drop operation has to be performed.

AndroidElement dropElement =driver.findElement(MobileBy.AndroidUIAutomator(“new UiSelector().resourceId(\”dragdrop.stufflex.com.dragdrop:id/answer\”)”));

Step 5) Identify the mid point (x,y) co-ordinated of the draggable element by taking the location of the axis + half the size of the element.

int middleXCoordinate_dragElement =dragElement.getLocation().x + (dragElement.getSize().width/2);

int middleYCoordinate_dragElement =dragElement.getLocation().y + (dragElement.getSize().height/2);

Step 6) Identify the mid point (x,y) co-ordinated of the drop element by taking the location of the axis + half the size of the element.

int middleXCoordinate_dropElement =dropElement.getLocation().x + (dropElement.getSize().width/2);

int middleYCoordinate_dropElement =dropElement.getLocation().y + (dropElement.getSize().height/2);

Step 7) Create an Object of Touch Action, which contains the methods for longPress and moveto event.

TouchAction action =new TouchAction(driver);

Step 8) Now longPress the drag element (answer field) from starting element taking (x,y) co ordinate and wait for 2 seconds and then move to the destination element by (x,y) co ordinate.

action.longPress(PointOption.point(middleXCoordinate_dragElement, middleYCoordinate_dragElement))
.waitAction(WaitOptions.waitOptions(Duration.ofSeconds(2)))
.moveTo(PointOption.point(middleXCoordinate_dropElement, middleYCoordinate_dropElement))
.release()
.perform();

Code In Eclipse look like below screenshot:

Drag And Drop Action using Appium

Facebook-> https://www.facebook.com/code2test/?modal=admin_todo_tour