Screenery / Guides

Guides

How-to pages on screenshots in docs and READMEs, Playwright visual testing, and AI agents. The docs cover each Screenery feature.

Screenshots in docs and READMEs

• How to keep documentation screenshots up to date

  Four ways to stop docs screenshots going stale, and how to take them from your tests in CI.

• Screenshot automation for docs and READMEs

  Desktop apps, URL screenshot APIs and tests in CI compared, then a Playwright example that signs in, captures named screenshots and publishes them.

• Self-updating screenshots in Mintlify docs

  An @latest URL inside Mintlify's Frame component, with light and dark variants, refreshed by your tests on every merge.

• README screenshots that update themselves

  Add a screenshot to a GitHub README, then have your tests replace it on every build while the URL stays the same.

• We renamed our app and never retook a screenshot

  Pairings Up changed its name, logo and font on every page, and every screenshot in its help pages followed on the day it shipped.

• Pheidi swapped its homepage mockups for screenshots from its tests

  A hand-exported hero and a hand-drawn calendar both drifted from the app. Both are now captured on every merge, including a full week cropped to fit a half-width column.

• Markdown image syntax

  Paths, linked images, size with <img width>, alignment, alt text and dark mode on GitHub.

Playwright

• Playwright visual regression testing

  How toHaveScreenshot works, which thresholds and masks to set, and why committed baselines break across machines.

• Playwright screenshots in GitHub Actions

  One workflow that runs Playwright on every pull request and publishes the screenshots at stable URLs, with nothing committed.

• playwright --update-snapshots, without the wrong-OS trap

  What each --update-snapshots mode writes, why goldens made on a Mac fail on Linux CI, and three workflows that avoid it.

AI agents

• Claude Code and Playwright MCP

  Set up Playwright MCP in Claude Code, fix a server Claude can't see, and let the agent compare a pull request's screenshots with @latest.

Seed data

• Same seed, same pixels: deterministic ids for screenshot data

  How merge.tel made its screenshot seed deterministic, and what to do so your own Screenery diffs only change when your UI does.

Free tool

• Compare two screenshots

  See every changed pixel between two images. It runs in your browser and uploads nothing.

Choosing between visual testing tools? See Visual regression testing tools compared.