Module 9
Testing Your Site
Catch bugs before your users do
1 min read224 words0/4 deliverables checked
Reading progress0%
What You'll Learn
Testing is like proofreading, but for code. It catches broken links, forms that don't submit, pages that crash, and styling that's broken on mobile.
Types of Testing
| Type | What It Checks | Example |
|---|---|---|
| Visual | Does it look right? | Screenshot comparisons |
| E2E | Does the flow work? | Fill form → submit → success |
| Accessibility | Can everyone use it? | Screen readers, keyboard |
Using Playwright MCP
With Playwright MCP, Claude Code can:
- Open a browser (invisibly)
- Navigate to your pages
- Take screenshots
- Click buttons and fill forms
- Check for errors
Deliverable: Set Up Playwright
Purpose: Configure testing infrastructure.
Expert Role: Test Engineer
Tools to Use: Bash (npm install), File system (write), Context7
Expected Output
- Playwright installed
- playwright.config.ts created
- Test folder structure set up
Prompt Template
Act as a test engineer. Set up Playwright testing for our project:
1. Install Playwright and browsers
2. Configure it for our Next.js project
3. Create a tests folder structure (playwright/tests/)
4. Add scripts to package.json for running tests
Use Context7 to look up current Playwright best practices.
Show me how to run tests after setup is complete.
Deliverable: Create Visual Tests
Purpose: Catch visual regressions automatically.
Expert Role: Visual QA Engineer
Tools to Use: File system (write), Playwright MCP
Expected Output
- Visual test files in playwright/tests/visual/
- Baseline screenshots captured
Prompt Template
Act as a visual QA engineer. Create visual regression tests for:
- Homepage hero section
- Services page layout
- Contact form
These should capture screenshots and compare against baselines.
Save tests to playwright/tests/visual/.
Explain how to update baselines when the design changes intentionally.
Deliverable: Create Accessibility Tests
Purpose: Ensure your site is accessible to everyone.
Expert Role: Accessibility Engineer
Tools to Use: File system (write), Bash (install axe-core), Playwright MCP
Expected Output
- Accessibility test files
- axe-core integrated with Playwright
Prompt Template
Act as an accessibility engineer. Create accessibility tests using
axe-core that:
- Scan each public page for violations
- Check color contrast
- Check for missing alt text
- Check for proper heading structure
- Check for keyboard navigation issues
Run these on: homepage, about, services, contact
Save tests to playwright/tests/accessibility/.
Use WCAG 2.1 AA as the compliance target.