Web Testing using Selenium Webdriver Part 4: Adding JavaScript, Node.JS, and Mocha

JavaScript isn’t scary | Photo by Irvan Smith on Unsplash

Welcome back to my series about Web Testing using Selenium Webdriver. After going through some basic and then slightly more complex examples in previous parts, it’s now time to see how Selenium can be used in combination with the JavaScript language, thanks to the Node.JS engine and the Mocha framework.

I’ll go through the initial setup of the environment, as it is quite different than the one we had when we were using Java and Maven. Then, I’ll showcase a test that can be written quite simply using plain old JavaScript, and then a bit more complex, but infinitely more powerful, with the Mocha framework.

Setting up Selenium with JavaScript and Node.JS

First up, in case you don’t have a dev environment geared towards the web, you need to install some essentials tools:

• Node.JS — an engine that allows you to run JavaScript applications without a browser. It comes bundled with npm aka the node package manager (think of it as a sort of Maven, if you’re coming from Java). Npm allows us to install other packages, including Selenium itself.
• An IDE — my recommendation is the excellent Visual Studio Code.

Afterwards, create a new folder to house your files. Now, it’s time to interact with Node by initializing a project: do this by opening a new command line/terminal window in that folder and typing npm init

Then, Node will guide you through the creation of the package.json file, which is similar to the pom.xml from Maven. It holds information like your project name, version, description and more. If you are unsure what to write for every prompt, just hit Enter to continue.

Once you have initiated the project, it’s time to install Selenium and the Mocha framework. Similar to how Maven had repositories from which you could download libraries to use in your Java projects, Node.JS uses the npm to achieve such a thing, albeit with a single repository. You can view every possible package online and get more insight into using them.

To get Selenium, simply open a command line/terminal in your project folder and type npm install selenium-webdriver

This command tells npm to install the package named selenium-webdriver, which can be viewed online here. From that page, you can also get download links to the actual drivers that Selenium uses to command different browsers.

I recommend downloading those that you are interested in (for example, Chrome and Firefox). Save them in a separate folder in separate directories and then add those folders to the system PATH. Once this is done, Selenium will be able to start the browser you tell it to using those executables.

Another package that we need to install is Mocha. Think of it as an analog to TestNG from the Java world. It enables the use of different functionalities that are already present in the selenium-webdriver package. Do this by typing in a command line/terminal npm install mocha

Writing a simple test

Once you have installed all of the things above, it’s time to actually write a test.

Start your IDE, in my case Visual Studio Code, and go to File > Open Folder. Then choose your project folder. Bear in mind that Node.JS will have already created some files and folders during the initialization. Create a new one called simpleTest.js

In this test, we will go through these steps:

• Start the browser using Webdriver
• Access a page, in this case my portfolio
• Find a link, in this case my first project in the portfolio
• Click on it
• Verify that the title of the new page is the one we are expecting
• Close the browser

To run the test, save the file and click the play button in the top-right section of Visual Studio Code or press Ctrl + Alt + N. The output console should appear and, with any luck, run the test. Alternatively, you can open up a command line/terminal in your folder and enter the command: node simpleTest.js

As you can see, the test is quite similar to one written in Java, with the only big differences being related to the instantiation of the driver. You need to initiate a few constants to require the selenium-webdriver package, thereby getting access to their actual functionality and functions.

Adding Mocha to the mix

Of course, as we saw in previous articles, we can supercharge our Selenium tests using tools like TestNG. For the JavaScript version, the same thing applies, only we are now using the Mocha framework.

To use it, much like Selenium, we need to install it using npm, as mentioned above. Unlike TestNG, Mocha has a much deeper integration into Selenium, as much of its functionality is already present in the selenium-webdriver package, in the testing folder.

Mocha enables us to define before and after functions, as well as organize tests with names and descriptions.

The test steps for this new file, mochaTest.js, are:

• Define the variables that require selenium-webdriver
• Define a test variable that requires the testing part of selenium-webdriver and will be manipulated using Mocha
• Define an assert variable that uses the built-in assert package from Node.JS. Alternatively, you can also use packages like Chai, which is also supported nicely by Mocha.
• Declare the driver variable.
• Create a test group with a description and then its main function.
• Create a before generator function that creates the new driver object with the browser of our choice.
• Create the actual test, with a name and a function.
• Access the portfolio page, find the link to the first project using XPath, and click on it.
• This is where things get a bit tricky due to the reliance of Selenium on JavaScript promises. In Java, you would just use the driver.getTitle() method in an assertion with the expected title, knowing that a string with the browser’s current page title would be returned immediately. In JS, however, getTitle() returns a promise. As such, you need to run the function and then use the then keyword to run another function with the actual assertion. The assertion will run only after the promise has completed. Until it isn’t ready, getTitle() would include a object that cannot be used in an assertion.
• Run the assertion mentioned above to check that the title of the new page is equal to the expected value.
• Close the browser.

While a regular test could be run simply with Node.JS, tests that rely on Mocha must be ran with their own command: mocha -t 5000 mochaTest.js

The -t 5000 parameters set a timeout that is slightly longer than the default 2000 ms and helps prevent errors due to sluggish browsers or loading times.

Async and Await with Selenium JS

After reading this great article about using async and await in Selenium for JavaScript, I wanted to add a tweaked example that relies on these pretty powerful features.

In short, as you can see in the previous section where my code relied on the JavaScript promises, it can get a bit hard to understand, especially for someone coming from a Selenium Java background, like myself.

Fortunately, the asynchronous nature of JavaScript can be tamed using some of the newer features provided by the async and await keywords. Functions can be defined as async and inside them you can put await before declarations or invocations, effectively telling JS to wait until that specific promise is completed before going forward.

The steps remained the same but you will find these new keywords scattered throughout the code.

Conclusion

As you can see, while there are some particularities that must be learned due to JavaScript and the Node.JS environments, web testing using Selenium Webdriver is still mostly the same. Expect to hear a bit more about this combination in future articles.