Skip to main content

Tests de régression visuelle avec captures d'écran

Les équipes de développement utilisent Webshot pour détecter le genre de bugs que les tests unitaires laissent passer — ruptures de mise en page, polices de substitution, icônes manquantes, états responsives cassés. Capturez la préprod, capturez la production, comparez la paire. Déposez la comparaison dans un commentaire de PR comme preuve que votre changement est sûr (ou comme preuve que le nouveau bug vient d'apparaître).

🖥️ Ordinateur page entière (PNG, comparaisons nettes) 📱 Mobile page entière ⚙️ Utiliser plutôt l'API gratuite

Tous les boutons ouvrent le formulaire de capture préconfiguré. Vous pouvez changer le format et la fenêtre une fois la page chargée.

Pourquoi Webshot pour cela

Captures parfaites au pixel près

Le mode PNG préserve un texte net et des bords précis — idéal pour les outils de comparaison au pixel près (`pixelmatch`, ImageMagick `compare`) où le bruit de compression du JPG créerait des faux positifs.

La même fenêtre à chaque fois

Webshot capture exactement à la même fenêtre, à la même position de défilement et avec le même temps d'attente de chargement des polices à chaque exécution — les résultats de comparaison sont fiables.

Compatible avec l'API

Branchez l'API gratuite de Webshot à votre CI : capturez avant et après le déploiement, comparez avec `pixelmatch`, faites échouer le build si les pixels modifiés dépassent le seuil.

Aucun code standard Chrome headless

Évitez la configuration de puppeteer, l'installation des polices, les drapeaux du sandbox. Webshot fait tourner tout cela sur notre infrastructure. Votre CI ne fait qu'un appel HTTP.

Comment réaliser des tests de régression visuelle

  1. Choisissez la ou les pages que vous voulez surveiller — page d'accueil, pages d'atterrissage clés, tunnel de paiement, partout où une régression ferait mal.
  2. Capturez chacune en PNG + desktop_full + mobile_full pour établir une référence de l'apparence actuelle de votre production.
  3. Après votre prochain déploiement, capturez à nouveau les mêmes URL. Comparez l'ancien et le nouveau avec `pixelmatch` ou ImageMagick — tout ce qui dépasse 1 % de pixels modifiés mérite une revue humaine.
  4. Intégrez-le au CI : un hook pré-déploiement capture la préprod, un hook post-déploiement capture la production, et le build échoue si la comparaison dépasse votre seuil.

Foire aux questions

Chrome en mode headless dans le CI implique d'installer Chromium, les polices, les drapeaux du noyau pour le sandbox, et de maintenir le tout à jour. Avec Webshot, vous évitez complètement l'installation — votre CI effectue un appel HTTP à notre API et récupère un PNG. Nous gérons les mises à jour de Chrome, la mise en cache des polices et la protection SSRF.

Oui, à condition d'utiliser le PNG + la même fenêtre + la même stratégie d'attente. Webshot fige la taille de la fenêtre et attend fonts.ready + network-idle + toute animation déclarée via la requête `prefers-reduced-motion`. Les animations aléatoires (boucles lottie, arrière-plans Date.now()) produiront une comparaison différente à chaque exécution ; figez-les dans votre environnement de test.

Pas en un seul appel — vous capturez chaque URL séparément, puis vous les comparez avec une bibliothèque distincte. Nous gardons l'API centrée sur la capture ; la comparaison tient en un script de 30 lignes. Voir `/developers` pour un exemple de code.

Oui. Webshot attend network-idle (aucune requête pendant 500 ms) et fonts.ready avant de capturer, de sorte que les applications React, Vue, Svelte et Next.js s'affichent entièrement avant la capture d'écran. Pour les sites qui n'atteignent jamais network-idle (long polling, websockets), vous pouvez passer un paramètre `maxWait` via l'API.

Le formulaire public gratuit est limité à 5 par tranche de 15 minutes et par IP — trop peu pour le CI. Le palier API gratuit est plus généreux ; voir `/developers`. Pour des tests de régression à fort volume (plus de 50 captures par build), la formule API commerciale supprime les limites par IP.

Webshot lui-même ne fait que capturer — c'est vous qui fournissez la couche de comparaison. Solution en deux lignes : `npx pixelmatch baseline.png new.png diff.png`. Ou utilisez un service géré de comparaison visuelle (Percy, Chromatic, BackstopJS) et alimentez-le avec les PNG de Webshot.

Prêt à capturer ?

Gratuit, sans inscription, sans filigrane. Collez simplement une URL.

📸 Ouvrir le formulaire de capture

Autres cas d'usage : Captures d'écran Google Maps · Captures d'écran WordPress · QA de pages d'atterrissage · Captures d'écran à usage légal · Captures d'écran de réseaux sociaux · Voir tout →

Share: 𝕏 Twitter Facebook LinkedIn