How to simulate touch actions using webdriver in Iphone or ipad

I have been working with webdriver for last 6-7 months now. The project that am working on now includes opening the website in iphone/ipad and testing the features in mobile safari browser. Webdriver and Grid 2.0 supports running ipad/iphone tests in Grid. This essentially means that you can remotely trigger the tests that needs to be run in the device. It looks really cool, when you see the tests being run remotely that too through the WIFI in these devices.

Everything was running smooth for some time, until my development decided to add touch actions to iphone. This meant that they added doubleTap, singleTap actions for the elements in the page. Its while trying to handle these events in Webdriver that I came to know that IPhoneDriver doesn’t support any touchevents. You cannot use the ui.interactions.actions classes too since its not supported in IphoneDriver. After trying the webdriver events out for some days without any success, I moved on to using javascript to trigger these events.

Javascripts were getting successfully executed in the mobile safari. All I need to get was the correct javascript. After some trial and error and help from lukeis in selenium (who maintains iphonedriver) I could figure out some of the touch actions. Given below is an utility class which has this implemented. This will work any locator as its using the position of the element in the page.

Note:- This will work “only” if the touchevents are implemented using  jQuery. Apps that were created using Sencha will not work using this code. For details see comments

public class CustomTouchAction {

//Javascripts to trigger the touch events. This will be appended to the javascript string

private static String DOUBLETAP= “.trigger(‘touchend’).trigger(‘touchend’);”;
private static String SINGLETAP=”.trigger(‘tap’);”;

private static String SWIPERIGHT=”.trigger(‘swiperight’);”;
private static String SWIPELEFT=”.trigger(‘swipeleft’);”;

private WebDriver driver;
public CustomTouchAction(WebDriver driver) {
this.driver = driver;
}

/**
* Return the x coordinate of the element in the screen
* @param elementToLocate
* @return
*/
private int getElementXPosition( String elementToLocate){
return driver.findElement(elementToLocate).getLocation().getX();
}

/**
* Return the y coordinate of the element in the screen
* @param elementToLocate
* @return
*/
private int getElementYPosition( String elementToLocate){
return driver.findElement(By.xpath(elementToLocate).getLocation().getY();
}

/**
* Get the common part of all touch action javascript trigger
* @param elementToTap
* @return
*/
private String addCommonScript(String elementToTap){
return “window.jQuery(document.elementFromPoint(”
+ getElementXPosition(elementToTap) + “,”
+ getElementYPosition(elementToTap) + “))”;
}

/**
* Simulate double tap on the element in the screen
* @param elementToTap
*/
public void doubleTap(String elementToTap){
String javascriptToExecute =addCommonScript(elementToTap) +DOUBLETAP;
executeScript(javascriptToExecute);
}

/**
* Simulate single tap on the element in the screen
* @param elementToTap
*/
public void singleTap(String elementToTap){
String javascriptToExecute = “window.jQuery(document.elementFromPoint(”
+ getElementXPosition(elementToTap) + “,”
+ getElementYPosition(elementToTap) + “))”+SINGLETAP;
executeScript(javascriptToExecute);
}

/**
* Simulate the swipe action. This will swipe from right to left from the position of the element
* @param elementToSwipe
*/
public void swipeLeft(String elementToSwipe){
String javascriptToExecute = “window.jQuery(document.elementFromPoint(”
+ getElementXPosition(elementToSwipe) + “,”
+ getElementYPosition(elementToSwipe) + “))”+SWIPELEFT;
executeScript(javascriptToExecute);
}

/**
* Simulate the swipe action. This will swipe from left to right from the position of the element
* @param elementToSwipe
*/
public void swipeRight(String elementToSwipe){
String javascriptToExecute = “window.jQuery(document.elementFromPoint(”
+ getElementXPosition(elementToSwipe) + “,”
+ getElementYPosition(elementToSwipe) + “))”+SWIPERIGHT;
executeScript(javascriptToExecute);
}

/**
* Execute the javascript code using javascript driver
* @param javascriptToExecute
*/
private void executeScript(String javascriptToExecute){

((JavascriptExecutor)driver).executeScript(javascriptToExecute);
}

}