skills.rest
lushly-dev
lushly-devOFFICIAL
Explore all skills by this author →
GitHub

test-components

Run Playwright E2E tests with visual regression and axe-core accessibility checks.

4|1|Updated Dec 30, 2025
Search Tags:#testing#accessibility#e2e#playwright#visual regression#web components
One-click install
npx skills add https://github.com/lushly-dev/afd --skill test-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-components
Source: https://github.com/lushly-dev/afd/tree/main/.claude/skills/test-components
Command: npx skills add https://github.com/lushly-dev/afd --skill test-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of testing web components, ensuring they are visually correct, accessible, and function as expected across different scenarios.

Core Features & Use Cases

  • E2E Testing: Conduct full-page Playwright tests against live development servers.
  • Visual Regression: Catch unintended visual changes by comparing screenshots against baselines.
  • Accessibility Testing: Automate WCAG 2.2 AA checks using axe-core to ensure compliance.
  • Shadow DOM Querying: Inspect and interact with elements within web component Shadow DOMs.
  • Use Case: When developing a new UI component, use this Skill to write comprehensive tests that cover its rendering, visual appearance, and accessibility, ensuring a high-quality user experience.

Quick Start

Use the test-components skill to run all Playwright E2E tests for the current project.

Frequently Asked Questions about test-components

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

FAQPage Schema
How do I query elements inside a Shadow DOM using Playwright?▼

Querying Shadow DOM elements in Playwright requires piercing the shadow boundary using specific selectors. This allows direct interaction with internal web component elements during E2E testing.

How do I catch unintended visual changes in web components?▼

Visual regression testing catches unintended visual changes by capturing screenshots and comparing them against baseline images. You manage these baselines to verify design token changes and ensure visual stability.

Can I automate WCAG 2.2 AA accessibility checks with Playwright?▼

Yes, you can automate WCAG 2.2 AA accessibility checks using axe-core. This validates keyboard navigation and asserts compliance directly within your E2E test suite.

What is the best way to structure Playwright E2E tests for web components?▼

Structuring Playwright E2E tests involves following a build-test-verify loop. You write tests covering rendering, visual appearance, and accessibility against a live development server.

Why does my Playwright test fail to find web component elements?▼

Playwright tests fail to find web component elements when not correctly querying the Shadow DOM. You must use piercing selectors to access internal elements hidden within the component shadow boundary.

Related Skills

Explore More Software Engineering Skills→
zephyrwang6zephyrwang6
333

webapp-testing

Automate Playwright tests for local web applications with server orchestration.

Community
Intermediate
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
OpenCovenOpenCoven
20

wcag-a11y-audit

Audit web and desktop UIs for WCAG 2.2 AA compliance with axe-core, Playwright, and jest-axe.

Official
Advanced
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate