About

Imported from personamanagmentlayer/pcl (stdlib/qa/playwright-expert/SKILL.md). Install upstream with npx skills add personamanagmentlayer/pcl --skill playwright-expert. Copyright stays with the author.

Playwright Expert

Name: playwright-expert
Author: personamanagmentlayer

Core Concepts

Playwright Framework

Cross-Browser - Chromium, Firefox, WebKit support
Auto-Waiting - Smart waits for elements and network
Browser Contexts - Isolated browser sessions
Page Objects - Organize test code
Fixtures - Reusable test setup
Trace Viewer - Visual debugging

Test Organization

Test Suites - Grouping related tests
Hooks - beforeEach, afterEach, beforeAll, afterAll
Annotations - @skip, @only, @slow, @fail
Tags - Filter and organize tests
Parallelization - Concurrent test execution
Retries - Automatic retry on failure

Advanced Features

Network Interception - Mock API responses
Video Recording - Capture test execution
Screenshots - Visual verification
Code Generation - Record and generate tests
Accessibility Testing - Built-in a11y checks
Mobile Emulation - Test responsive designs

Best Practices

Test Organization

Use descriptive test names
Group related tests in describe blocks
Use page object model for maintainability
Create reusable fixtures
Keep tests independent
Avoid test interdependencies

Selectors

Prefer user-facing attributes (text, role, label)
Use data-testid for complex elements
Avoid CSS selectors tied to styling
Use getByRole for accessibility
Chain locators for specificity
Use nth() judiciously

Assertions

Use specific expect matchers
Wait for conditions before asserting
Use soft assertions for multiple checks
Provide meaningful error messages
Test both positive and negative cases
Verify visual changes with screenshots

Performance

Run tests in parallel
Use browser context for isolation
Reuse authentication state
Mock external dependencies
Minimize navigation between pages
Use API calls for setup/teardown

Anti-Patterns

Common Mistakes

Using arbitrary waits (page.waitForTimeout)
Not handling network conditions
Coupling tests to implementation details
Missing cleanup in afterEach
Too many assertions in one test
Hard-coded test data

Selector Issues

Using XPath excessively
Relying on CSS class names
Not using accessible selectors
Fragile selectors that break easily
Over-specific selectors
Missing data-testid attributes

Test Design Problems

Tests depending on execution order
Shared state between tests
Testing too much in one test
Not testing edge cases
Missing error scenarios
No retry strategy

Reference Documentation

Detailed material lives alongside this skill and is read on demand:

Implementation Examples — Basic Test Structure, Page Object Model, Custom Fixtures, API Testing and Mocking, Visual Testing and Debugging, Configuration (playwright.config.ts)

Resources

Official Documentation

Playwright Documentation - Complete guide
API Reference - API docs
Best Practices - Guidelines
Trace Viewer - Debugging tool

Learning Resources

Playwright YouTube Channel - Video tutorials
Playwright Examples - Code samples
Playwright Discord - Community chat
Awesome Playwright - Curated resources

Tools & Extensions

VS Code Extension - IDE integration
Test Generator - Record tests
Playwright Inspector - Debug tool
Trace Viewer - Visual debugger

Community Resources

GitHub Discussions - Q&A
Stack Overflow - Community help
Playwright Blog - Updates and articles
Twitter @playwrightweb - News and tips

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/personamanagmentlayer-pcl-playwright-expert/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

personamanagmentlayer-pcl-playwright-expert.ocm.jsonjson

{
  "ocm": "1",
  "id": "personamanagmentlayer-pcl-playwright-expert",
  "kind": "skill",
  "name": "playwright-expert",
  "description": "Expert in Playwright E2E testing framework, auto-waiting mechanisms, test generation, trace viewer, and CI/CD integration. Use when the user mentions testing, end-to-end tests, QA, automation, end-to-end testing, or test automation, or when the task involves Playwright Framework, Test Organization, Advanced Features, or Basic Test Structure.",
  "publisher": "personamanagmentlayer",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "testing",
      "e2e",
      "playwright",
      "qa",
      "automation",
      "e2e-testing",
      "test-automation",
      "browser-testing",
      "trace-viewer"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Expert in Playwright E2E testing framework, auto-waiting mechanisms, test generation, trace viewer, and CI/CD integration. Use when the user mentions testing, end-to-end tests, QA, automation, end-to-end testing, or test automation, or when the task involves Playwright Framework, Test Organization, Advanced Features, or Basic Test Structure."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/personamanagmentlayer/pcl",
      "path": "stdlib/qa/playwright-expert/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/personamanagmentlayer/pcl/blob/HEAD/stdlib/qa/playwright-expert/SKILL.md",
      "key": "personamanagmentlayer/pcl/stdlib/qa/playwright-expert/SKILL.md"
    },
    "allowed_tools": [
      "Read",
      "Write",
      "Edit",
      "Bash",
      "Grep",
      "Glob"
    ]
  },
  "instructions": "# Playwright Expert\n\n## Core Concepts\n\n### Playwright Framework\n\n- **Cross-Browser** - Chromium, Firefox, WebKit support\n- **Auto-Waiting** - Smart waits for elements and network\n- **Browser Contexts** - Isolated browser sessions\n- **Page Objects** - Organize test code\n- **Fixtures** - Reusable test setup\n- **Trace Viewer** - Visual debugging\n\n### Test Organization\n\n- **Test Suites** - Grouping related tests\n- **Hooks** - beforeEach, afterEach, beforeAll, afterAll\n- **Annotations** - @skip, @only, @slow, @fail\n- **Tags** - Filter and organize tests\n- **Parallelization** - Concurrent test execu",
  "cost": {
    "context_tokens": 1068
  }
}

Fetch it by URL: GET /api/v1/registry/personamanagmentlayer-pcl-playwright-expert/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.