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.
Table of Contents
- 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.
- 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.
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:
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.
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:
- Open google web page.
- Get its title by using promise.
- 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.
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.
- We output the title to the console and quit our browser.
Let’s execute this test by using the following Node.js command:
We’ll get the following output:
This means we’re on the right track, and Selenium driver is working.
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:
- Check if the title on the google web page has the expected value.
- Enter a text to the search box and check if the entered text has the expected value.
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:
In the output we should get the information that both of the tests passed:
You are welcome to share your own tips and thoughts in the comment section below 😎