Visual Reporter

Background

The @wdio/visual-service has a reporting output since v5.2.0 which will output the diffs into a large JSON file. This project is a sample of what people could do with the output.

To make use of this utility, you need to have the 'output.json' file generated by the Visual Testing service. This file is only generated when you have the following in your configuration:

``ts
export const config = {
// ...
services: [
[
// Also installed as a dependency
"visual",
{
createJsonReportFiles: true,
},
],
],
},
}
`

For more information, please refer to the WebdriverIO Visual Testing documentation.

Demo

You can find a demo of the WebdriverIO Visual Testing Reporter on GitHub Pages

Installation

The easiest way is to keep @wdio/visual-reporter as a dev-dependency in your package.json, via:

`sh
npm install @wdio/visual-reporter --save-dev
`

Usage

To build the report you can call the CLI or use prompts to answer all questions

$3

You can call npx wdio-visual-reporter with the following arguments

#### --jsonOutput

Mandatory: true

The path to the output.json file that is generated after each run with the Visual Testing module.

#### --reportFolder

Mandatory: true

The folder where you want to store the report that is generated by this module

#### --logLevel

Mandatory: false
Possible values: debug

This will generate extra logs when errors happen

#### Example usage

`sh
npx wdio-visual-reporter --jsonOutput=/Users/wdio/visual-testing/.tmp/actual/output.json --reportFolder=/Users/wdio/visual-testing/.tmp/ --logLevel=debug
`

This will generate the following logs

`logs
npx wdio-visual-reporter --jsonOutput=/Users/wdio/visual-testing/.tmp/actual/output.json --reportFolder=/Users/wdio/visual-testing/.tmp/ --logLevel=debug
✔ Build output copied successfully to "/Users/wdio/visual-testing/.tmp/report".
⠋ Prepare report assets...

> @wdio/visual-reporter@0.4.0 script:prepare.report
> node ./dist/prepareReportAssets.js

✔ Successfully generated the report assets.
`

$3

Open a terminal, enter npx wdio-visual-reporter and answer all the questions

https://github.com/user-attachments/assets/9cd2d0ce-bb19-4c5f-89c5-ea2f01d68fa1

$3

You can find a workflow here. Make sure you change the GITHUB_PAGES` variable to the path of your reporter

$3

https://github.com/user-attachments/assets/9cdfec36-e1ff-4b48-a842-23f3f7d5768e

> [!NOTE]
> Created with a Remix project .