Introduction to WebdriverIO

Webdriver Protocol

Before getting started with WebdriverIO, it’s important to understand how WebDriver Protocol works. Let’s take a look at the official definition –  

WebDriver is a remote-control interface that enables introspection and control of user agents. 

In simple words, Webdriver allows you to control a user agent (such as browser, phone etc.) and allows you to remotely instruct it to perform a set of commands (click, navigate etc.). Each of these commands are performed using REST APIs. You can see some example commands below –

Webdriver Protocol can be used with any programming language as long as it supports the making of HTTP requests. 

Now that you understand how Webdriver Protocol works, let’s take a look at what WebdriverIO  is and how it works.

What is WebdriverIO? 

WebdriverIO is a popular JavaScript test automation framework that runs on Node.js. It allows you to automate any application written with modern web frameworks such as React, Angular, Polymer or Vue.js as well as native mobile applications for Android and iOS.

WebdriverIO has its own implementation of the Webdriver specification that allows you to run tests in multiple browsers. Here’s a quick overview of what happens when you run your WebdriverIO test script:

• • First, your test script will talk to a driver using a HTTP request.

• • Then, the driver will trigger an event in the browser to take the necessary action provided via the HTTP request.

Advantages of using WebdriverIO

Let’s take a look at some of the reasons that make WebdriverIO so popular –

• Reader Friendly Tests: WebdriverIO does a great job at making tests as reader friendly as possible. This means that even if you are not familiar with JavaScript, you’ll still be able to understand what the test is trying to accomplish.
• Easy Test Setup: Using WebdriverIO CLI, you can get your tests setup in under 10 minutes.  (It may take a bit longer if your internet connection is slow ☺)
• Front-End Friendly: Since the tests are written in JavaScript, it is easy for developers to extend themselves from writing code to writing automated tests. 
• Services Integration: WebdriverIO provides plenty of services and community plugins that allow you to easily integrate with third party services such as BrowserStack, SauceLabs, and Jenkins.
• Reporting Integration: WebdriverIO supports many popular reporters that can create useful reports for you such as Allure Reporter, Mochawesome Reporter, and Junit Reporter. 

It’s time to set up and configure our tests!

Prerequisite

The only requirement is that you need to have Node.js installed

• Minimum v12.16.1 is required to use WebdriverIO v6

To verify that you have successfully installed Node.js, run the following command – 

node -v

This should print out the version you installed. 

Setup and Configuration

Let’s create a new project and initialize it with NPM: 

mkdir wdio && cd wdio
npm init -y

Install WebdriverIO CLI

As mentioned above, WebdriverIO CLI lets you create your project really quickly by installing and configuring the necessary packages for you using the following command:

npm i --save-dev @wdio/cli

Installing Packages and Generating the Configuration File

WebdriverIO has a configuration file that stores all test related configurations such as browser details, services, hooks etc.

To generate the configuration file, run the following command:

npx wdio config

This will open up the WDIO Configuration helper. You can pick and choose the packages you want to install and integrate with your tests. 

For this example, I will select the following options: 

This will install all the necessary packages for you and add the required configuration in the wdio.conf.js file.

Test Creation

Alright, it’s finally time to start writing our tests. The first thing you need to do is create a `test` folder and a `specs` folder under the `test` folder as that’s where we have pointed WebdriverIO to look for when searching for test files. You can do this by running the following command:

mkdir -p ./test/specs // mac
mkdir .\test\specs // windows

Then, create a `sample.js` spec file within the specs folder and write the following code for your first test

Let’s try to understand what’s going on with the code above:

• First, we create a Mocha ‘describe’ block for test grouping purposes.
• Then, we create an ‘it’ block and add the description of our test.
• After this, we start writing our actual test steps:
  • Using the browser command, we access the url we want to navigate to.
    Note: We are only using (‘/’) as we have already setup the base url in the
    wdio.conf.js file

• • Then, we add an expect assertion to verify the page title to ensure that our page opened up successfully.

Now that you understand what the above code is doing, let’s run the test using npx wdio command.

There you go, our test passed and we successfully completed our first test! 

Now that you have the base framework setup, I’d suggest you to get familiar with WebdriverIO API, best practices, and start implementing more tests on your own ☺

Conclusion

Overall, WebdriverIO makes it easy to set up and configure your tests, and also provides a clean and readable syntax for writing tests. WebdriverIO also provides detailed documentation on all of its APIs as well as a step-by-step guide for integrating the tests with various services and reporters.

If you’d like to learn more about WebdriverIO, I recommend you check out the official Documentation: https://webdriver.io/

References:

• W3C – https://www.w3.org/TR/webdriver/
• WebdriverIO – https://webdriver.io/docs/gettingstarted.html
• Nuts and bolts of WebdriverIO – https://youtu.be/H5Nw2mh7AmE