WebdriverIO Tutorial: Getting started with Test Automation using Selenium and Appium

Automation testing of business applications built on different platforms is essential to deliver high-quality software within increasingly shorter timelines. Selenium testing has always been the first choice for automation testing of web applications. When conducted in tandem with WebdriverIO integration, one can increase the scope of Selenium tests from only web platforms to the native iOS devices as well.

WebdriverIO offers third-party integrations that make testing and debugging a lot more efficient. It’s easy to write script and robust architecture that is based on RESTful services makes it a good choice for automation testing of applications on native iOS devices.

Thus, testers can achieve much greater test coverage with WebdriverIO Selenium Automation Testing.

What is WebdriverIO?

WebdriverIO is an open-source testing automation framework written in JavaScript and running on NodeJS. It is particularly useful for testing web applications and native mobile applications for iOS-enabled devices. Its support for both Behavior Driven Development (BDD) and Test Driven Development (TDD) makes it a highly preferred choice for automation testers.

WebdriverIO Architecture: How does it work?

WebdriverIO is built over NodeJS, which is an implementation of the JSON Wire Protocol. Packaged into npm, it conducts communication using NodeJS, which is open-source and widely used for application development. It uses RESTful architecture to conduct automation testing.

The user writes the test script in JavaScript using the WebdriverIO library, where the Service request is sent via NodeJS as an HTTP command. It uses JSON Wire protocol, and the services module forwards the request to the browser.

Upon receiving the command, the browser performs the user actions, which tests the validity of the application functions.

WebdriverIO Architecture

Why use WebdriverIO for Automation Testing?

A common reason to use WebdriverIO is its ability to test native mobile applications for iOS-enabled devices. It has a simple structure, and one can write the test scripts concisely – a matter of great convenience for QAs.

WebdriverIO can be easily integrated with third-party testing solution providers like BrowserStack. This makes it easy for the QA to leverage additional functions like recording tests, using real devices and browsers on the cloud, test reporting, etc.

WebdriverIO allows QAs to add new custom commands in addition to those already available by default. By calling the addCommand function, one can add new custom commands that can make testing easier.

Consider the following example, which uses the addCommand function to print the URL of a web page.

browser.addCommand('getUrlAndTitle', function(customVar) {
// `this` here means the `browser` scope for which the new command is added
return {
url: this.getUrl(),
customVar: customVar
}
})

Setting Up WebdriverIO

Before exploring how to write WebdriverIO tests, let’s understand how to set up WebdriverIO. First of all, the prerequisites mentioned below have to be met.

Prerequisites for WebdriverIO

• Install NodeJS – To check if the NodeJS and npm are correctly installed, enter the following commands:

  $ node -v
  $ npm -v

• Install WebdriverIO using npm, by entering the following command:

  npm install webdriverio

• Install Selenium Server Utility using npm, by entering the following command:

  npm install -g selenium-standalone

• Update Selenium Standalone Server and Browser Drivers to the latest versions, by entering the following command:

  selenium-standalone install

• Run Selenium Standalone Server and the browser before running the test script by entering the following command:

  selenium-standalone start

Setting up the WebdriverIO for the first test

• Create the project workspace by entering the following commands:

  $ mkdir WebdriverioTestProject
  $ cd WebdriverioTestProject

• Initialize package.json by entering the following command:

  npm init -y

• Installing WebdriverIO CLI (Command Line Interface) by entering the following command:

  npm install @wdio/cli

• Create a WebdriverIO config file by entering the following command. This helps to configure various WebdriverIO packages automatically:

  npx wdio config

Users can configure by choosing from the given options as per their requirements. This allows them to choose where to launch the tests, location of the automation back-end, the framework, location of test specs, reporter, and whether to run the WebdriverIO commands synchronously or asynchronously.

• Create the test specs folder where all the tests can be kept by entering the command mentioned below:

  mkdir -p ./test/specs

• Create the test script file where the automation test script is written:

  touch ./test/specs/webdriverioTestScript.js

How to write a test using WebdriverIO

Once WebdriverIO is set up, and the test script file is created, write the test script using JavaScript. The following code must be written in the webdriverioTestScript.js file created earlier in the specs folder.

Here’s the scenario to be automated:

• Launch Google.com on the browser
• Enter the search query “BrowserStack” in the search box
• Check whether the title of the resulting page is “BrowserStack – Google Search”

describe('Google Search Test', () => {

it('should have the right title', (done) => {
await browser.url('https://google.com/')
search_box_element = $('[name=\'q\']')
search_box_element.setValue("BrowserStack\n")

expect(browser).toHaveTitle("BrowserStack - Google Search");

//title of the launched webpage is printed in console as output

const pagetitle = browser.getTitle()
console.log(‘Title of the webpage is -’ + pagetitle)
})

})

Running the Test Script

Once the test script is ready, it can be executed by running the following command on the Command Prompt:

node ./test/specs/webdriverioTestScript.js

Upon running the above test script:

• Google.com will be launched (https://google.com/)
• BrowserStack is put in the search field and entered
• Title of the webpage opened as search result is fetched and given as output in the console.

Run your first Selenium Test for Free

Best Practices in WebdriverIO Testing with Selenium Grid

• Use Text and Visual Logs to make debugging easier by keeping track of the action performed with each of the commands. Visual logs create screenshots of each test step, which helps understand application behavior and troubleshoot when the expected outcome is not achieved.
• The user can also record test execution to monitor what fails and understand why it failed. This enables precise debugging. Keep in mind that this might also lengthen execution time. The key here is to use the video recording feature only when the test fails. Tests that pass don’t need to be strictly monitored since an increase in run time could slow down operations if a large number of tests have to be executed.
• As always, it is important to run the WebdriverIO Selenium tests on real browsers and devices. BrowserStack offers a Cloud Selenium Grid of 3000+ real browsers and devices for both live and automated testing. Simply sign up, choose the required device-browser-OS combination, and start testing websites for free. Integration with BrowserStack is effortless. Simply update the *.conf.js config files with the BrowserStack Hub URL, and enter the credentials required to connect with the BrowserStack Selenium Grid.

WebdriverIO vs Selenium: Differences

Conclusion

Test automation is crucial for testers to keep up with the growing demands of faster delivery and optimal software quality. Selenium automation testing allows testers to achieve precisely this, thus leading to the creation of better applications in shorter durations.

Bear in mind that WebDriverIO automation works best when testing websites on a real device cloud. Doing so is the only way to ensure the complete accuracy of results. So, always opt for real device testing to comprehensively verify website performance, cross browser compatibility, and the quality of user experience it offers.