Local User Interface Testing with Selenium

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 components of a website. This post discusses how to run selenium tests locally on one’s machine for front-end web testing on the local browser.

Selenium for JS

The npm module selenium-webdriver allows selenium to be defined as the test runner within a Node application.The common JS testing framework mocha and along with chai assertions 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 or updating an existing component.

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';

Local Browser Launch

A selenium run local to one’s machine will see the driver launching a new instance of the specified browser on the machine. Npm includes modules such as chromedriver and geckodriver that enable that launch. Only browsers compatible with the local operating system can be run. An Internet Explorer browser instance cannot be run on Mac, for example.

Browser Capabilities

Capabilities are defined then passed to the selenium webdriver, specifying the platform, browser, and versioning desired for the browser that the webdriver will launch. For local testing, this instance of the specified browser will be launched on the user’s machine.

let capabilities = {
  "Chrome: El Capitan": {
    'browserName': 'chrome',
    'platform': 'OS X 10.11',
    'version': '54.0',
  },
  "Firefox: El Capitan": {
    'browserName': 'firefox',
    'platform': 'OS X 10.11',
    'version': '50.0',
  },
};

Build the Webdriver and Launch the Browser

In mocha’s before all hook, tell the webdriver to build the browser instance. This example tests against a localhost instance already running on port 3000, which is awesome because selenium can test against development as it occurs.

test.before((done)=> {
  driver = new webdriver.Builder()
  .withCapabilities(capability)
  .build();
      
  driver.get('http://127.0.0.1:3000')
  .then(()=>done());
});
test.after((done)=>{
  driver.quit()
  .then(()=>done());
});

Once the webdriver has launched the project on an instance of a browser, the tests can be run!

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 an Interface Feature

Using these elements, the selenium bot 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.