CtrlK
BlogDocsLog inGet started
Tessl Logo

playwright-skill

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.

62

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/playwright/SKILL.md
SKILL.md
Quality
Evals
Security

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 assertionsexpect(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

What you're doingGuideDeep dive
Choosing selectorslocators.mdlocator-strategy.md
Assertions & waitingassertions-and-waiting.md
Organizing test suitestest-organization.mdtest-architecture.md
Playwright configconfiguration.md
Page objectspage-object-model.mdpom-vs-fixtures-vs-helpers.md
Fixtures & hooksfixtures-and-hooks.md
Test datatest-data-management.md
Auth & loginauthentication.mdauth-flows.md
API testing (REST/GraphQL)api-testing.md
Visual regressionvisual-regression.md
Accessibilityaccessibility.md
Mobile & responsivemobile-and-responsive.md
Component testingcomponent-testing.md
Network mockingnetwork-mocking.mdwhen-to-mock.md
Forms & validationforms-and-validation.md
File uploads/downloadsfile-operations.mdfile-upload-download.md
Error & edge caseserror-and-edge-cases.md
CRUD flowscrud-testing.md
Drag and dropdrag-and-drop.md
Search & filter UIsearch-and-filter.md

Debugging & Fixing

ProblemGuide
General debugging workflowdebugging.md
Specific error messageerror-index.md
Flaky / intermittent testsflaky-tests.md
Common beginner mistakescommon-pitfalls.md

Framework Recipes

FrameworkGuide
Next.js (App Router + Pages Router)nextjs.md
React (CRA, Vite)react.md
Vue 3 / Nuxtvue.md
Angularangular.md

Migration Guides

FromGuide
Cypressfrom-cypress.md
Selenium / WebDriverfrom-selenium.md

Architecture Decisions

QuestionGuide
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

TopicGuide
GitHub Actionsci-github-actions.md
GitLab CIci-gitlab.md
CircleCI / Azure DevOps / Jenkinsci-other.md
Parallel execution & shardingparallel-and-sharding.md
Docker & containersdocker-and-containers.md
Reports & artifactsreporting-and-artifacts.md
Code coveragetest-coverage.md
Global setup/teardownglobal-setup-teardown.md
Multi-project configprojects-and-dependencies.md

Specialized Topics

TopicGuide
Multi-user & collaborationmulti-user-and-collaboration.md
WebSockets & real-timewebsockets-and-realtime.md
Browser APIs (geo, clipboard, permissions)browser-apis.md
iframes & Shadow DOMiframes-and-shadow-dom.md
Canvas & WebGLcanvas-and-webgl.md
Service workers & PWAservice-workers-and-pwa.md
Electron appselectron-testing.md
Browser extensionsbrowser-extensions.md
Security testingsecurity-testing.md
Performance & benchmarksperformance-testing.md
i18n & localizationi18n-and-localization.md
Multi-tab & popupsmulti-context-and-popups.md
Clock & time mockingclock-and-time-mocking.md
Third-party integrationsthird-party-integrations.md

CLI Browser Automation

What you're doingGuide
CLI browser interactionplaywright-cli/SKILL.md
Core commands (open, click, fill, navigate)core-commands.md
Network mocking & interceptionrequest-mocking.md
Running custom Playwright coderunning-custom-code.md
Multi-session browser managementsession-management.md
Cookies, localStorage, auth statestorage-and-auth.md
Test code generation from CLItest-generation.md
Tracing and debuggingtracing-and-debugging.md
Screenshots, video, PDFscreenshots-and-media.md
Device & environment emulationdevice-emulation.md
Complex multi-step workflowsadvanced-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.

Repository
zebbern/claude-code-guide
Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.