Field Guide
Test Your Website With Open-Source QA Tools
Build confidence with practical checks before visitors find the bugs.
A field guide to testing layers with trusted open-source tools like Playwright, Vitest, Testing Library, Axe, Lighthouse, ESLint, and TypeScript.
Steps from the workbench
Start with static checks
TypeScript and ESLint catch many mistakes before the browser opens. Treat them as the first QA gate.
What to check
The project can run type-aware checks, lint checks, or a production build without ignored errors.
Test important logic close to the code
Use Vitest for small functions, formatting helpers, validation rules, and data transformations.
What to check
Business rules have fast tests that do not require a browser.
Test UI through user behavior
Testing Library encourages tests that click, type, and read the page like a user instead of relying on internals.
What to check
Component tests query by roles, labels, and visible text when possible.
Use Playwright for real flows
End-to-end tests should cover the critical path: loading the page, navigating, submitting a form, and seeing the expected result.
What to check
At least one smoke test proves the main route works in a real browser.
Add accessibility and quality scans
Axe and Lighthouse can catch missing labels, contrast issues, metadata gaps, and performance problems that manual testing misses.
What to check
Automated scans are treated as signals to inspect, not as a replacement for human review.
Prompts to adapt
Create a QA plan
Create a beginner-friendly QA plan for this website. Separate checks into lint/type checks, unit tests, component tests, Playwright smoke tests, accessibility checks, and manual review.
Write a Playwright smoke test
Write a Playwright smoke test for this flow: [describe route and action]. Prefer accessible locators and include one assertion that proves the user reached the intended result.