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

WebDriverIO is a versatile mechanization framework that combines the power of Selenium and Appium through a unclouded JavaScript interface. It allows teams to run across browsers and mobile devices using a individual, unified setup.

This article walk you through the process of getting started with WebDriverIO. It explores how to configure the environment, write machine-driven tests, and execute them on both web and mobile platform.

What is WebdriverIO?

WebdriverIO is an open-source written in JavaScript and scat on NodeJS. It is specially useful for test web applications and aboriginal mobile coating for iOS-enabled devices. Its support for both) makes it a highly preferred choice for mechanisation testers.

WebdriverIO Architecture: How does it act?

WebDriverIO is designed with a modular architecture that streamlines the process of penning, running, and scaling. Here are the nucleus components that make up its architecture:

1. WebDriver Protocol

The WebDriver Protocol serves as the communication layer between your and the browser. It is a W3C standard that defines a language-agnostic interface for automating browsers, ensuring compatibility.

WebDriverIO utilizes this protocol to send commands via HTTP to browser driver, such as ChromeDriver. These drivers construe and execute the command within the browser, enabling seamless automation of browser interactions.

2. Test Runner

• Manages the entire test execution process
• Supports multiple testing model like Mocha and Jasmine
• Handles parallel execution, retry logic, and integrating with reporters and service
• Reports test termination

3. Services and Plugins

• Services simplify the environment setup.
• Plugins extend functionality (e.g., capturing screenshots)

4. Configuration File

It is a centralised file to control how tests are run.

• Test framework and file paths
• Browsers and capabilities
• Reporters and service
• Custom hooks and environment settings

5. Assertion Libraries

Assertions help control whether the test outcomes match expected results. While WebdriverIO doesn ’ t include its own asseveration library, it works seamlessly with Chai (commonly used with Mocha) and Expect (for Jasmine).

6. NodeJS and RESTful Architecture

WebdriverIO is construct over, 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 covering ontogenesis. It uses RESTful architecture to direct automation testing.

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

Upon obtain the dictation, the browser performs the user actions, which test the validity of the application functions.

WebdriverIO Architecture

Why use WebdriverIO for Automation Testing?

A common intellect to use WebdriverIO is its power to test native mobile applications for iOS-enabled devices. It has a simple structure, and one can write the test script concisely & # 8211; a matter of great convenience for QAs.

WebdriverIO can be easily mix with third-party test answer providers likeBrowserStack. This makes it easy for the QA to leverage additional functions like enter tests, using real devices and browser on the cloud, test reportage, etc.

WebdriverIO countenance QAs to add new usage dictation in gain to those already available by default. By ring theaddCommandfunction, one can add new tradition require that can create testing easier.

Consider the following example, which expend theaddCommandoffice to print the URL of a web page.

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

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Setting Up WebdriverIO

Before exploring how to compose WebdriverIO test, it is essential understand how to set up WebdriverIO. First of all, the prerequisites name below have to be met.

Prerequisites for WebdriverIO

• Install NodeJS& # 8211; To see if theNodeJS and npmare correctly installed, enter the following bidding:

  $ node -v $ npm -v

• Install WebdriverIOusing npm, by entering the following command:

  npm install webdriverio

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

  npm install -g selenium-standalone

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

  selenium-standalone install

• Run Selenium Standalone Serverand the browser before running the examination playscript by participate the following bid:

  selenium-standalone starting

Setting up the WebdriverIO for the inaugural test

• Create the project workspace by entering the undermentioned dictation:

  $ mkdir WebdriverioTestProject $ cd WebdriverioTestProject

• Initializepackage.jsonby inscribe the following bidding:

  npm init -y

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

  npm install @ wdio/cli

• Create a WebdriverIO config fileby entering the next dictation. This help to configure diverse WebdriverIO software mechanically:

  npx wdio config

Users can configure by choosing from the given options as per their essential. This allows them to prefer where to found the tests, locating 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 booklet where all the examination can be kept by entering the command advert below:

  mkdir -p ./test/specs

• Create the test playscript file where the mechanisation 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 make, write the tryout book employ JavaScript. The following code must be written in thewebdriverioTestScript.jsfile make earlier in the specs leaflet.

Here ’ s the scenario to be automate:

• Launch Google.comon the browser
• Enter the search enquiry “BrowserStack” in the search box
• Check whether the title of the resulting page is “BrowserStack & # 8211; Google Search”

describe ('Google Search Test ', () = & gt; {it ('should hold the right title ', (done) = & gt; {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 examination script is ready, it can be executed by running the next command on the Command Prompt:

node ./test/specs/webdriverioTestScript.js

Upon go the above test script:

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

Best Practices in WebdriverIO Testing with Selenium Grid

To assure efficient and dependable WebDriverIO testing with Selenium Grid, consider implement the following best practices:

Utilize Text and Visual Logs for Easier Debugging

Leverage both text and optic logs to simplify the debugging process. Text logs render a elaborated record of each dictation executed, assist track the actions and their outcomes.

Optic logs, including screenshots taken at each test step, assistance understand the application ’ s conduct and speck issue when the expected results are not achieved.

Record Test Execution to Monitor Failures

Recording test executions can importantly help canvass test failure. By capturing the succession of actions take to a failure, you gain worthful insights for precise debugging.

However, be aware that recording can lengthen execution time. To optimise execution, enable video read just for failed tests, as monitoring loss tests is unnecessary and could slow down the performance of large test suites.

Run Tests on Real Browsers and Devices for Accurate Results

Always run WebDriverIO tests on existent browsers and devices rather than ape or simulator for the most accurate and reliable test results. Testing on real environs ensures the model of true user interaction, leading to more reliable resolution.

BrowserStack provides a cloud-based Selenium Grid with approach to over 3500+ real browsers and devices for and. Sign up, select the desired device-browser-OS combination, and begin testing websites.

Integration with BrowserStack is seamless, but update your * .conf.js constellation files with the BrowserStack Hub URL and enter your credentials to connect to the BrowserStack Selenium Grid.

Talk to an Expert

WebdriverIO vs Selenium: Differences

The following comparing table highlights the key distinctions between WebDriverIO and Selenium.

Conclusion

Test automation is crucial for testers to proceed up with the growing requirement of faster delivery and optimal package quality.Selenium mechanisation testingallows testers to accomplish precisely this, thus leading to the conception of better applications in shorter durations.

Bear in mind that WebDriverIO automation works better when testing site on a. Doing so is the lone way to ensure the consummate accuracy of results. So, e'er opt for existent device testing to comprehensively verify website performance,, and the quality of user experience it offers.

Related Guides