Getting started with webdriver.io

Introduction:

webdriver.io is open source test framework for node.js

It is used to automate web and native mobile applications.

It sends requests to a Selenium server via the WebDriver Protocol and handles its response. WebdriverIO is a custom implementation for selenium’s W3C webdriver API. It is written in Javascript and packaged into ‘npm’ and runs on Node.js.

In simple language it uses selenium API calls underneath to automate application scenarios.

Installation:

To work with webdriver.io you need the following installed on your machine.

1. Install Node.js : https://nodejs.org/en : simply download and install the version supported by your device’s OS. I am using a mac for this tutorial.

Node.js is required because webdriver.io runs on node or its a node.js program.

use “node -v” command on terminal to check if the installation was successful.

as you can see the it states the version correctly.

2. Install NPM (node package manager) is installed with the node installation as above. NPM is required so that the webdriver.io package can be installed.

to check the installation simply type “npm -v” on the terminal.

3. Install Java

https://www.java.com/en/download/

to check the installation simply type “java -version” on terminal.

4. Download and an install editor to write code: you can use any javascript editor for your choice. I am using intellij here.

So we are ready now with the pre-requisites and ready to create our first webdriver.io project.

5. Initialise project:

create a directory on your computer using following comand

“mkdir webdriverio-project”

navigate to this new directory and type the following command “npm init” . NPM init creates a file package.json

you will be prompted on specifiying package name, version, description etc. You can either type all these or simply hit return key.

Notice package.json file is created under the webdriverio-project.

6. Install webdriverio package

make sure you are at the root of your project directory, now run the following command

npm install webdriverio --save-dev

to install webdriverio package. To verify it is installed you can have a look at you package.json file under devDependencies you should find entry for webdriverio and the version. Also you would notice node_modules directory created under the root of your project folder, this is where all the dependencies are downloaded.

7. Create a wdio config file.

install WebdriverIO command line interface

npm i - save-dev @wdio/cli

run the following command to create wdio config

./node_modules/.bin/wdio config

8. Create your first webdriver.io test

In this example I will be navigating to airbnb.com.au and verifying the home page is loaded by checking it has the expected title.

Create a directory called “test” under the root of your project and create a directory “specs” under the “test” directory.

create a file test.spec.js under test/specs

describe('AirBnb homepage', () => {
    it('should display the correct homepage title', () => {
        browser.url('https://www.airbnb.com.au/');
        const title = browser.getTitle();
        assert.equal(title, 'Holiday Rentals, Homes, Experiences & Places - Airbnb');
    });
});

explaining the code above

i) browser.url will navigate to the specified url which is https://www.airbnb.com.au/ in our case

ii) title = broswer.getTitle will retrieve the title of the current page as a string and store in the title variable.

iii) assert.equal(title, ‘Holiday Rentals, Homes, Experiences & Places — Airbnb’)

the above line is asserting if the title retrieved from the browser.getTitle is equal to expected value of title “Holiday Rentals, Homes, Experiences & Places — Airbnb”

9. Now before running the test lets install chai which is actually required npm package to perform assertions.

run the following commands to install chai

npm install chai --save-dev
npm install chai-webdriverio --save-dev

also add the following code sinppet in wdio.conf.js

beforeTest: () => {
      const chai = require('chai');
      const chaiWebdriver = require('chai-webdriverio').default;
      chai.use(chaiWebdriver(browser));
      global.assert = chai.assert;
    },

by adding the above snippet, before each test will run the chai libraries will be included for all the specs and it won’t be required to add it to the individual spec files.

10. Now run the first test on webdriver.io

before running the test note the following config settings wdio.config.js

specs: [
    './test/specs/**/*.js'
],

thats where we have stored our test file and is by default the location of tests

capabilities: [{
    browserName: 'chrome',
}],

by default browser is chrome, you can choose to use other browsers such as safari, firefox etc

framework: 'mocha',

the test framework we are using is mocha. The other frameworks you could use with webdriver framework are jasmine or cucumber.

now let run out first test by running following command.

./node_modules/.bin/wdio wdio.conf.js

You would notice browser opening up on your computer and navigating to airbnb.com.au

you would also notice this on the terminal window.

this shows test.spec.js was run and the test verified that aurbnb.com.au title is correct as expected!

There you go you now have your first test running!

What is next?

Will be playing more with wbdriver.io in coming weeks and will upload this to git soon.

My linkedin : https://www.linkedin.com/in/jag-singh-434a843/

email: singh.jagajit@gmail.com