<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – Video Reporter
Here in this Article, we will understand about Video 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.
Video Reporter is a WebDriverIO reporter which generates videos for all your wdio test executions based on the setting done for it in config file. Video Reporter generates video of test cases which is in execution process and give very clear picture visually through video format whether it is pass, skip or in fail state
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 Video Reporter in WebDriverIO.
Using Video 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 Video Reporter followed by WebDriverIO Automation code for achieving it.
Practical Demonstration:
Following are the Steps to Perform (i.e. to understand the functionality of Video 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 Video_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., Video_Reporter_in_Webdriverio in Visual Studio Code.
7) Click on wdio.conf.js and scroll down to reporters and verify [‘video’] 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 video = require(‘wdio-video-reporter’); 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.
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 video_reporter_test.js and copying code from our previous articles. I have kept 3 test cases in video_reporter_test.js file to demonstrate video 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”
Video Reporter showing all the three test case execution video 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”
Video Reporter showing only 2 test case has been executed and therefore 2 videos has been generated in _results folder.
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”
Video Reporter showing only 1 test case has been executed and therefore 1 video has been generated in _results folder.
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”
Video Reporter showing zero videos that means no video has been created as there were zero active cases.
Copy the code from here:-
describe('Demonstrating Video 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 Video Reporter generates video and reports test cases state with generated video during test case execution irrespective of pass and fail 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 video 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-video-reporter–save-dev” command on Terminal, we can download dependencies of video reporter and can run video reporter easily.
Steps to Add video Reporter Dependencies are :-
1) Run Command “npm install wdio-video-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 and 8.2 above
4) Now Run Command “./node_modules/.bin/wdio wdio.conf.js” and observe the result where we can see video reporter generating video for each and every test case execution.
So, this is how Video Reporter generates video 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>>
