CI/CD guide
Visual regression testing in CI/CD pipelines
Run visual regression tests in CI/CD: when to trigger them, how to manage baselines, keep runs deterministic and connect pipelines to production monitoring.
Visual tests are most useful when they run automatically. In CI they gate pull requests; after deployment they verify production. Here is how to wire both.
Run visual tests in a pinned environment
Use the same container image locally and in CI so fonts and rendering match. For Playwright, the official Docker image is the usual choice.
# .github/workflows/visual.yml
name: visual
on: pull_request
jobs:
visual:
runs-on: ubuntu-latest
container: mcr.microsoft.com/playwright:v1.55.0-noble
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npx playwright test --grep @visual
- uses: actions/upload-artifact@v4
if: failure()
with:
name: visual-report
path: playwright-reportDecide who approves baseline changes
An intentional change must update the baseline in the same pull request, and someone should review the diff. Without ownership, baselines drift and tests are updated blindly.
Verify production after deploy
CI only tests what the pipeline builds. After deployment, trigger a production check so CDN, environment and third-party differences are caught. VisualRunner monitors can be triggered from a pipeline step with an API key, and webhooks report changes and failures back.
Avoid common pipeline mistakes
Most CI visual testing pain comes from the same few causes.
- Baselines generated on a laptop, compared on Linux
- Tests hitting live data that changes
- Thresholds raised instead of fixing noise
- Failed runs with no uploaded diff artifacts
Questions
Frequently asked questions
Should visual tests block merges?
For critical templates, yes — once they are stable. Start in report-only mode until false positives are rare.
How do I run visual checks after deployment?
Trigger a production capture from the deploy job, for example a VisualRunner monitor via its API, and alert on detected changes.
Continue exploring
Related resources
Turn the checklist into a repeatable workflow
Discover your pages, capture the important states and keep a visual history of every meaningful change.
Start free trial