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
Decision gist · record as of 2026-04-24
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.
Use it when
- frontend-testing clarifies when and how to use each tool: Vitest excels at unit and component testing with fast feedback loops.
- frontend-testing emphasizes semantic locator strategies and accessibility-first testing approaches as core practices.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
schalkneethling/webdev-agent-skills/frontend-testing · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write acceptance and implementation tests that validate both user-facing behavior and code robustness”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you battle-tested approaches to structuring and scaling Playwright test automation projects. Learn how to write maintainable test code, organize test suites effectively, and apply design patterns that reduce technical debt and improve test reliability across your automation framework.
This skill teaches you to build robust automated browser tests using Playwright, a modern cross-browser testing framework. You'll learn to write test scripts, execute them reliably, and debug failures—all while leveraging Claude Code as your development partner for faster test creation and refinement.
testing-e2e enables you to craft comprehensive end-to-end tests leveraging Playwright's semantic locators and page object model architecture. This skill simplifies test automation by providing structured patterns for reliable, maintainable test suites that scale across complex applications.
This skill equips you to construct comprehensive end-to-end tests leveraging Playwright's capabilities alongside proven page object design patterns. Learn to organize test suites that remain maintainable as your application evolves, incorporating best practices that reduce flakiness and improve test reliability across your automation efforts.
This skill brings Playwright's browser automation testing capabilities into Phoenix, letting you run end-to-end tests programmatically within your Phoenix workflows. Integrate web testing directly into your application environment for seamless test execution and validation.
Automate web application testing by integrating Playwright into your workflow automation platform. This skill enables you to define, execute, and manage end-to-end browser tests across multiple environments, helping teams catch regressions and validate user interactions programmatically.
More skills playwright (MIT) · webapp-testing (MIT) · e2e-playwright-testing (MIT)