Before starting how to use webdriverIO, you should have knowledge of why we use webdriverIO and what exactly it is . so let’s understand it.
There are so many tools and frameworks that are used in Automation But If you are working on a front end site in automation testing, I’ll highly recommend you go with WebdriverIO. Following are some reasons:
- Known for Simple accessible :
It has simple and easy to write syntax. The command which is used in WebdriverIO tests is very concise, easily understandable and to the point.
For Example, If I want to click on something(Web element) then, With A regular selenium webdriver you have to write “find element” by its name, id, CSS, partial text or XPath to locate that element and then you will be able to perform an action upon that element. That means Instead of writing this.
We can just write this:
So if it’s a CSS, partial text, id or XPath It can unravel for itself. There are also other selenium based tools out there but You should have knowledge about Python, Ruby or Java. and These languages are very verbose in comparison to WebdriverIO script.
- Front end Friendly :
Another quality of webdriverIO is, we can use advanced and customized CSS selectors to locate elements. It is most liked not only because it looks nice but also about its readability and it is easy to start.
- It has the capability of selenium:
WebdriverIO is not just the binding for webdriver protocol (like selenium). Selenium is an uncommonly robust platform. Most industries use selenium for running browser automation and WebdriverIO stands on top of selenium. All the essential features of selenium with additional utilities are available in webdriverIO with an easy syntax.
What is WebdriverIO?
Prerequisites for webdriverIO
- NPM (It will get installed automatically with installing node.js)
- VS Code.
Steps for Installing webdriverIO
- Create a Folder with name “webdriverioProject” in any drive.(can create a folder with any name according to you)
- Open VS Code and select the webdriverioProject folder that you created recently ..
- Now Trigger the below command in terminal: npm init -y
- After completion of the above command. it will create a default package.json file in the ‘webdriverioProject’ folder.
- Now install WebdriverIO. Trigger below command. npm install webdriverio
- This Command will create a node_modules directory automatically in the ‘webdriverioProject’ Folder.
- Once the above command will complete, Run below command. npm install wdio
- Since webdriverIO v5, Test runner is in the @wdio/cli NPM package.
Now install the Cli: npm install @wdio/cli
- Next, You need to generate a configuration file to store webdriverIO settings . and To configure that Trigger following command. .\node_modules\.bin\wdio config
- Select all required options according to your use. After this, it will create wdio.conf.js file in ‘webdriverioProject Folder’.
How to run tests with webdriverIO:
- Now Make a directory under ‘webdriverioProject’ with name specs/ tests and store all test files that you are going to create( In my case I have created firstProject.js in specs directory )
- After creating your test file. customize the path of your test folder from specs in wdio.conf.js.
- To run you tests , Run below command .\node_modules\.bin\wdio wdio.conf.js
Why webdriverIO is different from other tools:
Some supported reporters examples are given below:
>Spec reporter >DotReporter
>Dot Reporter >JUnitReporter
>Allure Reporter >ConciseReporter
>JSON Reporter >Video Reporter
Some supported services examples are given below:
>Devtools Service >AppiumService
>ChromeDriver Service >SeleniumStandaloneService
>Report Portal Service >SharedStoreService
>Firefox Profile Service > Static Server Service
Some supported Test Frameworks are given below: