Cross browser automation testing using WebdriverIO

Cross browser testing with Web DriverIO


WebdriverIO is a javascript based test automation framework built on top of NodeJS. It is an open source project developed for automation testing community. Webdriver IO is extendible, compatible, feature-rich and easy to install and use.

This is regarded highly in the automation testing community already and is touted to be Next gen test automation framework which supports both desktop browsers and mobile apps, which is why it has an edge over many frameworks. It has support for both BDD & TDD test frameworks.

What is the difference between Webdriver and Webdriver IO?

Webdriver: It is a web automation framework which allows us to execute test across various browsers. It can execute multiple tests over multiple browsers on multiple OS

WebdriveIO: It is a nodejs test framework implementation for webdriver.

Getting Started with WebdriverIO

In this blog post, we will now try to cover on how you can start automating a simple browser test using WebdriverIOYou will need to install Nodejs. (Install atleast v 12.16.1 or higher)

Before setting up your project you would need to initialize a new NPM project. This will help you to use CLI to install any necessary dependencies to your project.

              mkdir firstTest 
              cd firstTest
              npm init -y

Now you can install the webdriverIO CLI in your project for integration testing, you can install it using the following command

             npm i --save-dev @wdio/cli

Now that, we have installed CLI and test runner in the project using the npm package, next step is to generate a configuration file, which would contain settings of the environment of the test execution and other WebdriverIO settings. To do that, you need to run the following command

             npx wdio config -y

The configurator will install all the required packages for the project and creates a ‘wdio.conf.js’ file, which has all the configurations of the project.

Now that environment is created and test execution environment settings are configured, all the necessary packages installed, we would next create a basic test. For this I will use specs folder in the project directory.

            mkdir test/specs

I will now create a new file in specs folder, save it as helloworld.js, the code snippet would look something like this.

Now you have helloworld test, where you browse website and assert for title.

Final step would be to run the test, to do that we run the following command in the project:

            npx wdio wdio.conf.js

Now the test should have passed and you can get started writing integration tests using WebdriverIO.