Créer un test reproductible de capture pleine page
Tester un outil de capture d'écran sur un fil d'actualité aléatoire donne un résultat ambigu. La page peut changer entre les exécutions, les publicités peuvent être redimensionnées, les images peuvent pivoter et les modules personnalisés peuvent différer selon le compte. Un test reproductible nécessite une page contrôlée avec des fonctionnalités connues et un point de terminaison attendu explicite.
Screenshot PDF fournit une page publique de test de capture pleine page. Elle ne contient aucune donnée utilisateur et porte la directive noindex, car il s'agit d'une surface de diagnostic et non d'une page de destination destinée aux moteurs de recherche. Cet article explique comment l'utiliser et comment créer un relevé d'acceptation qu'une autre personne pourra reproduire.
Ce que contient le luminaire
La page est autonome et ne dépend pas d'images ou d'API tierces. Il comprend :
- un en-tête collant qui devrait apparaître une fois dans la capture terminée ;
- un contrôle de coin fixe qui ne doit pas se répéter dans les tranches ultérieures ;
- des marqueurs de section numérotés dans une séquence connue ;
- alternance de surfaces claires et sombres pour une détection visible des coutures ;
- blocs visuels retardés déclenchés après l'entrée dans la fenêtre ;
- un tableau dense pour l'alignement et l'inspection des limites de page ;
- un motif à rayures généré par Canvas ;
- un point final vert qui doit être présent.
Définir l'environnement de test
Avant la capture, enregistrez :
| Champ | Exemple de format |
| --- | --- |
| Navigateur | Version majeure de Chrome |
| Rallonge | Capture d'écran PDF 0.0.13 |
| Fenêtre d'affichage | largeur × hauteur pixels CSS |
| Zoomer | pourcentage |
| Rapport de pixels de l'appareil | valeur rapportée par le navigateur |
| Mode capture | pleine page ou sans fractionnement |
| Thème | clair ou foncé |
| Heure de début | horodatage local et fuseau horaire |
Ne comparez pas deux captures réalisées avec des largeurs de fenêtre différentes comme s'il s'agissait du même test. La mise en page réactive peut modifier la hauteur de la section, le retour à la ligne, la largeur du tableau et le nombre de tranches.
Exécutez la capture de base
Ouvrez le luminaire dans un nouvel onglet et rechargez-le. Ne faites pas défiler manuellement la ligne de base. Démarrez la capture d'une page entière et attendez l'éditeur. Conservez le premier résultat avant de tenter des solutions de contournement.
Vérifiez ensuite :
- Les marqueurs de section apparaissent par ordre croissant et aucun n'est manquant.
- L'en-tête collant apparaît au début et non à chaque intervalle de fenêtre.
- Le contrôle de coin fixe ne masque pas les sections ultérieures.
- Les blocs retardés contiennent leur motif de rayures final au lieu d'un espace réservé vide.
- Les lignes du tableau restent alignées et aucune ligne n'est dupliquée.
- Les arrière-plans alternés se réunissent sans bande horizontale manquante ou répétée.
- Le dernier point final vert est visible.
Si le point final est manquant, enregistrez le dernier marqueur visible et mesurez la hauteur CSS de la page. Le flux de travail actuel d'une page entière est limité à 15 000 pixels CSS ; un appareil ou une page utilisateur intentionnellement plus long doit être capturé en sections.
Tester le comportement de chargement différé séparément
Rechargez l'appareil, faites défiler lentement de haut en bas, attendez chaque bloc retardé, revenez en haut et capturez à nouveau. Comparez ce résultat préchargé avec la ligne de base.
Si la ligne de base contient des blocs vides mais que le résultat préchargé est complet, le pipeline de capture fonctionne mais le délai de chargement de la page dépasse l'attente disponible lors du défilement automatique. La solution de contournement correcte consiste à précharger ou à sectionner la page, et non à étiqueter l'image manquante comme une erreur d'assemblage.
Identifiez les coutures sans deviner
Utilisez les arrière-plans de section en alternance et le motif à rayures Canvas. Une bande manquante crée un saut brusque dans la séquence de bandes. Un chevauchement répète une bande ou un marqueur. Un changement de hauteur dynamique désaligne le contenu sur une limite.
Inspectez à la taille réelle des pixels, et pas seulement à l'ajustement à la fenêtre. Enregistrez la coordonnée verticale approximative et les marqueurs immédiatement au-dessus et en dessous du problème. Cela donne au développeur un emplacement reproductible plutôt que « quelque part près du milieu ».
Vérifier la restauration de la page source
Une fois la capture réussie ou échouée, revenez à l’onglet Appareil. Confirmer:
- la page est en haut ;
- l'en-tête collant et le contrôle fixe sont à nouveau visibles ;
- il ne reste aucun élément de progression de capture ;
- le défilement fonctionne toujours ;
- le contenu différé reste utilisable.
La restauration fait partie du test car l'extension modifie temporairement la visibilité des éléments flottants. Une sortie correcte n’excuse pas un onglet source laissé dans un état modifié.
Créer une reproduction minimisant les échecs
Si une section échoue, reproduisez d'abord avec le luminaire, puis avec une page locale réduite contenant uniquement le comportement pertinent. Supprimez les données privées, l’authentification, la publicité, les analyses et les cadres non liés. Conservez le plus petit CSS ou JavaScript nécessaire pour déclencher le problème.
Fournissez les versions du navigateur et de l'extension, la fenêtre d'affichage, le zoom, le mode de capture, la plage de marqueurs, le résultat attendu, le résultat réel et si le préchargement modifie le résultat. Joignez des preuves recadrées plutôt qu’une page privée entière.
Dossier d'acceptation
Utilisez une ligne par exécution :
| Exécuter | Marqueurs terminés | Interface utilisateur flottante une fois | Blocs paresseux prêts | Coutures propres | Point final présent | Source restaurée | | --- | --- | --- | --- | --- | --- | --- | | Référence | réussite/échec | réussite/échec | réussite/échec | réussite/échec | réussite/échec | réussite/échec | | Préchargé | réussite/échec | réussite/échec | réussite/échec | réussite/échec | réussite/échec | réussite/échec |
Ajoutez une courte note pour chaque échec et conservez la sortie originale. Un appareil reproductible ne peut pas couvrir tous les sites Web, mais il peut séparer les régressions à l'échelle de l'extension du comportement dynamique d'un site.
Les tests de capture d'écran de haute qualité ne consistent pas à « essayer plusieurs pages et voir si elles semblent correctes ». Il définit les entrées, expose les cas extrêmes connus, enregistre le point final, vérifie la restauration et produit un résultat qu'une autre personne peut répéter sans accès aux informations privées.