We use Argos CI to detect visual regressions on Docusaurus.

This workspace can be run manually, but is generally run through the Argos GitHub Action.

This workflow runs for main and PR branches, and add a commit status to each PR with a visual diff that we can easily inspect.

The workflow execute the 2 main steps below:

• Build the website locally with pnpm argos:build (a variant of pnpm build:website:fast)
• Start the website server with pnpm serve:website on http://localhost:3000
• Take screenshots of all pages found in sitemap.xml with Playwright
• Upload all screenshots to Argos CI using the Playwright reporter

• Rebuild - this time with HTML unminified/formatted.
• Upload HTML/CSS/JS files to also diff them on Argos using pnpm argos:upload-text-snapshots

To run the screenshot step manually:

pnpm argos:build
pnpm argos:screenshot

To run the text-snapshots step manually:

pnpm argos:build:text-snapshots
pnpm argos:format:text-snapshots
pnpm argos:upload:text-snapshots

• Use ./tests/screenshot.spec.ts to customize the screenshots we take, eventually filter out some useless sitemap pages like versioned docs
• Use ./tests/screenshot.css to hide flaky CSS elements: iframe, video, gif...