Tester le web avec GitHub Copilot et Playwright MCP

Oui, si sa session dispose d’un outil autorisé. Le navigateur intégré de VS Code expose ses propres outils. Un espace peut aussi déclarer un serveur Playwright MCP. L’agent GitHub.com tourne ailleurs et son Playwright MCP par défaut accède à son localhost. Avant d’installer quoi que ce soit, choisissez le client, l’URL et le résultat. Par exemple, lire OFF, cliquer sur Enable demo et vérifier ON. Outils de navigateur de VS Code MCP dans GitHub

Sur Reddit, un développeur raconte que Copilot n’a pas réussi à ouvrir le navigateur pour un test. Le message ne précise ni le client ni les outils activés. Ce sont les deux premières choses à vérifier. Si vous déboguez déjà dans VS Code, essayez le navigateur intégré. Ajoutez le serveur MCP de Microsoft lorsque vous avez besoin de ses outils Playwright. Discussion sur les tests

Points à retenir

• Les outils intégrés de VS Code peuvent ouvrir une page et interagir avec elle.

• Dans un projet VS Code, déclarez Playwright MCP sous servers dans .vscode/mcp.json.

• Copilot CLI a sa propre configuration. En mode interactif, utilisez /mcp add.

• Le Playwright MCP de GitHub accède par défaut au seul localhost de la tâche cloud.

• Après le clic, relevez l’état attendu dans la page pour valider le test.

Identifier l’environnement

Si GitHub.com refuse la connexion, vérifiez que l’application écoute dans la tâche cloud. Certaines sessions distantes de la fenêtre Agents de VS Code permettent au navigateur de passer par l’hôte VS Code distant. Vérifiez l’hôte réellement utilisé avant de changer de port. Référence cloud Réseau du navigateur intégré

Voir un autre exemple d’accès à localhost depuis un agent cloud.

Essayer le navigateur intégré de VS Code

Démarrez l’application et ouvrez son URL dans le navigateur intégré. Lancez une session d’agent locale dans Chat et vérifiez que les outils du navigateur sont actifs. S’ils manquent, contrôlez workbench.browser.enableChatTools et la politique de votre organisation. Demandez à l’agent d’ouvrir la même URL et de relever un titre visible. Guide du navigateur de VS Code

Dès que l’agent lit la page, demandez-lui de cliquer sur un contrôle et de vérifier le résultat. Pour rejouer la vérification à chaque pull request, gardez un test Playwright dans le dépôt.

Déclarer Playwright MCP dans VS Code

Utilisez Node.js 18 ou une version ultérieure. L’exemple fixe la version du paquet pour l’équipe. Fusionnez l’entrée dans .vscode/mcp.json, exécutez MCP: List Servers et démarrez playwright depuis son menu. Si les outils n’apparaissent pas, consultez la sortie. VS Code transmet les serveurs compatibles aux sessions Copilot. Pour une entrée qui exige une saisie interactive, vérifiez les formats pris en charge.

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

Vérifiez que la session peut sélectionner la navigation et les instantanés. La confiance de l’espace, les règles de l’organisation et l’agent choisi peuvent modifier les outils disponibles. Pour un premier essai, gardez un profil isolé. Si une session authentifiée est nécessaire, vérifiez séparément l’autorisation, le compte et l’espace visible. Référence de configuration VS Code Dépôt Playwright MCP Connexion à un navigateur existant

Si vous utilisez déjà Playwright MCP avec un autre agent de code, reprenez la commande et les arguments adaptés. Déclarez le serveur au format VS Code.

Configurer séparément le terminal et l’agent cloud

Dans Copilot CLI en mode interactif, entrez /mcp add et choisissez un serveur STDIO local. Reprenez la commande et les arguments de l’exemple VS Code. Enregistrez puis contrôlez le serveur avec /mcp show playwright. Le fichier utilisateur ~/.copilot/mcp-config.json utilise mcpServers. Le projet peut définir un .mcp.json portable. En cas de noms identiques, sa configuration est prioritaire. Configuration de Copilot CLI

Sur GitHub.com, démarrez l’application dans la tâche cloud et utilisez le port de cet environnement. Demandez à l’agent de vérifier le processus et le titre de page avant le clic. Un utilisateur de Reddit a vu une erreur indiquant que le navigateur était déjà utilisé. Si elle apparaît, gardez le message exact et le contexte de la tâche avant de réessayer. Témoignage sur l’agent cloud

Vérifier un changement visible

Utilisez une page que vous contrôlez, un identifiant visible et une action sans conséquence réelle. Lisez l’état initial, cliquez, puis vérifiez le nouvel état sur la même page. Une capture d’écran peut compléter ces données.

Enregistrez ce HTML sous copilot-fixture.html dans un dossier servi par votre application de test. Ouvrez son URL puis rechargez-la avant chaque essai. Le bouton et l’identifiant restent visibles après le clic. Pour ajouter un second contrôle, adaptez le modèle de consigne pour agent navigateur.

<!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>

Ouvre avec l’outil navigateur l’URL autorisée qui se termine par copilot-fixture.html. Vérifie l’identifiant COPILOT-DEMO et l’état OFF. Clique une fois sur Enable demo. Relis l’identifiant et vérifie l’état ON. Indique l’URL, l’outil, le contrôle et les valeurs observées. Arrête-toi si l’URL, l’identifiant ou l’état initial diffère.

Le guide GitHub reproduit un défaut sur une application plus complète avant de vérifier le correctif. Pour une première connexion, limitez le test à un contrôle et une assertion. Guide GitHub Première tâche web Automatisation Playwright

Isoler la première étape en échec

Si le serveur s’arrête au démarrage, cherchez dans les journaux la commande, la version de Node et le fichier chargé. Si le serveur tourne mais que les outils manquent, vérifiez le sélecteur de cette session, la confiance accordée au projet et la politique de l’organisation. La fiche de dépannage MCP connecté sans outils détaille ces vérifications.

Si la connexion à la page est refusée, vérifiez l’URL et le port depuis l’environnement du navigateur. Si le clic bloque, contrôlez que le bouton est visible, actif et identifiable sans ambiguïté. Indiquez son nom accessible et le résultat attendu. Le guide des clics bloqués couvre notamment les éléments masqués par une fenêtre.

Pour un contrôle local rapide, partez des outils intégrés. Ajoutez Playwright MCP si l’équipe partage sa configuration dans le projet. Depuis le terminal ou le cloud, vérifiez l’hôte et les outils dans la session qui fera le test. Commencez par un seul changement visible.

Secholar.L

Croissance et contenu chez Tabbit

Secholar.L rédige des guides pratiques sur les navigateurs IA et les workflows agentiques, en comparant les outils sur la base de recherches réelles et de sources vérifiables.