Automated UI Tests Using WebdriverIO with MochaBDD

What do you call software without tests? A bug. There are different ways to test software. Unit and integration tests are done within the software development life cycle (SDLC). End-to-end tests (e2e) on the other hand focus on a user's experience. These automated tests simulate real-life scenarios and generate outputs depending on the current state of a fully functional and deployed application. WebdriverIO is a selenium-based test automation framework that caters to both your web and mobile applications. The test suites created using this framework accommodate boilerplates such as mocha, cucumber, jasmine, and appium. Further, WebdriverIO is open-source, modern and easier to grasp than its predecessors. For this mini-project, we are going to use the MochaBDD boilerplate to automate e2e tests on simple web functionalities.

Prerequisites

1. Have an understanding of javascript.

2. Install Ubuntu Linux on your computer. You could have any other OS but the setup commands will be limited to Ubuntu.

3. Update your Chrome to the latest version.

4. Visual Studio IDE.

5. Latest NodeJS version.

Setup

1. First, create a folder that will contain your project.

2. Open this folder in your VS Code IDE.

3. Open your IDE terminal using the ctr + ~ buttons.

4. Run the following command to create a package.json file

    npm init -y
   

5. Install and configure your WebdriverIO. If you want to run with the default configuration choices, run the following command.

    npm init wdio .
   

   This command will pick out the first option in every configuration prompt, unless otherwise.

6. If you want to customize your configuration, skip step 5 and run the following commands.

   -- Installing webdriverIO

    npm i @wdio/cli
   

   -- Configuring wdio

    npx wdio config
   

   The above command will prompt you with multiple questions to which you will respond with the default options except for the following:

   1. Do you want to use a compiler? No! (you can opt for Babel if you want a compiler).

   2. Do you want to add a service to your setup? Chromedriver

You are all set and ready to test. Your project folder should now look like this.

We shall go through each of these folders and files later in this testing series.

Running your tests using Wdio

All your test suites are defined under the './test/specs/**/*.js' file. Each file under the specs folder handles unique test cases. For instance, the login.js file will look at both successful and failed test cases unique to the login functionality. To run your test on a single suit, run the following command

npx wdio run ./wdio.conf.js --spec path/to/specific/file/*.js

Note: Recent updates to webdriverIO V8 will require you to enter the full path of your test file after the --spec option. Alternatively, if you want to collectively run tests on multiple test suites, use the following command.

npx wdio run ./wdio.conf.js

Conclusion

How easy was that? In the next piece of the e2e testing series, I will introduce you to the use of core wdio principles such as selectors, timeouts, debugging, recording tests ...etc. See you on the next one.