<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – Allure Reporter
Here in this Article, we will understand about Allure 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.
Allure – Allure is an open-source framework which is designed to create reports after test cases execution.
At the time of report generation, XML files generated are transformed into HTML Report. Which has been done with the help of a command line tool.
Allure is lightweight, flexible and a multi-language test report tool which not only shows concise representation of what activities has been tested in a neat web report form, but it allows whole team to extract maximum useful information from everyday execution of tests.
In Allure, Test failures can be divided into bugs and broken tests, plus it also provide logs, steps, fixtures, attachments, timings, history and integrations with TMS and bug-tracking systems which can be configured
Allure provides ‘big picture’ of what features have been covered or tested, where defects are clustered, plus how the timeline of execution looks like and many other convenient things. Extensibility and modularity of Allure guarantees that you will always be able to fine-tune something to make Allure suit you better.
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 Allure Reporter in WebDriverIO.
Using Allure 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 Allure Reporter followed by WebDriverIO Automation code for achieving it.
Practical Demonstration:
Following are the Steps to Perform (i.e. to understand the functionality of Allure 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 Allure_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 Allure – 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., Allure_Reporter_in_WebdriverIO in Visual Studio Code.
7) Click on wdio.conf.js and scroll down to reporters and verify [‘allure’] is present or not. Here you will see WebDriverIO while creating wdio.conf.js during running configuration in Step 5 has automatically given {OutputDir: ‘allure-results’} which means Allure results will not be generated in console output it will be stored in allure-results directory which will be created when code present in Allure_reporter_test.js is executed. We will see that step by step in later part of this article.
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 Allure_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in Allure_reporter_test.js file to demonstrate Allure 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
Steps to Generate Allure Reporter Result or Output are as follows :-
i) For Generating Allure Reports. We need to make sure allure command line is already installed or not. If not then use command
npm install allure-commandline --save -dev
ii) Verify if it is successfully installed or not. Use command
vim package.json
To close package.json enter command “:wq“ to close vim editor.
iii) Now for Generating Allure Report enter command. allure generate path of the directory.
allure generate C:/Users/alunia/Desktop/Allure_Reporter_in_WebDriverIO/allure-results
In Above Screenshot we can see message is showing “Report Successfully generated to allure-report”,
So data needed to generate report is present in allure-report as of now.
iv) To open report use command
allure open
In Above Screenshot Allure Reporter showing 3 test cases was present and out of that 1 Test Case has been executed and 2 Test Cases are skipped. And Percentage of test cases execution is also present.
To see more detailed test case execution through Allure Report. Click on show all. Refer Screenshot below:-
Likewise we can see allure reporter results for other two cases as well.
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”
To generate allure report you can refer “steps to generate allure reporter or result” explained above
In Above Screenshot Allure Reporter showing 3 test cases was present and out of that 2 Test Case has been executed and 1 Test Cases are skipped. And Percentage of test cases execution is also present.
9.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”
To generate allure report you can refer “steps to generate allure reporter or result” explained above
In Above Screenshot Allure Reporter showing 3 test cases was present and out of that 0 Test Case has been executed and 3 Test Cases are skipped. That’s why percentage is showing zero as all the test cases has been skipped.
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”
To generate allure report you can refer “steps to generate allure reporter or result” explained above
In Above Screenshot Allure Reporter showing 3 test cases was present and out of that all 3 Test Case has been executed and 0 Test Cases are skipped. That’s why percentage is showing 100% as all the test cases has been Passed 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
To generate allure report you can refer “steps to generate allure reporter or result” explained above
In Above Screenshot Allure Reporter showing 3 test cases was present and out of that all 2 Test Case has been executed and 0 Test Cases are skipped but 1 test case has been failed due to any specific reason. That’s why percentage is showing 66.66% . for any test case failure allure report indicates it by Yellow/saffron color.
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 Allure Reporter reports test cases state with a web report which is visually descriptive, better readable and provide all the information of test case execution with logs,error messages if any.which makes Allure reporter people first choice to use. 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>>
