Introduction
Les cas de test automatisés – une fois considérés comme la clé de l’efficacité – se transforment souvent en défis. Pour les nouveaux arrivants, la rédaction de ce premier test peut sembler écrasante: les cadres d’apprentissage, la mise en place de localisateurs, la manipulation des attentes et la structuration des assertions. Pour les équipes expérimentées, la lutte plus importante est la maintenance – les changements de l’UI, les exigences changeants et les scripts fragiles.
Les tests feuilletés ne font qu’ajouter à la douleur. Échecs imprévisibles Les temps de déchets dans le débogage et érodent la confiance dans les pipelines CI. Une enquête en 2021 a révélé une délicat dans 41% des tests de Google et 26% de Microsoft. Près de la moitié des travaux d’échec de CI réussissent les rediffusions, montrant combien de temps se perd en poursuivant une automatisation peu fiable.
Même de petites ajustements d’interface utilisateur – renommer un bouton, déplacer la navigation ou ajuster les dispositions – peut casser les tests fragiles plus rapidement que les équipes ne peuvent les réparer. Le résultat? Les ingénieurs et les développeurs d’AQ sont coincés dans un cycle de correction au lieu d’innover.
C’est là que l’automatisation alimentée par AI, en particulier le dramaturge MCP (Model Context Protocol), modifie le jeu. Que vous écriviez votre premier test ou que vous gériez une énorme suite, l’IA peut générer, adapter et maintenir des tests beaucoup plus efficacement. Avec LLMS et le contexte du navigateur réel, l’IA ne se contente pas d’écrire des scripts – il comprend l’intention, interprète les modifications de l’interface utilisateur et maintient l’automatisation fiable.
Avant d’écrire notre premier cas de test…
Avant de passer à la génération de notre tout premier test de dramaturge alimenté par AI, il est important de s’aligner sur quelques termes clés. Ces concepts – lm, agent, MCP, MCP du dramaturge et GitHub Copilot – apparaîtront à plusieurs reprises dans notre flux de travail. Comprendre ce que chacun fait (et ne fait pas) rendra beaucoup plus facile de suivre le flux complet plus tard.
Considérez cela comme un glossaire rapide pour se mettre à l’aise avant de plonger dans l’action.
LLM – Modèle de grande langue
Ce qu’il peut faire: générer du code, répondre à des questions complexes, expliquer la logique, le projet de documentation ou des e-mails.
Ce qu’il ne peut pas faire: exécuter des actions réelles comme l’ouverture d’un navigateur, cliquer sur les boutons, se connecter à une base de données ou appeler des API.
Exemple: Demandez à un LLM de tester un flux de connexion → Il peut écrire un extrait de dramaturge et suggérer des localisateurs, mais il ne lancera pas réellement un navigateur ou ne cliquez pas sur «Soumettre».
Agent
Ce qu’il peut faire: prendre des instructions d’un LLM et effectuer des tâches du monde réel en appelant des outils externes. Agit comme les «mains et pieds» du LLM.
Ce qu’il ne peut pas faire: penser indépendamment ou générer une logique de test – il exécute seulement ce que le LLM décide.
Exemple: vous dites: «Connectez-vous à Example.com avec le test de l’utilisateur». »» → LLM: «Cliquez sur Connexion», «Tapez le nom d’utilisateur», «Soumettre». → Agent: ouvre en fait le navigateur, remplit le formulaire et renvoie le titre / URL de la page.
MCP – Protocole de contexte modèle
Ce qu’il peut faire: fournir un «connecteur» universel qui permet à LLMS de parler à des outils comme les navigateurs, les bases de données et les API d’une manière structurée et sûre.
Ce qu’il ne peut pas faire: générer une logique de test elle-même – c’est juste la couche de communication, pas le cerveau.
Exemple: Agent (via MCP) demande: «Quels outils sont disponibles?» → Le serveur MCP répond: naviguer, cliquez, fill_form. L’agent appelle Navigateto («Exemple.com/login») et obtient des commentaires structurés comme URL + Page Title.
MCP du dramaturge
Ce qu’il peut faire: combiner le dramaturge avec MCP afin que les agents AI puissent contrôler les navigateurs réels en utilisant DOM structuré et un contexte d’accessibilité (pas de captures d’écran fragiles).
Ce qu’il ne peut pas faire: écrire des cas de test complets seuls – il exécute uniquement les commandes passées via MCP.
Exemple: LLM: «Cliquez sur la connexion.» → Agent → Le dramaturge MCP exécute le clic. → Le dramaturge MCP renvoie un instantané DOM. → LLM utilise ce contexte pour générer l’étape de test suivante.
Copilote github
Ce qu’il peut faire: agir en tant qu’assistant de codage – la combinaison de la baillite, les affirmations d’achèvement automatique et aidant à refactoriser lorsque les tests se cassent.
Ce qu’il ne peut pas faire: interagir avec les navigateurs ou les outils externes – il se limite aux suggestions de code dans votre éditeur.
Exemple: Lors de l’écriture d’un test, Copilot suggère la structure de test. Pendant ce temps, le dramaturge MCP exécute les actions réelles du navigateur, et le LLM génère la logique à partir du contexte. Copilot aide ensuite à affiner et à maintenir le code.
Flux de résumé
Invite utilisateur
↓
LLM traite la demande et émet une intention ou un appel à l’outil
↓
L’agent (en utilisant un framework agentique ou SDK) capture la sortie LLM
↓
Des questions d’agent disponibles via les serveurs MCP (découverte d’outils)
↓
L’agent invoque l’outil approprié en appelant l’interface MCP (par exemple, bouton de clic via le dramaturge)
↓
MCP Server exécute l’action et renvoie les résultats structurés (par exemple, état de page, instantané)
↓
L’agent transmet les résultats à LLM, qui peuvent ensuite planifier l’action suivante ou générer un code de test final
Prérequis et configuration – Installation du dramaturge MCP, Configuration de l’environnement
Avant de plonger dans l’automatisation des tests alimentés par AI, assurez-vous que votre environnement de développement est correctement configuré.
Outils requis
– Code Visual Studio (version 1.86+; les versions stables incluent désormais le support MCP)
– VS Code Insiders (facultatif – pour l’accès précoce aux prochaines améliorations MCP)
-GitHub Compte (le compte gratuit fonctionne – Copilot gratuit est disponible!)
-Node.js (version 16 ou supérieure)
-Playwright Framework
-MCP Server pour l’intégration du dramaturge
Étapes d’installation
Étape 1: Installez l’extension du copilote github
Ouvrez le code
Naviguez vers les extensions (Ctrl + Shift + X)
Recherchez « Github Copilot »
Installez l’extension et authentifiez avec votre compte GitHub
Étape 2: configurer le dramaturge
# Installer le dramaturge
NPM installer le dramaturge @ dernier
# Initialiser un nouveau projet de dramaturge
NPM Init Playwright @ Dernier
# Installer le dramwright vs extension de code
# Rechercher le «Test de dramaturge pour VSCODE» dans les extensions de code vs
Étape 3: Configurer le serveur MCP
Le MCP (Protocole de contexte du modèle) Le serveur doit être enregistré afin que les agents de l’IA puissent communiquer avec le dramaturge. Vous avez deux options:
Option A: configuration automatique (recommandée)
Installez la commande VS Code Insiders dans le chemin: appuyez sur CMD + Shift + P (Mac) ou Ctrl + Shift + P (Windows / Linux) Pour ouvrir la palette de commande
Taper: Commande de shell: installer des «insideurs de code» Command en chemin
Appuyez sur ENTER pour ajouter des inssideurs de code à votre chemin de terminal
Enregistrer le serveur MCP du dramaturge:
Appuyez sur la commande suivante dans le terminal
Code-Insiders –Add-MCP ‘{« Name »: « Playwright », « Command »: « NPX », « Args »:[“@playwright/mcp@latest”]} ‘
Option B: configuration manuelle
Si la configuration automatique ne fonctionne pas ou si vous préférez la configuration manuelle:
Ouvrez les paramètres du code VS: Appuyez sur CMD + Shift + P (Mac) ou Ctrl + Shift + P (Windows / Linux)
Rechercher Préférences: ouvrir les paramètres utilisateur (JSON)
Appuyez sur ENTER pour ouvrir votre fichier SetfitS.json
Ajouter la configuration MCP: Ajoutez la configuration JSON suivante à votre fichier de paramètres:
Configuration
Vérification
Après avoir terminé l’une ou l’autre des options, redémarrez le code. Le serveur MCP du dramaturge devrait désormais être enregistré, permettant aux agents d’IA d’interagir avec votre navigateur en temps réel via des commandes structurées plutôt que des captures d’écran fragiles.
Configuration de la structure du projet
Créer un textContexts Dans le répertoire des racines du projet
Sous ce dossier, créez le fichier suivant webtestContext.txt Pour faire la structure du projet comme indiqué dans la capture d’écran ci-dessous
Structure du projet
Votre premier test généré par l’AI – pas à pas pas pas pas
Maintenant que votre environnement est configuré, passons à la génération de tests Web et API à l’aide du flux de travail alimenté par AI.
Génération de tests d’interface utilisateur Web
Étape 1: Ajouter les instructions suivantes dans le fichier webtestcontext.txt
Vous êtes un générateur de test du dramaturge.
Vous avez un scénario et vous devez générer un test de dramaturge pour cela.
Ne générez pas de code de test en fonction du scénario seul.
Exécutez les étapes un par un en utilisant les outils fournis par le dramaturge MCP.
Uniquement une fois toutes les étapes terminées, émettez un test JavaScript du dramaturge qui utilise
@ Playwright / Test basé sur l’historique des messages.
Enregistrer le fichier de test généré dans le répertoire des tests.
Exécutez le fichier de test et itérez jusqu’à ce que le test passe.
Étape 2: Générez votre premier test Web
Faites glisser et déposez le webtestContext.txt déposer Copilote github chat
Entrez l’invite suivante:
Générer un test de dramaturge pour le scénario suivant:
1. Accédez à http://www.automationpractice.pl/index.php
2. Recherche de «t-shirts»
3. Vérifiez que les «t-shirts à manches courtes délavés» apparaissent dans les résultats de la recherche
Étape 3: Regardez la magie se produire
L’IA sera:
Utilisez MCP pour interagir avec le navigateur en temps réel
Rassemblez le contexte de la page réel et les informations sur les éléments
Générer des localisateurs précis en fonction du DOM en direct
Créez un fichier de test robuste dans vos tests / répertoire
Exécuter et affiner le test jusqu’à ce qu’il passe
Structure de test générée attendue
Structure de cas de test
Conclusion
L’ère de passer plus de temps à rédiger des cas de test et à réparer les tests que les écrire est terminé.
Ce que nous avons couvert dans ce guide représente un changement fondamental dans la façon dont nous abordons l’automatisation des tests. Au lieu de lutter avec des sélecteurs fragiles, de déboguer les tests feuilletés et de mettre à jour les scripts pour chaque changement d’interface utilisateur, nous avons maintenant l’IA qui comprend le contexte du navigateur et génère des cas de test résilients en quelques minutes.
Les principaux plats à retenir:
Les LLM fournissent l’intelligence pour comprendre votre intention de test
Les agents comblent le fossé entre la pensée et faire
MCP crée une norme universelle pour l’intégration AI-Tool
Le dramaturge MCP offre un réel contexte du navigateur au lieu de captures d’écran fragiles
Github Copilot améliore le flux de travail de la planification à la maintenance
Que vous soyez un nouveau venu rédiger votre premier cas de test ou une équipe expérimentée gérant des centaines de scripts d’automatisation, cette approche alimentée par l’IA résout les problèmes de base qui ont tourmenté l’automatisation des tests depuis des années.
Prêt à commencer? Configurez votre environnement, créez votre premier fichier de contexte et regardez en tant qu’IA transforme votre approche pour les tests d’automatisation. L’avenir de l’AQ n’est pas automatisé – il est intelligent.
Source link