Knowledge · dernière vérif 2026-07-02
Comment auditer visuellement une page web avec Playwright ?
Méthode d'audit visuel multi-viewports : captures, console, responsive, preuves et limites avant modification.
Réponse courte
En clair.
- Un audit visuel utile ne commence pas par une opinion : il commence par des captures reproductibles.
- Playwright permet de vérifier mobile, tablette et desktop avec les mêmes étapes.
- Le contrôle porte sur le rendu, les erreurs console, l'overflow, les éléments masqués et les preuves visuelles.
- L'objectif n'est pas de remplacer le jugement design, mais d'éviter les angles morts mécaniques.
- Chaque recommandation doit finir en patch vérifiable, pas en préférence de goût.
Problème
Ce qui bloque.
Une page peut sembler correcte sur un écran et casser ailleurs : texte trop long, bouton compressé, image absente, header qui couvre le contenu ou animation qui masque la lecture.
Méthode
Comment je le traite.
- Lister les parcours à vérifier avant d'ouvrir le navigateur.
- Capturer au moins mobile 390px et desktop 1440px pour les pages clés.
- Contrôler les erreurs console, les requêtes échouées et l'overflow horizontal.
- Comparer les captures avec les contraintes DA au lieu de chercher un style générique.
- Transformer chaque défaut en changement de fichier précis, puis reconstruire.
Exemple
Sur ce portfolio.
Sur les chantiers Capsélys et Les Petites Griffes, les captures servent à vérifier le rendu avant de parler de conversion : textes, blocs, assistant IA, preuves visuelles et contraintes client.
Limites
Ce que ça ne prouve pas.
- Playwright vérifie ce qu'on lui demande : un mauvais scénario peut rater un vrai défaut.
- Une capture ne mesure pas une conversion ; elle prouve seulement un état visuel.
- Le jugement DA reste humain : l'automatisation sert à ne pas rater le basique.