npm install -g @playwright/cli@latest
playwright-cli --help

npm install -g @playwright/cli@latest --force

> Use playwright skills to test https://demo.playwright.dev/todomvc/.
  Take screenshots for all successful and failing scenarios.

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

/plugin marketplace add microsoft/playwright-cli
/plugin install playwright-cli

mkdir -p .claude/skills/playwright-cli
curl -o .claude/skills/playwright-cli/SKILL.md \
  https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli/SKILL.md

.claude-plugin/
└── marketplace.json                     # Plugin marketplace catalog

plugins/
└── playwright-cli-agents/
    ├── .claude-plugin/
    │   └── plugin.json                  # Plugin manifest
    ├── agents/                          # Specialized subagents
    │   ├── playwright-cli-planner.md    # Explores pages → creates test plans
    │   ├── playwright-cli-generator.md  # Executes plans → writes test code
    │   └── playwright-cli-healer.md     # Debugs & fixes failing tests
    └── skills/
        ├── playwright-cli/              # Browser automation via CLI
        │   └── SKILL.md                 # playwright-cli command reference
        └── e2e/                         # Shared domain knowledge
            ├── SKILL.md                 # Core skill (auto-injected into agents)
            ├── examples/
            │   ├── page-object-model.md # Page Object class templates
            │   └── e2e-tests.md         # Integration test patterns
            └── references/
                ├── component-exploration.md # How to explore UIs via playwright-cli
                └── api-mocking.md       # Deterministic test data setup

 You describe what to test
          │
          ▼
   ┌─────────────┐
   │   Planner    │  Explores the page, identifies elements,
   │   (green)    │  writes a markdown test plan
   └──────┬──────┘
          │ test plan
          ▼
   ┌─────────────┐
   │  Generator   │  Drives browser via playwright-cli, records actions,
   │   (blue)     │  generates Page Object + spec files
   └──────┬──────┘
          │ test files
          ▼
   ┌─────────────┐
   │   Healer     │  Runs tests, catches failures,
   │   (red)      │  auto-fixes locators & timing
   └─────────────┘

__tests__/
├── e2e/
│   ├── pages/                # Page Object classes
│   │   └── login-page.ts     #   All locators + interaction methods
│   └── login.spec.ts         # Test specs using Page Objects
└── constants/
    └── test-data.ts          # Reusable data values only

// __tests__/e2e/pages/login-page.ts
export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByRole('textbox', { name: 'Email' });
    this.passwordInput = page.getByRole('textbox', { name: 'Password' });
    this.loginButton = page.getByRole('button', { name: 'Login' });
  }

  async login(email: string, password: string): Promise<void> {
    await this.emailInput.waitFor({ state: 'visible' });
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

// __tests__/e2e/login.spec.ts
test.describe('User Login', () => {
  test('Valid Login @visual', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login(TEST_DATA.USER.EMAIL, TEST_DATA.USER.PASSWORD);
    await loginPage.waitForDashboard();
    await expect(loginPage.userName.locator('..')).toHaveScreenshot('dashboard-loaded.png');
  });
});

npm install -g @playwright/cli@latest

# Add the marketplace
/plugin marketplace add yusuftayman/playwright-cli-agents

# Install the plugin
/plugin install playwright-cli-agents@playwright-cli-agents

# Clone this repo
git clone https://github.com/yusuftayman/playwright-cli-agents.git

# Copy agents and skills into your project
cp -r playwright-cli-agents/plugins/playwright-cli-agents/agents/* your-project/.claude/agents/
cp -r playwright-cli-agents/plugins/playwright-cli-agents/skills/* your-project/.claude/skills/

You: "Create a test plan for https://myapp.com/settings"
→ Claude spawns the Planner agent

You: "Generate Playwright tests for the user profile page"
→ Claude spawns the Generator agent

You: "The checkout test is failing, fix it"
→ Claude spawns the Healer agent

You: "Use the playwright-cli-planner agent to explore https://myapp.com/dashboard"

---
name: your-agent-name
description: When to use this agent...
tools: Glob, Grep, Read, Write, Bash
model: sonnet
color: purple
skills:
  - e2e
  - playwright-cli
---

Your agent instructions here...