hivellm/Playwright

<!-- PLAYWRIGHT:START -->

Playwright MCP Instructions

CRITICAL: Use MCP Playwright for automated browser testing and web automation.

Core Operations

Navigation & Screenshots

await playwright.navigate({ url: "https://example.com" });
await playwright.takeScreenshot({ fullPage: true, filename: "page.png" });

Interaction

// Click
await playwright.click({ element: "Submit Button", ref: "button[type='submit']" });

// Type
await playwright.type({ element: "Search", ref: "#search", text: "query" });

// Fill form
await playwright.fillForm({
  fields: [
    { name: "Email", type: "textbox", ref: "#email", value: "[email protected]" },
    { name: "Password", type: "textbox", ref: "#password", value: "secret" }
  ]
});

DOM & Monitoring

// Get accessibility tree
const snapshot = await playwright.snapshot();

// Console errors
const errors = await playwright.getConsoleMessages({ onlyErrors: true });

// Network requests
const requests = await playwright.getNetworkRequests();

Common Patterns

Login Flow

1. navigate to login page
2. fillForm with credentials
3. click submit button
4. waitFor dashboard text
5. verify success via snapshot

Error Detection

const errors = await playwright.getConsoleMessages({ onlyErrors: true });
if (errors.length > 0) {
  await playwright.takeScreenshot({ filename: "error-state.png" });
}

Best Practices

✅ DO:

• Wait for specific conditions (not time delays)
• Use descriptive element names
• Handle dialogs (handleDialog)
• Check console errors after actions
• Take screenshots at critical points

❌ DON'T:

• Use hard-coded delays
• Use generic element selectors
• Ignore console errors
• Use relative file paths (uploads)

Configuration

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

<!-- PLAYWRIGHT:END -->