Mon Ingénieur QA est un LLM

2026-01-09 · 4 min read

Claude peut cliquer sur des boutons.

Cela semble trivial, mais cela change ma façon de construire des interfaces utilisateur. Avec Playwright MCP, Claude n’écrit pas seulement du code—il ouvre un navigateur, navigue vers localhost et vérifie que les choses fonctionnent réellement. Il détecte des bugs que je manquerais lors de la révision de code.

La Configuration

Playwright MCP donne à Claude l’automatisation de navigateur. Je l’exécute avec Chromium headless :

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

Maintenant Claude peut naviguer, cliquer, taper et faire des captures d’écran. Il voit ce que les utilisateurs voient.

flowchart LR
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

flowchart TB
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

Flux : Claude Code → Playwright MCP → Navigateur → Captures d’écran → GitHub Issues → PR

La Matrice de Viewports

Chaque modification d’interface utilisateur est testée à trois points de rupture :

Viewport	Taille	Pourquoi
Desktop	1440×900	Ordinateur portable standard
Tablet	1024×768	iPad portrait
Mobile	390×844	iPhone 14

Claude redimensionne le navigateur, prend une capture d’écran, la télécharge vers l’issue GitHub. Trois captures par changement d’état. Si la navigation mobile est cassée, je le vois immédiatement—pas après le déploiement.

Tests de Thèmes

Même schéma pour le mode clair et sombre :

// Claude change le thème
await page.click('[data-testid="theme-toggle"]');
// Capture des deux états

La cohérence des variables CSS compte. Un composant qui a l’air bien en mode clair pourrait avoir du texte invisible en mode sombre. Claude le détecte en regardant réellement les deux.

Tests Interactifs

C’est là que ça devient intéressant. Claude ne fait pas que des captures d’écran—il utilise l’interface utilisateur :

Clique sur chaque lien de navigation, vérifie la destination
Ouvre le tiroir mobile, vérifie qu’il s’anime
Remplit les formulaires, les soumet
Survole les éléments interactifs
Ferme les modales en cliquant sur l’arrière-plan

Quand il trouve un bug—disons, le tiroir ne se ferme pas quand on tape à l’extérieur—il le signale, corrige le code et reteste. La boucle de rétroaction est serrée.

L’Issue GitHub comme Rapport de Test

Chaque capture d’écran est téléchargée vers l’issue GitHub. Le corps de l’issue est reconstruit à chaque étape :

## État Actuel

### Desktop (1440×900)
![desktop](https://user-images.githubusercontent.com/...)

### Tablet (1024×768)
![tablet](https://user-images.githubusercontent.com/...)

### Mobile (390×844)
![mobile](https://user-images.githubusercontent.com/...)

## Liste de Vérification des Tests
- [x] Les liens de navigation fonctionnent
- [x] Le tiroir mobile s'ouvre/se ferme
- [x] Le changement de thème persiste
- [ ] La validation du formulaire affiche les erreurs

L’issue devient un rapport de test vivant. Toute personne révisant la PR peut voir exactement ce qui a été testé.

La Boucle Complète

Une fonctionnalité typique passe par ce cycle :

Issue créée : “Ajouter navigation sidebar”
Claude implémente : Écrit le composant
Vérification visuelle : Captures de tous les viewports
Tests interactifs : Clique à travers l’interface utilisateur
Bug trouvé : Le tiroir ne se ferme pas au clic sur l’arrière-plan
Correction appliquée : Met à jour le gestionnaire de clic
Re-test : Nouvelles captures, tout passe
PR créée : Lien vers l’issue avec historique visuel complet

Pas d’étape QA manuelle. Pas de “ça a l’air bien” sans vraiment regarder. Claude vérifie son propre travail.

Ce Que Cela Détecte

Vrais bugs que j’ai vu Claude trouver :

Navigation mobile cachée derrière le contenu (problème de z-index)
Texte du bouton invisible en mode sombre (mauvaise variable CSS)
Formulaire soumis deux fois à la touche Entrée
Menu déroulant coupé par parent avec overflow:hidden
État de survol bloqué sur les appareils tactiles

Ce sont les bugs qui passent à travers la révision de code parce qu’ils n’apparaissent que dans le navigateur. Claude les voit parce qu’il exécute réellement le code.

Chaque PR vient maintenant avec la preuve que ça fonctionne.