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:

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:

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

Usage

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

CLI

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

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

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/[email protected] script:prepare.report
> node ./dist/prepareReportAssets.js

✔ Successfully generated the report assets.

Prompts

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

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

Deploy to GitHub Pages

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

The Visual Reporter

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

[!NOTE] Created with a Remix project .