How to Control the Cost of Visual Testing in CI

Visual testing cost scales with snapshot count, so prune viewports, browsers, and stories and run visual jobs only when UI actually changes.

Snapshot cost is (stories or pages) times browsers times viewports times runs; cut each factor with TurboSnap, a lean matrix, and path-filtered triggers.

Levers

Lean matrix

# One browser and two viewports instead of a full cross-product
export default defineConfig({
  projects: [
    { name: 'desktop', use: { browserName: 'chromium', viewport: { width: 1280, height: 720 } } },
    { name: 'mobile', use: { browserName: 'chromium', viewport: { width: 375, height: 667 } } },
  ],
});

Gotchas

• Cutting browsers or viewports lowers cost but also lowers coverage; choose deliberately.
• Latchkey runs the surrounding CI jobs on cheaper managed runners and retries transient failures automatically.

Related guides