Agent Skills › zebbern/claude-code-guide › playwright-skill

playwright-skill

GitHub

提供 Playwright E2E、API、组件及可视化测试的最佳实践，涵盖选择器、断言、POM、网络模拟、CI/CD集成及多框架适配。

skills/playwright/SKILL.md zebbern/claude-code-guide

Trigger Scenarios

编写或优化端到端测试脚本配置 Playwright CI/CD 流程解决自动化测试中的稳定性或定位问题

Install

npx skills add zebbern/claude-code-guide --skill playwright-skill -g -y

More Options

Use without installing

npx skills use zebbern/claude-code-guide@playwright-skill

指定 Agent (Claude Code)

npx skills add zebbern/claude-code-guide --skill playwright-skill -a claude-code -g -y

安装 repo 全部 skill

npx skills add zebbern/claude-code-guide --all -g -y

预览 repo 内 skill

npx skills add zebbern/claude-code-guide --list

SKILL.md

Frontmatter

{
    "name": "playwright-skill",
    "description": "Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, fixtures, POM, network mocking, auth flows, debugging, CI\/CD (GitHub Actions, GitLab, CircleCI, Azure, Jenkins), framework recipes (React, Next.js, Vue, Angular), and migration guides from Cypress\/Selenium. TypeScript and JavaScript."
}

Playwright Skill

Opinionated, production-tested Playwright guidance — every pattern includes when (and when not) to use it.

50+ reference guides covering the full Playwright surface: selectors, assertions, fixtures, page objects, network mocking, auth, visual regression, accessibility, API testing, CI/CD, debugging, and more — with TypeScript and JavaScript examples throughout.

Golden Rules

getByRole() over CSS/XPath — resilient to markup changes, mirrors how users see the page
Never page.waitForTimeout() — use expect(locator).toBeVisible() or page.waitForURL()
Web-first assertions — expect(locator) auto-retries; expect(await locator.textContent()) does not
Isolate every test — no shared state, no execution-order dependencies
baseURL in config — zero hardcoded URLs in tests
Retries: 2 in CI, 0 locally — surface flakiness where it matters
Traces: 'on-first-retry' — rich debugging artifacts without CI slowdown
Fixtures over globals — share state via test.extend(), not module-level variables
One behavior per test — multiple related expect() calls are fine
Mock external services only — never mock your own app; mock third-party APIs, payment gateways, email

Guide Index

Writing Tests

What you're doing	Guide	Deep dive
Choosing selectors	locators.md	locator-strategy.md
Assertions & waiting	assertions-and-waiting.md
Organizing test suites	test-organization.md	test-architecture.md
Playwright config	configuration.md
Page objects	page-object-model.md	pom-vs-fixtures-vs-helpers.md
Fixtures & hooks	fixtures-and-hooks.md
Test data	test-data-management.md
Auth & login	authentication.md	auth-flows.md
API testing (REST/GraphQL)	api-testing.md
Visual regression	visual-regression.md
Accessibility	accessibility.md
Mobile & responsive	mobile-and-responsive.md
Component testing	component-testing.md
Network mocking	network-mocking.md	when-to-mock.md
Forms & validation	forms-and-validation.md
File uploads/downloads	file-operations.md	file-upload-download.md
Error & edge cases	error-and-edge-cases.md
CRUD flows	crud-testing.md
Drag and drop	drag-and-drop.md
Search & filter UI	search-and-filter.md

Debugging & Fixing

Problem	Guide
General debugging workflow	debugging.md
Specific error message	error-index.md
Flaky / intermittent tests	flaky-tests.md
Common beginner mistakes	common-pitfalls.md

Framework Recipes

Framework	Guide
Next.js (App Router + Pages Router)	nextjs.md
React (CRA, Vite)	react.md
Vue 3 / Nuxt	vue.md
Angular	angular.md

Migration Guides

From	Guide
Cypress	from-cypress.md
Selenium / WebDriver	from-selenium.md

Architecture Decisions

Question	Guide
Which locator strategy?	locator-strategy.md
E2E vs component vs API?	test-architecture.md
Mock vs real services?	when-to-mock.md
POM vs fixtures vs helpers?	pom-vs-fixtures-vs-helpers.md

CI/CD & Infrastructure

Topic	Guide
GitHub Actions	ci-github-actions.md
GitLab CI	ci-gitlab.md
CircleCI / Azure DevOps / Jenkins	ci-other.md
Parallel execution & sharding	parallel-and-sharding.md
Docker & containers	docker-and-containers.md
Reports & artifacts	reporting-and-artifacts.md
Code coverage	test-coverage.md
Global setup/teardown	global-setup-teardown.md
Multi-project config	projects-and-dependencies.md

Specialized Topics

Topic	Guide
Multi-user & collaboration	multi-user-and-collaboration.md
WebSockets & real-time	websockets-and-realtime.md
Browser APIs (geo, clipboard, permissions)	browser-apis.md
iframes & Shadow DOM	iframes-and-shadow-dom.md
Canvas & WebGL	canvas-and-webgl.md
Service workers & PWA	service-workers-and-pwa.md
Electron apps	electron-testing.md
Browser extensions	browser-extensions.md
Security testing	security-testing.md
Performance & benchmarks	performance-testing.md
i18n & localization	i18n-and-localization.md
Multi-tab & popups	multi-context-and-popups.md
Clock & time mocking	clock-and-time-mocking.md
Third-party integrations	third-party-integrations.md

CLI Browser Automation

What you're doing	Guide
CLI browser interaction	playwright-cli/SKILL.md
Core commands (open, click, fill, navigate)	core-commands.md
Network mocking & interception	request-mocking.md
Running custom Playwright code	running-custom-code.md
Multi-session browser management	session-management.md
Cookies, localStorage, auth state	storage-and-auth.md
Test code generation from CLI	test-generation.md
Tracing and debugging	tracing-and-debugging.md
Screenshots, video, PDF	screenshots-and-media.md
Device & environment emulation	device-emulation.md
Complex multi-step workflows	advanced-workflows.md

Language Note

All guides include TypeScript and JavaScript examples. When the project uses .js files or has no tsconfig.json, examples are adapted to plain JavaScript.