<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – Dot Reporter
Here in this Article, First we will understand what a Reporter is? And how it helps in Automation Testing, Then we will look after the types of Reporters WebDriverIO Supports then one by one we will explore them with practical exercises.
Reporter is a way to report all the testing activities carried out in a Test Automation Cycle. It plays an important role in Testing plus it’s an integral part of an Automation Framework, which gives you concrete evidence of testing has been performed on Software build with the number of test cases passed , skipped and failure. Unlike verbally speaking that testing has been completed by Testing Team on the given software build.
WebDriverIO Supports many number of Reporters out of which we will discuss few which are mentioned below :-
1) Dot Reporter
2) Spec Reporter
3) Junit Reporter
4) Json Reporter
5) Allure Reporter
Let’s go through above mentioned reporter to understand them in a better way through a demonstration with a small exercise.
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 Dot Reporter in WebDriverIO.
Using Dot 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 Dot Reporter followed by WebDriverIO Automation code for achieving it.
Practical Demonstration:
Following are the Steps to Perform (i.e. to understand the functionality of Dot 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 Dot_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 (It will automatically select dot – 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., Dot_Reporter_in_Webdriverio in Visual Studio Code.
7) Click on wdio.conf.js and scroll down to reporters and verify [‘dot’] 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 dot_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in dot_reporter_test.js file to demonstrate dot reporter efficiently.
9.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
dot Reporter showing one dot which tells only 1 test case has been executed. So when dot appears that means that test case has been executed successfully.
9.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”
dot Reporter showing two dot’s which tells two test cases has been executed successfully
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”
Now dot Reporter is not showing any dot’s which tells 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”
dot Reporter showing three dot’s which tells all the three test cases has been executed successfully
9.5) I introduced an error in 3rd Test case and run remaining two test cases as it is. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”
dot Reporter showing 2 dot’s and 1 F where two dots means two test cases has been executed successfully and 1 “F” means 1 Test case has been failed.
10) Copy the code from here:-
describe('Demonstrating dot 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 find Relative Xpath for ClickToGetAlert Button and Then click on it',() => {
browser.url('http://omayo.blogspot.com')
$('//*[@id="alert1"]').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);
});
});
So, this is how dot Reporter reports test cases successful execution with “.” And Failure with “F”. 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 ?
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>>
