playwright-skill

50+ production-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers 10 golden rules including resilient locator selection ( getByRole() first), web-first assertions with auto-retry, fixture-based test isolation, and CI/CD best practices across GitHub Actions, GitLab, CircleCI, Azure, and Jenkins Includes framework-specific recipes for React, Next.js, Vue, Angular, and migration guides from Cypress and Selenium with TypeScript and JavaScript examples throughout Addresses specialized topics: network mocking, authentication flows, visual regression, accessibility audits, multi-user scenarios, WebSockets, iframes, Shadow DOM, service workers, and browser extensions Provides CLI browser automation guides for session management, request interception, storage handling, and complex multi-step workflows beyond traditional test writing

INSTALLATION
npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-skill
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

  • **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 assertionsexpect(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.

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card