Automation Testing Selenium Web Driver and NodeJS with Mocha Framework

Selenium Web Driver and Mocha Framework - NodeJS WebApplication Automation Testing

I recently had a task to write test automation framework using selenium. The most obvious idea that came was to use Java with selenium, but knowing the web app i was to test was primarily in JavaScript, it was strange to write tests in Java.
So i decided to use Selenium bindings for JavaScript. The only problem was the support available. Every small thing related to selenium was available in Java but it was a pain finding similar implementations for NodeJS.

In this post, I am going to take you through the process of getting setup and running a simple JavaScript based test using Selenium, NodeJS and Mocha.
In subsequent posts, we will extend these tests and configure use of network calls inspector such as browsermob-proxy, running tests on multiple browsers etc.


Installing Node.js
Ok so first step is to get Node.js installed. We will use nvm (Node Version Manager) so that we can manage and switch versions easily.
Firstly you need brew, if you use windows visit here

brew update
brew install nvm
mkdir ~/.nvm
nano ~/.bash_profile

In your .bash_profile file (you may be using an other file, according to your shell), add the following :

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

Back to your shell, activate nvm and check it (if you have other shells opened and you want to keep them, do the same) :

source ~/.bash_profile
echo $NVM_DIR

To list the node versions available run:
nvm list-remote
To install your specific node version run:
nvm install v7.10.0

To switch to a different node version run:
nvm use v6.11.1

To have a node activated by default, run:
nvm alias default v7.10.0

Ok so now you have node installed, run node on terminal to get the node prompt. If you get node prompt all good else you messed something during above steps. Use .exit to quit

Installing and Setting Up Selenium
Ok now lets create a basic selenium tests. I know everyone uses IRCTC in India so lets see how we can automate logging on IRCTC :)
Create a directory and cd into it
mkdir selenium-test-1
cd  selenium-test-1

1. Install selenium-webdriver and chromedriver
npm install selenium-webdriver
npm install chromedriver
Note: you can use -g switch to install it globally, --save switch to save it in your package.json
After installation, these should be present in the node_modules directory.

2. Run command node to start the node prompt. Now on the node prompt, we will run the commands to setup selenium and run automated tests.
First we need to require selenium-webdriver and chromedriver using below commands.
var webdriver = require('selenium-webdriver');
require('chromedriver');

selenium-webdriver has exported a Builder variable which we will use the build the driver as below
var driver = new webdriver.Builder().forBrowser('chrome').build();
This should open the chrome instance, if all goes well

Now we will use the driver to run tests. get method will open the website in the chrome instance.
driver.get('https://www.irctc.co.in/');
selenium-webdriver has exported a By variable using which we can query for DOM elements by name, id or class.

driver.findElement(webdriver.By.name('j_username')).sendKeys('username');
driver.findElement(webdriver.By.name('j_password')).sendKeys('password');
driver.findElement(webdriver.By.name('nlpAnswer')).sendKeys('3TSRX7');
driver.findElement(webdriver.By.name('submit')).click();
driver.quit();

If credentials are correct, you should get logged into irctc.

You can add this code to a test.js file and execute it by running:
node test.js

Adding Mocha Test Framework to your code
Mocha is a test framework commonly used to write unit tests for JavaScript code, but we can also use it as a driver to driver our selenium tests when using Selenium with Node.

First thing first - Installing mocha
npm install mocha --save

1. Writing our first test - create a new file called mocha_test.js with following contents

var assert = require('assert'),
webdriver = require('selenium-webdriver');
 
describe('Google Search', function() {
  let driver;
  before(async() => {
    driver = new webdriver.Builder().
    forBrowser('chrome').
    build();
  });

  after(async() => {
    await driver.quit();
  });

  it('should work', async () => {
    await driver.get('http://www.google.com');
    var searchBox = await driver.findElement(webdriver.By.name('q'));
    await searchBox.sendKeys('simple programmer');
    await searchBox.getAttribute('value').then(function(value) {
      assert.equal(value, 'simple programmer');
    });
  });
});

You can execute the test by typing:
mocha mocha_test.js

Now to understand the various blocks used in this test visit here

2. Running tests on firefox
You need gecko driver to run tests in firefox. Lets install it
npm install geckodriver --save

Creating driver to use firefox is more or less similar
var driver = new webdriver.Builder().forBrowser('chrome').build();

A point of advice - usually the default timeout of mocha tests are 2000ms, which means one it block cannot take more than 2000 ms. Mozilla startup is a bit slow as compared to chrome so i had to increase the timeout otherwise the tests used to fail with timeout error
run using:
mocha -t 4000 mocha_test.js

3. Running tests on safari
If you are using the latest version of MacOS - then safari comes pre-shipped with its driver so no need to install a separate driver. It is present in /usr/bin/safaridriver
The only problem I faced at the time of writing this posts is the safaridriver was for Safari v11 but Mac still had Safari v10.3 and my tests were failing.

I struggled on the internet to find that there is a safari-technology-preview on which we can run the tests but no resource of how to pass this fucking switch with capabilities. Below is how you can do that now since i know:

global.driver = new webdriver.Builder()
        .withCapabilities({
             'safari.options': {
                 'technologyPreview': true
             }
        })
        .forBrowser('safari')
        .build();

You must download the Safari Technology Preview first before using it this way. If you do now want to use the Safari Technology Preview, you will have to download the beta version of Safari v11 in order to successfully run the tests on safari.

Adding Chai assertion library
Again first thing is installation
npm install chai --save

var chai = require('chai');
var expect = require('chai').expect;

Now you can use expect using these examples here