WebdriverIO (WDIO) is an open-source testing automation framework. It can build both automate modern web and mobile applications. WDIO can be written in JavaScript and run on node.js. The support for both Behavior Driven Development (BDD) and Test Driven Development (TDD) makes it a highly preferred choice for automation testers. The Latest version is 7V.
WebdriverIO official link: https://webdriver.io/docs/gettingstarted
WebdriverIO is built over NodeJS, which is an implementation of the JSON Wire Protocol. The WDIO package can install the key ‘npm i’ because of the NodeJS. It uses RESTful architecture to conduct automation testing.
The scripter can write a test script on JavaScript using the WebdriverIO(Wdio) library. Where the service request is sent via NodeJS as an HTTP command. It uses JSON Wire protocol, to connect the Selenium Standalone and the services module then forwards the request to the browser and the browser requests the test App. The below Architecture can explain the WDIO.
WebdriverIO is an easy to use automation framework in both automated web applications (WebDriver/Chrome DevTools), mobile (Hybrid/Native) applications using Appium, and even Native desktop applications (Windows and macOS), using a custom configuration of Appium (mobile automation).
WebdriverIO can be easily integrated with a third-party testing solution. This makes it easy for the QA to leverage additional functions like recording tests, using real devices and browsers on the cloud, test reporting, etc.
There are 3 types of Framework acts on the WebdriverIO. They are
Mocha was introduced on 22 November 2011. Mocha Framework is run in nodeJS with the language of javascript. The frameworks make it easier to test asynchronous Javascript concepts in the browser. The Latest version of mocha is 8.4.0v.
Cucumber was introduced on 7 July 2018. The Cucumber is a testing tool that supports Behavior Driven Development (BDD). The cucumber framework uses the Ruby programming language. The Latest version of cucumber is 7.3.0v.
In this project, we are going to use the Jasmine framework. Jasmine is an open-source testing framework for JavaScript. JASMINE was introduced on September 14, 2010, it was 11 years old.
It aims to run on any JavaScript-enabled platform, not intrude on the application or the IDE, and have easy-to-read syntax. It is heavily influenced by other unit testing frameworks, such as ScrewUnit, JSSpec, JSpec, and RSpec.The latest version is 7.20.7v.
Jasmine is famous for its JavaScript behavior-driven development(BDD) framework. Developers can easily test the unit test in this jasmine framework. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code. Due to these reasons, we can also use this Jasmine framework for Automation testing.
WebdriverIO can be run on the platform of the Latest Version of NodeJS and using the basic tool to install VS-Code from the official site. To set up the VScode in our local system. To create a new folder in our local system. Once after the successful installation please follow the below steps.
NodeJS official link: https://nodejs.org/en/
VS code Official link: https://code.visualstudio.com/download
Step 1: To create the package.json setup to update project details using the terminal command - npm init
Step 2: To install the WDIO with this command line - npm install –save-dev @wdio/cli
Step 3: To install the WDIO config with this command line - npx wdio config
Step 4: Select the on my local machine option.
Step 5: Select the Framework - Jasmine.
Step 6: Click the TypeScript(https:/www.typescript.org) option to Continue.
Step 7: Where are your test specs located? (./test/specs/**/*ts) just Enter it.
Step 8: Do you want WebdriverIO to auto-generate some test files? (Y/n) y.
Step 9: Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? (Y/n) y.
Step 10: Where are your page objects located? (./test/pageobjects/**/*.ts) just Enter it.
Step 11: Select the reporter you want to use? spec, dot, allure, video.
Step 12: Do you want to add a plugin to your test setup? Don’t select anything, just Enter.
Step 13: Do you want to add a service to your test setup? select the selenium-standalone
Step 14: What is the base URL? (http://localhost) just Enter it.
Step 15: Do you want me to run `npm install` (Y/n)y.
Step 16: Finally we successfully configured the wdio.conf.ts file like below
Step 1: Once we complete the above steps, we will get the basic login code with folder structure.
Step 2: Cut the tsconfig.json and wdio.conf.ts files and paste them below the package.json file
Step3: To set the tsconfig.ts file and spec file in the Root location in the wdio.conf.ts file:
.png)
Step 4: Go to pageObjects folder – – →login.page.ts file give the action code for the test.
Step 5: Go to pageObjects folder – – →page.ts file to give URL code
Step 6: Go to pageObjects folder – – →secure.page.ts file is used to have an alert function
Step 7: Go to specs folder – – →example.e2e.ts file is written script function.
Step 8: To set up the run code command in package.json file
"scripts": {
"test": "npx wdio run ./wdio.conf.ts"
},
Step 9: Go to Terminal for running the script enter this command line:- npm run test
Step 10: Finally we get the result of our project in Dot-report and spec-report like this
Allure Report is a flexible, lightweight multi-language test reporting tool in WebdriverIO. It provides clear Suites, and Graphical reports and allows everyone involved in the development process to extract the maximum of information from the everyday testing process. In our project allure reports can take a major role in Wdio. The latest version of the Allure report is 7.20.7 v.
Allure Report detail link : https://docs.qameta.io/allure/
Wdio Allure setup link ref: https://webdriver.io/docs/allure-reporter/
Step 1: To install the allure-report in terminal - npm install @wdio/allure-reporter
Step 2: To install the allure command line - npm i allure-commandline
Step 3: To set the allure-report in the root location in the wdio.conf.ts file
reporters: ['spec','dot',
[video, {
saveAllVideos: true,
videoSlowdownMultiplier: 3,
outputDir: './Reports/allure-results/',
}],
['allure', { outputDir: './Reports/allure-results/',
disableWebdriverStepsReporting: false,
disableWebdriverScreenshotsReporting: false,
}]],
Step 4: To set the screenshot in the root location in the wdio.conf.ts file
afterTest: async function(test, context,
{ error, result, duration, passed, retries }) {
const date = Date.now();
await browser.saveScreenshot
('./Reports/ScreenShots/Chrome-'+date+'.png');
if (!passed) {
await browser.takeScreenshot();
}else if(!error){
await browser.takeScreenshot();
}
},
Step 5: To set the running code of the script file in the package. JSON file
"scripts": {
"open-allure": "allure generate ./Reports/allure-results --clean && allure open",
"test": "npx wdio run ./wdio.conf.ts && npm run open-allure"
},
Step 1: The allure report can be generated with the command - allure generate ./Reports/allure-results --clean && allure open
Step 2: In another way of generating the allure-report in our project the above title, we set up the run code in package.json. - npm run open-allure (or ) npm run test
Step 3: Then finally stop the generation just click on CTRL+C.
We hope you have found our end-to-end WebdriverIO framework tutorial to be useful as the WebdriverIO framework is an easy-to-understand open-source tool that provides a modular interface to build custom automation test cases based on your varying requirements.
.svg)
