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

WebDriverIO – Spec Reporter

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

Spec Reporter is one more reporter apart from dot reporter by which we can check Test case execution status 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 Spec Reporter in WebDriverIO.

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

Practical Demonstration:

Following are the Steps to Perform (i.e. to understand the functionality of Spec 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 Spec_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 Spec – 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., Spec_Reporter_in_WebDriverIO in Visual Studio Code.

7)  Click on wdio.conf.js and scroll down to reporters and verify [‘spec’] 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 spec_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in spec_reporter_test.js file to demonstrate spec reporter efficiently.

10.1) I have commented 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”

Spec Reporter showing one green tick which tells only 1 test case has been executed. So here green tick tells that test case has been executed successfully.

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

Spec Reporter showing two green ticks which tells that two test cases has been executed successfully

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

Now Spec 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.

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”

Spec Reporter showing three green ticks which tells us that all the three test cases has been executed successfully.

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”

Spec Reporter showing  two green ticks and one cross in red color where two green ticks means two test cases has been executed successfully and one “X” means 1 Test case has been failed.

11) Copy code from here :-

describe('Demonstrating spec 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 spec reporter dependencies directly by using command “npm install @wdio/spec-reporter –save -dev”

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

Steps to Add Spec Reporter Dependencies are :-

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

2) Verify package.json if spec-reporter is present there or not. On Git Bash Run command :- “vim package.json” to see the dependencies.

3) Now update wdio.conf.js by adding spec besides dot for reporter: hook.

4) Now Run Command “./node_modules/.bin/wdio wdio.conf.js” and observe the result where we can see both dot and spec reporter results.

So, this is How Spec Reporter reports test cases successful execution with green tick And Failure with cross with red color. I will be explaining other reporters of WebDriverIO in upcoming Articles.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

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