The open source visual testing platform for AI-native engineering teams.
# Official Argos Playwright integration [](https://www.npmjs.com/package/@argos-ci/playwright) [](https://www.npmjs.com/package/@argos-ci/playwright) [](https://www.npmjs.com/package/@argos-ci/playwright) Capture stable Argos screenshots from your [Playwright](https://playwright.dev/) tests, and report failure screenshots and traces to Argos. Visit the [Playwright SDK documentation](https://argos-ci.com/docs/reference/playwright) for guides, the API reference, and more. ## Installation ```sh npm install --save-dev @argos-ci/playwright ``` ## Usage Set up the Argos reporter in your Playwright config: ```ts // playwright.config.ts import { defineConfig } from "@playwright/test"; import { createArgosReporterOptions } from "@argos-ci/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. [ "@argos-ci/playwright/reporter", // Upload the screenshots to Argos only on CI. createArgosReporterOptions({ uploadToArgos: !!process.env.CI }), ], ], }); ``` Then capture stable screenshots with `argosScreenshot` in your tests: ```ts // tests/example.spec.ts import { test } from "@playwright/test"; import { argosScreenshot } from "@argos-ci/playwright"; test("screenshot homepage", async ({ page }) => { await page.goto("http://localhost:3000"); await argosScreenshot(page, "homepage"); }); ``` ## Links - [Official SDK Docs](https://argos-ci.com/docs/reference/playwright) - [Quickstart](https://argos-ci.com/docs/quickstart/playwright-quickstart) - [Discord](https://argos-ci.com/discord)