Einen reproduzierbaren Test für Ganzseiten-Screenshots erstellen
Das Testen eines Screenshot-Tools in einem zufälligen Newsfeed führt zu einem mehrdeutigen Ergebnis. Die Seite kann sich zwischen den Ausführungen ändern, die Größe von Anzeigen kann geändert werden, Bilder können gedreht werden und personalisierte Module können je nach Konto unterschiedlich sein. Für einen reproduzierbaren Test ist eine kontrollierte Seite mit bekannten Funktionen und einem explizit erwarteten Endpunkt erforderlich.
Screenshot-PDF stellt ein öffentliches Ganzseiten-Capture-Fixture bereit. Sie enthält keine Benutzerdaten und ist mit noindex gekennzeichnet, da es sich um eine Diagnoseoberfläche und nicht um eine Such-Landingpage handelt. In diesem Artikel wird erklärt, wie man es verwendet und wie man einen Annahmedatensatz erstellt, den eine andere Person wiederholen kann.
Was das Gerät enthält
Die Seite ist eigenständig und nicht auf Bilder oder APIs von Drittanbietern angewiesen. Es beinhaltet:
- ein Sticky-Header, der einmal im fertigen Capture erscheinen sollte;
- eine feste Eckensteuerung, die sich in späteren Slices nicht wiederholen sollte;
- nummerierte Abschnittsmarkierungen in bekannter Reihenfolge;
- abwechselnd helle und dunkle Flächen zur sichtbaren Nahterkennung;
- verzögerte visuelle Blockaden, die nach dem Betreten des Ansichtsfensters ausgelöst werden;
- eine übersichtliche Tabelle zur Ausrichtung und Überprüfung der Seitenränder;
- ein von Canvas generiertes Streifenmuster;
- ein letzter grüner Endpunkt, der vorhanden sein muss.
Definieren Sie die Testumgebung
Notieren Sie vor der Aufnahme Folgendes:
| Feld | Beispielformat |
| --- | --- |
| Browser | Chrome-Hauptversion |
| Erweiterung | Screenshot PDF 0.0.13 |
| Ansichtsfenster | Breite × Höhe CSS-Pixel |
| Zoom | Prozentsatz |
| Pixelverhältnis des Geräts | Vom Browser gemeldeter Wert |
| Aufnahmemodus | ganze Seite oder nicht geteilt |
| Thema | hell oder dunkel |
| Startzeit | lokaler Zeitstempel und Zeitzone |
Vergleichen Sie nicht zwei Aufnahmen mit unterschiedlichen Ansichtsfensterbreiten, als ob es sich um denselben Test handeln würde. Das responsive Layout kann die Abschnittshöhe, den Zeilenumbruch, die Tabellenbreite und die Anzahl der Slices ändern.
Führen Sie die Basiserfassung aus
Öffnen Sie das Fixture in einem neuen Tab und laden Sie es neu. Scrollen Sie nicht manuell zur Grundlinie. Starten Sie die Ganzseitenerfassung und warten Sie auf den Editor. Bewahren Sie das erste Ergebnis auf, bevor Sie Problemumgehungen versuchen.
Dann überprüfen Sie:
- Abschnittsmarkierungen werden in aufsteigender Reihenfolge angezeigt und dürfen nicht fehlen.
- Der Sticky-Header erscheint am Anfang und nicht in jedem Ansichtsfensterintervall.
- Die feste Ecksteuerung verdeckt spätere Abschnitte nicht.
- Verzögerte Blöcke enthalten ihr endgültiges Streifenmuster anstelle eines leeren Platzhalters.
- Tabellenzeilen bleiben ausgerichtet und es wird keine Zeile dupliziert.
- Abwechselnde Hintergründe treffen aufeinander, ohne dass ein horizontaler Streifen fehlt oder sich wiederholt.
- Der letzte grüne Endpunkt ist sichtbar.
Wenn der Endpunkt fehlt, notieren Sie die letzte sichtbare Markierung und messen Sie die CSS-Höhe der Seite. Der aktuelle Ganzseiten-Workflow ist auf 15.000 CSS-Pixel begrenzt; ein bewusst längeres Fixture oder eine User-Seite muss abschnittsweise erfasst werden.
Testen Sie das Lazy-Loading-Verhalten separat
Laden Sie das Gerät neu, scrollen Sie langsam von oben nach unten, warten Sie auf jeden verzögerten Block, kehren Sie nach oben zurück und nehmen Sie erneut auf. Vergleichen Sie dieses vorinstallierte Ergebnis mit der Basislinie.
Wenn die Baseline leere Blöcke enthält, das vorab geladene Ergebnis jedoch vollständig ist, funktioniert die Erfassungspipeline, aber die Ladeverzögerung der Seite überschreitet die beim automatischen Scrollen verfügbare Wartezeit. Die richtige Problemumgehung besteht darin, die Seite vorab zu laden oder zu unterteilen, und nicht, das fehlende Bild als Stitching-Fehler zu kennzeichnen.
Identifizieren Sie Nähte, ohne zu raten
Verwenden Sie die abwechselnden Abschnittshintergründe und das Canvas-Streifenmuster. Ein fehlender Streifen führt zu einem abrupten Sprung in der Streifenfolge. Eine Überlappung wiederholt einen Streifen oder eine Markierung. Eine dynamische Höhenänderung führt dazu, dass Inhalte über eine Grenze hinweg falsch ausgerichtet werden.
Überprüfen Sie die tatsächliche Pixelgröße, nicht nur die Anpassung an das Fenster. Notieren Sie die ungefähre vertikale Koordinate und die Markierungen direkt über und unter dem Problem. Dies gibt einem Entwickler einen reproduzierbaren Standort und nicht „irgendwo in der Nähe der Mitte“.
Überprüfen Sie die Wiederherstellung der Quellseite
Nachdem die Aufnahme erfolgreich war oder fehlgeschlagen ist, kehren Sie zur Registerkarte „Geräte“ zurück. Bestätigen:
- die Seite ist oben;
- der Sticky-Header und das Fixed-Control sind wieder sichtbar;
- es bleibt kein Capture-Fortschrittselement übrig;
- Scrollen funktioniert immer noch;
- Verspätete Inhalte bleiben nutzbar.
Die Wiederherstellung ist Teil des Tests, da die Erweiterung die Sichtbarkeit schwebender Elemente vorübergehend ändert. Eine korrekte Ausgabe entschuldigt nicht, dass eine Quellregisterkarte in einem geänderten Zustand belassen wird.
Erstellen Sie eine fehlerminimierende Reproduktion
Wenn ein Abschnitt fehlschlägt, reproduzieren Sie zuerst mit der Vorrichtung und dann mit einer reduzierten lokalen Seite, die nur das relevante Verhalten enthält. Entfernen Sie private Daten, Authentifizierung, Werbung, Analysen und nicht verwandte Frameworks. Behalten Sie das kleinste CSS oder JavaScript bei, das zum Auslösen des Problems erforderlich ist.
Geben Sie Browser- und Erweiterungsversionen, Ansichtsfenster, Zoom, Aufnahmemodus, Markierungsbereich, erwartetes Ergebnis, tatsächliches Ergebnis und ob das Vorladen das Ergebnis ändert, an. Hängen Sie abgeschnittene Beweise an und nicht eine ganze private Seite.
Abnahmeprotokoll
Verwenden Sie eine Zeile pro Lauf:
| Ausführen | Markierungen vollständig | Einmal schwebende Benutzeroberfläche | Lazy Blocks bereit | Nähte sauber | Endpunkt vorhanden | Quelle wiederhergestellt | | --- | --- | --- | --- | --- | --- | --- | | Grundlinie | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | | Vorinstalliert | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden | bestanden/nicht bestanden |
Fügen Sie zu jedem Fehler eine kurze Notiz hinzu und behalten Sie die ursprüngliche Ausgabe bei. Ein reproduzierbares Fixture kann nicht jede Website abdecken, aber es kann erweiterungsweite Regressionen vom dynamischen Verhalten einer Website trennen.
Beim Testen hochwertiger Screenshots geht es nicht darum, „mehrere Seiten auszuprobieren und zu sehen, ob sie gut aussehen“. Es definiert Eingaben, legt bekannte Randfälle offen, zeichnet den Endpunkt auf, prüft die Wiederherstellung und erzeugt ein Ergebnis, das eine andere Person ohne Zugriff auf private Informationen wiederholen kann.