Tester et valider les modifications

Introduction

Le piège absolu lorsque l'on travaille avec une IA performante comme Codex, c'est l'excès de confiance. L'IA écrit du code en 3 secondes, vous rechargez la page, l'élément s'affiche bien, vous criez victoire et vous passez à la suite.

C'est exactement ainsi que naissent les projets instables. Un développeur professionnel sait que "ça s'affiche" ne veut pas dire "ça marche". Le test n'est pas une option ou une perte de temps, c'est la moitié intégrante du travail de développement. Quelques minutes de vérification immédiate évitent des heures de cauchemar le lendemain.

Pourquoi tester est indispensable

Le code est un château de cartes. Retirer une carte en bas pour la remplacer par une plus belle peut faire s'effondrer le toit sans que vous ne le voyiez immédiatement.

Les différents types de tests

Tester ne signifie pas juste "cliquer partout au hasard". Il existe plusieurs grilles de lecture :

• Le test visuel (Design) : Est-ce que c'est beau ? Est-ce que c'est aligné ? La police est-elle la bonne ?
• Le test fonctionnel (Logique) : Si je clique sur "Ajouter au panier", le chiffre en haut à droite passe-t-il bien de 0 à 1 ?
• Le test responsive (Mobile) : Si je réduis la fenêtre de mon navigateur pour simuler un smartphone, le texte sort-il de l'écran ?
• Le test destructif (Crash-test) : Que se passe-t-il si j'essaie de me connecter sans mot de passe ? L'application plante-t-elle ou m'affiche-t-elle un gentil message "Mot de passe requis" ?

Tester immédiatement après chaque modification

La règle d'or est la "boucle de validation courte". N'attendez pas la fin de la journée.

graph TD;
    A[Génération par Codex] --> B[Recharger la page];
    B --> C[Ouvrir F12 Console];
    C --> D[Tester LA nouveauté];
    D --> E[Tester l'ANCIEN code autour];
    E --> F{Tout est parfait ?};
    F -- Oui --> G[Git Commit];
    F -- Non --> H[Demander correctif à Codex];
    H --> A;

Traquer les régressions (L'Ennemi Invisible)

Une régression, c'est quand une fonctionnalité qui marchait parfaitement hier ne marche plus aujourd'hui à cause d'une nouvelle modification.

Scénario classique :
1. Lundi : Vous demandez à Codex de créer un superbe "Mode Sombre". Il marche parfaitement.
2. Mardi : Vous demandez à Codex d'ajouter une modale pop-up "Abonnez-vous à la newsletter".
3. Le bug : La pop-up a un fond blanc forcé (hardcodé) qui la rend illisible quand le Mode Sombre du lundi est activé.
Solution : Testez toujours les nouveautés dans tous les contextes existants.

Utiliser Codex pour vérifier son propre travail

Codex ne peut pas cliquer sur votre site, mais il est excellent pour analyser les risques de ce qu'il vient de générer. Utilisez ces prompts puissants :

D'autres prompts redoutables :

• "Y a-t-il un risque de fuite de mémoire (memory leak) dans cette boucle infinie ?"
• "Ce CSS va-t-il impacter les balises `<p>` des autres pages du site ?"
• "Vérifie la sécurité de cette requête. Est-elle vulnérable aux injections SQL ?"
• "Que se passe-t-il dans ce code si l'API externe met plus de 10 secondes à répondre ?"
• "Ce code est-il conforme aux règles d'accessibilité (lecteurs d'écran) ?"

Tester sur plusieurs appareils (Le vrai monde)

Votre ordinateur portable surpuissant avec un écran 4K n'est pas représentatif du monde réel. 70% de vos utilisateurs seront sur un smartphone vieillissant, avec une connexion 4G instable et en plein soleil.

• L'Outil Magique : Dans Chrome, appuyez sur F12, puis sur l'icône Toggle Device Toolbar. Cela vous permet de simuler un iPhone, un iPad, ou un Samsung Galaxy.
• La navigation tactile : Ce qui est cliquable facilement avec la pointe d'une souris ne l'est pas toujours avec un gros doigt. Les boutons mobiles doivent faire au moins 44x44 pixels.

Contrôler les performances

Codex peut générer un slider d'images magnifique... qui charge 50 Mo d'images non compressées. Résultat : la page met 8 secondes à s'afficher.

Prenez le réflexe : F12 > Onglet Network (Réseau). Rechargez la page. Regardez en bas de la console le poids total téléchargé (idéalement moins de 2 Mo) et le temps de chargement (Load Time).

Si c'est trop lourd, demandez à Codex : "Ce composant est très lourd à charger. Comment pourrions-nous implémenter du Lazy Loading (chargement différé) pour les images qui ne sont pas visibles à l'écran ?"

Avant de mettre en production (La Checklist Finale)

Avant d'envoyer votre projet en ligne (sur Vercel, Netlify ou un serveur), cochez cette liste :

Les erreurs les plus fréquentes en phase de test

• Symptôme : Un utilisateur vous prévient que le site est cassé.
  Cause : Vous avez testé uniquement sur Chrome PC, il est sur Safari Mobile.
  Bonne pratique : Prenez l'habitude d'ouvrir votre site sur votre vrai smartphone une fois par jour.
• Symptôme : Le bouton "Valider" charge à l'infini.
  Cause : Vous avez fermé la console F12. Une erreur JS bloque la page en silence.
  Bonne pratique : Le développeur développe TOUJOURS avec la console ouverte. Toujours.
• Symptôme : "Ça marchait chez moi !"
  Cause : Vous avez des données cachées sur votre ordinateur (LocalStorage, session existante). L'utilisateur, lui, arrive à neuf.
  Bonne pratique : Testez régulièrement votre projet en mode "Navigation Privée" (Incognito).
• Symptôme : Le design est affreux sur un écran géant.
  Cause : Oubli des contraintes de largeur maximale (max-width).
  Bonne pratique : Redimensionnez toujours votre fenêtre manuellement, de tout petit à très grand.
• Symptôme : Un texte de l'IA (Lorem Ipsum) est resté en production.
  Cause : Vous n'avez testé que "la mécanique" et oublié de relire le vrai contenu.
  Bonne pratique : Faites une passe "Relecture éditoriale" globale à la fin.

Atelier pratique (Simulations de tests)

Conseils vitaux

Tableau récapitulatif des tests essentiels

Foire aux questions

À retenir

Transition vers le chapitre suivant

Félicitations, vous maîtrisez maintenant l'intégralité du cycle technique de création avec Codex : concevoir, générer, refactoriser, sécuriser avec Git, et tester rigoureusement !

Cependant, posséder le meilleur outil du monde ne suffit pas si on l'utilise de manière chaotique. Dans le prochain chapitre, nous allons prendre de la hauteur. Nous découvrirons les "Bonnes Pratiques" et la méthodologie de travail quotidienne qui séparent les amateurs qui s'épuisent, des professionnels qui livrent des projets aboutis.