<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – Timeline Reporter
Here in this Article, we will understand about Timeline 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.
Timeline Reporter is a unique and advanced WebDriverIO reporter which generates reports with an aggregated visualization of your test results. This reporter aggregates all the typical information you will need into one report. After executing test run it provides a nice timeline of events where one can find distinguished colored blocks which provide details about Total, Passed, Failed and Skipped Test cases with appropriate screenshots wherever required based on settings done in wdio config file.
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 Timeline Reporter in WebDriverIO.
Using Timeline 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 Timeline Reporter followed by WebDriverIO Automation code for achieving it.
Practical Demonstration:
Following are the Steps to Perform (i.e. to understand the functionality of Timeline 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 Timeline_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 entering :q from 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., Timeline_Reporter_in_Webdriverio in Visual Studio Code.
7) Click on wdio.conf.js and scroll down to reporters and verify [‘Timeline’] is present or not.
8) There is some configurations needs to be done in Wdio.conf.js file which are as follow:-
8.1) Add const { TimelineService } = require(‘wdio-timeline-reporter/timeline-service’); on the top of config file before exports.config as shown in below screenshot.
8.2) Change the already present reporter configuration to the reporter configuration shown in below screenshot.
8.3) Add Timeline Services in Services Hook.
9) Create Tests and Specs folder to keep a Test File in it and to execute it.
10) Create test file we are naming it as timeline_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in timeline_reporter_test.js file to demonstrate timeline reporter efficiently.
10.1) I am running all the three test cases in one go . Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”
Timeline Reporter showing all the three test case execution status where it has been successfully passed.
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”
Timeline Reporter showing only 2 test case has been executed and therefore 2 in Passed Block can be seen and as 1 Test Case is Skipped which we can see on Skipped Block.
10.3) I have commented or skipped two test cases and running only one test case. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”
Timeline Reporter showing only 1 test case has been executed and therefore 1 in Passed Block can be seen and as 2 Test Case is Skipped which we can see on Skipped Block.
10.4) I have commented or skipped all the three test cases and running zero active test cases this time. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js”
Timeline Reporter showing only 3 test cases has been Skipped in Skipped Block that means no test case has been executed and that’s why we can see 0 test case in Passed Block.
10.5) I introduced an error in 3rd Test case, skipping 2nd Test Case and running 1st test cases as it is. Using the same command i.e., “./node_modules/.bin/wdio wdio.conf.js
Timeline Reporter showing only 1 test cases has been Passed which we can see in Passed Block, 1 Test Case as Skipped in Skipped Block and 1 Test Case in fail state in Failed Block with Error Log with Message and Error Stack.
Copy the code from here:-
describe('Demonstrating Timeline 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 Timeline Reporter generates reports in Timeline format for test cases After test case execution and provide all the information of test case execution in Passed, Failed and Skipped Blocks. I will be explaining other reporters of WebDriverIO in upcoming Articles.
Or Alternatively , Rather than creating conf file again we can add Timeline reporter dependencies directly by using command “npm install wdio-timeline-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-timeline-reporter –save -dev” command on Terminal, we can download dependencies of Timeline reporter and can run Timeline reporter easily.
Steps to Add Timeline Reporter Dependencies are :-
1) Run Command “npm install wdio-timeline-reporter –save -dev”
2) Verify package.json if json-reporter is present there or not. On Git Bash Run command :- “vim package.json” to see the dependencies.
3) Now update wdio.conf.js as we have done in 8.1 , 8.2 and 8.3 above
4) Now Run Command “./node_modules/.bin/wdio wdio.conf.js” and observe the result where we can see Timeline reporter generating timeline reports with test case execution results in Blocks Passed, Failed and Skipped.
So, this is how Timeline Reporter generates Timeline Reports for test cases execution. I will be explaining other reporters of WebDriverIO in upcoming Articles.
Next Steps:
> 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>>
