Playwright: screenshots, end-to-end tests and proof that the page works

Repo: microsoft/playwright · Apache-2.0

If I had to name the most underrated open-source tool across my projects, it would be Playwright. It controls Chromium, Firefox and WebKit through one API, from JavaScript, Python, .NET or Java. I use it for three quite different jobs.

1. End-to-end tests for a SaaS

AffRank's repository has a Playwright e2e-tests folder, inherited from the Open SaaS template. Those tests sign up, log in and click through the app like a customer would. They're the cheapest insurance against the worst kind of bug: the one that breaks checkout on a Friday.

2. Screenshots as content

The GammaJuice pipeline uses Playwright to open the signals dashboard, wait for the embedded TradingView chart to finish loading, and capture a clean screenshot for social posts. A small but important detail lives in that script: a deliberate wait for the chart widget, because a screenshot taken a second too early shows an empty box.

3. Proving this site works

Every change to rogmendoza.com gets checked the same way: build the static site, open each changed page in headless Chromium at 1,280 pixels and at a 390-pixel phone width, in light and dark mode, and check for three things — no horizontal scrolling, no console errors, no failed requests. When the charts on this site rendered dark-on-dark for a visitor with a cached stylesheet, Playwright reproduced it by blocking the stylesheet, which is how the fix got verified.

Patterns worth copying

• Wait for the thing, not a timer — waitForSelector beats sleep almost everywhere. Use a fixed wait only for third-party widgets you can't observe.
• Test at two widths. Most layout bugs only exist on phones.
• Capture element screenshots, not full pages, when you need a tidy image of one component.
• Block things on purpose — fonts, scripts, styles — to see how your page degrades.
• Keep a failing screenshot with every failed test. It answers "what did it see?" instantly.

The bigger point

"It works on my machine" isn't evidence. A headless browser that loads the real page and reports what it saw is. Playwright makes that evidence cheap enough to collect every single time.