Le bouton doit ressortir plus nettement. Après la modification, la carte d’offre rend bien sur un grand écran. Dans une vue étroite, en revanche, le bouton plus large repousse le prix hors de la ligne. La modification était minime ; son effet concerne toute une relation entre des éléments de contenu.
Playwright documente des comparaisons de captures d’écran avec des images de référence et signale que l’environnement de capture peut les influencer. Cette méthode offre une bonne occasion pour un exercice de notre cru. Toute différence de pixels n’est pas une erreur, et une image identique ne prouve pas encore qu’une action est correcte. Ce qui compte, c’est l’attente visible que vous voulez examiner au moyen de la comparaison.
Notez ce qui doit changer et ce qui doit rester
Pour notre carte fictive, l’intention est la suivante : le bouton devient plus facile à reconnaître, tandis que le titre, le prix et la mention nécessaire restent entièrement lisibles. Cette phrase contient le changement souhaité et ses limites. « Améliorez le bouton » serait bien plus difficile à évaluer.
Préparez trois cas de contenu : un titre court, un titre long et un titre assorti d’une condition supplémentaire. Utilisez les mêmes informations avant et après la modification. Une comparaison avec un texte de remplissage commode peut masquer précisément le manque de place qui survient plus tard avec du contenu réel.
Choisissez aussi au moins une vue large et une vue étroite. Ces largeurs font partie de la question et ne constituent pas une affirmation générale sur tous les appareils. Un cas étroit vérifie si la relation tient lorsque la place manque.
La référence exige un environnement maîtrisé
Le navigateur, le système d’exploitation, les polices et d’autres conditions peuvent influer sur la capture. Une image « avant » provenant d’un autre environnement constitue donc une référence plus faible. Maintenez constant l’environnement pertinent et documentez-le avec le test.
Un court exemple Playwright de notre cru pour une page de test préparée pourrait ressembler à ceci. Il suppose un projet déjà configuré avec une baseURL adaptée, et il n’a pas été exécuté pour cet article :
import { test, expect } from '@playwright/test';
test('Offer card stays readable when narrow', async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/angebot-demo');
await expect(page).toHaveScreenshot('angebot-390.png');
});Les noms de page et de fichier relèvent de l’exemple pédagogique. La comparaison de captures d’écran documentée confronte une capture à la référence. Le travail éditorial important reste l’interprétation : la différence est-elle voulue, ou repousse-t-elle un élément de contenu nécessaire ?
Un écart est d’abord une observation
Ne regardez pas l’image des différences uniquement autour du bouton. Vérifiez le prix, les retours à la ligne et la mention voisine. Peut-être le bouton plus grand est-il juste, alors que la mise en page à côté a besoin de plus de souplesse. Peut-être l’amélioration supposée n’avait-elle de sens que dans la vue large.
N’augmentez pas par réflexe l’écart autorisé jusqu’à ce que le test repasse au vert. Ce serait changer la question sans comprendre le problème. Une tolérance peut se justifier, mais elle doit correspondre au type de différences observées.
De même, une nouvelle référence est une décision. Un nouvel état voulu peut avoir un autre aspect. Il ne devrait devenir la base de comparaison qu’après évaluation de son contenu. Sinon, un effet secondaire passé inaperçu est simplement déclaré nouvelle image cible.
L’apparence a toujours besoin du véritable parcours de clic
Un bouton identique peut déclencher la mauvaise action. Ajoutez donc à la vérification visuelle un parcours complet : atteignez-le au clavier, déclenchez-le, observez l’état cible attendu. Une capture d’écran et un test de comportement répondent à des questions différentes.
Si vous réalisez l’exercice sur votre propre site WordPress, une copie de travail dans KENJTEC WordPressBuilder ai peut tenir l’état que vous modifiez à l’écart du site en ligne. Vous exécutez la comparaison Playwright avec votre propre outil, en dehors de KENJTEC. La reprise des modifications depuis la copie de travail constitue ensuite une étape distincte, pour laquelle il faut choisir la portée appropriée.
L’intérêt des vues de comparaison fixes ne réside pas dans le fait d’empêcher le changement. Elles rendent visible si l’amélioration souhaitée respecte ses voisins. Seules l’attente, l’observation et l’utilisation réelle réunies permettent un jugement fondé sur le nouveau bouton.
Sources et état
Recherches et documentation à la date du 25 octobre 2026. Comparaisons visuelles.
