How to Upload Snapshot Artifacts on Visual Test Failure in CI

When a visual test fails you need the expected, actual, and diff images, so upload the report as an artifact conditioned on failure.

Add an actions/upload-artifact step with if: failure() (or always()) so the diff images and HTML report are downloadable when a comparison fails.

Steps

• Run the visual tests as usual.
• Add an upload step gated on if: failure().
• Point path at the report directory.
• Download the artifact to inspect the diff locally.

Workflow

jobs:
  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7

Gotchas

• The report is written only if the reporter is configured; enable the html reporter.
• Use if: always() if you want the report even on green runs.

Related guides