frontend-testing

Define frontend testing strategies across unit, integration, E2E, visual regression, and accessibility layers.

364|53|Updated May 9, 2026

Search Tags:#vitest #testing #accessibility #frontend #playwright #testing-library #msw

Ready to run

npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill frontend-testing-cosmicstack-labs

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams reduce frontend regressions by defining a complete, practical testing strategy spanning unit, integration, E2E, visual regression, and accessibility.

Core Features & Use Cases

Test the full frontend stack: Use a testing pyramid that balances fast unit/component tests with fewer, higher-signal E2E checks for critical user paths.
Standard toolchain guidance: Covers Vitest + Testing Library patterns for units, MSW-style network boundary mocking for integration tests, and Playwright for end-to-end verification.
Quality and UX confidence: Encourages accessibility testing (e.g., jest-axe or @axe-core/playwright) and highlights visual regression as a companion to functional tests.
Use case: When shipping a checkout feature, verify components with unit tests, validate API-driven UI with integration tests, and confirm the full checkout flow in Playwright with stable assertions.

Quick Start

Ask your agent to produce a complete frontend test plan and starter test implementations using Vitest + Testing Library, Playwright E2E flow coverage, and accessibility/visual regression checkpoints for your app.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema

What's the best way to structure frontend testing across unit, integration, and E2E layers?▼

You can mock APIs at the network boundary using MSW for integration tests. This isolates frontend components from backend dependencies, allowing API-driven UI flows to be tested deterministically without requiring a live server.

How do I test accessibility compliance in a Playwright E2E flow?▼

Accessibility testing can be integrated into E2E flows using tools like @axe-core/playwright. This validates critical user journeys against accessibility standards, ensuring UI components remain compliant during end-to-end verification.

Does Vitest work well with Testing Library for component behavior tests?▼

Vitest pairs effectively with Testing Library to test component behavior. This combination provides a deterministic configuration environment for unit and integration tests, ensuring fast and reliable verification of UI component logic.

When should visual regression testing be added to a frontend testing strategy?▼

Visual regression testing should be added as a companion to functional tests to catch unintended UI changes. It complements unit, integration, and E2E layers by verifying visual output and preventing stylistic regressions in components.