<<Previous Post << Complete Tutorial>> Next Post>>

WebDriverIO – Junit Reporter

Here in this Article, we will understand about Junit Reporter that what it is and how does it help in reporting execution of test cases and their statuses in WebDriverIO, later on we will explore it with different conditions of test suite and with their results.

Junit Reporter is a WebdriverIO reporter that creates Jenkins compatible XML based JUnit reports. Junit Reports come under traditional reporters which has been used in many automation framework since long time. Whether it is pass, skip or in fail state ,it’s visually different and better than dot reporter as it gives user more in-depth and line by line human readable statements of test case execution.

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to Demonstrate Junit Reporter in WebDriverIO.

Using Junit Reporter in WebDriverIO

Starting with Practical Demonstration directly where we will use our existing script from one of the earlier articles and amend test cases based on our need to understand functionality of Junit Reporter followed by WebDriverIO Automation code for achieving it.

Practical Demonstration:

Following are the Steps to Perform (i.e. to understand the functionality of Junit Reporter in WebDriverIO) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

1) Create a new folder and keep name as per your desire, we are giving it a name Junit_Reporter_in_WebDriverIO and open Git bash inside the folder.

2) Trigger the below command in Git Bash Window:-

The -y will answer ‘yes’ to all the prompts, giving us a standard NPM project.

npm init -y

3) Install the cli. By Triggering the below command in Git Bash Window:

Note: cli is an alternative to Git Bash, and it helps WebDriverIO to read commands in a better way.

npm i –save -dev @wdio/cli

4) To check whether wdio cli has been installed successfully or not. open package.json by running below command in Git Bash Terminal :

vim package.json

Now close details of package.json by clicking on CTRL + Z on Keyboard.

5) Generate Configuration File. Since we haven’t created one yet, WebdriverIO is smart enough to figure that out and help us through the process.

Run below command:-

./node_modules/.bin/wdio config

Here are the answers I chose: (Move your arrow buttons on keyboard to select the options and enter)

> First press Enter key followed by the below answers

> Shall I install the runner plugin for you? (Y/n) Y

> Where do you want to execute your tests? On my local machine

> Which framework do you want to use? mocha

> Shall I install the framework adapter for you? Y

> Do you want to run WebDriverIO commands synchronous or asynchronous? Sync

> Where are your test specs located? ./test/specs/**/*.js Press Enter key

> Which reporter do you want to use? Press Spacebar and followed by Enter key (select Junit – https://www.npmjs.com/package/@wdio/ )

> Shall I install the reporter library for you? Y

> Level of logging verbosity? Info Press Enter keys

> What is the base url? http://localhost Press Enter key

Verify wdio.conf.js file gets created successfully

Refer Screenshot:-

6) Open project folder i.e., Junit_Reporter_in_WebDriverIO in Visual Studio Code.

7) Click on wdio.conf.js and scroll down to reporters and verify [‘junit’] is present or not.

8) Create Tests and Specs folder to keep a Test File in it and to execute it.

9) make sure to set `path: ‘/ ‘in your wdio.conf.js.

10) Create test file we are naming it as junit_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in junit_reporter_test.js file to demonstrate Junit reporter efficiently.

10.1) I have commented or Skipped 2 test cases and running only 1 test case. Using the same command which we were using in previous articles to execute test file. i.e., “./node_modules/.bin/wdio wdio.conf.js”

Junit Reporter is simple and very clear in telling test case execution status. “tests” in junit reporter tells how many test cases were present, Here tests = 3 that means test file contain 3 Test cases. Skipped in junit reporter tells how many test cases are skipped, we skipped two test cases here so number 2 is present i.e., skipped = 2. As there were zero failures and zero errors, so failures = 0 and errors = 0

10.2) I have commented or skipped 1 test case and running 2 test case. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”

Junit Reporter shows skipped = 1 which means 1 test case has been skipped and rest of the test cases i.e., 2 Test cases have been passed with zero failures and zero errors.

10.3) I have commented or skipped all the three test cases and running zero test case. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”

Now junit Reporter is not showing any thing which tells none of the test case has been executed but test file has been passed as there was no error and no failure.

10.4) I have uncommented all the three test cases and running all the three test cases this time. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”

Here tests = 3 that means test file contain 3 Test cases and all the three test cases are passed, As we skipped zero test case, and there is zero failures and zero errors so junit showing failures = 0, errors = 0 and skipped = 0.

10.5) I introduced an error in 3^rd Test case and run remaining two test cases as it is. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”

Junit reporter provide error message within its structure for the failed test case so that one can debug and run it successfully, As there is error in the test case so Errors = 1 can be seen with error message.

11) Copy code from here:-

describe('Demonstrating Junit reporter in WebdriverIO',() => {

it('should find absolute path for clickToGetAlert Button and then click on it',() => {

browser.url ('http://omayo.blogspot.com')

$('/html/body/div[4]/div[2]/div[2]/div[2]/div[2]/div[2]/div[2]/div/div[4]/div[3]/div/aside/div[1]/div[4]/div[1]/input').click()

browser.pause(3000);

})


it('should print visible text and attributes using link text locator',() => {

browser.url('http://omayo.blogspot.com');

var link = $('=Selenium143');

console.log(link.getText()); // outputs: "Selenium143"

console.log(link.getAttribute('href')); //outputs : "http://www.Selenium143.blogspot.com"

link.click(); //Outputs : Redirection to "http://www.Selenium143.blogspot.com"

browser.pause(3000);

})

it('should find Relative Xpath for ClickToGetAlert Button and Then click on it',() => {

browser.url('http://omayo.blogspot.com')

$('#selenium143').click()

browser.pause(3000);

});

})

Or Alternatively

Rather than creating conf file again we can add junit reporter dependencies directly by using command “npm install @wdio/junit-reporter –save -dev”

Taking help of our dot reporter article (Click here to go back to one of our previous article) and running “npm install @wdio/junit-reporter –save-dev” command on Terminal, we can download dependencies of junit reporter and can run junit reporter easily.

Steps to Add junit Reporter Dependencies are :-

1) Run Command “npm install @wdio-junit-reporter –save-dev”