wdio-video-reporter
v6.2.0TypeScript
Makes videos of failed tests and has optional allure integration
0/weekUpdated 4 months agoMITUnpacked: 114.8 KB
Published by Johan Hernefeldt
npm install wdio-video-reporterWebdriverIO Video Reporter  
===================
> Create a video screen capture of your tests and enhanced your Allure reporting easily!
This is a WebdriverIO reporter that generates videos of your test executions. If you use it in combination with the Allure Reporter, then the test cases automatically get decorated with the videos as well (see example project).
As this reporter is using the saveScreenshot command to render the video it supports all environments including mobile environments.
That said, taking a screenshot after almost every command can slow down your tests. Also, note that the videos don't include alert-boxes and popups.
Installation
First, install the reporter:
``sh`
npm install --save-dev wdio-video-reporter
or
`sh`
yarn add --dev wdio-video-reporter
Then add the reporter to your configuration:
`js`
reporters: [
['video', {
saveAllVideos: false, // If true, also saves videos for successful test cases
videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
}],
],
Usage
With Allure Reporter
Adding the Allure reporter as well automatically updates the reports with videos without any need to configure anything :-)
`js`
reporters: [
['video', {
saveAllVideos: false, // If true, also saves videos for successful test cases
videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
}],
['allure', {
outputDir: './_results_/allure-raw',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: true,
}],
],
With wdio-html-nice-reporter
Adding the html nice reporter automatically updates the reports with videos without any need to configure anything 🙂
`js`
reporters: [
['video', {
saveAllVideos: false, // If true, also saves videos for successful test cases
videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
outputDir: './reports/html-reports/',
}],
['html-nice', {
outputDir: './reports/html-reports/',
filename: 'report.html',
reportTitle: 'Test Report Title',
linkScreenshots: true,
//to show the report in a browser when done
showInBrowser: true,
collapseTests: false,
//to turn on screenshots after every test must be false to use video
useOnAfterCommandForScreenshot: false,
}],
],
Configuration
Most users may want to set these configurations:
$3
Set to true to save videos for passing tests.
Type: boolean
Default:
$3
Where to save the screenshots for the video.
Type: string
Default:
$3
Prefix for video filenames by either suite or test name. When using cucumber it will always be suite.
Type: 'suite' | 'test'
Default:
$3
Integer between [1-100]. Increase if videos are playing to quick.
Type: number
Default:
$3
Scaling of video. See https://trac.ffmpeg.org/wiki/Scaling.
Type: string
Default:
$3
Maximum time to wait for a video to finish rendering (in ms).
Type: number
Default:
$3
If it's not set, it uses outputDir.
Type: string
$3
Max length of test name.
Type: number
Default:
$3
Which commands should result in a screenshot (without: /session/:sessionId/).
Type: string[]
Default:
$3
Add actions where screenshots are unnecessary.
Type: string[]
Default:
$3
Skip filtering and screenshot everything. (Not recommended)
Type: boolean
Default:
$3
Force a screenshot at this interval (minimum 0.5s).
Type: number
$3
Video format (container) to be used. Supported formats: mp4, webm.
Type: string
Default:
$3
Only record the last failure when specFileRetries is > 0
Type: boolean
Default:
Cucumber Support
If you are using the Allure reporter with Cucumber, add useCucumberStepReporter: true to Allure option in wdio.conf.js file, a typical configuration would look like this:
`js`
reporters: [
['video', {
saveAllVideos: false, // If true, also saves videos for successful test cases
videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
}],
['allure', {
outputDir: './_results_/allure-raw',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: true,
useCucumberStepReporter: true
}],
],
For a complete example, check out the cucumber branch at the wdio-template
Appium Support
Since wdio-video-reporter v1.2.4 there is support to help Allure differentiate between safari and chrome browsers on desktop and devices. The reporter uses the custom property appium:deviceType to id the different devices.phone
Recommended values are and tablet. It is recommended to include browserVersion as well for _all_ browsers to avoid a bug in Chrome webdriver when using devices in same Selenium grid as desktop Chrome browsers.
The generated video files will also get appium:deviceType added to the browser name.
Example Appium configuration:
`json`
"capabilities": [
{
...
"deviceType": "phone",
"browserVersion": "73.0-phone-1",
...
}
],
And wdio.conf.js:`js`
capabilities: [
{
...
'appium:deviceType': 'phone',
'browserVersion': '73.0-phone-1',
...
},
],
Example
Check out the simple template at wdio-template to quickly get up to speed.
Clone one of the repositories and install dependencies with yarn or npm install. Then run yarn e2e or npm run e2e in demo directory and finally yarn report or npm run report` to see Allure report.
Contributing
============
Fork, make changes, write some tests, lint, run tests, build, and verify in the demo that changes work as they should, then make a PR.
The demo folder works with the built version of the library, so make sure to build if you added new features and want to try them out.
Thanks
======
Thanks to Johnson E for fixing Cucumber support which a lot of users have asked for.