The Basics of Mobile Web Testing blog sparked some serious interest and many of you have been curious about how to build a very basic script for the mobile web test using Selenium/Appium. I’ll walk you through here with a brief example of how to build a simple test for your website, using real devices and real browsers. The script below follows the video example so let’s start with that one.
Download FREE Guide to Learn How to Succeed in Mobile Web Testing.
I’m using Python here so if you don’t have Python installed and configured, check this out first.
The first thing to do is to do the imports and write a basic function for log output.
import os
import sys
import time
from time import sleep
from selenium import webdriver
##
## More help on writing tests:
## => http://selenium-python.readthedocs.org/latest/navigating.html
##
def log(msg):
print (time.strftime("%H:%M:%S") + ": " + msg)
As a first real step, define the URL for device access. To access Bitbar Testing’s devices (both Android and iOS) use the following URL:
appium_URL = 'http://appium.testdroid.com/wd/hub';
Then, define your local screenshot path where all taken screenshots will be stored:
screenshot_path = '/Users/vhelppi/Documents/Appium-Samples/Screenshots/Chrome';
Let’s take a look at Desired Capabilities. These describe your login credentials, used target (e.g. which web browser do you want to use for the session), project name and test run (by definition what you see under your Bitbar Testing projects), what device(s) will be used for the session, platform and browser. Make sure you follow the instructions with setting proper desired capabilities – things can quickly go wrong here. Also, please make sure you use correct device names. These can be fetched from our Device listing and name defined here must map identically to the one in the cloud:
desired_caps = {}
desired_caps['testdroid_username'] = ‘ville-veikko.helppi@bitbar.com’
desired_caps['testdroid_password'] = 'xxxxxxxx'
desired_caps['testdroid_target'] = 'chrome'
desired_caps['testdroid_project'] = 'Appium Chrome'
desired_caps['testdroid_testrun'] = 'TestRun 1'
desired_caps['testdroid_device'] = 'Asus Google Nexus 7 (2013) ME571KL'
desired_caps['platformName'] = 'android'
desired_caps['deviceName'] = 'AndroidDevice'
desired_caps['browserName'] = 'chrome'
Now, let’s initiate the Selenium driver by calling Remote() from Selenium library. As a parameter, the Appium URL (pointing to Bitbar Testing) and Desired Capabilities are given. And naturally, it’s always a good idea to output some status information to logs/screen.
log ("WebDriver request initiated. Waiting for response, this may take a while.")
driver = webdriver.Remote(appium_URL, desired_caps)
It is also a good idea to take screenshots whenever appropriate. More is surely better, but try to keep the number of screenshots manageable. Before we start the session with any browser or URL we’ll take a screenshot of web browser (plain view, nothing has shown yet in the browser):
log ("Taking screenshot of home page: '0_chromeLaunched.png'")
driver.save_screenshot(screenshot_path + "/0_chromeLaunched.png")
Now, specify your website here. I use our Bitbar Testing page for this test and take a screenshot of it:
log ("Loading page")
driver.get("https://bitbar.com/testing")
log ("Taking screenshot of home page: '1_home.png'")
driver.save_screenshot(screenshot_path + "/1_home.png")
The next thing for the script is to find an element – “Products” button on the page. It’s defined as “Menu” and button number “1” (“0” is the “Why Bitbar?”). The syntax given to find_element_by_xpath function call looks like this:
log ("Finding 'Products'")
elem = driver.find_element_by_xpath('//*[@id="menu"]/ul/li[1]/a')
log ("Clicking 'Products'")
elem.click()
Remember that there are a great set of different find_element function calls available in Selenium. For example, you can search elements by id, name, XPath, and many others.
After clicking the “Products” menu item on top of the screen the script takes a screenshot and locates “Learn More” button from the page. As you see, there are several “Learn More” buttons on this page, so searching by name wouldn’t help here. For sake of example, I’ll use XPath again. If you look at the page source code (www.bitbar.com/products -> inspect element) you’ll find this:
Now, based on the implementation, the script locates the right button with “Learn more” text and clicks it:
log ("Taking screenshot of 'Products' page: '2_products.png'")
driver.save_screenshot(screenshot_path + "/2_products.png")
log ("Finding 'Learn More'")
elem = driver.find_element_by_xpath('//*[@id="products"]/div[1]/div/div[1]/div[3]/a')
log ("Clicking 'Learn More'")
elem.click()
All right. Now we’ve inspected some HTML elements, clicked those and some screenshots are taken. In the next few lines, we’ll find “topMenu” and identify “Supported Frameworks” button in that. The element inspection of the page looks like this:
And again, for sake of using XPath, the code for locating the right link looks like this:
log ("Taking screenshot of 'Learn More' page: '3_learnmore.png'")
driver.save_screenshot(screenshot_path + "/3_learnmore.png")
log ("Finding 'Supported Frameworks'")
elem = driver.find_element_by_xpath('//*[@id="topMenu"]/div[1]/div/a[2]')
log ("Clicking 'Supported Frameworks'")
elem.click()
Now we’ve landed to the page where supported test automation frameworks by different Bitbar products are shown.
log ("Taking screenshot of 'Supported Framworks' page: '4_supportedframeworks.png'")
driver.save_screenshot(screenshot_path + "/4_supportedframeworks.png")
log ("quitting")
driver.quit()
sys.exit()
If you want to try out this, you can download this Python script here.
Happy Web Testing!