Eine Funktion testen, bevor es sie gibt
Importieren Sie Bilder aus Ihrem Design-Tool und bereiten Sie den Test vor, während die Funktion noch gebaut wird.
Warum testen, bevor es existiert
Testgetriebene Entwicklung aus Ihrem Design, in Figma oder jedem anderen Tool: Der Test existiert vor der Funktion.Die Bilder, die Ihr Designteam schon erstellt hat, zeigen, wie der Bildschirm aussehen muss, und eine Prüfung braucht nur ein Bild dessen, was zu erwarten ist.
Der Test ist dann an dem Tag fertig, an dem die Funktion gebaut ist.Sein erster Lauf sagt dem Team Element für Element, ob das Gebaute dem Entwurf entspricht.
Die Idee in vier Schritten
Exportieren
Schaltflächen, Symbole und Bildschirme aus Ihrem Designtool, als Bilder
Importieren
In die Inhaltsdateien des Tests
Zusammenstellen
Auf der Spur „Bildreferenz“ anordnen
Prüfen
Für jedes wichtige Element eine Prüfung hinzufügen
Ihre Designbilder importieren
Exportieren Sie die Elemente aus einem beliebigen Designtool wie Figma, Sketch, Adobe XD oder Photoshop als PNG-Bilder: einen ganzen Bildschirm oder einzelne Elemente wie eine Schaltfläche, ein Symbol oder ein Logo.Exportieren Sie sie in der Größe, die sie auf dem Bildschirm haben werden.
- 1
Auf „Medien importieren“ klicken
In der Symbolleiste von GUI Test Studio oder über Datei, Medien importieren.Wählen Sie Ihre Bilder: Sie erscheinen unter Bilder in den Inhaltsdateien.
- 2
Klare Namen vergeben
Klicken Sie mit der rechten Maustaste auf ein Bild und wählen Sie Umbenennen..., oder drücken Sie F2: „Kasse-Schaltfläche“, „Warenkorb-Symbol“.Die Namen reisen mit dem Test.
Den Bildschirm auf der Bildreferenz aufbauen
Die Spur „Bildreferenz“ ist das, was Sie in jedem Moment in der Vorschau sehen.Meist enthält sie eine Aufzeichnung, aber Bilder enthält sie genauso gut.Ziehen Sie ein Bild aus den Inhaltsdateien darauf: Es wird zu einem Clip, den Sie verschieben und dehnen können, wie eine Folie in einer Bildschirmpräsentation.
Platzieren Sie mehrere Bilder nacheinander, um die Geschichte der künftigen Funktion als Collage zu erzählen: der Listenbildschirm, dann der Dialog, der sich öffnet, dann die Bestätigung.
Die Prüfungen hinzufügen
- 1
Eine Prüfung an den Moment ihres Bildes ziehen
Aus der Assertionspalette auf die Spur „Assertionen“, unter das Bild, zu dem sie gehört.
- 2
Zeigen, wonach gesucht werden soll
Öffnen Sie den Editor der Prüfung.Der Frame, den er zeigt, ist Ihr Designbild: Ziehen Sie ein Rechteck um das Element für eine Bildprüfung oder markieren Sie die Wörter für eine Textprüfung.Im Editor für visuelle Ziele können Sie außerdem ein Bild eines einzelnen Elements direkt aus den Inhaltsdateien auf die Arbeitsfläche ziehen.
- 3
Die Aktionen dazwischen hinzufügen
Ziehen Sie Klicks und Texteingaben aus der Ereignispalette, oder zeichnen Sie sie später auf, sobald der Bildschirm existiert, mit Neues Szenario aufzeichnen.
Das Designteam teilt das Bild der neuen Schaltfläche „Exportieren“ und der Meldung „Export abgeschlossen“.Sie importieren beide, legen sie auf die Bildreferenz und fügen eine Bild-Assertion auf die Schaltfläche und eine Text-Assertion auf die Meldung hinzu.Der Test wartet im Repository.An dem Tag, an dem jemand aus der Entwicklung oder ein KI-Coding-Agent die Funktion fertigstellt, führt die Pipeline ihn aus und meldet, ob die Schaltfläche wie entworfen aussieht.
Wenn die Funktion gebaut ist
| Was der erste Lauf zeigt | Was zu tun ist |
|---|---|
| Alles besteht | Die Funktion entspricht ihrem Design.Der Test schützt sie nun vor Regressionen. |
| Ein Element sieht anders aus | Eine echte Lücke zwischen Design und Umsetzung.Erstellen Sie einen Fehlerbericht, oder übernehmen Sie das neue Aussehen, falls sich das Design unterwegs geändert hat. |
| Ein Element wird nicht gefunden | Prüfen Sie seine Größe: Ein Designbild, das in einem anderen Maßstab als der Bildschirm exportiert wurde, wird nicht gefunden.Übernehmen Sie den ähnlichsten Bereich, den der Bericht anbietet, oder nehmen Sie das Element erneut vom echten Bildschirm auf. |
Test aus dem Design vorbereitet
Funktion gebaut
Erster Lauf
Das echte Aussehen übernehmen
Einmal
Kommen Sie nicht weiter?Sagen Sie uns, was Sie tun wollten, und wir antworten innerhalb eines Werktags.Ask our team