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

WebDriverIO – Json Reporter

Here in this Article, we will understand about JSON 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.

JSON Reporter is a WebDriverIO reporter or a WebDriverIO plugin which creates report results in JSON Format. JSON Reports are very useful and gives very clear picture of test cases execution whether it is pass, skip or in fail state because of its JSON format, it’s visually very clear and aligned.

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 Json Reporter in WebDriverIO.

Using Json 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 Json Reporter followed by WebDriverIO Automation code for achieving it.

Practical Demonstration:

Following are the Steps to Perform (i.e. to understand the functionality of JSON 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 Json_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? Select Reporter you want and Press Spacebar followed by Enter key (It will automatically select JSON – 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., Json_Reporter_in_Webdriverio in Visual Studio Code.

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

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

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

9.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”

Json Reporter showing only 1 test case has been executed and 2 Test Cases are skipped.

For More Clear View we can copy the above Json structure and open any online Json formatter tool. For the time being we are using https://jsonformatter.curiousconcept.com/

Refer Screenshot:-

Copy Json Data in text area and click on process to see Aligned Json Result for Better Understanding of test case execution and for better readability.

Refer Screenshot:-

This is JSON format which Json Reporter Provides which is far better to understand test case execution if compared with dot, spec, and junit reporters.

9.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”

Json Reporter showing only 2 test case has been executed and 1 Test Cases are skipped.

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

Json Reporter showing none of the test case has been executed but test file has been passed as there was no error.

9.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”

Json Reporter showing all the three test cases has been executed successfully

9.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”

Json reporter showing 1 failed that means test case must have been failed due to error and 2 test cases has been executed successfully.

To see error in detail lets process Json data in online Json formatter tool using https://jsonformatter.curiousconcept.com/

In above screenshot State can be seen as failed , error type can be seen as Error , below that error description can also be seen.

10) Copy the code from here:-

describe('Demonstrating JSON 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); 

        });

});

So, this is how JSON Reporter reports test cases state with JSON formatting which is descriptive, better readable and provide all the information of test case execution. I will be explaining other reporters of WebDriverIO in upcoming Articles.

Or Alternatively

Rather than creating conf file again we can add json reporter dependencies directly by using command “npm install wdio-json-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-json-reporter –save-dev” command on Terminal, we can download dependencies of json reporter and can run json reporter easily.

Steps to Add json Reporter Dependencies are :-

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