22. Playwright CLI with Claude Code

Skills.md for Playwright

Create a Skills.md file that teaches Claude how to write Playwright tests:

# Playwright Testing Skills

## Test Structure
- Use `@playwright/test` framework
- Import: `import { test, expect } from '@playwright/test'`
- Use async/await for all browser interactions

## Locator Strategy (in priority order)
1. `getByRole()` — accessible locators
2. `getByLabel()` — form inputs
3. `getByTestId()` — data-testid attributes
4. `getByText()` — visible text content
5. `locator()` — CSS selectors (last resort)

## Assertions
- `await expect(page).toHaveTitle()`
- `await expect(locator).toBeVisible()`
- `await expect(locator).toHaveText()`
- `await expect(locator).toHaveValue()`

## Patterns
- Use Page Object model for reusable components
- Use `page.route()` for network mocking
- Use `test.use({ storageState })` for authentication

Claude Code Demo

# Example Claude interaction
# User: "Write a Playwright test for logging into SauceDemo"

# Claude (using Skills.md context):
# Let me write a test following the established patterns...

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

test('login to SauceDemo', async ({ page }) => {
  await page.goto('https://www.saucedemo.com');
  await page.getByTestId('username').fill('standard_user');
  await page.getByTestId('password').fill('secret_sauce');
  await page.getByTestId('login-button').click();
  await expect(page.getByTestId('inventory-container')).toBeVisible();
});

AI Agent Demo: Test Generation

# 1. Claude reads Skills.md to understand conventions
# 2. User describes a test scenario in natural language
# 3. Claude generates Playwright code following project patterns
# 4. User runs the test with `npx playwright test`
# 5. If test fails, Claude reads the error and fixes it

# CLI integration
claude "Generate a Playwright test for searching products on example.com"