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

Introdução geral

O MCP-Playwright é uma ferramenta de código aberto desenvolvida pela ExecuteAutomation e hospedada no GitHub. Ela é baseada no Playwright e no Modelo de protocolo de contexto (MCP), com o objetivo de permitir que os usuários implementem a automação do navegador e os testes de API por meio de comandos de linguagem natural. Essa ferramenta é adequada tanto para desenvolvedores quanto para testadores e pode conectar Claude e outros grandes modelos de linguagem (LLMs) para controlar ações do navegador, como abrir uma página da Web, clicar em um botão, preencher um formulário, fazer uma captura de tela ou enviar uma solicitação de API por meio de texto simples. Ele não exige que os usuários escrevam códigos complexos, reduzindo o limite de uso. O projeto está em fase de desenvolvimento, a função está sendo aprimorada gradualmente e a comunidade está convidada a contribuir com o código.

Lista de funções

• Automação do navegadorSuporte para navegar até uma página da Web específica, clicar em um elemento, preencher uma caixa de entrada, selecionar uma opção suspensa, etc.
• Teste de APIPode enviar solicitações GET, POST, PUT, PATCH, DELETE e inspecionar a resposta.
• função de captura de telaImagem: A página da Web inteira ou uma área específica pode ser interceptada e salva como uma imagem.
• Executar JavaScriptJavaScript: a capacidade de executar código JavaScript personalizado no navegador.
• Obtendo o registro do consoleErro: extrai informações de erro, aviso ou depuração do navegador.
• controle de linguagem naturalConexão com modelos como o Claude por meio do protocolo MCP e opera com comandos de texto.

Usando a Ajuda

O MCP-Playwright requer instalação e configuração simples para funcionar. Abaixo estão as etapas detalhadas para ajudá-lo a começar rapidamente.

Processo de instalação

Para executar essa ferramenta, você precisa preparar o ambiente e instalar os componentes relevantes. Veja abaixo os detalhes de como fazer isso:

1. Verificação do ambiente
   • Certifique-se de que seu computador tenha o Node.js instalado (recomenda-se a versão estável mais recente).
   • É necessário um cliente habilitado para MCP, como o Claude Desktop Client.
   • Instale o Git para fazer download do código (opcional).
2. Download do projeto (instalação manual opcional)
   • Abra um terminal e execute-o:

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • Vá para o catálogo de projetos:

     cd mcp-playwright
     

3. Instalação de dependências
   • Execute no diretório do projeto:

     npm install
     

   • Isso instalará o Playwright e outros componentes necessários.
4. Instale diretamente via npm (recomendado)
   • Se você não quiser fazer o download manualmente, basta executá-lo:

     npm install -g @executeautomation/playwright-mcp-server
     

   • Isso instalará o servidor globalmente.
5. Instalação via Smithery (para o Claude Desktop)
   • Execute o seguinte comando para instalá-lo e configurá-lo automaticamente:

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Configuração do Claude Desktop
   • Localize o arquivo de configuração do Claude Desktop (geralmente na pasta Claude, no diretório do usuário, sob o nome de arquivo claude-desktop-config.json).
   • Adicione o seguinte:

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • Depois de salvar e reiniciar o Claude Desktop, o botão "Attach from MCP" aparecerá na interface, indicando que a configuração foi bem-sucedida.

Como usar

Depois de instalado, você pode usar comandos de linguagem natural para controlar o navegador ou testar a API.

Automação do navegador

• Abrir a página
  Entre no Claude Desktop:

打开网页 https://example.com

A ferramenta inicia o navegador e carrega a página.

• clicar em um elemento
  Entrada:

点击页面上的登录按钮，使用选择器 #loginBtn

Ele encontrará a ID loginBtn e clique nele.

• Preencha o formulário
  Entrada:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

A ferramenta preenche o conteúdo automaticamente.

• captura de tela (computação)
  Entrada:

截取整个网页，保存为 "page.png"

A captura de tela é salva no diretório atual.

• Executando JavaScript
  Entrada:

在浏览器中执行 JavaScript 代码 "document.title"

Retorna o título da página.

• Obtenção de registros
  Entrada:

获取浏览器控制台日志，只显示错误信息

A ferramenta retorna um registro de erros.

Teste de API

• Enviar solicitação GET
  Entrada:

对 https://api.example.com/data 发送 GET 请求

Retorna o código de status e os dados.

• Enviar solicitação POST
  Entrada:

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

A ferramenta validará os resultados.

• Dados atualizados
  Entrada:

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

Os dados serão atualizados.

exemplo de operação

Suponha que você queira testar um processo de login:

1. Entrada:

打开网页 http://eaapp.somee.com

2. Entrada:

点击页面上的登录链接，使用选择器 #loginLink

3. Entrada:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. Entrada:

截取整个网页，保存为 "login_result.png"

5. Entrada:

关闭浏览器

Todo o processo é feito por meio de linguagem natural e é simples e intuitivo.

Ferramentas de teste

O projeto usa o Jest para testes. Se quiser verificar a funcionalidade, você pode executar testes:

• Digite-o no terminal:

npm test

• Relatório de cobertura de banda:

  npm run test:coverage
  

O relatório de teste é gerado no coverage Catálogo.

advertência

• No momento, a ferramenta não oferece suporte a solicitações de autenticação complexas (como OAuth).
• Se você encontrar problemas, consulte a documentação oficial em https://executeautomation.github.io/mcp-playwright/.
• O projeto é de código-fonte aberto, você pode fazer um fork e enviar sugestões para aprimoramento.