How to Get Consistent Visual Rendering With Docker in CI

Rendering differs across OSes because of fonts and anti-aliasing, so run the browser in the same pinned Docker image locally and in CI to make baselines portable.

Use the versioned mcr.microsoft.com/playwright image for both local baseline generation and the CI run so the same fonts and libraries produce identical pixels.

Steps

Pin the Playwright image to the same version as your @playwright/test.
Generate baselines locally inside that image with --update-snapshots.
Run the CI job in the same container: image.
Commit the baselines produced in the container.

Generate baselines locally

Terminal

docker run --rm -v "$(pwd)":/work -w /work \
  mcr.microsoft.com/playwright:v1.44.0-jammy \
  npx playwright test --update-snapshots

Workflow

.github/workflows/ci.yml

jobs:
  visual:
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.44.0-jammy
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright test

Gotchas

The image tag must match your Playwright package version or browser builds differ.
Do not mix host-generated and container-generated baselines in the same repo.