Playwright AI agents, all of them

mcp [options]           run the Playwright MCP server
cli                     run playwright cli commands from terminal
init-agents [options]   Initialize repository agents
init-skills [options]   Install Playwright agent skills

$ npx playwright init-agents --loop=claude

 playwright Using project "chromium" as a primary project
 specs/README.md - directory for test plans
 tests/seed.spec.ts - default environment seed file
 .claude/agents/playwright-test-generator.md - agent definition
 .claude/agents/playwright-test-healer.md - agent definition
 .claude/agents/playwright-test-planner.md - agent definition
 .mcp.json - mcp configuration
 Done.

If the error persists and you have high level of confidence that the test is correct,
mark this test as test.fixme() so that it is skipped during the execution.

Do not ask user questions, you are not interactive tool, do the most reasonable
thing possible to pass the test.

{
  "mcpServers": {
    "playwright-test": {
      "command": "npx",
      "args": ["playwright", "run-test-mcp-server"]
    }
  }
}

server     : {'name': 'Playwright Test Runner', 'version': '1.63.0'}
protocol   : 2024-11-05
tool count : 89

Running 1 test using 1 worker
### Paused at end of test. ready for interaction

### Page state
- Page URL: about:blank

import { test, expect } from '@playwright/test';

test.describe('Test group', () => {
  test('seed', async ({ page }) => {
    await page.goto('https://app.thetestingacademy.com/playwright/ttacart/');
  });
});

- generic [ref=e2]:
  - heading "TTACart" [level=1] [ref=e3]
  - generic [ref=e5]:
    - textbox "Username" [ref=e7]
    - textbox "Password" [ref=e9]
    - button "Login" [ref=e10] [cursor=pointer]

# TTACart Login

## Application Overview

TTACart is a demo storefront used by The Testing Academy. The landing page is a
login form with a username field, a password field and a Login button.

## Test Scenarios

### 1. Login

**Seed:** `tests/seed.spec.ts`

#### 1.1. Standard user can sign in

**File:** `tests/login/standard-user-can-sign-in.spec.ts`

**Steps:**
  1. Fill the Username field with "standard_user"
  2. Fill the Password field with "tta_secret"
  3. Click the "Login" button
    - expect: The inventory page is shown
    - expect: The page lists six products

intent : Click the "Login" button
target : [data-test="login-button"]

### Ran Playwright code
await page.locator('[data-test="login-button"]').click();
### Page
- Page URL: https://app.thetestingacademy.com/playwright/ttacart/inventory
- Page Title: TTACart - Products

# Steps

### Fill the Username field with "standard_user" and the Password field with "tta_secret"
await page.locator('[data-test="username"]').fill('standard_user');
await page.locator('[data-test="password"]').fill('tta_secret');

### Click the "Login" button
await page.locator('[data-test="login-button"]').click();

### The inventory page is shown
await expect(page.locator('[data-test="title"]')).toBeVisible();

# Best practices
- Do not improvise, do not add directives that were not asked for
- Use reliable locators from this log
- Use local variables for locators that are used multiple times
- NEVER! use page.waitForLoadState()
- NEVER! use page.waitForNavigation()
- NEVER! use page.waitForTimeout()
- NEVER! use page.evaluate()

### Result
Done
### Ran Playwright code
await expect(page.locator('body')).toMatchAriaSnapshot(`
  - list:
    - listitem: "Test.allTheThings() T-Shirt (Red)"
    - listitem: "TTA Bike Light"
    - listitem: "TTA Bolt T-Shirt"
    - listitem: "TTA Fleece Jacket"
    - listitem: "TTA Junior Tester Onesie"
    - listitem: "TTA Practice Backpack"
  `);

1 failed
  [chromium] > tests/login/standard-user-can-sign-in.spec.ts:7:3 > Login > Standard user can sign in

{ "ul": 0, "ol": 0, "li": 0, "article": 6,
  "[data-test=\"inventory-item-name\"]": 6 }

// expect: The page lists six products
const productNames = page.locator('[data-test="inventory-item-name"]');
await expect(productNames).toHaveText([
  'Test.allTheThings() T-Shirt (Red)',
  'TTA Bike Light',
  'TTA Bolt T-Shirt',
  'TTA Fleece Jacket',
  'TTA Junior Tester Onesie',
  'TTA Practice Backpack',
]);

Running 1 test using 1 worker
  1 passed (1.5s)

npx playwright init-agents --loop=claude
npx playwright init-agents --loop=vscode
npx playwright init-agents --loop=copilot
npx playwright init-agents --loop=codex
npx playwright init-agents --loop=opencode
npx playwright init-agents --loop=vscode-legacy

// .mcp.json                (Claude Code)
{ "mcpServers": { "playwright-test": { "command": "npx", "args": [...] } } }

// .vscode/mcp.json         (VS Code, Copilot)
{ "servers": { "playwright-test": { "type": "stdio", "command": "npx", "args": [...] } },
  "inputs": [] }

// opencode.json            (opencode)
{ "mcp": { "playwright-test": { "type": "local", "command": ["npx", ...], "enabled": true } } }

$ npx playwright init-skills --loop=claude

 Skill installed to `.claude/skills/playwright-cli`.
 Skill installed to `.claude/skills/playwright-component-testing`.
 Skill installed to `.claude/skills/playwright-trace`.

$ npx playwright cli open https://app.thetestingacademy.com/playwright/ttacart/
### Browser `default` opened with pid 82586.
### Ran Playwright code
await page.goto('https://app.thetestingacademy.com/playwright/ttacart/');

$ npx playwright cli snapshot
- textbox "Username" [ref=e7]
- textbox "Password" [ref=e9]
- button "Login" [ref=e10] [cursor=pointer]

$ npx playwright cli fill '[data-test="username"]' standard_user
$ npx playwright cli fill '[data-test="password"]' tta_secret

$ npx playwright cli click e10
### Ran Playwright code
await page.locator('[data-test="login-button"]').click();
### Page
- Page URL: .../ttacart/inventory
- Page Title: TTACart - Products

$ npx playwright cli find "Fleece"
### Result
Found 4 matches for "Fleece":

$ npx playwright cli close
Browser 'default' closed

export declare const auto: (
  task: string,
  config: { page: Page; test?: Test },
  options?: StepOptions
) => Promise<any>;

type StepOptions = {
  debug?: boolean;
  model?: string;
  openaiApiKey?: string;
  openaiBaseUrl?: string;
};

import { test, expect } from '@playwright/test';
import { auto } from 'auto-playwright';

test('checkout', async ({ page }) => {
  await page.goto('https://app.thetestingacademy.com/playwright/ttacart/');

  // deterministic where it can be
  await page.locator('[data-test="username"]').fill('standard_user');
  await page.locator('[data-test="password"]').fill('tta_secret');
  await page.locator('[data-test="login-button"]').click();

  // and a model only for the step that keeps moving
  await auto('add the fleece jacket to the cart', { page, test });
});

export declare const ai: (
  task: string | string[],
  config: { page, test },
  options?: ExecutionOptions & StepOptions
) => Promise<any>;

export declare const aiFixture: (test) => { ai: ... };

type ExecutionOptions = {
  parallelism?: number;      // default 10
  failImmediately?: boolean;
};

Stagehand.create(input: StagehandCreateOptions): Promise<Stagehand>

stagehand.act(instruction: string, options?): Promise<ActResult>
stagehand.observe(instruction?: string, options?): Promise<ObserveResult>
stagehand.extract<Schema extends z.ZodType>(
  instruction: string, schema: Schema, options?
): Promise<ExtractResult<Schema>>
stagehand.close(): Promise<void>