How to Snapshot Per Browser and Per Viewport in CI

Playwright names snapshots per project, so defining a project per browser and viewport produces a distinct baseline for each combination.

Declare projects for each browser and viewport in playwright.config.ts; Playwright suffixes snapshot names with the project so each combination has its own baseline.

Steps

• Define a projects entry per browser and viewport.
• Set use.viewport and use.browserName per project.
• Generate baselines for every project.
• Run all projects in CI.

Config

export default defineConfig({
  projects: [
    { name: 'chromium-desktop', use: { browserName: 'chromium', viewport: { width: 1280, height: 720 } } },
    { name: 'chromium-mobile', use: { browserName: 'chromium', viewport: { width: 375, height: 667 } } },
    { name: 'firefox-desktop', use: { browserName: 'firefox', viewport: { width: 1280, height: 720 } } },
  ],
});

Gotchas

• Every project multiplies baseline count and CI time; snapshot only the combos that matter.
• Firefox and WebKit render text differently, so expect distinct baselines per browser.

Related guides