Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
February 10, 2017

Automated Tests for React.JS Web Apps Using WebdriverIO

Quality Assurance

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:

Automated Tests for ReactJS Web Apps Using WebdriverIO

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.

Posted in Quality Assurance
Share this

Alex Sabau

Alexandru Sabau was a QA Engineer at Modus Create. He is passionate and motivated in regards to his work, always looking for new challenges and ways to improve himself, and his knowledge. He goes by the saying that “no amount of testing can prove a software right, a single test can prove a software wrong”. During his free time he enjoys going to the gym, watching good movies, and spending time with friends and family.

Related Posts

  • React Landing
    Ext JS to React: Migration to Open Source

    Worried about Migrating from Ext JS? Modus has the Answers Idera’s acquisition of Sencha has…

  • Ext JS to React: FAQ
    Ext JS to React: FAQ

    This is part of the Ext JS to React blog series. React is Facebook's breakout…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top