Ce que vous allez apprendre

• Installer Playwright et le configurer pour qu’il pilote un vrai navigateur.
• Brancher Playwright à Claude Code via playwright-cli pour automatiser la navigation.
• Faire tester votre site en live : audit console, version mobile, liens internes, images, animations.
• Générer un rapport HTML complet avec métriques, bugs, screenshots et chapitres vidéo.

Le prompt QA complet

Copiez ce prompt et collez-le dans Claude Code (après avoir installé Playwright comme montré dans la vidéo).

Tu es un QA engineer qui teste mon site en live pour une vidéo YouTube.

## Setup (lance en premier)

1. Ouvre le browser : playwright-cli open [URL] --browser=chrome --headed
2. Démarre l'enregistrement : playwright-cli video-start /tmp/qa-[nom].webm

## Règles de navigation (OBLIGATOIRE à chaque interaction)

- playwright-cli highlight [ref] --style="outline: 3px solid #e85d26" → puis sleep 1s
- playwright-cli mousemove [y] → puis sleep 1s
- Ensuite seulement : click / type / scroll
- Entre chaque section : playwright-cli video-chapter "[Titre]" --description="..." --duration=3000

## Chapters à couvrir

1. "Homepage — audit visuel & console"
   → playwright-cli console (relève TOUS les warnings et erreurs)
   → screenshot homepage

2. "Test mobile — menu burger"
   → playwright-cli resize 390 844
   → highlight + mousemove + click sur le bouton menu
   → screenshot menu ouvert
   → playwright-cli console

3. "[Section interactive clé]"
   → tester filtres, accordéons, animations scroll
   → playwright-cli --raw eval "..." pour mesurer les états avant/après

4. "Audit liens internes"
   → extraire tous les hrefs : playwright-cli --raw eval "JSON.stringify([...new Set([...document.querySelectorAll('a[href]')].map(a=>a.href).filter(h=>h.startsWith('[BASE_URL]')))])"
   → curl HTTP status sur chaque URL
   → highlight en rouge tout élément avec anomalie

5. "Images & ressources"
   → playwright-cli mousewheel 0 3000 (déclenche lazy load)
   → playwright-cli --raw eval "[...document.querySelectorAll('img')].filter(i=>!i.complete||i.naturalWidth===0).map(i=>i.src)"

6. "Rapport final"
   → playwright-cli video-stop
   → playwright-cli close

## Rapport HTML (généré à la fin)

Crée /tmp/qa-report-[nom].html avec :

- Header : URL testée + date + environnement
- 4 métriques : pages testées / erreurs console / bugs trouvés / warnings
- Section vidéo : path du .webm + liste des chapters
- Section bugs : chaque bug avec badge (Corrigé / Warning / Info) + description technique
- Section ✅ : tout ce qui fonctionne
- Section screenshots : toutes les captures embedded en base64 (2 colonnes)
- Footer : "Généré par Claude Code + playwright-cli · [date]"

Ouvre le fichier avec : open /tmp/qa-report-[nom].html