How to setup WebdriverIO using Jasmine framework

Saravanakumar Umapathi
Jul 29, 2022
20
mins read

What is WebdriverIO?

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

How does WebdriverIO work?

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.

Why do we use 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.

Types of frameworks available in WebdriverIO:-

    There are 3 types of Framework acts on the WebdriverIO. They are

  • Mocha
  • Jasmine
  • Cucumber

Mocha

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

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.

Jasmine Framework:-

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.

Why do we need Jasmine framework?

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.

The Basic requirements for the WebdriverIO framework

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

  • Open the CMD and check the version of the NodeJS with this command - node -v
  • Create a new folder in your local system, right-click on the folder, and select OPEN with VScode, and open the terminal in the VScode.

How to SetUp the WebdriverIO for our project?

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

Basic setup file and connect the root location in our project:

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:

  • Before changing the root location the file configuration be like this.
  • Once after changing the root location as per our customized folder structure

Before route setup of spec file

Before route setup of tsconfig.json file
After route setup of spec file
After route setup of tsconfig.json file

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

What is Allure Reporter?

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/

The Basic setup of the Allure Report in WDIO:

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"
   },

Report Generation in 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.

  • Overview of allure-report generation: This tab can show all of the characteristics of basic report performance in one page like features,trends,execution and environment.
  • Graphs: This tab allows you to see different statistics collected from the test data: statuses Failures or severity and duration diagrams.
  • Behaviors: This tab can perform the storage part. It can show these results in screenshots and video records.
  • Categories: This tab gives you the way to create custom defects classification to apply for test results.
  • Suites: This tab is a standard structural representation of executed tests, grouped by suites and classes can be found.
  • TimeLine: This tab will show the result time when it passed and failed while generating the test case in the allure.
  • Packages: This tab will represent a tree-like layout of test results, grouped by different packages.

Overview of allure-report
Allure Graph

Allure package

Conclusion:

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.

Share :

Join the conversation

Other blogs

What is ADA & How to make your website ADA compliant?

ADA = Americans with Disabilities Act. It is a non-discrimination law in the U.S.A that prohibits discrimination against individuals

Network and Data Security at Our Workplace and Remote

In today’s world, one of the most important assets of any company is digital records/properties.

Why Amadeus?

Travelers have grown tremendously over the past few months after the COVID relaxing barriers.