frontend-testing

Converts acceptance criteria into structured unit, integration, and end-to-end tests with Vitest and Playwright.

7|Updated Dec 26, 2025

Search Tags:#testing #accessibility #Playwright #Vitest #frontend-testing #semantic-locators

Ready to run

npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill frontend-testing-schalkneethling

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/schalkneethling/webdev-agent-skills/tree/main/frontend-testing
Command: npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill frontend-testing-schalkneethling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps frontend developers design and implement tests that start from user-centric acceptance criteria and evolve into robust implementation tests, ensuring tests reflect real usage and guard against regressions.

Core Features & Use Cases

Acceptance-first testing: Define clear acceptance criteria before coding tests.
Layered testing: Provide unit, integration, and end-to-end tests with Vitest and Playwright, plus accessibility checks.
Locator strategy guidance: Emphasize semantic locators and accessibility-backed queries to improve resilience.

Use cases include validating dashboards, forms, and interactive components across real user flows, ensuring changes don't introduce regressions.

Quick Start

To begin, instruct the agent to create a test plan from the acceptance criteria visible in the feature description, then generate corresponding unit tests and end-to-end tests, using Vitest for logic and Playwright for UI flows.

Frequently Asked Questions about frontend-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate acceptance criteria tests for frontend components?▼

Frontend testing with Vitest and Playwright covers unit, integration, and end-to-end testing. Vitest handles logic and component unit tests, while Playwright automates real browser UI flows for comprehensive validation.

What are semantic locators and why should I use them in Playwright?▼

Semantic locators are accessibility-backed query strategies that target elements by their meaning rather than brittle CSS selectors. Using them improves test resilience and maintains accessibility standards across UI changes.

Can I include accessibility checks in my end-to-end testing workflow?▼

Accessibility checks integrate directly into end-to-end testing workflows alongside Playwright. Tests validate dashboards, forms, and interactive components across real user flows to ensure changes do not introduce regressions.

What is the best way to structure frontend tests for maintainability?▼

Structure-first frontend testing organizes tests by starting from user-centric acceptance criteria and evolving into implementation tests. This pattern provides guidance for test organization, reporting, and reusability across the codebase.

Does acceptance-first testing work for validating complex interactive dashboards?▼

Acceptance-first testing validates complex interactive dashboards by defining clear criteria before coding. Layered testing with Vitest and Playwright ensures changes do not introduce regressions across real user interactions.