Automated Tests for React.JS Web Apps Using WebdriverIO

UI testing is always challenging. Some parts of an app you can test through automation, while others you need to test manually. We always try to minimize manual testing, but in order to deliver an awesome user experience, automation testing is equally important.

In the following article I will talk about setting up an automation testing environment for React.JS web apps using WebdriverIO and Jasmine.

In my opinion, there are 2 kinds of UI testing. The first one is visual testing. Checking that we have the desired font style, font size, paddings or margins and that the user can easily understand what they need to do, is verified with visual testing. This is pretty hard and time consuming to automate and is best tested visually by the human eye.

The second kind is functional testing. If we want to verify that clicking on a button triggers the right action, or hitting a link takes us to the correct url, these are examples of functional testing. These tests can and should be automated, so you can quickly verify your application is continuously working.

React.JS automation test setup

Next, I will present how to setup an automation test environment for a React.JS web app using WebdriverIO (a collection of Node.JS bindings for Selenium, formerly known as WebdriverJS) and the Jasmine framework.

WebdriverIO comes with its own test runner that runs all commands in a synchronous way, which means we don’t have to use promises to handle async.

Pre-requisites:

• Node.JS
• NPM
• Chrome

Now let’s install the dev dependencies:

$ npm install webdriverio --save-dev

$ npm install jasmine --save-dev

$ npm install wdio-jasmine-framework --save-dev

$ npm install wdio-spec-reporter --save-dev

$ npm install selenium-standalone --save-dev

Next, we run

$node_modules/selenium-standalone/bin/selenium-standalone install

(this command is added as a script in package.json, see the starter kit on github below) in order to install all the required servers and drivers.

The folder structure should be similar to:

WebdriverIO configuration file:

exports.config = {

    /**
     * server configurations
     */
    maxInstances: 1,
    host: '0.0.0.0',
    port: 4444,

    /**
     * specify test files
     */
    specs: [
        './tests/e2e/specs/*.spec.js'
    ],
    exclude: [
        'tests/e2e/specs/multibrowser/**',
        'tests/e2e/specs/mobile/**'
    ],

    /**
     * capabilities
     */
     capabilities: [{
       browserName: 'chrome'
     }],

    /**
     * test configurations
     */
    logLevel: 'silent',
    sync: true,
    coloredLogs: true,
    screenshotPath: './tests/e2e/screenshots',
    baseUrl: 'http://localhost:3000',
    waitforTimeout: 10000,
    framework: 'jasmine',

    reporters: ['spec'],
    reporterOptions: {
    outputDir: './'
    },

    jasmineNodeOpts: {
        defaultTimeoutInterval: 9999999
    },

    /**
     * hooks
     */
    onPrepare: function() {
        console.log('Starting end2end tests');
    },
    onComplete: function() {
        console.log('All done!');
    }

};

WebdriverIO is built to support Page Object Pattern which provides all necessary features we need:

• inheritance between page objects
• lazy loading of elements
• encapsulation of methods and actions

You will notice in the structure example above that there’s a page.js file in the pages folder. That’s the main page object that contains general selectors or methods that all page objects will inherit from.

function Page() {
}

Page.prototype.open = function (path) {
  browser.url('/' + path)
}

module.exports = new Page()

Next we have a page object example along with a couple of functions:

var page = require('./page');</code>

var homePage = Object.create(page, {

counterButton: { get: function () { return browser.element('=Counter'); } },

validateHomePage: {
value: function () {
browser.url('/');
var pageTitle = browser.getTitle();
expect(pageTitle).toBe('React Redux WebdriverIO Starter Kit');
}
},

goToCounterPage: {
value: function () {
this.counterButton.click();
}
}

});

module.exports = homePage;

Finally we have the spec file, where we design our automated test suite:

var homePage = require('../pages/homePage.js');
var counterPage = require('../pages/counterPage.js');

describe('Welcome Page', function() {
    'use strict';

    it('When: User accesses the web app, he should land on the home page', function () {
        homePage.validateHomePage();
    });

    it('Then: User wants to navigate to the counter page', function () {
        homePage.goToCounterPage();
    });

    it('Then: User should have landed successfully on the counter page', function () {
        counterPage.validateCounterPage();
    });

    it('When: User clicks on increment button', function () {
        counterPage.incrementValue();
    });

});

In order to start the tests, we have to run

$node_modules/.bin/wdio tests/wdio.conf.js

The purpose of end 2 end testing is to test a complete production-like scenario. This not only tests the system, it also verifies a complete system flow.

WebdriverIO provides a great library which will allow us to execute browser based testing using selenium. It is integrated well with many frameworks. It comes integrated out of the box with Jasmine, which is an excellent behavior-driven framework that will allow us to write beautiful tests, which are extremely readable and highly maintainable. A React Redux WebdriverIO Starter Kit can be found here.

Some final thoughts…

For those of you who have to test a react.js app and prefer javascript, this may be the way for you. Some of the advantages of using webdriverIO, is that the selectors are really easy to understand, and use. Every WebdriverIO command is chainable and returns a promise, making it incredibly easy to write synchronous code to test the asynchronous browser environment. By chaining the commands, each one waits for the promise from the previous command to resolve before executing, essentially queuing the actions sent to the browser.

Let me know what you think about this setup, and/or if you have any questions, please do not hesitate to post them below. Thank you for taking the time to read my article.