Selenium + JavaScript Best Practices

Including unit tests in your web app projects leads to various benefits: Primarily, an effective and measurable way of proving code quality to developers and other project stakeholders. Browser automation takes these concepts even further, and applies the practice to running integration and regression tests live within the presentation layer user interface (UI). From there on, we can codify integration test scripts that do all the work for us – proving that the web app works as expected in the platform in which it will ultimately run.

One of the most known and implemented tools used for web browser automation is Selenium. It is not only intended to be used in automating web applications for testing purposes, but also for automation of web-based administration tasks. In fact, it is a set of different software tools, each with a different approach to supporting test automation. Learning all of its tools will give you many different options for approaching different test automation problems.

JavaScript frameworks

Many software applications are written as web-based applications that run in an Internet browser. This is the main reason that web frameworks are becoming more and more popular among other frameworks. Nowadays, JavaScript is a widely used language for web application development, and even back-end developers prefer JS rather than any other language. It is simple and flexible, but at the same time it also allows building complex web solutions. The advantages of using JavaScript frameworks are as follows:

• Efficiency – Projects that used to take months and hundreds of lines of code, can now be achieved much faster with well-structured pre-built patterns and functions.
• Safety – Top JavaScript frameworks have firm security arrangements and are supported by large communities where members and users also act as testers.
• Cost – Most frameworks are open source and free. Since they help programmers to build custom solutions faster, the ultimate price for web apps will be lower.

Combining Selenium and JavaScript

One of the most popular JavaScript software stacks for building dynamic web sites and web applications is MEAN stack (MEAN stands for Mongo DB, Express, Angular and Node.js). Here, I’ll use Selenium integration with Node.js, since it’s simple, well organized and very suitable to be used for test automation purposes.

Node.js framework and Selenium setup

The code example below creates a simple validation test for the google web page. To start writing Selenium tests with Node.js and java script, we need to have a Node.js framework with a Selenium plugin added to it.
If you already installed Node.js, then open a command line and type the following commands to create a new Node.js Project and init the basic project structure:

mkdir google_test

cd google_test

npm init

NOTE: If you haven’t already installed Node.js, download it from its official website.

Our next step is to install the node browser automation library called “selenium-webdriver“. In the console you opened previously, use Node’s built-in package manager (NPM) and type the following command to get the package:

npm install –save selenium-webdriver

The option “–save” creates a new package that will be saved to the project’s package.json file.

Before we can start to control the browser automatically, we will need Selenium WebDriver for the specific web browser that we need to automate (IE/FireFox/Chrome/Edage). Here, I’ll show an example with gecko driver for Firefox. You can obtain a driver for a desired operating system from their github project:

When you download the driver, unzip it and install on your operating system on the default location. You will also need to update the environment PATH variable:

Now, we only need one more thing: A testing framework that will simplify the process of writing tests. Here, we will use Mocha, a node package that contains helper code for developing and running tests for node-based projects:

npm install –g –save mocha

The option “–g” is used to install Mocha globally, and allows us to run Mocha tests from the console.
And that’s it! Our environment is ready for use.

Writing tests using Selenium

Manual site regression testing can take quite a while, since it requires a tester to run each test one at a time across different browsers. Running tests asynchronously across various browsers will save a lot of time, and Selenium WebDriver provides this functionality. Selenium handles asynchronous testing by using JavaScript promises.

Now, let’s write the first code and create one simple test that checks if Selenium works stand alone, without using Mocha. The test will do the following steps to ensure that we actually reach the google web page:

1. Open google web page.
2. Get its title by using promise.
3. Output it to the console.

NOTE: You can use any editor of your choice, but I recommend using Atom that works well with the Node.js framework. You can even install the atom-ternjs plugin to it, which will add support for Node.js, Angular and other languages.

Create a new JavaScript file in your project, e.g: first_test.js.
Add the following code to it:

Here is a short code explanation:

• In the first two lines we set instance of selenium-webdriver, and built our browser by using the webdriver and its Firefox plugin.
• Then we navigate to the google web page and get its title by implementing JavaScript’s promise
• We output the title to the console and quit our browser.

Let’s execute this test by using the following Node.js command:

node first_test.js

We’ll get the following output:

This means we’re on the right track, and Selenium driver is working.

Writing tests in Selenium and Mocha

As mentioned before, Mocha is one of the Node testing libraries that allows us to create simple and structured tests, and to do it faster with its embedded functions. It can be used for unit and integration testing. As opposed to the test we created above, this time we’ll create a more structured test that will execute the following operations:

1. Check if the title on the google web page has the expected value.
2. Enter a text to the search box and check if the entered text has the expected value.

Start with creating a new JavaScript file in your project, called: “mocha_test.js”.
Add the following code to it:

In this example, we used Mocha’s test structure, with “beforeEach” and “afterEach” methods, that provide the ability to execute several operations before each test starts and after it finishes. We used them to build a browser instance at the beginning and to close it at the end. We also used “assert” to compare obtained values with expected ones.

Notice that each test operation starts with the keyword “it“. Each test action contains the description where we can write what it is going to do, and contains the function “done()” to wait until the current operation is finished. This makes our execution flow.

Inside Mocha’s methods we used Selenium to operate with the web page content (used methods: findElement, getAttribute, sendKeys). This test shows that it is possible to combine Node testing libraries and Selenium methods to quickly make good, well organized and functional tests.

Now, we’ll use Mocha to execute the test with the following command:

mocha mocha_test.js

In the output we should get the information that both of the tests passed:

The test examples demonstrated in this post show just how powerful Selenium WebDriver is, and the fact that it enables easy webpage testing in JavaScript frameworks. Its advanced usage allows building sophisticated web crawlers, automation of filling forms and more similar purposes.