← ClaudeAtlas

using-playwrightlisted

Use when driving any web UI through the Playwright MCP -- logging into SSO-gated portals, filling Monaco or textarea editors, extracting page content, or operating internal tools via browser automation. Covers session/login handling, reliable text input, snapshot-vs-screenshot, and token-efficient extraction.
bim-ba/ai · ★ 0 · Testing & QA · score 73
Install: claude install-skill bim-ba/ai
# Skill: using-playwright ## Purpose Reliable, token-efficient browser automation via the Playwright MCP -- the generic substrate. Service-specific playbooks (per-service login flows, navigation patterns, specific UI quirks) live in a per-project skill (e.g. `using-<service>` with `references/<service>.md`); this skill stays tool-agnostic. ## Pre-checks (every session) 1. **Playwright MCP must be loaded THIS session** -- the tool server pins at session start. If `mcp__playwright__*` is absent, the session predates the MCP -> restart. 2. **Playwright runs its OWN browser session** -- the user's SSO login in their personal browser does NOT carry over. A persistent profile may keep you logged in across runs; verify, don't assume. ## Login handling (keep Playwright on the MAIN session) - Login pages need a human (SSO) -- do NOT hand Playwright to a subagent for a login flow. - Navigate to the portal, then **snapshot to check login state** (look for the user's avatar/name or real content vs a login/SSO redirect). - If already logged in (persistent profile) -- proceed; do NOT ask the user to log in. - If SSO-gated -- `AskUserQuestion` asking the user to log in manually in the Playwright window, then confirm via a fresh snapshot before driving. Do the navigate first so the login page is actually up. ## Input mechanics (the load-bearing part) - **Monaco editors** (SQL/YAML code editors): `browser_type`/`fill` FAIL (native-edit-context div) and char-typing triggers auto-indent