An accessibility smoke check from role queries
This is a homemade check, far smaller than axe, but it shows the idea: compute each control's accessible name and flag empty ones. Testing Library's name computation ignores placeholders, so the bare input is flagged here; axe accepts a placeholder as a name, but a visible label is still the right fix (placeholders vanish when you type).
Playwright drives your real built app in real browsers for a few critical journeys, screenshot comparisons catch visual breakage, axe catches common accessibility errors automatically, and a clear plan decides which check lives at which layer.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Playwright test that searches for "mango" in a search box labelled "Search products" and checks that exactly 3 results (list items) appear.
Using the live helper, write a check that every <input> of type checkbox on the page has a name. Test it on a component with one labelled and one unlabelled checkbox.
Explain it without notes
What is an end-to-end test and how is Playwright different from Testing Library in jsdom?
How do Playwright's auto-waiting and web-first assertions reduce flakiness?
What are visual regression tests, and how do you keep them stable?
How would you split testing of a React shop app across unit, integration, E2E, visual and accessibility tests?
Preview
Console
Nothing logged yet.Expected console output
✗ BadSearch: every control has a name: a button with no name, a text field with no label, an image with no alt text
✓ GoodSearch: every control has a name