Documentation

Get started in
5 minutes.

Simple installation, minimal configuration. Add visual testing to your existing Playwright suite today.

Quick Start View Dashboard
CONTENTS

1. Installation

Install the TestivAI Playwright reporter package:

terminal
npm install @testivai/witness-playwright

2. Configuration

Add the TestivAI reporter to your playwright.config.ts:

playwright.config.ts
import { TestivAIReporter } from '@testivai/witness-playwright';

export default {
  reporter: [
    ['html'],
    ['json'],
    [ TestivAIReporter, {
      apiKey: process.env.TESTIVAI_API_KEY,
      project: 'your-project-name',
      tolerance: {
        position: 2,
        color: 0.02
      }
    }]
  ]
};

Get your API key from the TestivAI dashboard.

3. First Test

Add the witness() call to any test where you want visual coverage:

checkout.spec.ts
import { test, expect } from '@playwright/test';
import { testivai } from '@testivai/witness-playwright';

test('checkout flow', async ({ page, testInfo }) => {
  // Navigate to checkout
  await page.goto('/checkout');

  // Fill form
  await page.fill('#email', 'test@example.com');
  await page.fill('#card', '4242424242424242');

  // Take visual snapshot
  await testivai.witness(page, testInfo, 'checkout-page');

  // Complete purchase
  await page.click('#submit');
  await expect(page.locator('.success')).toBeVisible();
});

4. Options

Configure TestivAI behavior with these options:

Option Type Default Description
apiKey string - Your TestivAI API key
project string - Project name in dashboard
tolerance.position number 2 Pixel tolerance for layout changes
tolerance.color number 0.02 Color difference threshold (0-1)
ignore array [] CSS selectors to ignore
viewport array ['1280x720'] Viewports to test

5. CI/CD Integration

Add your API key as an environment variable in your CI system:

.github/workflows/playwright.yml
env:
  TESTIVAI_API_KEY: ${{ secrets.TESTIVAI_API_KEY }}

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npx playwright test

6. Troubleshooting

Tests failing with "API key invalid"

Ensure your API key is correctly set as an environment variable:

export TESTIVAI_API_KEY=your_key_here

Too many false positives

Increase tolerance or add ignore selectors for dynamic content:

tolerance: { position: 5, color: 0.05 },
ignore: ['.timestamp', '.user-id']

Need help?

Email us at support@testiv.ai or join our Discord community.

Ready to start?

Add visual testing
to your suite today.

Free during beta. No credit card required.

Get API Key → Back to Home