Automação de Navegador com Claude + Playwright MCP: Por que Snapshots de Acessibilidade Superam Screenshots

Se você já tentou a automação "IA clica na tela", sabe que a parte instável geralmente é o passo de visão. O servidor MCP do Playwright toma um caminho diferente: ele fornece ao modelo a árvore de acessibilidade da página, não uma captura de tela.

Por que isso é importante

• Determinístico: cada elemento interativo recebe uma referência estável, então o agente mira "este botão" em vez de adivinhar a partir de pixels.
• Eficiente em tokens: uma captura é ~200-400 tokens contra milhares para um despejo de DOM ou captura de tela.
• Nenhum modelo de visão é necessário.

Instalação (Código Claude)

claude mcp add playwright npx @playwright/mcp@latest

Ele é registrado no escopo do usuário, executa como um subprocesso local de stdio e usa o Chromium com interface gráfica por padrão. Claude Desktop, Cursor, VS Code e Windsurf também funcionam.

Onde brilha

Fluxos de formulários repetitivos, extração de dados e testes E2E/regressão que você pode descrever em linguagem simples. Mantenha browser_snapshot como o padrão e utilize browser_screenshot apenas quando precisar de uma verificação visual.

Limitações

Ele controla um navegador local real, e elementos fora da árvore de acessibilidade (canvas, widgets personalizados) são mais difíceis. Mantenha um humano no loop para qualquer coisa sensível.

Tags: ai, webdev, programação, testes

Divulgação: Eu publico Pointchecknote; um guia mais completo está aqui: https://pointchecknote.com/en/posts/2026-08-05-playwright-mcp-claude/