Automating Mobile Web Browsers with Appium

Appium has taken the Automation world by storm recently. A majority of the customers I talk to work with it exclusively to test their Android and iOS apps. A common issue they struggle with is knowing how to use automation to test their websites on real devices, instead of relying on the inbuilt debug tools on their desktop browsers to simulate the mobile layout.

Test your apps on real devices and get accurate results. Learn more!

At HeadSpin, we focus on showing customers the real user experience on real devices, so it’s essential we have an automation framework that allows testing mobile websites. Luckily, Appium has robust support for testing on both Safari for iOS and Chrome for Android. Recently, one of our largest telco customers engaged our professional services team to automate several of the most popular websites in their country. It was an interesting challenge, so I’d like to share the process in the hopes that it helps the automation community build robust, scalable automation tests for their mobile websites.

Using Appium Desktop (and why it isn’t much help)

The first thing I do when investigating a novel app without source code or accessibility IDs is to use Appium Desktop – a nice front end for Appium with a built-in inspector.

Luckily, HeadSpin takes away a lot of the hard work with setting up a server and offers its own stripped-down inspector without the server.

First, let’s connect to our device of choice and use Chrome for Android (Safari for iOS also works). Here’s an example of the capabilities used:

Android:

{

 “deviceName”: “SM-G960F”,

 “udid”: “xxxxxxx”,

 “autoAcceptAlerts”: true,

 “automationName”: “UiAutomator2”,

 “browserName”: “Chrome”,

 “platformName”: “Android”,

 “headspin:autoDownloadChromedriver”: true

}

‍

iOS:

{

 “deviceName”: “iPhone X”,

 “udid”: “xxxxxxxxxxxxx”,

 “automationName”: “XCUITest”,

 “platformVersion”: “13.3”,

 “platformName”: “iOS”,

 “browserName”: “Safari”,

 “safariInitialUrl”: “https://wikipedia.org”,

 “autoWebview”: true

}

Testing locally on Chrome on Android requires a Chromedriver. With Headspin we set a capability to download the latest before testing automatically. Testing on Safari requires the web inspector to be switched on the phone.

Once we are in the inspector, we can investigate the native paths and IDs of the website. First let’s navigate to our site using the Go to URL in Web – Navigation Actions:

‍

Looking at the source, notice how most of the Element descriptors are not human readable or informative.

‍

Using Chrome or Safari to help identify elements

Instead of the standard app automation workflow let’s use the inbuilt element inspector in Chrome or Safari to help write our automation script.

Let’s open our page in Chrome and access devtools with F12.

Now, click the Toggle Device Toolbar on the top left of the inspector window and select your preferred resolution.

Now to prepare the code. After specifying the Appium capabilities and initializing the driver, let’s go to the website using driver.get (All code samples are in python, the equivalent bindings for your favorite language can be found in the Appium docs linked.)

driver.get(“https://wikipedia.org”)

Next, let’s use Chrome to inspect the element we would like to interact with.

We can inspect the element and notice there are two ways to find the element with Appium to interact with it.
First is by using the HTML code at the top. We can use the find_element_by_xpath (or xpaths if multiple) capability to select based on the HTML element descriptor. In this case:

element = driver.find_element_by_xpath(“//a[@id=’js-link-box-en’]”)

element.click()

Or we can use the CSS selector at the bottom with the find_elements_by_css_selector class. In most cases several elements will use the same CSS selector so we need to select the correct element in the array:

element = driver.find_elements_by_css_selector(“.central-featured-lang”)

element[0].click()

You can use these two strategies to build the rest of the script. I hope this will help you build robust, scalable Appium scripts to test your mobile webpages! If you need any help, we offer a Headspin University Appium and Selenium course which has everything you need to get started on your automation journey.

FAQs

1. What is data exchange in Appium?

Data exchange in Appium refers to the process of data exchange hosted by complex objects and stored in various components of your web view-based application, such as the window object.

2. What is an Appium Inspector?

Appium inspection is a standard method for uniquely identifying the UI components of a mobile application. It is compatible with real devices, emulators (Android), and simulators(iOS).

3. Is interaction with applications feasible using JavaScript when testing with Appium?

Yes, developers and testers can interact with applications using JavaScript. The server sends the test script to the app wrapped in an anonymous function to be executed when commands are run on Appium.

4. Can testers execute tests in a multithreaded environment when using Appium?

Yes, testers can run tests in a multithreaded environment when using Appium. They only need to consider that only one test should run against the same Appium server.