Multi-Platform User Interface Testing with Selenium and Sauce Labs

Selenium tests allow a series of interactions to run over a user interface on a web browser. The tests can check for the presence of text, click buttons, and input data into forms- mimicking how a user would interact with a website. This post discusses how to run Selenium tests across multiple platforms and browsers for testing a website.

Sauce Labs Platform Suite

Using the Sauce Labs service, tests can be run across a suite of PC, Mac, iOS, and Android platforms. Without Sauce’s service one would need to run Selenium tests on various machines that support the browsers and versions desired for the tests. Sauce supports a webdriver that launches a range of browser, platform, and version instances, allowing for a multi-platform test suite to run over various browser instances.

Selenium for Node.js

The npm module selenium-webdriver allows Selenium to be defined as the test runner within a Node.js application. The webdriver will build the desired instance and launch it within Sauce’s Automated Tests Platform. The common Javascript testing framework mocha and along with assertion library chai are convenient to use with the Selenium driver.

Testing for React

The Selenium tests in this post were written in ES6 and were developed for the end-to-end testing of a React application. With this setup, React developers can easily write a new user interaction test after creating a component then verify that component performs across various platforms and browsers.

import chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
chai.use(chaiAsPromised);
const expect = chai.expect;

import webdriver from 'selenium-webdriver';
import test from 'selenium-webdriver/testing';

Browser Capabilities

Capabilities are defined then passed to the selenium webdriver, specifying the platform, browser, and version to launch. For testing on Sauce Labs, the instance of the specified browser and platform will be launched within Sauce Labs testing suite. To configure the capabilities desired and to see the range of platforms, browsers, and versions that Sauce Labs supports, check out Sauce’s Platform Configurator.

let capabilities = {
  "Safari: El Capitan": {
    'browserName': 'safari',
    'platform': 'OS X 10.11',
    'version': '10.0',
  },
  "Safari: Mavericks": {
    'browserName': 'safari',
    'platform': 'OS X 10.9',
    'version': '7.0',
  },
  "Chrome: Windows 10": {
    'browserName': 'chrome',
    'platform': 'Windows 10',
    'version': '54.0',
  },
  "IE: Windows 10": {
    'browserName': 'internet explorer',
    'platform': 'Windows 10',
    'version': '11.103',
  },
  "Safari: iPhone5": {
    'browserName': 'safari',
    'platform': 'iOS',
    'version': '8.1',
    'deviceName': 'iPhone 5 Simulator',
    'deviceOrientation': 'portrait',
    'appiumVersion': '1.5.3',
  },
  "Android(Nexus)": {
    'browserName': 'Browser',
    'platformName': 'Android',
    'platformVersion': '4.4',
    'deviceName': 'Google Nexus 7C Emulator',
    'deviceOrientation': 'portrait',
    'appiumVersion': '1.5.3',
  },
}

Build the Webdriver and Launch the Browser

The Automated Testing platform on Sauce Labs allows the selenium webdriver to build any platform or browser supported by Sauce Labs. In mocha’s before all hook, tell the webdriver to build the browser instance using a server that connects it to your Sauce Labs account. Sauce’s Automated Testing platform will launch the browser, handling the platform requirements. Once the webdriver has launched the project on an instance of a browser within Sauce Labs, the tests can be run on Sauce’s platform!

Find Elements

The tests that selenium will run are based on finding webpage elements within the browser’s view. In the test below, the elements needed for the user interaction of logging in are defined first. The majority of these elements are identified by their classnames, since the project it runs against complies its CSS into names that are unique. Selenium webdriver’s findElement can also find elements based on other identifying properties, such as an id or tag.

Test UI Features

Using these elements, Selenium opens a login modal, inputs its username and password, and clicks the submit button. The test then conditionally passes based on whether the logged in state for a user is discovered. Specifically, the test checks that the page shown after submit has the expected username displayed in the “handle” div.

Multi-Platform UI Testing

By writing a user interface test in Selenium, one gains the ability to run that test on any browser and platform using the selenium webdriver within the Sauce Labs platform. Sauce’s Automated Tests will show tests in the passed/failed state on the dashboard. Each run has information collected about it so one can watch a recording of the run or checkout screenshots collected with each command Sauce received.