FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Webdriver IO Tutorial For Beginners

Written by 
Mher Sargsyan
,
Mid-Level Software Engineer
Webdriver IO Tutorial For Beginners
blog post background
Recent Posts
7 Things Nobody Told You About Technical Writing
PyScript: Best Practices
A Day in The Life of Moacir Braga, Software Engineer at FullStack Labs

Table of contents

WebdriverIO is written entirely in JavaScript and installation is done through NPM commands. I was always thinking that web automation meant figuring out how to get some complex Java app running, which just never sounded appealing to me. Webdriver.IO wraps Selenium, which means you can run test scripts on all browsers. It allows you to easily integrate it with multiple testing frameworks, such as Appium, to run test scripts against Android or iOS mobile phones. WebDriverIO uses Node.js common libraries. For example:

Chai Assertion Library

This allows us to assert and validate the test. This library is not only for Webdriver but also used in React.js, Angular.js, and other frameworks’ unit testing.

Lodash

This module is one of my favorites. Instead of writing a bunch of workflows from scratch, Lodash gives you an opportunity to try an already defined, modern JavaScript utility library.

Starting with WebDriver.IO

To start with WebDriverIO, the first prerequisite is to install NPM and Node.js. Follow the link below to set it up.

How to set up Node.js

After successfully setting up Node.JS, it's time to install WebDriverIO CLI. Type the following command in the command prompt:

npm install @wdio/cli

The next step is to set WebDriver configurations. This command was introduced in WebDriverIO v6 and helps automation engineers to define things such as the automation backend, framework, reporting tool, etc. through a user-friendly wizard.

wdio config 

Cool! We are now ready to write our first test script.

Creating the first test script

I highly recommend using the Visual Studio Code editor to write your code. Before proceeding with test execution, it is important to store all your test scripts in one place. So, create a directory called "test" in the project folder, navigate to the test folder, and create a specs folder. Now create a JavaScript file in the specs folder and write your test script in that file and save it.

Page Object Models are commonly used in Web UI Automation for structuring automation tests. In this design pattern, the pages or views of an application should be separated from the test case logic. This is done by creating separate classes or objects to represent the important UI elements contained on each page. This object contains information on how to find an element within a page/view or execute a popular user flow, such as entering and submitting text in a search box. This approach allows one to write reusable and maintainable code.

Example:

Here we can see that all UI elements have methods that are readable and maintainable.

Here is a simple example of a test script. We use Page Object models in order to identify elements in a web page. Then use the describe() and it() methods to write test cases. At the end of each test case, we should validate the expected results by calling the Chai.js expect method.

Mher Sargsyan
Written by
Mher Sargsyan
Mher Sargsyan

I'm an experienced senior automation engineer with a demonstrated history of working in the tech industry. Skilled in Appium, SQL, Node.js, Selenium Webdriver, Agile Methodologies, and Test Automation. A professional with strong quality assurance skills who graduated from Portnov Computer School. I'm mad about writing clean, readable, robust, and fast executable code, with profound knowledge of the software development life cycle. I also have the ability to quickly adapt to the company’s rules and procedures, as well as be detail-oriented and a strong team player, skilled at gaining consensus and commitment within the team.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.

company name
name
email
phone
Type of project
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.