The Visual Reporter is a new feature introduced in the @wdio/visual-service, starting from version v5.2.0. This reporter allows users to visualize the JSON diff reports generated by the Visual Testing service and transform them into a human-readable format. It helps teams better analyze and manage the visual testing results by providing a graphical interface for reviewing the output.

To utilize this feature, ensure you have the required configuration to generate the necessary output.json file. This document will guide you through setting up, running, and understanding the Visual Reporter.

Prerequisites

Before using the Visual Reporter, make sure you have configured the Visual Testing service to generate JSON report files:

export const config = {
    // ...
    services: [
        [
            "visual",
            {
                createJsonReportFiles: true, // Generates the output.json file
            },
        ],
    ],
};

For more detailed setup instructions, refer to the WebdriverIO Visual Testing Documentation or the createJsonReportFiles

Installation

To install the Visual Reporter, add it as a development dependency to your project using npm:

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

This will ensure the necessary files are available to generate reports from your visual tests.

Usage

Building the Visual Report

Once you have run your Visual tests and they generated the output.json file, you can build the visual report using either the CLI or interactive prompts.

CLI Usage

You can use the CLI command to generate the report by running:

npx wdio-visual-reporter --jsonOutput=<path-to-output.json> --reportFolder=<path-to-store-report> [--logLevel=debug]

Required options:

• --jsonOutput: The path to the output.json file generated by the Visual Testing service.
• --reportFolder: The directory where the generated report will be stored.

Optional options:

• --logLevel: Set to debug to get detailed logging, especially useful for troubleshooting.

Example

npx wdio-visual-reporter --jsonOutput=/path/to/output.json --reportFolder=/path/to/report --logLevel=debug

This will generate the report in the specified folder and provide feedback in the console. For example:

✔ Build output copied successfully to "/path/to/report".
⠋ Prepare report assets...
✔ Successfully generated the report assets.

Using Interactive Prompts

Alternatively, you can run the following command and answer the prompts to generate the report:

npx @wdio/visual-reporter

The prompts will guide you through providing the required paths and options.

Report Demo

To see an example of how the report looks, visit our GitHub Pages demo.

Understanding the Visual Report

The Visual Reporter provides an organized view of your visual test results. For each test run, you will be able to:

• Easily navigate between test cases and see aggregated results.
• Review metadata such as test names, browsers used, and comparison results.
• View diff images showing where visual differences were detected.

This visual representation simplifies the analysis of your test results, making it easier to identify and address visual regressions.

CI Integrations

We are working on supporting different CI tools like Jenkins, GitHub Actions and so on. If you like to help us then please contact us on Discord - Visual Testing.