@snapvisor/playwright

The open source visual testing platform for AI-native engineering teams.

Official Argos Playwright integration

Capture stable Argos screenshots from your Playwright tests, and report failure screenshots and traces to Argos.

Visit the Playwright SDK documentation for guides, the API reference, and more.

Installation

npm install --save-dev @snapvisor/playwright

Usage

Set up the Argos reporter in your Playwright config:

// playwright.config.ts
import { defineConfig } from "@playwright/test";
import { createArgosReporterOptions } from "@snapvisor/playwright/reporter";

export default defineConfig({
  // ... other configuration
  reporter: [
    // Use "dot" reporter on CI, "list" otherwise (Playwright default).
    process.env.CI ? ["dot"] : ["list"],

    // Add the Argos reporter.
    [
      "@snapvisor/playwright/reporter",
      // Upload the screenshots to Argos only on CI.
      createArgosReporterOptions({ uploadToArgos: !!process.env.CI }),
    ],
  ],
});

Then capture stable screenshots with argosScreenshot in your tests:

// tests/example.spec.ts
import { test } from "@playwright/test";
import { argosScreenshot } from "@snapvisor/playwright";

test("screenshot homepage", async ({ page }) => {
  await page.goto("http://localhost:3000");
  await argosScreenshot(page, "homepage");
});

Links

• Official SDK Docs
• Quickstart
• Discord