📖 The Story: The 2 GB Git Repo

A team had 300 visual regression tests, each with a golden screenshot stored in the Git repo. The screenshots were PNG, averaging 500 KB each. The repo was 1.5 GB — cloning took 4 minutes, and every PR that updated a screenshot pushed 5–10 MB.

The team tried Git LFS, but it added complexity and the LFS quota ran out every quarter. They tried reducing screenshot resolution, but the goldens became too low-quality to catch subtle CSS regressions.

They considered JPEG, but JPEG is lossy — the goldens had compression artifacts that caused false-positive visual diffs on every run.

WebP in 1.62 solved it. Lossless WebP goldens are 50–80% smaller than PNG, with zero quality loss. The repo dropped from 1.5 GB to 400 MB overnight.

🎯 Why It Matters

🌍 Real World Example

A team with 300 visual regression tests stored PNG goldens in Git. The repo was 1.5 GB. After migrating to toHaveScreenshot('name.webp') (lossless), the repo dropped to 400 MB — a 73% reduction with zero visual quality loss. PRs that updated screenshots went from 10 MB to 2.5 MB.

🧒 Explain Like I'm 10

Imagine you’re saving photos. PNG is like saving every single pixel exactly — the file is huge but perfect. JPEG is like drawing a rough sketch — the file is small but blurry.

WebP is magic: it can be as perfect as PNG (lossless) but much smaller, or it can be a smart sketch (lossy) that’s 10x smaller than JPEG but looks just as good.

For visual regression tests, you want perfect (lossless WebP). For thumbnail overviews, you want small (lossy WebP).

🎓 Professional Explanation

WebP is Google’s image format that supports both lossless and lossy compression. Lossless WebP is typically 26% smaller than PNG; lossy WebP is typically 25–34% smaller than comparable JPEGs. Playwright 1.62 adds WebP support to expect(page).toHaveScreenshot(), page.screenshot(), and locator.screenshot().

For visual regression goldens, use the .webp extension with toHaveScreenshot() — this stores the golden as lossless WebP. For standalone screenshots (CI artifacts, thumbnails), use page.screenshot({ path: 'name.webp', quality: 50 }) — this uses lossy compression with a configurable quality from 1 to 100 (100 is lossless).

📊 The Flow

⚙️ WebP Screenshots

Use the .webp extension with toHaveScreenshot() for lossless goldens. Pass { path: 'name.webp', quality: N } to page.screenshot() for lossy standalone screenshots (N = 1–100, where 100 is lossless).

import { test, expect } from class="tk-str">'@playwright/test';

test(class="tk-str">'visual regression with lossless WebP', async ({ page }) => {
  await page.goto(class="tk-str">'https:class="tk-com">//app.example.com');
  class=class="tk-str">"tk-com">// .webp extension = lossless golden, ~70% smaller than .png
  await expect(page).toHaveScreenshot(class="tk-str">'homepage.webp');
});

class=class="tk-str">"tk-com">// Standalone screenshot with lossy WebP
test(class="tk-str">'capture a thumbnail', async ({ page }) => {
  await page.goto(class="tk-str">'https:class="tk-com">//app.example.com');
  class=class="tk-str">"tk-com">// quality 1-100 (100 = lossless). 50 is a good default for thumbnails
  await page.screenshot({
    path: class="tk-str">'thumbnail.webp',
    quality: 50,
  });
});

class=class="tk-str">"tk-com">// Locator-level screenshots also support WebP
test(class="tk-str">'component screenshot', async ({ page }) => {
  await page.goto(class="tk-str">'https:class="tk-com">//app.example.com');
  await page.locator(class="tk-str">'.header').screenshot({
    path: class="tk-str">'header.webp',
    quality: 80,  class=class="tk-str">"tk-com">// near-lossless, good for CI artifacts
  });
});

class=class="tk-str">"tk-com">// Full-page screenshot as lossless WebP
test(class="tk-str">'full page golden', async ({ page }) => {
  await page.goto(class="tk-str">'https:class="tk-com">//app.example.com');
  await expect(page).toHaveScreenshot(class="tk-str">'full-page.webp', {
    fullPage: true,
  });
});

🔄 Before vs After

Before: PNG screenshots (1.61 and earlier)

class=class="tk-str">"tk-com">// PNG — large files, especially for full-page screenshots
await expect(page).toHaveScreenshot(class="tk-str">'homepage.png');
await page.screenshot({ path: class="tk-str">'homepage.png' });
class=class="tk-str">"tk-com">// 500 KB per screenshot, 150 MB for 300 tests

After: WebP screenshots (1.62+)

import { test, expect } from class="tk-str">'@playwright/test';

test(class="tk-str">'visual regression with lossless WebP', async ({ page }) => {
  await page.goto(class="tk-str">'https:class="tk-com">//app.example.com');
  await expect(page).toHaveScreenshot(class="tk-str">'homepage.webp');
});
class=class="tk-str">"tk-com">// ~150 KB per screenshot (lossless), 45 MB for 300 tests

⚠️ Common Mistakes

Mistake 1: Using lossy WebP for visual regression goldens

Lossy WebP (quality < 100) introduces compression artifacts that cause false-positive visual diffs on every run. Always use toHaveScreenshot('name.webp') (lossless via extension) for goldens, not page.screenshot({ quality: 50 }).

Mistake 2: Forgetting to update .gitattributes

If you store WebP goldens in Git, add *.webp binary to .gitattributes to prevent Git from trying to merge them as text. Without this, a WebP golden update can corrupt the file on merge.

Mistake 3: Mixing PNG and WebP goldens in the same test

If a test calls toHaveScreenshot('name.png') and later toHaveScreenshot('name.webp'), Playwright treats them as separate goldens. Pick one format per test and stick with it. Migrate all PNG goldens to WebP in one PR.

✅ Best Practices

1. Use .webp extension on toHaveScreenshot() for lossless goldens — 70% smaller than PNG.
2. Use quality: 50–80 for standalone thumbnails and CI artifacts where some loss is acceptable.
3. Never use lossy WebP for visual regression goldens — compression artifacts cause false positives.
4. Add *.webp binary to .gitattributes if storing goldens in Git.
5. Migrate all PNG goldens to WebP in one PR — don’t mix formats in the same test.

🏗️ Senior Engineer Deep Dive

Lossless WebP vs PNG: why WebP wins

Both formats are lossless, but WebP uses a more efficient compression algorithm (predictive coding + entropy coding) that produces 26% smaller files on average for the same pixel-perfect output. For Playwright visual regression, this means the golden is byte-identical in visual quality but significantly smaller on disk. The only downside: WebP encoding is ~20% slower than PNG, but this is negligible compared to the time saved in storage and Git operations.

When to use lossy WebP

Lossy WebP (quality < 100) is for non-golden screenshots: CI artifact thumbnails, bug report images, overview shots in HTML reports. These don’t need pixel-perfect quality — they need to be small enough to attach to a Jira ticket or embed in a Slack message. Quality 50 produces a file 10x smaller than PNG with acceptable quality for human review. Never use lossy for visual regression goldens — the compression artifacts change the pixel values and cause false-positive diffs.

💼 Interview Questions

🏋️ Practical Exercise

🚀 Mini Project

📝 Quiz

❓ FAQ

Q: Do all browsers render WebP screenshots the same way?

A: WebP screenshots are files on disk — they’re not rendered by the browser. Playwright captures the page via the browser’s screenshot API (which produces raw pixels), then encodes to WebP using a built-in encoder. The browser type doesn’t affect the WebP output.

Q: Can I convert existing PNG goldens to WebP without re-capturing?

A: Yes. Use ImageMagick or sharp: magick name.png name.webp (lossless) or sharp(name.png).webp({ lossless: true }).toFile('name.webp'). Then update the test from .png to .webp. This avoids re-capturing all goldens.

Q: Does WebP work with full-page screenshots?

A: Yes. expect(page).toHaveScreenshot('full.webp', { fullPage: true }) captures a full-page lossless WebP golden. Full-page screenshots see the biggest size reduction — a 2 MB PNG full-page golden becomes ~600 KB as lossless WebP.

📦 Summary