Aller au contenu principal

Captures d'écran multi-navigateurs

Open in QuickMonitoring→ Sites → [Votre site] → Cross-browser

QuickMonitoring capture des captures d'écran de chaque page analysée dans plusieurs navigateurs simultanément — détectez les différences de rendu entre Chrome, Firefox et Safari en une seule analyse.

Ce que vous verrez​

La section Cross-browser affiche une galerie de captures d'écran organisée par page et par navigateur :

  • Vue par page : pour chaque page analysée, vous voyez les captures d'écran côte à côte dans les trois navigateurs configurés.
  • Navigateurs disponibles : Chrome (Chromium), Firefox, et Safari (WebKit), tous pilotés par Playwright.
  • Format des captures : captures d'écran JPEG pleine page (1920×1080), qualité optimisée pour la lisibilité et la performance.
  • Horodatage : chaque capture est associée à l'analyse dont elle provient, avec la date et l'heure.
  • Indicateur de différence : si une analyse précédente existe, un badge indique si des différences ont été détectées entre les captures actuelles et les captures de référence.

Comment l'utiliser​

Les captures d'écran multi-navigateurs sont prises automatiquement lors de chaque analyse complète. Aucune configuration supplémentaire n'est requise pour les activer.

  1. Lancez une analyse depuis la section Scans de votre site (ou attendez une analyse planifiée).
  2. Une fois l'analyse terminée, rendez-vous dans la section Cross-browser.
  3. Naviguez dans la liste des pages pour visualiser les captures d'écran de chaque navigateur.
  4. Cliquez sur une capture d'écran pour l'agrandir et l'examiner en détail.

Comparer deux analyses​

Pour comparer les captures d'écran de deux analyses différentes :

  1. Rendez-vous dans Cross-browser → Différences.
  2. Sélectionnez l'analyse de référence (la baseline) et l'analyse actuelle.
  3. QuickMonitoring calcule et affiche les différences au niveau du pixel. Voir la page Différences de captures d'écran pour les détails.

QuickMonitoring utilise Playwright pour piloter les navigateurs. Playwright utilise des moteurs de rendu réels :

  • Chrome : moteur Chromium — représente la majorité des utilisateurs desktop et mobile
  • Firefox : moteur Gecko — détecte les problèmes spécifiques au rendu Mozilla
  • Safari : moteur WebKit — critique pour les utilisateurs macOS et iOS, où WebKit impose ses propres règles CSS et JavaScript

Condition de validation​

Lancez une analyse et rendez-vous dans la section Cross-browser. Les captures d'écran de vos pages dans au moins un navigateur doivent être visibles dans la galerie.

Problèmes courants​

Certaines pages n'ont pas de captures d'écran. Cela peut se produire si la page a rencontré une erreur lors du crawl (timeout, erreur JavaScript bloquante, redirection infinie). Consultez la section Erreurs pour voir si des problèmes ont été détectés sur ces pages lors de la même analyse.

La capture d'écran Safari est différente des autres mais le site semble correct manuellement. WebKit applique des règles CSS différentes de Chromium pour certaines propriétés (flexbox, grid, variables CSS, fonts). Il est possible que le problème ne soit visible qu'avec certaines combinaisons de propriétés CSS. Utilisez la vue de comparaison côte à côte pour identifier précisément la zone problématique.

Les captures d'écran sont en noir ou totalement blanches. Cela indique généralement que la page a mis trop de temps à se charger ou que du contenu JavaScript bloquant a empêché l'affichage. Consultez la section Erreurs → JavaScript pour l'analyse correspondante.