Webdriver IO is an automation framework that is built over NodeJS and based on JavaScript. This project is developed to facilitate the automation testing community. It is an open-source project which is easy to install, extendible, and full of automation features. It is similar in functionality to other tools such as selenium, puppeteer, cypress IO or protractor.
This framework is used for testing websites and applications to ensure that the user interface is working properly.
Why Webdriver IO?
The significant advantage of web driver IO is its built-in extensibility starting with version 4 webdriver IO formalized integration development. This gives it a rich feature set that allows one to easily add and extend setup to fulfill specific requirements through services and reporters.
Another key benefit of webdriver IO is the synchronous style in which you write commands while all actions are still taken asynchronously. The library adapts itself to a more human-readable format; this means writing less code, and cleaner more concise files overall compared to selenium webdriver, full of awaits and chained commands.
Steps to initiate with Webdriver IO.
The first step we need to take is to make sure we have node.js installed. I will not cover installation in this blog, but you can do a quick check by running a node-V in a terminal.
Setting up the project with Webdriver IO
- First, we need to make a new directory called webdriver IO test. Open this folder.
- Next, we will run NPM and hit -y, which will give us a standard NPM project.
- Now install the webdriver IO CLI. We can do that by running NPM I -save-dev at WD io/CLI, give it a few seconds to install and then move on with our CLI installed.
Generate the Configuration file
A new configuration file needs to be generated to store all project settings.
- Run NPx WDio config and then add -y argument to use all the defaults, you can omit this argument if you want to run the setup utility yourself, but for simplicity’s sake we will go with what comes out of the box.
- During the installation and configuration process, webdriver IO has installed several packages for us. If we take a quick peek at our JSON file you will find out that dependencies get automatically added.
Writing Test with Webdriver IO
- Create a new folder “test slash specs,” $ mkdir .testspecs. This is the default location of our test to live in, that gets setup in your configuration file.
- Create a new file in the above-created folder called basic.js $ touch ./test/specs/basic.js
Note: touch is not available for Windows, so we can simply create a text file with the name basic.js
- Open the file to write the example code:
describe(‘webdriver.io page’, () =>){
it(‘should have the correct title’, () =>{
browser.url(‘https://webdriver.io’)
expect(browser).toHaveTitle(‘WebdriverIO . Ultimate browser & mobile app test automation framework for Node.js’);
})
})
Walkthrough of Webdriver IO Code
- The first line of the code is a describe block; if you are familiar with mocha JS, this syntax should look similar because it is mocha JS. Describe helps organize how your tests are set up to have multiple tests inside a single describe block. Here we have a test named webdriver.io page, but you can name that whatever you like.
- The next line is an IT block, which defines a single test. We say that the test should check that it has the right title.
- On line three, we run a browser URL statement this is the first bit of webdriver IO specific code in our file. Browser.URL will load a URL into the browser that opens. Here we are going to webdriver I/o home page.
- Finally, we will run assertion checks that two items relate to each other in a specific way. You can check that two items are the same, two items are different, there are many different assertions you can get that out there, and they can get complicated, but we are not going to cover that here. The assertion we are going to use is that we are going to expect the browser to have a title that matches the title that we set.
Note: The expected function comes from the expected webdriver io package, is new to version 6, and is a great addition to an already fantastic library.
Running the test with Webdriver IO
- Jump back to our terminal and run npx wdio.
- The test run will begin, and the result will show in the terminal.
Conclusion
We did not need to install selenium or chrome driver or any browser driver because webdriver IO used chrome and chrome drivers automatically through services. The chrome driver service that gets added by default when you run your configuration setup takes care of getting a chrome driver instance started, and webdriver IO uses puppeteer by default. Thus, you do not need to install anything extra like selenium; these improvements have made getting started with webdriver IO a lot simpler and a lot quicker.
As I mentioned in the beginning, these services and frameworks are a key part of what makes webdriver IO so great. I will not cover it here, but the ability to add custom services and frameworks really helps extend the core functionality of the library to provide the most value for you with the least amount of effort.
