Playwright MCP: Serviço MCP de automação do navegador da Microsoft

Introdução geral

Dramaturgo MCP é uma ferramenta de código aberto desenvolvida pela Microsoft e hospedada no GitHub. Ela permite que os modelos de IA controlem diretamente os navegadores abrindo páginas da Web, clicando em elementos, inserindo texto etc. por meio do protocolo MCP (Model Context Protocol). A ferramenta é baseada na estrutura Playwright e é compatível com navegadores como Chromium, Firefox e WebKit. Seus principais recursos são a rapidez, a leveza e a geração de dados estruturados sem depender de capturas de tela ou modelos visuais. O Playwright MCP é particularmente adequado para aplicativos de IA que exigem interação com páginas da Web, como testes automatizados ou extração de dados. A documentação oficial é atualizada até março de 2025, e o projeto é ativo e popular entre os desenvolvedores.

Projeto com o mesmo nome:MCP Playwright: um serviço MCP que fornece operações de automação do navegador

Lista de funções

• Suporte ao controle do navegador: capacidade de abrir páginas da Web, navegar pelas páginas, clicar em elementos, etc.
• Gerar dados estruturados: dados de saída por meio de instantâneos de acessibilidade, sem necessidade de capturas de tela.
• São fornecidos dois modos: o modo Snapshot padrão e o modo Vision.
• Captura de tela e salvamento: você pode fazer uma captura de tela de uma página ou salvá-la como um arquivo PDF.
• Entrada e operação: suporta entrada de texto, pressionamento de teclas, arrastar e soltar e outras funções.
• Compatível com o modo headless: você pode executar o navegador em segundo plano sem exibir a interface.

Usando a Ajuda

O Playwright MCP é simples de instalar e usar. A seguir, há uma descrição detalhada de como instalar e operar essa ferramenta, incluindo os recursos específicos dos dois modos.

Processo de instalação

1. Preparação do ambiente
   Instale o Node.js primeiro (recomenda-se a versão LTS mais recente, por exemplo, v22). Verifique a versão com:

node -v

Se você não o tiver, visite o site oficial do Node.js para fazer o download e instalá-lo.

2. Instalação do Playwright MCP
   Execute o seguinte comando no terminal:

npm install -g @playwright/mcp

Ou simplesmente use a versão mais recente:

npx @playwright/mcp@latest

3. Iniciar o servidor
   Digite o comando para iniciar:

npx @playwright/mcp@latest

O padrão é o modo de cabeçalho (mostrando a janela do navegador). Se quiser usar o modo sem cabeçalho, adicione o parâmetro:

npx @playwright/mcp@latest --headless

4. Configuração do cliente AI
   Se a sua ferramenta de IA for compatível com MCP (por exemplo, alguns clientes de modelos grandes), você precisará editar o arquivo de configuração. Exemplo:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest", "--headless"]
}
}
}

Depois de salva, a IA poderá chamar o navegador por meio do MCP.

5. Configuração para ambientes sem monitores
   Em um ambiente Linux sem monitor, você pode usar o modo cliente-servidor. Comece executando-o em uma máquina com um monitor:

npx playwright run-server

O resultado mostrará um endereço WebSocket, como ws://localhost:port/. e, em seguida, adicionados à configuração do MCP:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Como usar os principais recursos

O Playwright MCP tem dois modos: o modo instantâneo e o modo visual. Eles são descritos separadamente a seguir.

Modo de instantâneo (padrão)

Esse modo opera com snapshots acessíveis, que são rápidos e estáveis. As ferramentas comumente usadas estão listadas abaixo:

1. Abrir a página

• Instruções:browser_navigate "https://example.com"
• Ação: O navegador abre o URL especificado.
• Saída: retorna o status de carregamento da página.

2. clicar em um elemento

• Instruções:browser_click "登录按钮" "ref123"
• Ação: Clique no instantâneo marcado com ref123 do elemento (é necessário citar e descrever o elemento).
• Observação: as referências são de dados de instantâneos.

3. entrada

• Instruções:browser_type "用户名输入框" "ref456" "myuser" true
• Operação: No ref456 na caixa de entrada e, em seguida, pressione Enter (true (indica o envio).

4. Salvar como PDF

• Instruções:browser_save_as_pdf
• Ação: Salva a página atual como um arquivo PDF.

5. tempo de espera

• Instruções:browser_wait 5
• Operação: Aguarde 5 segundos (máximo de 10 segundos).

padrão visual

preparação com --vision Parâmetros:

npx @playwright/mcp@latest --vision

Esse modelo opera com capturas de tela e coordenadas e é adequado para modelos visuais. Ferramentas comumente usadas:

1. Página de interceptação
   • Instruções:browser_screenshot
   • Ação: Gerar uma captura de tela da página atual.
2. Clique nas coordenadas
   • Instruções:browser_click 100 200
   • Ação: Clique nas coordenadas (100, 200).
3. operação de arrastar e soltar
   • Instruções:browser_drag 50 50 150 150
   • Ação: Arraste de (50, 50) para (150, 150).
4. entrada
   • Instruções:browser_type "hello" true
   • Ação: digite "hello" e pressione Enter.

Exemplo de fluxo de operação

Suponha que você queira fazer login no site:

1. Inicie o servidor:

npx @playwright/mcp@latest --headless

2. Abra a página de login:

• Instruções:browser_navigate "https://example.com/login"

3. Digite o nome de usuário e a senha (modo instantâneo):

• Instruções:browser_type "用户名" "ref1" "myuser" false
• Instruções:browser_type "密码" "ref2" "mypassword" true

4. Clique em Login (Modo Visual):

• Alternância de modos: reiniciar o servidor mais --vision
• Instruções:browser_click 300 400

5. Resultados da inspeção:

• Instruções:browser_snapshot(modo instantâneo) ou browser_screenshot(modo visual).

advertência

• O modo de instantâneo é mais confiável do que o modo visual, mas requer referências de elementos.
• O modelo visual é adequado para modelos de IA com coordenadas.
• O modo sem cabeçalho é adequado para tarefas em lote, e o modo com cabeçalho facilita a depuração.

cenário do aplicativo

1. Navegação na Web e preenchimento de formulários
   A IA abre automaticamente páginas da Web, preenche formulários e os envia, o que a torna adequada para registro em massa ou teste de login.
2. extração de dados
   Obtenha dados estruturados de páginas dinâmicas da Web, como preços ou avaliações.
3. teste automatizado
   Verifique se a página funciona corretamente, como cliques em botões ou saltos de página.
4. Interação com agentes inteligentes
   Permita que a IA opere o navegador para concluir tarefas complexas, como compras on-line.

QA

1. Qual é a diferença entre o modo instantâneo e o modo visual?
   O modo Snapshot opera com dados estruturados e é rápido e estável; o modo visual usa capturas de tela e coordenadas e é adequado para IA visual.
2. Quais navegadores são compatíveis?
   O Chromium, o Firefox e o WebKit são compatíveis.
3. Precisa escrever código?
   Não é necessário. Basta enviar um comando simples e a IA funcionará.