MCP Skill: Playwright MCP (UI Verification)

Scope

Use the MCP server configured as microsoft/playwright-mcp in .vscode/mcp.json to run browser automation tasks (navigation, screenshots, DOM checks) during debugging and validation.

Preconditions

• Ensure .vscode/mcp.json contains microsoft/playwright-mcp.
• Ensure the app is running (typically pnpm run start) if you are testing locally.

Operating Rules

• Prefer resilient selectors: data-testid, ARIA roles/labels.
• Avoid brittle CSS selectors and deep DOM coupling.
• Capture evidence for regressions: screenshots + console errors.

Typical Workflows

1. Smoke check a route

• Navigate to a URL and assert primary heading/landmark is visible.

2. Regression capture

• Take before/after screenshots for a single screen change.

3. Console hygiene

• Collect browser console errors/warnings for a page.

4. Accessibility spot-check

• Verify keyboard focus order for critical controls.

Prompt Templates

• "Open and verify . Collect console errors and take a full-page screenshot."
• "Run a quick flow: . Use role-based selectors and fail fast with screenshots on error."

Related Repo Guidance

• See .github/skills/e2e-playwright for test organization and selector rules.