WebDriverIo (Selenium JavaScript) Automation Testing – Devstringx

Back to Blog
Feature image for WebdriveIo blog

WebDriverIo (Selenium JavaScript) Automation Testing – Devstringx

Intro to JavaScript, Selenium, and WebDriverIo

  • JavaScript is a text-based programming language used on both client and server-side, that allows you to create interactive elements on your web page.
  • Selenium is an open-source automated testing framework that is used to validate web applications across different platforms. It allows you to write selenium test scripts in various programming languages like Java, Ruby, Python, and JavaScript among others.
  • WebDriverIo is an open-source testing tool written in JavaScript and running on NodeJs, that allows the automation of modern web and mobile applications.

Prerequisites for WebDriverIo

  • First, Install NodeJs and set the path of NodeJS in the System variables.

System variables

  • To check NodeJs and npm are correctly installed, enter the following commands on cmd:
  • node -v
  • npm -v
  • Choose the code Editor where you can write your test scripts (I will choose Visual Studio).

Setting Up the WebDriverIo Project

  • Create one empty folder on your local system where you want to set up your webdriverio project.
  • Open cmd (Command Prompt) and go to your project root directory and enter the command and press Enter:
    • npm init wdio
  • This single command downloads the WebDriverIo CLI tools and runs a configuration wizard that helps to configure your project.
  • This wizard will show a set of questions that guide you throughout the setup:

Set of question helper

  • If you want to pick a default setup, simply press Enter or
  • Frameworks currently supported by webdriverio: Mocha, Jasmine, and Cucumber, so we are using Mocha with Chrome.

Creating webdriver project

How to Make Locators in Webdriverio?

WebDriverIo offers a unique way of Selenium testing. You don’t have to mention the locator’s strategy as it will automatically understand which types of locator strategies be used.

  • $(): Single dollar sign used to find a single web element.
  • $$(): Double dollar sign used to find multiple web elements.
How to Write Test Scripts Using Webdriverio?

Once WebDriverIO is set up, now it’s time to write the test scripts using JavaScript.

describe('Demo Test Suite',async()=>   

it('Verify the Page Title',async()=>     
    await browser.url("https://www.devstringx.com/")
    await browser.maximizeWindow()
    const contactBTn = await $("//span[text()='Contact Us']")
    await contactBTn.click()

    //verify the page title 
    await expect(browser).toHaveTitleContaining("Contact Us to Developed")

    //print the title on console
    const title =await browser.getTitle()
  • The above test script is executed by running the following command on the terminal of Visual Studio:
    • npx wdio run wdio.conf.js
  • That’s it, you are ready to create your own test scripts using webdriverio.

Related Post

Share this post

Back to Blog