frontend-testing
Equip your AI agent with structured testing expertise for modern web projects. This skill guides the creation of comprehensive test suites that verify user interactions and internal code quality, grounded in web standards and accessibility principles. Perfect for teams building resilient frontend applications.
frontend-testing teaches you to write unit tests that validate both user-facing behavior and code robustness. Use Vitest with DOM testing libraries to render components and query them semantically—preferring getByRole and other accessibility-first locators over brittle CSS selectors. Structure your tests around acceptance criteria and user interactions rather than implementation details, ensuring your React component tests remain maintainable as your codebase evolves.
AI-generated summary based on this skill's SKILL.md
Install
schalkneethling/webdev-agent-skills/frontend-testing · repository language: Shell
git clone https://github.com/schalkneethling/webdev-agent-skills
cp -r webdev-agent-skills/frontend-testing ~/.claude/skills/frontend-testingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to write unit tests for React components with frontend-testing?
frontend-testing teaches you to write unit tests that validate both user-facing behavior and code robustness. Use Vitest with DOM testing libraries to render components and query them semantically—preferring getByRole and other accessibility-first locators over brittle CSS selectors. Structure your tests around acceptance criteria and user interactions rather than implementation details, ensuring your React component tests remain maintainable as your codebase evolves.
What are the key differences between Vitest, Playwright, and visual regression testing in frontend-testing?
frontend-testing clarifies when and how to use each tool: Vitest excels at unit and component testing with fast feedback loops, Playwright handles end-to-end acceptance tests that validate real user workflows across browsers, and visual regression testing captures screenshots to detect unintended UI changes. Each serves a distinct layer of your test pyramid—unit for code robustness, E2E for user-facing behavior, and visual for design consistency.
How does frontend-testing recommend using semantic locators and getByRole for accessibility-first testing?
frontend-testing emphasizes semantic locator strategies and accessibility-first testing approaches as core practices. Instead of querying by test IDs or CSS classes, use getByRole to find buttons, inputs, and headings the way assistive technology does. This dual benefit ensures your tests validate that your UI is genuinely accessible while also being resilient to styling changes, since role-based queries depend on proper HTML semantics rather than presentation.
What common testing anti-patterns does frontend-testing help you avoid?
frontend-testing guides you away from circular validation (testing that your test setup works rather than your code), over-mocking (mocking so much that you lose confidence in real behavior), and brittle selectors that break on minor refactors. The skill teaches you to write acceptance tests first, grounded in user acceptance criteria, and to mock only external dependencies—keeping your test suite focused on genuine application behavior and maintainability.
How can frontend-testing help with form validation and keyboard accessibility testing?
frontend-testing covers both form validation and keyboard accessibility testing as essential acceptance criteria. Write tests that submit forms, verify error messages appear with proper ARIA attributes, and confirm that users can navigate and interact using only the keyboard. Use Playwright for end-to-end form workflows and Vitest for isolated validation logic, ensuring your forms are both functionally correct and fully accessible to all users.
What is ARIA snapshot testing and how does frontend-testing use it to consolidate assertions?
frontend-testing introduces ARIA snapshot testing as a way to consolidate multiple assertions into a single structure validation. Rather than writing separate assertions for each role, label, and state, capture a snapshot of the component's accessibility tree—its ARIA roles, names, and properties. This approach with Playwright validates the entire semantic structure at once, making tests more readable and reducing assertion clutter while maintaining confidence that your UI structure remains accessible.
SKILL.md
rendered from the published skill — quoted content, verbatim
Frontend Testing
Start by writing tests that validate acceptance criteria. Then add implementation tests where they provide value.
Core Principle
> "The more your tests resemble the way your software is used, the more confidence they can give you." — Kent C. Dodds
This principle guides testing decisions, but isn't the whole picture:
- Acceptance criteria tests verify the system does what users/stakeholders need. These should be stable across refactors.
- Implementation tests verify the pieces are robust — edge cases, error handling, complex logic. These may change when you refactor.
Both have value. The anti-pattern to avoid is tests that only mirror implementation without validating meaningful behavior.
When to Load References
Load reference files based on test
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
frontend-testing/SKILL.md
frontend-testing/references/accessibility-testing.md
frontend-testing/references/aria-snapshots.md
frontend-testing/references/locator-strategies.md
frontend-testing/references/visual-regression.md