skills.rest
cosmicstack-labs
cosmicstack-labsOFFICIAL
Explore all skills by this author →
Website𝕏@cosmicstackGitHub

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

Related Skills

Explore More Software Engineering Skills→
hkcm91hkcm91

testing-widgets

Test StickerNest widgets with Playwright E2E and Vitest unit tests.

Community
Intermediate
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
ryasrkryasrk

swift-protocol-di-testing

Generate mock implementations for Swift protocols to enable deterministic unit testing.

Community
Intermediate
curiositechcuriositech
181

test-automation-expert

Guide test automation strategy, framework selection, and CI/CD integration.

Official
Advanced