@noanswer/context-compose/assets/mcps/playwright.yaml

Orchestrate complex AI interactions with Context Compose. A powerful CLI and server for building, validating, and managing context for large language models using the Model Context Protocol (MCP).

version: 1
kind: mcp
name: playwright
description: Browser automation and end-to-end testing with Playwright
prompt: |
  Create robust end-to-end tests and browser automation scripts.
  Use Playwright's powerful features for reliable selection,
  asynchronous operation handling, and comprehensive testing,
  including accessibility and visual regression checks.
enhanced-prompt: |
  # 🎭 Playwright E2E Testing

  ## 1. Test Structure
  A standard test involves setup, execution, and assertion.
  ```typescript
  import { test, expect, Page } from '@playwright/test';

  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('should display welcome message', async ({ page }) => {
    await expect(page.getByText('Welcome')).toBeVisible();
  });
  ```

  ## 2. Robust Selectors
  Prefer user-facing attributes for selectors to avoid brittle tests.
  ```typescript
  // Good: Role, text, or test ID based
  await page.getByRole('button', { name: 'Submit' }).click();
  await page.getByText('Success').waitFor();
  await page.getByTestId('user-profile').click();

  // Avoid: Brittle selectors tied to implementation
  // await page.locator('div > .primary-button').click();
  ```

  ## 3. Handling Asynchronicity
  Playwright's auto-waiting simplifies async handling.
  ```typescript
  // Wait for an element to appear
  await expect(page.getByTestId('results')).toBeVisible();

  // Wait for a network response
  await page.waitForResponse('**/api/users');
  ```

  ## 4. Page Object Model (POM)
  Encapsulate page logic in classes for reusability.
  ```typescript
  class LoginPage {
    constructor(private page: Page) {}
    async login(user, pass) {
      await this.page.getByLabel('Username').fill(user);
      await this.page.getByLabel('Password').fill(pass);
      await this.page.getByRole('button', { name: 'Log in' }).click();
    }
  }
  ```

  ## 5. Advanced Validation
  - **Visual Testing:** `await expect(page).toHaveScreenshot('landing.png');`
  - **Accessibility:** `expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);`

  **🎯 Result:** Reliable, maintainable E2E tests with comprehensive validation coverage.