test-web-ui

Web Tester Skill

Transforms any website or project into a structured QA run: Discover → Plan → Execute → Report

---

Overview of Phases

Phase 1 → DISCOVERY   : Explore the site, understand its purpose and features
Phase 2 → USE CASES   : Generate end-user use case list
Phase 3 → TEST PLAN   : Convert use cases into concrete, executable test cases
Phase 4 → EXECUTION   : Run tests with Playwright, capture screenshots
Phase 5 → REPORT      : Compile HTML + Markdown report with all results

---

Choosing Your Execution Tool

Pick the first option that works in your environment:

Option 1: Playwright MCP Tools (recommended)

If Playwright MCP tools are available (e.g., mcp__plugin_playwright_playwright__*), use them — they are the fastest and most token-efficient option (~2.8x faster than CLI, fewer tool calls needed since each MCP call does more work):

browser_navigate → navigate to URL
browser_snapshot → get page state and element refs
browser_take_screenshot → capture screenshots
browser_click → click elements
browser_type → type into inputs
browser_evaluate → run JS assertions
browser_resize → test mobile viewports
browser_console_messages → check for JS errors

Option 2: Playwright CLI

The @playwright/cli is a CLI designed for coding agents. Use it when MCP tools are not available. Install if needed:

npm install -g @playwright/cli@latest

Key commands for QA testing:

# Open a page
playwright-cli open https://example.com

# Take a snapshot (returns element refs for interaction)
playwright-cli snapshot

# Screenshot the page
playwright-cli screenshot

# Click, fill forms, type
playwright-cli click <ref>
playwright-cli fill <ref> "text value"
playwright-cli type "search query"
playwright-cli press Enter

# Mobile viewport testing — use a named session with mobile config
playwright-cli -s=mobile open https://example.com
# (configure viewport in .playwright/cli.config.json)

# Check console errors via snapshot output
playwright-cli snapshot

# Close when done
playwright-cli close