Mmcp.market

playwright-skill skill

by zebbern·zebbern/claude-code-guide·4.6k stars·MIT

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.

C70/100content scan

Is the playwright-skill skill safe?

Read the findings before you install it. We read 76 files in the folder on 2026-09-28.

  • highcore/error-and-edge-cases.md:314

    Reads credential files (SSH keys, cloud or package-manager tokens) that a skill has no normal reason to touch.

    "path traversal: ../../etc/passwd",

Install the playwright-skill skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/zebbern/claude-code-guide.git /tmp/claude-code-guide
mkdir -p ~/.claude/skills
cp -r /tmp/claude-code-guide/skills/playwright ~/.claude/skills/playwright-skill
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

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

Guide Index

Writing Tests

Debugging & Fixing

Framework Recipes

Migration Guides

Architecture Decisions

CI/CD & Infrastructure

Specialized Topics

CLI Browser Automation

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.

More skills from zebbern/claude-code-guide

  • Aacademic-paper-reviewerSimulates academic peer review, evaluating papers across Originality, Methodology, Results, and Writing to provide Major/Minor Revision recommendations with actionable feedback. Triggers when a user asks to \"review my paper,\" \"simulate peer review,\" or \"give my paper a peer review.
  • Aactive-directory-attacksThis skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.
  • Capi-fuzzing-bug-bountyThis skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques.
  • Aapi-shape-explorerGenerate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
  • Aaudit-flowInteractive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export. Use for security audits, compliance documentation, flow tracing, feature ideation, brainstorming, debugging, architecture reviews, or incident post-mortems. Triggers on audit, trace flow, document flow, security review, debug flow, brainstorm, architecture review, post-mortem, incident review.
  • Aauthentication-patternsAuthentication patterns: session vs JWT vs OAuth comparison, provider selection (NextAuth, Clerk, Supabase Auth), security checklist, and common mistakes. Use when implementing auth, reviewing auth flows, or choosing auth providers.
  • Aaws-penetration-testingThis skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment.
  • Abroken-authenticationThis skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". It provides comprehensive techniques for identifying authentication and session management weaknesses in web applications.
  • Cburp-suite-testingThis skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". It provides comprehensive guidance for using Burp Suite's core features for web application security testing.
  • AcachingCaching strategies — invalidation, TTL guidelines, cache keys, cache layers, and when not to cache. Use when implementing or reviewing caching logic.
  • Achart-imageGenerate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Triggers when the user asks to visualize data, create a graph, plot a time series, or generate a chart for a report, alert, or dashboard. Runs as a lightweight, headless Node.js process without a browser.
  • Dcloud-penetration-testingThis skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". It provides comprehensive techniques for security assessment across major cloud platforms.

All agent skills → · MCP servers