Playwright Pro

Automate Playwright operations via Composio's Rube MCP.

Install

npx promptshop add playwright-pro

Details

What This Skill Does

Playwright Pro is a production-grade testing toolkit designed for AI coding agents using Playwright. It provides commands to initialize Playwright, generate tests from various sources, review tests for quality, fix failing tests, and migrate from other testing frameworks. This skill aims to streamline and enhance Playwright testing workflows.

When to Use

Set up Playwright in a new project. Generate tests from user stories or URLs. Review tests for anti-patterns and coverage. Diagnose and fix failing tests. Migrate from Cypress or Selenium. Analyze test coverage.

Key Features

Offers commands to scaffold Playwright configuration and CI. Generates tests from user stories, URLs, or components. Reviews tests for locator anti-patterns and missing assertions. Diagnoses and repairs failing or flaky tests. Provides tools for migrating from other frameworks. Integrates with TestRail and BrowserStack.

Manual Installation

Manual installationView Full Skill ContentThe complete markdown content that gets installedPlaywright Pro

Production-grade Playwright testing toolkit for AI coding agents.

Available Commands

When installed as a Claude Code plugin, these are available as /pw: commands:

Command	What it does
/pw:init	Set up Playwright — detects framework, generates config, CI, first test
/pw:generate	Generate tests from user story, URL, or component
/pw:review	Review tests for anti-patterns and coverage gaps
/pw:fix	Diagnose and fix failing or flaky tests
/pw:migrate	Migrate from Cypress or Selenium to Playwright
/pw:coverage	Analyze what's tested vs. what's missing
/pw:testrail	Sync with TestRail — read cases, push results
/pw:browserstack	Run on BrowserStack, pull cross-browser reports
/pw:report	Generate test report in your preferred format

Quick Start Workflow

The recommended sequence for most projects:

/pw:init → scaffolds config, CI pipeline, and a first smoke test /pw:generate → generates tests from your spec or URL /pw:review → validates quality and flags anti-patterns ← always run after generate /pw:fix <test> → diagnoses and repairs any failing/flaky tests ← run when CI turns red

Validation checkpoints: After /pw:generate — always run /pw:review before committing; it catches locator anti-patterns and missing assertions automatically. After /pw:fix — re-run the full suite locally (npx playwright test) to confirm the fix doesn't introduce regressions. After /pw:migrate — run /pw:coverage to confirm parity with the old suite before decommissioning Cypress/Selenium tests.

Example: Generate → Review → Fix

1. Generate tests from a user story

/pw:generate "As a user I can log in with email and password"

Generated: tests/auth/login.spec.ts → Playwright Pro creates the file using the auth template.

Review the generated tests /pw:review tests/auth/login.spec.ts

→ Flags: one test used page.locator('input[type=password]') — suggests getByLabel('Password') → Fix applied automatically.

Run locally to confirm npx playwright test tests/auth/login.spec.ts --headed
If a test is flaky in CI, diagnose it /pw:fix tests/auth/login.spec.ts → Identifies missing web-first assertion; replaces waitForTimeout(2000) with expect(locator).toBeVisible()

Golden Rules

getByRole() over CSS/XPath — resilient to markup changes Never page.waitForTimeout() — use web-first assertions expect(locator) auto-retries; expect(await locator.textContent()) does not Isolate every test — no shared state between tests baseURL in config — zero hardcoded URLs Retries: 2 in CI, 0 locally Traces: 'on-first-retry' — rich debugging without slowdown Fixtures over globals — test.extend() for shared state One behavior per test — multiple related assertions are fine Mock external services only — never mock your own app

Locator Priority

getByRole() — buttons, links, headings, form elements getByLabel() — form fields with labels getByText() — non-interactive text getByPlaceholder() — inputs with placeholder getByTestId() — when no semantic option exists page.locator() — CSS/XPath as last resort

What's Included

9 skills with detailed step-by-step instructions 3 specialized agents: test-architect, test-debugger, migration-planner 55 test templates: auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, notifications, API, accessibility 2 MCP servers (TypeScript): TestRail and BrowserStack integrations Smart hooks: auto-validate test quality, auto-detect Playwright projects 6 reference docs: golden rules, locators, assertions, fixtures, pitfalls, flaky tests Migration guides: Cypress and Selenium mapping tables

Integration Setup

TestRail (Optional)

export TESTRAIL_URL="https://your-instance.testrail.io" export TESTRAIL_USER="your@email.com" export TESTRAIL_API_KEY="your-api-key"

BrowserStack (Optional)

export BROWSERSTACK_USERNAME="your-username" export BROWSERSTACK_ACCESS_KEY="your-access-key"

Quick Reference

See reference/ directory for: golden-rules.md — The 10 non-negotiable rules locators.md — Complete locator priority with cheat sheet assertions.md — Web-first assertions reference fixtures.md — Custom fixtures and storageState patterns common-pitfalls.md — Top 10 mistakes and fixes flaky-tests.md — Diagnosis commands and quick fixes

See templates/README.md for the full template index. Playwright Pro