playwright-gallery-reporter

This is a custom Playwright reporter. The goal is to easily preview videos and screenshots generated by Playwright tests.

Check the demo report at https://mshibanami.github.io/playwright-gallery-reporter/

Why need this reporter?

There are other test reporters for Playwright, but none of them allows previewing generated screenshots and videos quickly. Using this reporter, you can use arrow keys to navigate between screenshots and videos, and easily switch between environments. Also, it supports responsive design so you can quickly check the test results on your phone.

Installation

npm install -D playwright-gallery-reporter

Usage

Specify the reporter in your Playwright config.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // ...
  reporter: [
    ['list'],
    [
      'playwright-gallery-reporter',
      {
        outputDir: 'gallery-report',
      }
    ]
  ]
});

Configuration Options

The reporter accepts the following options.

type ReporterOptions = {
  /**
   * Report output directory. Default: `gallery-report`
   */
  outputDir?: string;
  /**
   * HTML file name. Default: `index.html`
   */
  htmlFile?: string;
  /**
   * JSON file name. Default: `data.json`
   */
  dataFile?: string;
  /**
   * Path to the HTML template file. 
   * Default: Uses the index.html included in the package.
   */
  rendererFile?: string;
};

Customization

You can customize the reporter by building your own UI. This reporter works as a single-file SPA that injects test data into the HTML template.

• Svelte page component: src/reporter/ui/ReportPage.svelte
• Build command: pnpm build:reporter-ui

The build process generates a single dist/index.html which is used by the reporter logic.

License

MIT