playwright-validation
Ensures comprehensive E2E test coverage by reviewing UI changes and validating them with Playwright.
Install
mkdir -p .claude/skills/playwright-validation && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1058" && unzip -o skill.zip -d .claude/skills/playwright-validation && rm skill.zipInstalls to .claude/skills/playwright-validation
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when validating UI changes in a branch require Playwright E2E testing. Reviews branch changes, validates UI with Playwright MCP, and adds missing test cases.Key capabilities
- →Review branch changes against main
- →Identify missing Playwright test coverage
- →Validate UI behavior using Playwright MCP
- →Add test fixtures and cleanup logic
- →Verify visual and state-based UI elements
- →Run Playwright lint checks
How it works
The skill guides the user through a four-phase workflow: reviewing branch diffs, analyzing existing test coverage, validating UI state via Playwright MCP, and implementing missing test cases using standard fixtures.
Inputs & outputs
When to use playwright-validation
- →Reviewing UI-related branch coverage
- →Adding missing Playwright E2E tests for new components
- →Validating UI changes before PR creation
About playwright-validation
Reviews branch changes against existing test suites to ensure UI modifications are adequately covered by Playwright E2E tests. It guides the addition of missing test scenarios.
Use when validating UI changes in a branch require Playwright E2E testing. Reviews branch changes, validates UI with Playwright MCP, and adds missing test cases.
When not to use it
- →When UI changes do not require E2E testing
- →When the environment cannot run Playwright
Prerequisites
Limitations
- →Cannot use networkidle in tests
- →Cannot use page.pause() or test.only()
- →Requires manual setup of test fixtures
How it compares
Unlike manual testing, this workflow enforces specific test patterns and linting rules to ensure UI changes are covered by automated E2E tests before PR creation.
Compared to similar skills
playwright-validation side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| playwright-validation (this skill) | 3 | 4mo | Review | Intermediate |
| react-best-practices | 22 | 3mo | No flags | Intermediate |
| feature-flags | 6 | 6mo | Review | Intermediate |
| senior-qa | 6 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by open-metadata
View all by open-metadata →You might also like
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
senior-qa
alirezarezvani
This skill should be used when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality". Use for React/Next.js testing with Jest, React Testing Library, and Playwright.
react-component-performance
Dimillian
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.
s2-unit-test
antvis
Guidelines for writing and maintaining unit tests in the S2 project. Use when modifying source code to ensure proper test coverage.
frontend-review
yukihito-jokyu
フロントエンド（TypeScript/CSS/E2Eテスト）の変更点を自動検証（Biome/Playwright）および目視レビューし、プロジェクト特有のルールや一般的なベストプラクティスを検証するスキル。