Testing as a Safety Net
Give the agent eyes. No change ships unchecked.
Overview
Your Travel Bucket List is deployed. It's secured. Everything works. Now change something. Add a feature. Tweak the layout. How do you know you didn't break anything? Right now, you don't.
Tests give the agent eyes. You'll write end-to-end tests with Playwright, tell the agent in its instruction file how to check its own work, practise TDD with an agent, and set up least-privilege GitHub Actions CI that uploads a test report — so no change ships unchecked.
Without tests, 'add sorting' is ambiguous. Sort what? By what criteria? In what direction? Where does the button go? The agent makes guesses. With a test, every question has an answer encoded in the assertions. The test is the spec.
— from the exercise
By the end of this exercise.
- ✓Playwright installed and configured, with node_modules and reports kept out of Git
- ✓End-to-end tests covering every core feature of your app
- ✓An instruction file (CLAUDE.md or AGENTS.md) telling the agent to run the tests and never edit a test to make it pass
- ✓Experience with TDD: the red-green-refactor cycle with an AI agent — and a check that the green step didn't touch the tests
- ✓A GitHub Actions workflow with read-only permissions that runs tests on every push and pull request and uploads the Playwright report
- ✓A green checkmark — and a red X — on a pull request, optionally enforced with a branch ruleset
Terms you'll learn.
- End-to-end test
- A test that uses a real browser to interact with your app like a user would
- Headless browser
- A browser that runs without a visible window — same rendering, no screen needed
- TDD
- Test-Driven Development — write the test first, then make it pass, then clean up
- Red-green-refactor
- Red: test fails. Green: make it pass. Refactor: clean up without breaking it
- CI
- Continuous Integration — automated tests on every push and pull request
- Least privilege
- permissions: contents: read — the test job can read your code and nothing more
- Assertion
- A statement in a test that says "this should be true" — if not, the test fails
Sections in this exercise.
- 01What You'll Build
- 02What You'll Need
- 03The Blindfolded Agent
- 04Your First Test
- 05Build the Suite
- 06Red-Green-Refactor with an Agent
- 07Breaking Things on Purpose
- 08Automate It: GitHub Actions
- 09The Checkpoint
You broke your app on purpose and watched the tests catch it. The red X is a feature, not a failure — it caught a problem before it reached production. Your agent now has eyes, and its instruction file tells it to use them: a machine-readable specification of what "working" means.