{"enrichment":{"faq":[{"a":"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\u2014preferring 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.","q":"How to write unit tests for React components with frontend-testing?"},{"a":"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\u2014unit for code robustness, E2E for user-facing behavior, and visual for design consistency.","q":"What are the key differences between Vitest, Playwright, and visual regression testing in frontend-testing?"},{"a":"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.","q":"How does frontend-testing recommend using semantic locators and getByRole for accessibility-first testing?"},{"a":"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\u2014keeping your test suite focused on genuine application behavior and maintainability.","q":"What common testing anti-patterns does frontend-testing help you avoid?"},{"a":"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.","q":"How can frontend-testing help with form validation and keyboard accessibility testing?"},{"a":"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\u2014its 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.","q":"What is ARIA snapshot testing and how does frontend-testing use it to consolidate assertions?"}],"shadow_tags":["acceptance-criteria-first","semantic-locators","test-driven-development","accessibility-validation","user-centric-testing","e2e-automation","visual-regression","aria-semantics","test-anti-patterns","implementation-robustness"],"summary_rewrite":"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."},"files":[{"bytes":12656,"path":"frontend-testing/SKILL.md","sha256":"39e58d18151dcf10a34c9a1bf4097f4b24960e81eda246b1dc80f6ceec2cd8a3","url":"https://skillfed.io/files/schalkneethling/webdev-agent-skills/frontend-testing/711e3daf/SKILL.md"}],"id":"schalkneethling/webdev-agent-skills/frontend-testing","links":{"html":"https://skillfed.io/schalkneethling/webdev-agent-skills/frontend-testing","md":"https://skillfed.io/schalkneethling/webdev-agent-skills/frontend-testing.md","repo":"https://github.com/schalkneethling/webdev-agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"Shell","last_updated":"2026-04-24","license":"MIT","name":"frontend-testing","publisher":"schalkneethling","stars":7},"relations":{"similar":[{"id":"irahardianto/awesome-agv/browser-automation"},{"id":"ed3dai/ed3d-plugins/playwright-patterns"},{"id":"mhagrelius/dotfiles/playwright-testing"},{"id":"alinaqi/maggy/playwright-testing"},{"id":"Arize-ai/phoenix/phoenix-playwright-tests"},{"id":"activepieces/activepieces/playwright-e2e-testing"},{"id":"bobmatnyc/claude-mpm-skills/playwright"},{"id":"alleneubank/claude-code/playwright-best-practices"},{"id":"Pixel-Process-UG/superkit-agents/webapp-testing"},{"id":"AsyrafHussin/agent-skills/e2e-playwright-testing"}]},"slug":{"owner":"schalkneethling","repo":"webdev-agent-skills","skill":"frontend-testing"},"version":"711e3daf"}