Skip to content
LiveNew tools this week
Submit
AIMarketly
mcp-playwright logo

MCP Skill: Playwright MCP (UI Verification)

mcp-playwright

Use the Playwright MCP server (@playwright/mcp) for browser-driven verification, screenshots, console logs, and UI flow validation; use when debugging or validating Angular UI behavior beyond unit tests.

NeverSight/skills_feed0installs213starsProductivity & Planning

SKILL.md

Full skill instructions

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.
  1. Regression capture
  • Take before/​after screenshots for a single screen change.
  1. Console hygiene
  • Collect browser console errors/​warnings for a page.
  1. Accessibility spot-check
  • Verify keyboard focus order for critical controls.

Prompt Templates

  • "Open <url> and verify <expected UI>. Collect console errors and take a full-page screenshot."
  • "Run a quick flow: <steps>. 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.