Late to the Party; End-to-End Testing: Part 1

Exploring end-to-end web development testing; specifically Selenium with Node.js.

While unit and integration testing are powerful testing tools, end-to-end testing is sometimes the only feasible option; e.g., when attempting to test legacy code without refactoring.

A quick research (as of the writing of this article) on end-to-end web development testing leads you emphatically to WebDriver and a number of Selenium components.

note: There are a number other new competitors; one of which several colleagues have specifically pointed out. Will address this in a later article.

Thought to document my learning through this series; hope you find it useful.

WebDriver

WebDriver has evolved into a W3C Recommendation (first drafted in mid-2012 and finalized in mid-2018).

WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behavior of web browsers.

Provided is a set of interfaces to discover and manipulate DOM elements in web documents and to control the behavior of a user agent. It is primarily intended to allow web authors to write tests that automate a user agent from a separate controlling process, but may also be used in such a way as to allow in-browser scripts to control a — possibly separate — browser.

— W3C — WebDriver

Selenium

Selenium is a suite of tools specifically for automating web browsers (using the WebDriver interface) licensed under the Apache 2.0 License (open source).

If you want to
- create robust, browser-based regression automation suites and tests
- scale and distribute scripts across many environments

Then you want to use Selenium WebDriver; a collection of language specific bindings to drive a browser — the way it is meant to be driven.

— Selenium — Selenium

When using Selenium, the first step is to select which language binding to use:

• Java
• C#
• Ruby
• Python
• JavaScript

note: Other language bindings, e.g., PHP, are supported by third-parties.

In this series, we will be using the JavaScript binding.

Selenium Browser Driver

Also, one will need to select which browser to test against and install the specific driver software.

You will need to download additional components to work with each of the major browsers. The drivers for Chrome, Firefox, and Microsoft’s IE and Edge web browsers are all standalone executables that should be placed on your system PATH. Apple’s safaridriver is shipped with Safari 10 for OS X El Capitan and macOS Sierra. You will need to enable Remote Automation in the Develop menu of Safari 10 before testing.

Selenium — selenium-webdriver (npm)

Will hold-off on doing this in favor of an easier solution (Docker) below.

Selenium Server

Instead of testing directly against a local browser using drivers, one can use Selenium Server to remote control one (standalone configuration) or more (grid configuration) browsers.

The server OS, with appropriate browser and browser driver installed, runs a Java application that provides a network accessible WebDriver interface.

Selenium Docker Images

Instead of having the complexity of installing and configuring a browser, browser driver, and Selenium Server, one can get up and running quickly with Selenium Docker images.

Docker is used to run software packages called “containers”. In a typical example use case, one container runs a web server and web application, while a second container runs a database server that is used by the web application.

Containers are isolated from each other and use their own set of tools and libraries; they can communicate through well-defined channels. All containers use the same kernel and are therefore more lightweight than virtual machines. Containers are created from “images” which specify their precise contents. Images are often created by combining and modifying standard images downloaded from repositories.

— Wikipedia — Docker (software)

Assuming that one has Docker already installed, getting up and running with a network WebDriver interface to a Chrome browser is as simple as entering:

docker run -d -p 4444:4444 -v /dev/shm:/dev/shm selenium/standalone-chrome:3.13.0-argon

Selenium JavaScript Binding

The Selenium JavaScript binding is designed to run in the latest Node.js Long Term Support (LTS) release (currently 8.11.3 LTS).

Assuming that one has Node.js installed, getting a “hello world” application against a network WebDriver interface to a Chrome browser, e.g., supplied by a Selenium Docker image, is simple.

In a new folder, initialize a new Node.js project by entering (accepting all defaults):

npm init

Then in the project’s root folder install the Selenium JavaScript binding with:

npm install selenium-webdriver

Create a file in the project’s root folder:

hello.js

and run it with

node hello.js

The test will successful if no errors are caught (outputting an error message), i.e., a successful test will output nothing.

Selenium Service Providers

Before continuing to explore details, e.g., selecting a testing framework, of Selenium testing on Node.js, thought to take a moment to consider how we can scale up our testing, e.g, run tests in continuous integration systems.

Instead of standing up and supporting our own scalable Selenium Server (using the grid configuration), one can use any number of cloud providers (non-exhaustive list and sorted alphabetically):

• BrowserStack
• CrossBrowserTesting
• Experitest
• New Relic Synthetics
• Sauce Labs

note: This list was generated by identifying the top-level (cloud provider) sponsors of Selenium.

The first observation is that its core, these services are a commodity, i.e., they all provide the same Selenium Server API. As such, my preference is to stick with providers that clearly share their pricing (and be consistent with the other providers’ pricing). As of the writing of this article, this would eliminate Experitest and New Relic Synthetics.

In researching the history of the remaining companies, I was ultimately most impressed by Sauce Labs for the following reasons:

• Sauce Labs was founded by Steven Hazel, John Dunham, Al Sargent, and Jason Huggins, the creator of Selenium, in San Francisco in August 2008
• Sauce Labs claims to have customers across a broad spectrum of industries and service providers, including Salesforce.com, Liberty Mutual, Bank of America, Twitter, PayPal, Yahoo!, Etsy, IHG, Intuit and others
• In 2015, the company was named by the San Francisco Business Times as one of the top 100 fastest growing private companies in the Bay Area for a second consecutive year

Next Steps

Having written our “hello world” Selenium application and identified the ultimate destination (scalable testing using Sauce Labs as our service provider), we continue to fill in the gaps in the next article Late to the Party; End-to-End Testing: Part 2.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.