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 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.
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
(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:
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.
Next we have a page object example along with a couple of functions:
Finally we have the spec file, where we design our automated test suite:
In order to start the tests, we have to run
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…
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.