Pixelgenaues Screenshot-Testing: Warum es scheitert und was echte visuelle Bugs erkennt
Pixelgenaues Screenshot-Testing scheitert doppelt: Rendering-Rauschen löst Fehlalarme aus, und ein prozentualer Schwellenwert verbirgt echte Bugs.Das funktioniert stattdessen.
Pixelgenaues Screenshot-Testing vergleicht jedes Pixel eines Screenshots mit einem Referenzbild.Es scheitert doppelt: Harmloses Rendering-Rauschen löst Fehlalarme aus, und ein prozentualer Schwellenwert, der großzügig genug ist, um sie zum Schweigen zu bringen, lässt eine falsche Ziffer oder ein fehlendes Symbol durch.
Was ist pixelgenaues Screenshot-Testing?
Definition
Pixelgenaues Screenshot-Testing ist eine visuelle Prüfung, die einen neuen Screenshot Pixel für Pixel mit einem Referenz-Screenshot vergleicht.
- Jedes Pixel mit abweichender Farbe zählt als Unterschied.
- Ein Test scheitert, sobald es Unterschiede gibt, oder mehr, als ein Schwellenwert erlaubt.
Es ist die einfachste Form des visuellen Regressionstests, und die, mit der die meisten Teams beginnen.
Die Idee ist richtig: Ein Mensch beurteilt einen Bildschirm, indem er ihn ansieht, also sollte ein Test ihn auch ansehen.Das Problem ist das Maß.Ein Bildschirm wird nicht auf jedem Rechner mit denselben Pixeln gezeichnet, und die Bugs, auf die es ankommt, sind oft nur wenige Pixel groß.
Nichts ist falsch
Etwas ist falsch
Warum ein Pixel-für-Pixel-Vergleich Fehlalarme auslöst
Ein Fehlalarm ist ein Test, der scheitert, während die Anwendung in Ordnung ist.Bei einem Pixel-für-Pixel-Vergleich entsteht er aus allem, was Pixel ändert, ohne zu ändern, was ein Mensch sieht.
| Quelle des Rauschens | Warum die Pixel abweichen |
|---|---|
| Kantenglättung | Die Kanten von Text und Formen werden mit Zwischenfarben geglättet, und diese Glättung variiert von Rechner zu Rechner. |
| Schriftglättung | Unter Windows zeichnet ClearType Text mit schwachen farbigen Säumen, die vom Bildschirm und seinen Einstellungen abhängen. |
| Die Grafikkarte und ihr Treiber | Verläufe, Schatten und abgerundete Ecken können auf einer anderen Karte eine Nuance anders ausfallen. |
| Aufzeichnung und Kompression | Ein Referenzbild aus einem Video enthält weniger Farbdetails, als der echte Bildschirm zeigt. |
| Eine Verschiebung um 1 Pixel | Ein Fenster oder Layout, das sich um ein Pixel verschoben hat, ändert jede Kante im Bild. |
| Ein blinkender Textcursor | Der Cursor ist auf einem Screenshot an und auf dem anderen aus. |
| Ein Hover- oder Fokuszustand | Der Zeiger ruht in einem Lauf auf einer Schaltfläche und im anderen nicht, also leuchtet die Schaltfläche nur auf einem Bild. |
| Dynamische Inhalte | Ein Datum, eine Uhr, ein Zähler oder ein Benachrichtigungs-Badge ist jeden Tag anders. |
| Eine andere Bildschirmskalierung | Ein Laptop mit 150 % und ein Monitor mit 100 % zeichnen dieselbe Schaltfläche mit anderen Pixeln. |
Instabile Tests haben auch andere Ursachen, etwa Wartezeiten und Timing.Sie werden in instabile Tests und Fehlalarme behandelt.
Warum ein Schwellenwert beim visuellen Regressionstest echte Bugs verbirgt
Die übliche Antwort auf das Rauschen ist ein Schwellenwert: den Vergleich bestehen lassen, solange weniger als ein Anteil des Bildes abweicht, oft 1 oder 2 %.Die Fehlalarme hören auf.Die echten Bugs fangen an, durchzurutschen.
Echte Bugs können auf dem Bildschirm sehr klein sein.
- Eine falsche Ziffer in einem Preis oder einer Summe ändert ein paar Dutzend Pixel.
- Ein Großbuchstabe, der klein wurde, ändert ein paar Dutzend mehr.
- Ein fehlendes kleines Symbol ändert ein paar Hundert.
- Auf einem Panel oder einem ganzen Bildschirm liegt jeder davon weit unter 1 %.
Die teuersten Bugs sind oft die kleinsten auf dem Bildschirm: eine Ziffer einer Rechnung, ein Wort eines rechtlichen Hinweises.
Ein Anteil am Bild ist das falsche Maß
Rauschen und Bugs sehen gleich aus, wenn man sie über das ganze Bild zählt.Für einen Menschen sehen sie nicht gleich aus.
- Rauschen ist, was niemand sieht: eine weichere Kante, ein hellerer Farbton, ein Cursor, der geblinkt hat.
- Eine echte Änderung ist, was ein Mensch liest oder wiedererkennt: ein Buchstabe, eine Ziffer, ein Symbol, eine Farbe.
Erwartet
$12,480
Dieser Lauf
$12,430
Gemessen als Anteil am Bild
Eine Ziffer ist ein winziger Teil des Panels, weit unter einem Schwellenwert von 2 %.
Besteht: der Bug wird übersehen
Mit den Augen eines Menschen gesehen
Wer die Summe liest, sieht die falsche Ziffer sofort, und GUI Test Studio ebenso.
Scheitert: der Bug wird erkannt
Die richtige Frage ist also nicht, wie viel vom Bild sich geändert hat.Es ist die Frage, die sich ein Mensch stellt: Würde jemand, der auf diesen Bildschirm schaut, einen Unterschied sehen?Die Antwort hängt nicht von der Größe des Bildes ab, also gilt sie für ein kleines Symbol wie für einen ganzen Dialog.
Die üblichen Mittel gegen instabile Screenshot-Tests, und was sie kosten
| Mittel | Was es kostet |
|---|---|
| Den Schwellenwert anheben | Das Rauschen kommt durch, und die kleinen Bugs auch. |
| Die Teile maskieren, die sich ändern | Jedes Datum, jede Uhr und jedes Badge wird von Hand maskiert, und ein Bug unter einer Maske wird nie gesehen. |
| Einen fehlgeschlagenen Test wiederholen | Ein echter Fehlschlag bekommt eine zweite Chance, zufällig zu bestehen, und jeder Lauf dauert länger. |
| Ein Referenzbild pro Rechner halten | Jeder Browser, jedes System und jede Skalierung braucht eigene Bilder, und jedes muss nach jeder Änderung neu aufgenommen werden. |
| Die Umgebung einfrieren | Ein einziges Rechner-Image führt jeden Test aus, und ein Test, der dort besteht, sagt nichts über die Bildschirme Ihrer Nutzer. |
In einem codebasierten Framework wie Playwright nimmt toHaveScreenshot einen Farbschwellenwert pro Pixel und eine maximale Anzahl oder einen maximalen Anteil abweichender Pixel für das ganze Bild.Sie wählen diese Zahlen, schreiben die Masken und halten ein Referenzbild pro Browser und Plattform, in Code, den Sie pflegen.
Wie GUI Test Studio Screenshots vergleicht
GUI Test Studio erstellt End-to-End-Tests von Web-Apps, Windows-Desktop-Apps, Android-Telefonen und Spielen aus einer Aufzeichnung, ohne Code.Jedes Element, das Sie anklicken oder in das Sie tippen, erhält eine Bild-Assertion, eine Prüfung, die ein kleines Bild des Elements hält, sein visuelles Ziel.Siehe Bildprüfungen.
Finden
Die Suchphase
Vergleichen
Die Verifikationsphase
Zweiter Blick
Intelligente KI-Analyse
Bericht
Der Konfidenzbericht
Zuerst das Element finden
Die Suchphase findet das Element auf dem echten Bildschirm, wo auch immer es jetzt steht.Die GTS Engine + AI fragt zuerst die Anwendung, über ihre Barrierefreiheitsinformationen oder die eigenen Elemente der Seite, und findet das Element optisch, wenn die Anwendung es nicht sagt.Siehe wie GUI Test Studio jedes Element findet.
Der Vergleich findet dann dort statt, wo das Element steht.Ein verschobenes Fenster oder eine um ein Pixel versetzte Schaltfläche ist überhaupt kein Unterschied.
Dann es so vergleichen, wie ein Mensch es ansieht
Die Verifikationsphase vergleicht das Element wahrnehmungsbasiert mit seinem visuellen Ziel, so wie es das menschliche Auge tut.Sie bemerkt, was ein Mensch bemerken würde, und ignoriert, was niemand sieht.
| Auf dem Bildschirm | Was die Verifikationsphase tut |
|---|---|
| Geglättete Kanten und Schriftglättung | Ignoriert: Sie unterscheiden sich von Rechner zu Rechner, und niemand sieht sie. |
| Aufzeichnung und Kompression | Ignoriert: Ein Bild aus einem Video hält etwas weniger Farbdetails als der echte Bildschirm, und ein Mensch sieht denselben Bildschirm. |
| Eine Verschiebung um 1 Pixel | Ignoriert: Das Element wird dort verglichen, wo es jetzt steht. |
| Ein blinkender Textcursor | Ignoriert, während ein geänderter Buchstabe daneben erkannt wird. |
| Eine falsche Ziffer | Erkannt: Es ist das, was ein Mensch zuerst liest. |
| Ein Großbuchstabe, der klein wurde | Erkannt: Ein Mensch sieht es sofort. |
| Eine geänderte Farbe | Erkannt, sobald ein Mensch es bemerken würde: Ein rotes Symbol, das orange wurde, scheitert. |
| Ein fehlendes Symbol | Erkannt: Ein Mensch sieht die Lücke. |
Hover-Zustände und Datumsangaben
In einem aufgezeichneten Test setzt der Lauf den Mauszeiger wieder dorthin, wo er stand, als das Bild aufgenommen wurde.Eine Schaltfläche leuchtet im Lauf genau dann, wenn sie in der Aufzeichnung leuchtete.
Ein Wert, der sich jeden Tag ändert, gehört nicht in ein visuelles Ziel.Halten Sie das Ziel auf dem Element selbst, und prüfen Sie ein Datum, eine Summe oder einen Zähler mit einer Dynamischen Text-Assertion, die sein Format prüft, egal welchen Wert er hat.Siehe Textprüfungen.
Und wenn ein Bildschirm im Dunkelmodus, in einer anderen Sprache oder auf einem anderen Bildschirm zu Recht anders aussieht, halten Sie mit einem Baseline-Profil eine erwartete Version pro Umgebung: siehe Dunkelmodus, andere Sprachen, andere Bildschirme testen.
Pixelvergleich gegen GUI Test Studio, Fall für Fall
| Der Unterschied | Ein Pixelvergleich mit einem prozentualen Schwellenwert | GUI Test Studio |
|---|---|---|
| Geglättete Kanten auf einem anderen Rechner | Scheitert, wenn streng, besteht, wenn großzügig | Besteht: niemand sieht es |
| Farbige Säume der Schriftglättung | Scheitert, wenn streng | Besteht: niemand sieht es |
| Das Element hat sich um 1 Pixel verschoben | Scheitert: jede Kante weicht ab | Besteht: das Element wird dort verglichen, wo es steht |
| Ein blinkender Textcursor | Scheitert, wenn streng | Besteht: ein blinkender Cursor wird ignoriert |
| Eine Hover-Hervorhebung | Scheitert | Besteht: der Zeiger steht dort, wo er in der Aufzeichnung stand |
| Das heutige Datum | Scheitert jeden Tag | Nicht verglichen: eine Dynamische Text-Assertion prüft sein Format |
| Eine falsche Ziffer | Besteht einen Schwellenwert von 1 oder 2 % | Scheitert: ein Mensch sieht die falsche Ziffer |
| Ein Großbuchstabe, der klein wurde | Besteht einen Schwellenwert von 1 oder 2 % | Scheitert: ein Mensch sieht den Kleinbuchstaben |
| Ein fehlendes kleines Symbol | Besteht auf einem großen Bild | Scheitert: ein Mensch sieht, dass das Symbol fehlt |
Wie Sie die Toleranz eines Bildvergleichs wählen
In GUI Test Studio ist die Toleranz einer Bildprüfung ihre Verifikationsstrenge, in einfachen Worten gewählt: strenger für feine Details, großzügiger für volle Bildschirme.Es gibt keinen Prozentsatz zu erraten.
| Verifikationsstrenge | Verwenden für |
|---|---|
| Exakt | Bilder, die genau so bleiben müssen, wie sie sind. |
| Streng | Kleiner Text und feine Details, bei denen jede Änderung zählt. |
| Standard | Alltägliche Schaltflächen, Beschriftungen und Symbole.Die Voreinstellung. |
| Großzügig | Große Bereiche und volle Bildschirme, etwa eine ganze Seite oder eine Spielszene. |
- 1
Die Bildprüfung auswählen
Öffnen Sie den Test in GUI Test Studio und klicken Sie auf der Zeitachse auf die Bild-Assertion.Ihre Einstellungen erscheinen im Eigenschaftenbereich.
- 2
Eine Verifikationsstrenge wählen
Behalten Sie Standard für alltägliche Schaltflächen, Beschriftungen und Symbole.Wählen Sie eine strengere Stufe für kleinen Text und feine Details, eine großzügigere für große Bereiche und volle Bildschirme, und Exakt nur für ein Bild, das genau so bleiben muss, wie es ist.
- 3
Kleine Rendering-Artefakte ignorieren eingeschaltet lassen
Die Option ist standardmäßig eingeschaltet, also werden die geglätteten Kanten, die zwischen Rechnern abweichen, ignoriert.Schalten Sie sie nur aus, wenn genau diese Kanten das sind, was Sie testen.
- 4
Den Test ausführen und den Bericht lesen
Klicken Sie auf Test ausführen.Der Konfidenzbericht hebt hervor, was sich geändert hat, und sagt in einem Satz, warum die Prüfung gescheitert ist.
- 5
Anweisungen für die KI hinzufügen, wenn ein Unterschied erwartet ist
Schreiben Sie unter Erweitert ein paar Worte wie: Schriftgröße ignorieren.Die Intelligente KI-Analyse folgt ihnen, wenn sie diese Prüfung beurteilt.
Die meisten Tests brauchen nie mehr.Die genauen Einstellungen jeder Stufe und die erweiterten für die seltene Prüfung, die sie braucht, finden Sie unter Bildprüfungen und Einstellungen einer Prüfung.
Visuelles Testen mit KI: ein zweiter Blick in einfachen Worten
Ein visueller Vergleich sagt, dass sich etwas geändert hat und wo.Eine zweite Meinung in Worten hilft Ihnen zu entscheiden, was damit zu tun ist.Das ist die Aufgabe der Intelligenten KI-Analyse, die ausgeschaltet ist, bis Sie sie einschalten.
Der Mauszeiger und der blinkende Textcursor zählen für die KI nie als Unterschied.Eine bestandene Prüfung wird ihr nie geschickt.
Sie läuft mit einem Cloud-Modell und Ihrem eigenen Schlüssel oder mit einem lokalen KI-Modell auf Ihrem eigenen Computer: einem, das wir bereitstellen, oder einem eigenen.Manche Unterschiede sind erwartet, und nur Sie wissen, welche: Geben Sie einer Prüfung Anweisungen für die KI, etwa „Schriftgröße ignorieren“ oder „das Symbol darf jede Farbe haben“.Siehe Intelligente KI-Analyse.
Einen visuellen Fehlschlag lesen
Nach einem Lauf zeigt der Konfidenzbericht jede fehlgeschlagene Prüfung mit dem erwarteten Bild, dem gefundenen Bild und dem, was sich geändert hat, hervorgehoben auf dem Bildschirm.Das Urteil sagt in einem Satz, was sich geändert hat und wo.
Wenn die Änderung gewollt ist, übernehmen Sie das neue Aussehen im Bericht, und der Test erwartet es von da an.
Welche visuellen Bugs eine codebasierte Prüfung ganz übersieht, ist das Thema von visuelle Bugs, die automatisierte Tests übersehen.
Das Wichtigste in Kürze
- 1Pixelgenaues Screenshot-Testing scheitert doppelt: Rendering-Rauschen lässt korrekte Bildschirme durchfallen, und ein prozentualer Schwellenwert lässt echte Bugs durch.
- 2Rauschen ist, was niemand sieht, eine echte Änderung ist, was ein Mensch bemerkt: eine Ziffer, ein Buchstabe, ein Symbol, eine Farbe.
- 3Ein Anteil am Bild ist das falsche Maß. Fragen Sie stattdessen, was ein Mensch sehen würde, der auf den Bildschirm schaut.
- 4GUI Test Studio findet zuerst das Element und vergleicht es dann so, wie es das menschliche Auge tut, sodass Glättung, Kompression und ein blinkender Cursor nie einen Test scheitern lassen.
- 5Die Intelligente KI-Analyse ergänzt einen zweiten Blick in einfachen Worten, und ihre Antwort ist das endgültige Urteil, wenn Sie sie einschalten.
Fragen
Was ist pixelgenaues Testen?
Pixelgenaues Testen vergleicht einen Screenshot einer Anwendung Pixel für Pixel mit einem Referenz-Screenshot und scheitert, wenn sie abweichen.Es sieht jede Änderung, auch die, die niemand sehen kann.Deshalb löst es Fehlalarme auf korrekten Bildschirmen aus.
Warum scheitern Screenshot-Vergleichstests, obwohl sich nichts geändert hat?
Weil derselbe Bildschirm nicht überall mit denselben Pixeln gezeichnet wird.Geglättete Kanten, die Schriftglättung, die Grafikkarte, die Bildschirmskalierung, ein blinkender Textcursor oder eine Hover-Hervorhebung ändern einige Pixel, ohne etwas zu ändern, das ein Mensch bemerken würde.Ein Pixel-für-Pixel-Vergleich zählt sie alle.
Was ist ein guter Schwellenwert für visuelle Regressionstests?
Kein einzelner Prozentwert passt zu jedem Bild.Ein Anteil, der klein genug ist, um eine falsche Ziffer auf einem großen Panel zu erkennen, scheitert an harmlosem Rauschen, und einer, der großzügig genug ist, um das Rauschen zu ignorieren, lässt diese Ziffer durch.Stellen Sie stattdessen die Frage, die sich ein Mensch stellt: Würde jemand, der auf den Bildschirm schaut, einen Unterschied sehen?So vergleicht GUI Test Studio.
Verursacht Kantenglättung Fehlalarme in visuellen Tests?
Ja, sie ist eine der häufigsten Ursachen.Die Kanten von Text und Formen werden mit Zwischenfarben geglättet, und diese Glättung unterscheidet sich zwischen Rechnern, Grafikkarten und Einstellungen.GUI Test Studio vergleicht so, wie ein Mensch einen Bildschirm ansieht, also wird Glättung, die niemand sieht, ignoriert.
Kann ein Schwellenwert für Pixelabweichungen einen echten Bug verbergen?
Ja.Eine falsche Ziffer, ein Großbuchstabe, der klein wurde, oder ein fehlendes kleines Symbol ändert zwischen ein paar Dutzend und ein paar Hundert Pixeln, einen winzigen Anteil eines großen Bildes.Ein Schwellenwert von 1 oder 2 % lässt sie alle durch.
Wie vergleicht GUI Test Studio Screenshots?
In zwei Phasen.Die Suchphase findet das Element auf dem Bildschirm, wohin auch immer es sich bewegt hat.Die Verifikationsphase vergleicht es dann mit dem, was Sie erwarten, so wie es das menschliche Auge tut: Sie erkennt eine falsche Ziffer, ein geändertes Wort, ein fehlendes Symbol oder eine andere Farbe und ignoriert das Rendering-Rauschen, das niemand sieht.
Ist visuelles Testen mit KI besser als ein Pixelvergleich?
Sie funktionieren am besten zusammen.Ein sorgfältiger visueller Vergleich ist schnell und wiederholbar, und er entscheidet die meisten Prüfungen allein.In GUI Test Studio sieht die Intelligente KI-Analyse nur eine fehlgeschlagene Prüfung ein zweites Mal an, sagt in einfachen Worten, was sich geändert hat, und fällt das endgültige Urteil, wenn Sie sie einschalten.
Wie gehe ich mit Datumsangaben und Zählern in visuellen Tests um?
Halten Sie sie aus dem Bild heraus, das eine Bild-Assertion vergleicht, und prüfen Sie sie stattdessen mit einer Textprüfung.Eine Dynamische Text-Assertion prüft, dass ein Wert das richtige Format hat, etwa ein Datum oder einen Betrag, egal welchen Wert er heute hat.
Playwright, ClearType und Windows sind Marken der Microsoft Corporation.
Weiterlesen
Alle Artikel
Visuelles Testen
Dunkelmodus testen, andere Sprachen, andere Bildschirme: ein Test für alle Varianten
10 Min. Lesezeit
Visuelles Testen
Visuelle Fehler, die Tests übersehen: testen, was Nutzer wirklich sehen
10 Min. Lesezeit
Testautomatisierung
Manuelles Testen vs. automatisiertes Testen: Warum manuelles Testen bei End-to-End-Tests nicht reicht
15 Min. Lesezeit