Automated Tests for React.JS Web Apps Using WebdriverIO


February 10, 2017
Automated Tests for ReactJS 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:

Automated Tests for ReactJS  Web Apps Using WebdriverIO

WebdriverIO configuration file:

  • wdio.conf.js

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.

  • page.js

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

  • homePage.js

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

  • testSuite.spec.js

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.


Sabau_Alex square
Alexandru Sabau is 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.

  • Lakshmikanth Thamizharasan

    Hi Sabau, I am new to Jest. Please let me know, how to automate a website using Jest. I could find the business functionalities can be done with Jest. Which means do we need the developer codes to test for using the Jest.
    Your information on this update will be very useful.

    Thanks
    gtlkanth


What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

LET'S GET STARTED

We're Hiring!

Join our awesome team of dedicated engineers.

Loading...

APPLY NOW