skills.rest
schalkneethling
schalkneethlingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill frontend-testing-schalkneethling
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
ArabelaTsoArabelaTso
142

multi-version-behavior-comparator

Compare execution behavior, test results, and exceptions across multiple program versions.

Community
Intermediate
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
wojonswojons
4

testing-unit

Execute unit tests across programming languages and testing frameworks.

Community
Basic