skills.rest
vidzza
vidzzaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-testing

Guide frontend test development with Vitest and Playwright for unit, E2E, visual, and accessibility testing.

Updated Feb 4, 2026
Search Tags:#vitest#testing#accessibility#unit testing#e2e#playwright
One-click install
npx skills add https://github.com/vidzza/JRM_SMTR_V- --skill frontend-testing-vidzza
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/vidzza/JRM_SMTR_V-/tree/main/.claude/skills/frontend-testing
Command: npx skills add https://github.com/vidzza/JRM_SMTR_V- --skill frontend-testing-vidzza

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you write effective frontend tests that ensure your application meets user needs and remains robust against changes.

Core Features & Use Cases

  • User-Centric Testing: Prioritizes testing based on acceptance criteria and user behavior.
  • Test Type Guidance: Recommends appropriate tools (Vitest, Playwright) and strategies for unit, E2E, visual, and accessibility testing.
  • Locator Priority: Emphasizes semantic locators for resilient and accessible tests.
  • Use Case: When developing a new feature, use this Skill to guide the creation of acceptance tests that validate user stories, followed by implementation tests for edge cases, ensuring both functionality and reliability.

Quick Start

Use the frontend-testing skill to write a Playwright E2E test for the login form.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I write frontend tests that focus on user behavior rather than implementation details?▼

User-centric frontend testing validates acceptance criteria by prioritizing semantic locators and user interactions over internal component logic. This approach ensures tests remain robust against changes and accurately reflect real user needs.

When should I use Playwright vs Vitest for my frontend testing strategy?▼

Use Vitest for unit and implementation testing to cover edge cases, and Playwright for end-to-end testing to validate user stories. Combining both tools ensures comprehensive coverage of both functionality and user experience.

How do I create robust E2E tests for a login form using Playwright?▼

Create Playwright E2E tests by using semantic locators to interact with the login form, validating acceptance criteria and user behavior. This ensures your tests are resilient to DOM changes and accessible.

What is the best way to include accessibility testing in my frontend test suite?▼

Include accessibility testing by integrating it alongside unit, E2E, and visual regression tests. Using semantic locators for interactions naturally supports accessibility validation and ensures application quality for all users.

Why do my frontend tests break frequently when the UI changes?▼

Frontend tests break due to reliance on implementation details or non-semantic locators. By emphasizing semantic locators and user-centric testing strategies, your tests become resilient against UI changes.

Can I use this frontend testing approach for both new features and existing applications?▼

Yes, when developing new features, use this approach to guide creation of acceptance tests validating user stories, followed by implementation tests for edge cases, ensuring both functionality and reliability.

Related Skills

Explore More Software Engineering Skills→
eric-sabeeric-sabe
1

frontend-testing

Standardize Vitest, React Testing Library, and Playwright test practices for React and Next.js.

Community
Advanced
VitorMRodovalhoVitorMRodovalho
2

deploy

Automate production deployment with CI/CD pipelines and wrangler.

Community
Advanced
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
himaxxhimaxx
1

ui-visual-validator

Validate UI modifications for design compliance and accessibility via screenshot analysis.

Community
Advanced