How does the visual regression testing work?

It utilizes Playwright to capture screenshots of your application and compares them against baseline images, automatically masking dynamic content like dates to prevent false positives.

Can I run these tests in my CI/CD pipeline?

Yes, the skill provides standardized scripts and GitHub Actions examples to seamlessly integrate component, visual, and performance tests into your automated workflows.

Which frameworks does this skill support?

The skill is optimized for React and Next.js applications, supporting both Jest and Vitest for component testing and Playwright for browser-based testing.

Does this skill help with web accessibility compliance?

Yes, it integrates axe-core to scan for WCAG 2.1 AA violations, validating ARIA attributes, color contrast, and keyboard navigation.

What performance metrics are audited?

It runs Lighthouse audits to track Core Web Vitals, including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).

Frontend Testing & Quality Suite

Name: Frontend Testing & Quality Suite
Author: vanman2024

byvanman2024

0•

보안 및 테스팅

Implement comprehensive frontend testing patterns for React and Next.js applications, covering component, visual regression, accessibility, and performance audits.

The Frontend Testing skill provides Claude with a robust framework for maintaining high-quality React and Next.js codebases. It automates the setup and execution of a multi-layered testing strategy, including unit and component tests with Jest/Vitest and React Testing Library, visual regression testing via Playwright, and accessibility audits using axe-core. Additionally, it integrates Lighthouse for performance monitoring of Core Web Vitals, ensuring that applications are not only functional but also accessible, visually consistent, and high-performing.

주요 기능

01Automated initialization of Jest, Vitest, Playwright, and Lighthouse testing environments.

02Automated WCAG 2.1 accessibility audits integrated directly into the test workflow.

03Component testing patterns using React Testing Library for behavior-driven verification.

04Performance benchmarking for Core Web Vitals (LCP, FID, CLS) using Lighthouse.

050 GitHub stars

06Visual regression testing with Playwright to detect unintended UI changes and layout shifts.

사용 사례

01Automating visual and accessibility checks within CI/CD pipelines to prevent regressions.

02Generating comprehensive coverage reports that aggregate unit, integration, and performance metrics.

03Initializing a standardized testing infrastructure for new or existing React/Next.js projects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vanman2024/dev-lifecycle-marketplace frontend-testing

For use in Claude.ai and ChatGPT

Download Skill