Playwright E2e Skill

Playwright E2E Testing Skill

Purpose: Browser automation via accessibility tree + E2E test patterns MCP Server: playwright (user-level) Created: December 2025

When to Use

• Automate web interactions (navigate, click, type)
• Debug UI issues with live browser inspection
• Run E2E test suites
• Validate page accessibility and structure
• Visual regression testing
• Mobile viewport testing

Quick Start

Setup

# Install MCP (WSL - use chromium flag)
claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest --browser chromium

# Install test framework
npm install -D @playwright/test
npx playwright install chromium

Live Debugging

1. browser_navigate("http://localhost:8080/dashboard")
2. browser_snapshot()           # Get page structure
3. browser_console_messages()   # Check JS errors
4. browser_network_requests()   # Check API failures
5. browser_click(element="Button", ref="e15")

Run Tests

npx playwright test                    # All tests
npx playwright test --headed           # Visible browser
npx playwright test --debug            # Step through
npx playwright test --project=chromium # Single browser

Key Tools

Best Practices

1. Always Snapshot After Navigate

browser_navigate(url="https://site.com")
browser_snapshot()  # Ensures page loaded
browser_click(element="Button", ref="e15")

2. Use Accessibility Labels

# WRONG: browser_click(element="#btn-submit")
# CORRECT: browser_click(element="Submit button", ref="e15")

3. Check Console for Errors

browser_console_messages(level="error")

4. Use Network Requests First

browser_network_requests()  # Catch API failures before UI debug

5. Test Mobile Viewport

browser_resize(width=375, height=667)
browser_snapshot()

Test Patterns

Auth Bypass

test.beforeEach(async ({ page }) => {
  await page.addInitScript(() => {
    localStorage.setItem(
      "authToken",
      JSON.stringify({
        token: "test-token",
        user: { id: 1, username: "test" },
      }),
    );
  });
});

Visible Text Only

// Use innerText (not textContent) to exclude script content
const content = await page.evaluate(() => document.body.innerText);
expect(content).not.toContain("synthetic");

API Response Capture

const apiResponses = [];
page.on("response", (response) => {
  if (response.url().includes("/api/")) {
    apiResponses.push({ url: response.url(), status: response.status() });
  }
});

Failed Attempts

Troubleshooting

Related

• testing-workflow-skill - Test selection decision tree
• visual-regression-testing-skill - Screenshot comparison