Frontend Subscribe to Frontend RSS feed

A green toast reading “Saved” pops up in the bottom-right corner of the screen. It disappears two seconds later. For someone using a mouse, that’s complete feedback. But for someone who isn’t looking at the screen? That toast never happened. There’s no way to know whether the save succeeded or not. This is exactly what live regions exist to solve. Mark a region ahead of time as one whose content can change without a page refresh, and when the text inside it changes, the screen reader reads it out automatically. One line — aria-live="polite" — is all it takes. ...

This is Part 22 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary What do you end up with when you stack tests onto one small app, one layer at a time? This article is the retrospective on that journey — and a map of frontend testing as a whole. The layers we stacked were these: unit tests that check whether a single function does its one job, component tests that poke at the screen the way a user would, real-browser E2E that sweeps end to end, accessibility checks that protect users who never look at the screen, and CI that runs all of it for you on every PR. By the end, we’d even gotten to verifying code and tests written by AI. ...

This is Part 21 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary AI-written code is fast, it runs, and the screen looks good. The problem is that it’s wrong in plausible ways. Two spots go empty especially often. One is accessibility — the things people who use the web without looking at a screen need. The other is what happens in moments that rarely come up — an empty search box submitted, a server returning a 500. We call these edge cases. Both fall into “nobody covers it unless you ask” territory. ...

↻ 2026-10-02 Updated I corrected how this post described the snapshot an AI agent receives. The snapshots I originally showed were Playwright’s default aria snapshots, the kind tests use, but what Playwright MCP actually hands the model is a snapshot taken with mode: 'ai', and it looks different. Retaking them showed that even the div button survives as a nameless generic that can be clicked by its number (ref). The result was the same on 1.61, the version the practice repo used, so this wasn’t a version change — I got it wrong from the start. So I’ve withdrawn the claim that “a screen a screen-reader user can’t use, an AI agent can’t use either,” and rewritten the section around the finding that each agent tool receives a different tree. The conclusion — get role and name right — stands. This is Part 20 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary ...

This is Part 19 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Can you just ask AI (large language models like ChatGPT and Claude) to write your tests? Yes. Just don’t trust them as-is. AI produces plausible tests in seconds, but tends to quietly skip the boundary, failure, and accessibility cases that matter most. This article is about employing AI properly as a test-writing assistant — from getting good drafts to the checklist that proves the tests actually work. ...

When we’re deciding whether to adopt a new feature, we usually look at a support table. We check caniuse, see what percentage of cells are green, and once it clears 90%, we think “okay, we can use this now.” But there’s a question the support table never answers: Can you use it with a keyboard? Does a screen reader read it correctly? Those are two different questions. There’s a bigger gap than you’d expect between a browser implementing a feature and that feature actually handling accessibility. Some features quietly replace accessibility code we used to hand-write; others open up brand-new traps. ...

This is Part 18 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Open a coverage report and four numbers stare back — Stmts, Branch, Funcs, Lines. Which one matters? This article is about reading that report: which number is honest (spoiler: branch), what to fill in from the red lines, and where to look for the team health that numbers can’t show. If you’ve been following the series, this is the hands-on follow-up to the strategy part’s point that “coverage is a reference, not a target.” First time here from a search? That’s fine too — we use Vitest, but reading a report works the same no matter which tool you’re on. ...

This is Part 17 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Tests have no power while they’re “something you run locally, sometimes.” They protect a team only once they become a checkpoint that runs on every PR. This article builds that checkpoint with GitHub Actions — a merge gate where unit tests, E2E, and accessibility checks must pass before code can merge — from a single workflow file. Never touched CI? Fine. Three minutes of vocabulary first. ...

This is Part 16 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Ever had every test green while the screen was broken? Logic fine, one CSS rule collapsing the layout? Visual regression testing stores a reference screenshot (the baseline) and compares pixels, automatically catching “regressions only eyes can see.” It’s built into Playwright — one line to start — but there’s a knack to stable shots and an ambush called environment differences. All covered here. ...

This is Part 13 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Past ten E2E tests, two things start to hurt: the setup code copy-pasted into every test, and the suite slowing down as it runs in sequence. Playwright’s fixtures (a mechanism that injects repeated setup into tests) and parallel execution solve both at once — this article covers custom fixtures, auth reuse (storageState), and the safety rules for parallelism. ...