A Guide to Mobile App Test Automation with Appium


#1

What is Appium?

This is the part one of a Getting started with Appium and Ranorex Webtestit series. If you want to skip this part of setting up Appium visit the second - Automate Mobile Web Applications with Ranorex Webtestit part.
Appium is an open-source test automation framework for mobile applications that allows you to test all the three types of mobile applications (native, hybrid and mobile web applications). It also allows you to run automated tests on real devices and emulators.
Appium is an HTTP server that waits for connections from a client, which then instructs Appium what kind of session to start and what kind of automation behaviors to execute once a session is started. This means that you have to use Appium with a client library of some kind. Luckily, Appium is based on the same protocol as Selenium, the WebDriver Protocol.

You can do a lot of things with Appium just by using one of the standard Selenium commands. So basically, using Appium, we can write simple WebDriver tests and Appium “Translates Selenium Webdriver commands into UIAutomation (iOS) or UIAutomator (Android)” with the set of desired capabilities in the selenium code.

As we already know, Selenium WebDriver receives a command from the code like ( element.click() ) and sends it in the form of JSON via an HTTP request to the Appium server. Appium server knows the automation context like the iOS and Android and sends this command to the Instruments command server which will wait for the Instruments command client to pick it up and execute it in the iOS instrument’s environment. Appium server logs everything related to the command in its console.

Clearly, we can spot the similarity between Selenium and Appium. Appium inherited the following Selenium methods :

  • clear()
  • click()
  • getSize()
  • getText()
  • getAttribute()
  • getLocation()
  • getTagName()
  • isDisplayed()
  • isEnabled()
  • isSelected()
  • sendKeys()

Besides those, the Appium MobileElement methods include the calls for more advanced gestures and direct UI interaction: getCenter(), pinch(), swipe(), tap(), zoom(). One of the great things about these methods is that they don’t actually have to interact with a specific element, but instead can be used towards the whole device screen. For example, it usually makes more sense to target a swipe gesture relative to the device screen dimensions. For more information about Appium methods, hop over to this post

Installing Appium

To install Appium you can simply download the desktop GUI application and install it. Select the appropriate setup file for your Operating System, and download. The installation is straight forward and upon installation, you should have the purple Appium icon on your desktop.
Appium can be installed using the command line with the npm install appium -g command.
The prerequisite for this kind of installation is to have NodeJS and npm installed on your machine.

Appium server can be started simply by opening the Appium GUI application and clicking od the “Start Server” button, or by typing in “Appium” in your terminal / Command line.
The default port when starting the server is 4723. We can also start the Appium server on the different port number using the GUI interface or by entering the following in the Command line:
appium --port: Port number

Of course, If you want to run a test on let’s say iPhone 11 simulator and Safari browser, you need to have Xcode installed, and your simulator ready. The same applies to Android, you would have to have the Android Studio installed, and start-up an emulated Android device using Android Virtual Device Manager.
Please follow these steps to install and configure Xcode or Android Studio.

Setting up a real iPhone device with Appium

To test your application on a real iPhone device we need some additional steps. For automating safari and testing web applications with real iPhone devices, we need to set up the iOS WebKit Debug Proxy.
Like Chrome, Safari is based on the WebKit rendering engine and comes with WebInspector pre-installed. For accessing web views on real iOS device Appium uses ios_webkit_debug_proxy. The ios_webkit_debug_proxy allowing developers to send commands to MobileSafari and UIWebViews on real and simulated iOS devices.

Installation
On a macOS, it’s easiest to install with homebrew:
brew install ios-webkit-debug-proxy

On Windows, it’s easiest to install with scoop:
scoop bucket add extras
scoop install ios-webkit-debug-proxy

The os_webkit_debug_proxy should be running and listening on port 27753. So after installing you can start the proxy with the following command in terminal:
ios_webkit_debug_proxy -c (Connected device UDID):27753 –d

To find out the UDID of your device check out this post

Appium inspector

Appium inspector enables a visual representation of our application’s elements along with the ability to get basic information and perform basic interactions with them. To start the Appium inspector, we must set the Desired Capabilities first which are used to inform Appium Server that what kind of platform and application you want to automate. Desired Capabilities are just a set of keys and values that get sent to the Appium server during session initialization, which tells Appium what kind of thing we want to automate. The minimum set of required capabilities for any Appium driver should include:

  • platformName: the name of the platform to automate

  • platformVersion: the version of the platform to automate

  • deviceName: the kind of device to automate

  • app: the path to the app you want to automate (but use the browserName capability instead in the case of automating a web browser)

Note that under the “app” key, you need to provide the path to the archived application under test.

After the inspector is successfully started, you should be able to see and interact with the application’s elements. After an element has been selected, on the right side in the Selected Element panel, available selectors are displayed.
inspectorGIf
The cool thing about the Appium inspector is that we can directly generate the code for the actions that we need to perform on the element, so we can use the generated selectors and code snippets in our scripts.

Inspecting Mobile Safari on iOS

If you’re running an iOS simulator with Safari open, and have navigated to the web page you want to automate, inspecting an element is as easy as opening up the desktop version of Safari, and going to the “Develop” menu in the menu bar:

If you don’t see the develop menu, go to your desktop Safari’s preferences, then the “Advanced” tab, and make sure “Show Develop menu in menu bar” is checked.
From that menu, you should see a new entry in the list of devices, reflecting the open simulator. Navigating into that menu and clicking on the appropriate website will pop up an inspector window for you:

You can now do everything you would normally do in Safari’s developer tools, including exploring the HTML hierarchy. Inspect the elements and create the selectors needed to simulate the desired behavior.
If you’re on a real device, you’ll need to open up the Advanced settings menu under the Safari preferences and make sure that “Web Inspector” is turned on. Otherwise, you won’t see your device in the Develop menu.
The good news is that if you’re running a hybrid app, this same strategy should work without any additional setup–you’ll simply see your webview as one of the inspectable pages in the Develop menu!

Inspecting Mobile Chrome

Again, the first thing you’ll do is load up your page in the Chrome browser on your emulator or device. Then, open up the desktop version of Chrome, and navigate to chrome://inspect#devices. You should see a window that looks like this:

Click on the Inspect button and chrome developer tools will automatically open.

There is always the option of using only the Desktop browser’s dev tools to make your selectors. This can be easily done with the help of Safari’s responsive design mode and Chrome’s device mode.
Using Chrome’s device toolbar, you can easily create selectors with the help of our Ranorex Selocity extension, which makes the task of creating selectors tremendously easier and faster.