TestivAI Playwright Visual Diff Adapter

@testivai/playwright-visual-diff is a powerful adapter for Playwright that enables seamless visual regression testing, powered by AI. It provides a complete workflow for capturing screenshots, comparing them against baselines, and reviewing differences in a user-friendly local report.

Features

• Simple API: A single testivai.checkpoint() function to capture screenshots in your tests.
• Local Audit: Run tsvai audit to compare snapshots and generate a detailed HTML report.
• Interactive Report: Use tsvai serve to launch a local server, review visual diffs, and accept changes with a single click.
• Secure by Design: The "Accept Change" feature is only available locally, ensuring CI/CD artifacts are read-only and secure.
• CI/CD Ready: Includes a sample GitHub Actions workflow to automate visual testing in your pipeline.

Installation

npm install testivai-playwright-visual-diff

Usage

1. Initialize the project

Run the init command in the root of your project to create the necessary directories and configuration files.

npx tsvai init

2. Capture checkpoints in your tests

In your Playwright tests, import and use the checkpoint function to capture screenshots at key moments.

import { test, expect } from '@playwright/test';
import { checkpoint } from 'testivai-playwright-visual-diff';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await checkpoint('Playwright Home Page', page);
});

3. Run the audit

After your tests have run and captured the latest screenshots, run the audit command to compare them against your baselines and generate a report.

npx tsvai audit

4. Review and accept changes

Use the serve command to view the interactive report in your browser. If there are any visual differences, you can accept the new version as the baseline directly from the report.

npx tsvai serve

This will start a server, typically at http://localhost:3000.