We use cookies to ensure that we give you the best experience on our website. By continuing to browse or closing this banner, you acknowledge that you have read and agree to our Privacy Policy and Terms of Service.

Coding Jag - Get The Best News Around Test, DevOps & Automation To Your Inbox, Weekly!

Subscribe Now >

WebDriverIO Tutorial

Do you know WebdriverIO is often called a next-gen browser and mobile test automation framework? The testing community widely uses the WebDriverIO framework to perform automation testing on web applications and native mobile applications. Wondering why? Because the tests performed on WebdriverIO are simple and concise. Also, it lets you control browsers with just a few lines of code. All these reasons have made testers adopt WebDriverIO to fulfill their browser testing needs.

What is WebDriverIO?

WebdriverIO is a browser and automation test framework based on Node.js. Adding helper functions in WebDriverIO is really simple in WebDriverIO. Also, it can run both on the WebDriver protocol and Chrome Devtools protocol, making it efficient for both Selenium Webdriver based cross browser testing or Chromium based automation. To top it off, since WebDriverIO is open source, you get a bunch of plugins for your automation needs.

Running Your First Automation Script

Do you know WebDriverIO setup is very easy to follow compared to selenium testing configuration? There are many features that you can configure manually, which is very beneficial for automation testing. In this chapter, we'll cover the steps you need to follow for executing your first Test Automation Script using WebDriverIO.

Prerequisites For Setting Up WebDriverIO

  • You need to install NodeJS on your machine before setting up WebDriverIO.
  • Additionally, you’ll need to install VSCode IDE.

Once you are ready with the above mentioned required tools, you can go ahead with the WebDriverIO setup.

Learn More!!

Ready to run your first automation script? Check out our WebDriverIO Tutorial.

Selenium Automation With WebDriverIO

WebdriverIO is a Javascript based test automation framework. It is an open-source project developed for the automation testing community. WebdriverIO is extendible, compatible, feature-rich, and easy to install. It is considered a Next-gen test automation framework that supports both desktop browsers and mobile apps, which makes WebDriverIO a favorable option for Selenium automation testing. It supports BDD and TDD test frameworks. The latest version of WebdriverIO is 6.X. In this chapter; we will show you how to start writing your first Selenium script.

WebdriverIO Architecture

The first and foremost topic that you would learn in this chapter will be WebdriverIO architecture. This is what happens when you run a WebDriverIO test script.

NodeJS:NodeJS is an open-source project which helps to run the Javascript runtime environment.

WebdriverIO:WebdriverIO is built on top of NodeJS, which communicates with NodeJS.

JavaScript:The script is written by the user with the help of the WebdriverIO library.

This flow gets executed when the user runs the WebdriverIO test script:

JavaScript written by the user sends a request by WebdriverIO via nodeJS to the Services, which is in the form of an HTTP command using JSON Wire Protocol. Now, services forward the request to browsers to perform user actions.

Ready to run your first Selenium testing script on a local WebDriver & an online Selenium Grid?

Browser Commands For Selenium Testing

WebDriverIO browser commands are used to perform certain actions on the browser directly. There are a few examples: Opening the browser, Finding element, Navigating forward, back, Refreshing the page also Close the browser.

In Selenium, a driver object is created to interact with the browser. However, in WebDriverIO, you can set up a WebDriverIO test runner to directly use a globally initialized ‘driver’ or ‘browser’ object. In this chapter, we will cover the ‘browser’ object and how to use them. We will also focus on the major challenges you might face while working on your Selenium Automation Scripts in WebDriverIO. And we will further give a solution to all these issues with respective WebdriverIO commands for Selenium testing in detail, along with examples.

Learn More!!

Learn how to perform various actions within a browser through WebdriverIO browser commands for Selenium test automation.

Handling Alerts & Overlay In Selenium

It's tough to find a website these days without alerts and pop-ups! The alert boxes warn you whenever you perform a wrong action or enter details to access a website. These alert boxes stop you from performing any other browser functions till the alert is resolved. That's why it becomes crucial that you handle them in your Selenium test automation scripts.

In this chapter on alert handling in Selenium, we'll show you how to handle alerts & pop-ups and overlay modal in WebDriverIO. We will also cover the different types of alerts you will face during automation and the key points you need to follow for alert handling in Selenium using WebDriverIO.

We know alerts and popups can be super annoying, as it stops you from performing any further browser actions, but you can't avoid them. With that in mind, it's time to learn how to handle alerts in Selenium with WebDriverIO.

Learn More!!

To learn more check out our blog on Handling Alerts & Overlay In Selenium.

How To Use Selenium Locators?

In any automation testing framework, finding elements is the most fundamental activity. We have to choose web elements very carefully so that automation script execution can handle static and dynamic elements for stable test results. WebDriverIO has many advanced Selenium locators/ selector strategies compared to other automation testing frameworks. Traditionally, each locator has a specific By method which identifies the locators during runtime. However, WebdriverIO has simplified these By methods, and now we do not have to specify them explicitly. WebdriverIO has the intelligence to identify which locator has been passed. In this chapter, you will learn how WebDriverIO is transforming the way of Selenium locator strategy and how easy it is to remember and write it.

Note: If you refer to the official documentation of the WebdriverIO framework, you will notice that they have referred to Locators as Selectors. You need not get confused if you are familiar with some other test automation framework in Selenium. For example, if you have worked with Selenium Locators in Java, then those locators in WebdriverIO are addressed as Selectors.

For ease of understanding, we will refer to them as Selenium locators as it is a more standardized and familiar term around automation testing with Selenium.

What are Selenium Locators In WebdriverIO?

Selenium locators are utilized to find elements on a web page through a Selenium WebDriver when a test automation script is executed. The Selector is a command in Selenium. Selenium library reads this command from the script, converts it into an HTTP request, and interacts with Web browsers; lastly, it performs actions based on the command.

Learn More!!

Ready to learn more? Check out our Tutorial on How WebdriverIO Uses Selenium Locators in a Unique Way.

Handling Dropdown In Selenium

While performing automated browser testing, there'll be plenty of times when you'd have to handle the dropdown menu. Often used in forms, dropdown works great when conserving space and preventing users from choosing the wrong option in a form. We'd rarely come across a form without a dropdown to select a field from multiple options. Thereby, it becomes vital that while testing any website or access form, we know how to handle dropdown with WebDriverIO as well.

In order to perform operations on the dropdown, the 'Select' class can be used in Selenium WebdriverIO. In this chapter, we'll explore how to use 'Select' to handle dropdown with WebDriverIO.

What Are The Different Types Of Dropdown In WebDriverIO?

There are majorly two kinds of dropdowns you would often find on a website.

  • Normal dropdown
  • Custom dropdown

Do you know it’s pretty straight forward to handle dropdown in WebDriverIO?

Learn More!!

To learn more you can check our blog on Handling Dropdown In Selenium.

Automated Monkey Testing with Selenium & WebDriverIO

Are you wondering why to use monkey testing with WebDriverIO? Well, it is a time-honored way to test your applications' limits by entering random, even unexpected inputs hoping that one of those inputs is going to break something and bring out some non-obvious flaw. WebdriverIO, on the other hand, is one of the most used JavaScript frameworks for web automation testing that gets nearly 420,000 downloads every week at NPM, has around 5300 Stars on it's GitHub repo and has 170 contributors to its name. What these two things have in common, you ask? Simply put, you can leverage the awesomeness of WebdriverIO along with the selenium framework to automate monkey testing of your website or web applications.

In this chapter, we will help you become familiar with monkey testing using Selenium automation testing with WebdriverIO.

Ready to perform monkey testing with WebdriverIO & Selenium?

Learn More!!

Check out our blog on Automated Monkey Testing with Selenium & WebDriverIO.

Join 400,000+ developers & testers who rely on LambdaTest for web testing