Testes web com GitHub Copilot e Playwright MCP

Sim, quando a sessão tem uma ferramenta autorizada. O navegador integrado ao VS Code oferece ferramentas próprias. Também é possível registrar um servidor Playwright MCP. O agente do GitHub.com roda em outro ambiente, e seu Playwright padrão acessa o localhost de lá. Antes de instalar, defina cliente, URL e resultado. Por exemplo, ler OFF, clicar em Enable demo e verificar ON. Ferramentas de navegador do VS Code Visão geral de MCP do GitHub

Um desenvolvedor contou no Reddit que não conseguiu abrir o navegador pelo Copilot para fazer um teste. A postagem não diz qual cliente ele usou nem quais ferramentas estavam ativas. Comece por aí se tiver o mesmo problema. Se já estiver depurando no VS Code, experimente o navegador integrado. Adicione o MCP da Microsoft quando precisar das ferramentas do Playwright. Discussão sobre testes

Pontos principais

• As ferramentas do navegador integrado do VS Code abrem páginas e interagem com elas.

• No workspace do VS Code, declare Playwright MCP em .vscode/mcp.json, dentro de servers.

• O Copilot CLI tem configuração própria. Use /mcp add no modo interativo.

• O Playwright MCP padrão do GitHub só acessa o localhost do ambiente da tarefa na nuvem.

• Confirme o estado esperado na página após a ação para validar o teste.

Identifique o ambiente primeiro

Se o GitHub.com recusar a conexão, confira se o aplicativo está escutando no ambiente da tarefa. Algumas sessões remotas da janela Agents do VS Code permitem rotear o tráfego pelo host remoto. Confira qual host o navegador usa antes de trocar a porta. Referência da nuvem Rede do navegador integrado

Veja outro exemplo de acesso a localhost por um agente na nuvem.

Comece pelo navegador integrado do VS Code

Inicie o aplicativo e abra sua URL no navegador integrado. Abra uma sessão local de agente no Chat e confira se as ferramentas de navegador estão ativas. Se não aparecerem, verifique workbench.browser.enableChatTools e a política da organização. Peça ao agente para abrir a mesma URL e ler um título visível. Guia do navegador no VS Code

Depois que o agente conseguir ler a página, peça que clique em um controle e confira o resultado. Se a verificação precisa rodar em todo pull request, registre as etapas em um teste de Playwright no repositório.

Registre Playwright MCP no workspace do VS Code

Use Node.js 18 ou mais recente. O exemplo fixa a versão do pacote para a equipe. Adicione a entrada a .vscode/mcp.json, execute MCP: List Servers e inicie playwright pelo menu do servidor. Confira a saída se as ferramentas não aparecerem. O VS Code encaminha os servidores compatíveis para a sessão Copilot. Se a entrada exigir dados interativos, verifique na documentação os formatos disponíveis.

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--isolated"]
    }
  }
}

Verifique se o agente atual oferece navegação e snapshots. Confiança do workspace, regras da organização e escolha de agente podem afetar a descoberta. Use um perfil isolado para o ensaio. Se precisar de uma sessão conectada, confirme autorização, conta e nome visível do espaço. Configuração de MCP no VS Code Repositório Playwright MCP Conectar um navegador existente

Se você já configurou Playwright MCP para outro agente de código, reaproveite o comando e os argumentos quando forem adequados. Declare o servidor no formato do VS Code.

Configure o terminal e a nuvem separadamente

No modo interativo do Copilot CLI, digite /mcp add e escolha um servidor STDIO local. Use o comando e os argumentos do exemplo do VS Code. Salve e confira o servidor com /mcp show playwright. No arquivo de usuário ~/.copilot/mcp-config.json, use mcpServers. O projeto pode usar um .mcp.json portátil. Se houver dois servidores com o mesmo nome, a configuração do projeto tem prioridade. Configuração do Copilot CLI

Em uma tarefa no GitHub.com, inicie o aplicativo no ambiente da tarefa e use a porta desse ambiente. Peça ao agente que confirme o processo e o título da página antes de clicar. No Reddit, um usuário relatou que o agente web retornou um erro de navegador em uso. Se acontecer, guarde o erro exato e o contexto da tarefa antes de tentar de novo. Relato sobre o agente na nuvem

Verifique uma mudança visível

Use uma página própria com um identificador visível e uma ação inofensiva. Leia o estado inicial, clique e releia na mesma página. Uma captura de tela pode completar as evidências.

Salve o HTML como copilot-fixture.html em uma pasta servida pelo aplicativo de teste. Abra a URL e recarregue antes de cada tentativa. O botão e o identificador continuam visíveis após o clique. Se precisar de uma segunda verificação, adapte o modelo de prompt para agentes de navegador.

<!doctype html>
<meta charset="utf-8">
<title>Copilot test fixture</title>
<h1>COPILOT-DEMO</h1>
<p>Status: <output id="status">OFF</output></p>
<button type="button" id="enable">Enable demo</button>
<script>
  document.getElementById("enable").addEventListener("click", () => {
    document.getElementById("status").textContent = "ON";
  });
</script>

Abra com a ferramenta de navegador a URL autorizada que termina em copilot-fixture.html. Confirme o ID COPILOT-DEMO e o estado OFF. Clique uma vez em Enable demo. Leia novamente o ID e confirme ON. Informe a URL, a ferramenta, o controle e os valores observados. Pare se a URL, o ID ou o estado inicial não corresponder.

O tutorial do GitHub reproduz um problema em um aplicativo maior e verifica a correção. Na primeira conexão, use um controle e uma asserção. Tutorial do GitHub Primeira tarefa de navegador Automação com Playwright

Procure a primeira etapa que falhou

Se o servidor encerrar durante a inicialização, confira o comando, a versão do Node e o escopo da configuração nos logs. Se o servidor estiver ativo e a ferramenta não aparecer, confira o seletor da sessão, a confiança do workspace e a política da organização. O guia de MCP conectado sem ferramentas explica essas verificações.

Se a página recusar a conexão, verifique a URL e a porta a partir do ambiente do navegador. Se o clique não acontecer, confira se o controle está visível, habilitado e pode ser identificado sem ambiguidade. Informe o nome acessível e o resultado esperado. O guia de cliques que falham cobre casos como controles encobertos.

Para um teste local rápido, comece com as ferramentas integradas. Adicione Playwright MCP ao workspace se a equipe precisar compartilhar a configuração. No terminal ou no GitHub.com, confira o host e as ferramentas na sessão que vai executar o teste. Valide uma mudança visível antes de incluir mais ações.

Secholar.L

Crescimento e conteúdo na Tabbit

Secholar.L escreve guias práticos sobre navegadores com IA e fluxos de trabalho com agentes, comparando ferramentas com pesquisa real e fontes verificáveis.