9.5Strategy 4: Phased Framework Adoption

Phase 1: CLI + Skill Only (Week 1-2)

Start with the simplest approach:

npm install -g @playwright/cli@latest
playwright-cli install            # workspace: .playwright-cli/
playwright-cli install --skills   # SKILL.md for your coding agent

Write your first flows as snapshot-then-refs sequences:

# Simple test flow
playwright-cli open https://app.example.com/login
playwright-cli snapshot                     # read YAML → refs
playwright-cli fill e3 "test@example.com"
playwright-cli fill e4 "password"
playwright-cli click e5
playwright-cli snapshot                     # verify: "Welcome" heading present

Phase 2: Add MCP Where the CLI Can't Go (Week 3-4)

When flows must also run from MCP-native or sandboxed surfaces:

• Add Playwright MCP: claude mcp add playwright -- npx @playwright/mcp@latest (it's published to the official MCP Registry each release)
• Route only those environments through it; keep everything with a filesystem on the CLI
• Since Playwright 1.59, browser.bind() can even point both transports at one shared browser

Phase 3: Intelligent Routing (Week 5+)

Build routing logic that chooses the right transport:

• Agent has a filesystem → CLI, always
• Sandboxed surface → MCP
• CI runs → CLI only (cost optimization), traces archived
• Failures → re-snapshot first; escalate to the healer agent workflow