How to perform Drag and Drop using Appium

Mobile and computer gestures have always played a paramount role and have been a necessary component for mobile and web users. Gestures like a tap, swipe right and left, press and long press, moving elements from one place to another, scrolling, etc., are used by mobile users frequently while using an app.

One such commonly used activity is drag and drop, which is a combination of these gesture controls. You must have used drag and drop for moving your music or emoji stickers for Instagram stories and posts. One more example includes photo editing apps wherein photos or texts are moved/dragged and dropped to some place to set and place at the perfect place.

For these kinds of scenarios and mobile apps, it’s easy to perform these gesture actions when done manually. As all these apps, like other mobile apps, require thorough testing before/ after, gesture controls are required to be tested to check if they work perfectly for users.

In the era of automated testing, where every test case is automated, it is very much required to have these gesture control test cases to be automated too. At first glance, it might look challenging to automate these scenarios, but once testers get aware of the solution, it’s easy to implement.

Drag and Drop

Drag and Drop using Appium

As most of us are aware of how powerful Appium is for automation testing, it is important to know that the same tool provides us with some excellent advanced features and functions which makes it possible to automate most of the use cases. Drag and drop too can be automated easily by Appium. It provides “TouchAction” object to automate and perform these mobile gestures. TouchAction objects contain a chain of events.

In all the Appium client libraries, touch objects are created and are given a chain of events. The available events are press, release, move to , tap, wait, long press, cancel and perform.

Prerequisites to perform Drag and Drop using Appium

1. Appium desktop client
2. Appium Inspector
3.  JDK
4. Development IDE/Eclipse

Steps to automate Drag and Drop using Appium

 To automate drag and drop using Appium TouchAction, the following steps are executed:

• The element to be dragged is identified and being long pressed.

TouchActions action = new TouchActions(driver); action.longPress(element);

• It is then moved to the desired location by getting the location coordinates of both drag and drop locations.

TouchActions action = new TouchActions(driver); action.down(10, 10); action.moveTo(50, 50);

• Element is released to the location and the action is performed.

TouchAction action = new TouchAction(driver);

action.press(10, 10);

action.moveTo(10, 100);

action.release();

action.perform();

Ensure that you have all the tools installed in your system.In this example, a sample APK is used to demonstrate Drag and Drop automation. You can take your app under test or any sample application to understand and implement the same. Make sure that you have all the Appium and testing dependencies configured on your system.

Java code to execute Drag and Drop action

package testing;
import java.net.URL;
import java.util.List;
import java.util.concurrent.TimeUnit;
import java.util.function.Function;
import java.net.MalformedURLException;
import io.appium.java_client.MobileBy;
import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.android.AndroidElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.testng.annotations.Test;
import io.appium.java_client.TouchAction;
import io.appium.java_client.touch.WaitOptions;
import io.appium.java_client.touch.offset.PointOption;
import java.time.Duration;
import org.openqa.selenium.By;
public class Dragdrop {

@Test
public void DragandDrop() {
try {

DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("deviceName", "Google pixel 4"); //Give your device/emulator name
caps.setCapability("udid", "emulator-5554"); // Go to adb location i.e. C:\Users\singe\AppData\Local\Android\Sdk\platform-tools in command prompt and execute ‘adb devices’ to get udid
caps.setCapability("platformVersion", "8.1.0"); //Give android version of your device. (Check ‘about phone’ section)
caps.setCapability("appPackage", "dragdrop.stufflex.com.dragdrop"); //provide app package name. Apkinfo can be used or execute dumpsys window windows | grep -E ‘mCurrentFocus’ command in adb shell in cmd in C:\Users\singe\AppData\Local\Android\Sdk\platform-tools
caps.setCapability("appActivity", "dragdrop.stufflex.com.dragdrop.MainActivity");
AndroidDriver driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), caps); //Create driver object
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //Implicit wait of 10 seconds
driver.findElement(By.id("dragdrop.stufflex.com.dragdrop:id/btn_football")).click();
AndroidElement a=driver.findElementByXPath("//*[contains(@text,'Barcelona')]");
AndroidElement b=driver.findElement(By.id("dragdrop.stufflex.com.dragdrop:id/answer"));
TouchAction action =new TouchAction(driver);
action.longPress(PointOption.point(a.getLocation().x, a.getLocation().y)).waitAction(WaitOptions.waitOptions(Duration.ofSeconds(1)))
.moveTo(PointOption.point(b.getLocation().x, b.getLocation().y)).release().perform();
Thread.sleep(10000); //wait of 10 seconds
driver.quit(); //closes the driver session
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();

}
}
}

The above code uses a drag and drop quiz app which automates the process of choosing the quiz “category”, drags the correct answer option and drops it to the answer submission space which results in passing off the first question successfully and takes the user to the next quiz question..

Inorder to get accurate results and to not leave a room for any bugs/performance issues later, it is always recommended to perform real device cloud testing on different combination of operating systems, versions, and screen sizes. This ensures your app works flawlessly on every user’s mobile regardless of which mobile device, OS or OS version that your users they use. Browserstack provides the platform to test both web and mobile apps on multiple available options to choose from. Automation tests can be run on app automate by following the steps.

Code after integration with Browserstack

package testing;
import java.net.URL;
import java.util.List;
import java.util.concurrent.TimeUnit;
import java.util.function.Function;
import java.net.MalformedURLException;
import io.appium.java_client.MobileBy;
import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.android.AndroidElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.testng.annotations.Test;
import io.appium.java_client.TouchAction;
import io.appium.java_client.touch.WaitOptions;
import io.appium.java_client.touch.offset.PointOption;
import java.time.Duration;
import org.openqa.selenium.By;

public class Draganddrop {

public static void main(String[] args) throws MalformedURLException, InterruptedException {

DesiredCapabilities caps = new DesiredCapabilities();

// Set your access credentials
caps.setCapability("browserstack.user", “user name”);
caps.setCapability("browserstack.key", "access key");

// Set URL of the application under test
caps.setCapability("app", "bs://a03d62880214a159613f30ab467c3132702d32d8"); //unique app url generation for the app under test
// Specify device and os_version for testing
caps.setCapability("device", "Samsung Galaxy A52");
caps.setCapability("os_version", "11.0");

// Set other BrowserStack capabilities
caps.setCapability("project", "First Java Project");
caps.setCapability("build", "browserstack-build-1");
caps.setCapability("name", "first_test");

AndroidDriver<AndroidElement> driver = new AndroidDriver<AndroidElement>(
new URL("http://hub.browserstack.com/wd/hub"), caps);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

driver.findElement(By.id("dragdrop.stufflex.com.dragdrop:id/btn_football")).click();
AndroidElement a=driver.findElementByXPath("//*[contains(@text,'Barcelona')]");
AndroidElement b=driver.findElement(By.id("dragdrop.stufflex.com.dragdrop:id/answer"));

TouchAction action =new TouchAction(driver);
action.longPress(PointOption.point(a.getLocation().x, a.getLocation().y)).waitAction(WaitOptions.waitOptions(Duration.ofSeconds(1)))
.moveTo(PointOption.point(b.getLocation().x, b.getLocation().y)).release().perform();

// Invoke driver.quit() after the test is done to indicate that the test is completed.
driver.quit();

}
}

Test results can be viewed on App Automate Dashboard once the test execution is completed. By clicking on individual tests will give you a detailed report for each test including steps, text logs, Appium logs, execution video logs, and other details for better debugging of failed tests.

Try BrowserStack App Automate