{"id":1783,"date":"2021-11-05T15:21:47","date_gmt":"2021-11-05T14:21:47","guid":{"rendered":"https:\/\/www.logic-joe.com\/blog\/?p=1783"},"modified":"2022-06-15T10:49:41","modified_gmt":"2022-06-15T08:49:41","slug":"in-wenigen-augenblicken-automatisiertes-snapshot-testing-mit-osnap","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/in-wenigen-augenblicken-automatisiertes-snapshot-testing-mit-osnap\/","title":{"rendered":"In wenigen Augenblicken: automatisiertes Snapshot-Testing mit OSnap"},"content":{"rendered":"

Um in das Thema zu starten, m\u00f6chten wir euch kurz das Prinzip Snapshot-Testing erl\u00e4utern:<\/span><\/p>\n

Was ist Snapshot-Testing?<\/b><\/h2>\n

Eine Methode, die im Frontend Development sowohl Fehler aufdeckt wie auch vermeidet und so die Produktqualit\u00e4t f\u00f6rdert. Umgekehrt erlaubt sie obendrein ein niedrigschwelliges und aufwandsarmes Experimentieren mit digitalen Gestaltungselementen.<\/p>\n

Im Prinzip bewahren Snapshot-Tests Frontend Developer davor, beim Coden unbeabsichtigte Ver\u00e4nderungen an einer bestehenden UI zu erzeugen, indem entsprechende Warnungen im Bezug auf betreffende Seiteneffekte ausgegeben werden.<\/p>\n

Zwei Arten von Snapshot-Testing<\/span><\/h2>\n

Zun\u00e4chst m\u00fcssen zwei Arten von Snapshot-Testing unterschieden werden. Bei dem einen Ansatz werden fertige Elemente auf Code-Ebene konserviert, so dass im Nachhinein vorgenommene \u00c4nderungen oder auch Seiteneffekte kenntlich werden und den Frontend Developern somit viel (manuelle) Arbeit erspart.\u00a0<\/span><\/p>\n

In folgenden Beispiel soll sowohl die Bennenung als auch die Verlinkung eines Buttons ge\u00e4ndert werden.<\/p>\n

Ansatz auf Code-Ebene:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Beim Ansatz des visuellen Snapshot-Testings wird das final designte Element im Erscheinungsbild abfotografiert, so dass im Nachhinein vorgenommene \u00c4nderungen visuell sichtbar werden.\u00a0<\/span><\/p>\n

Selbes Beispiel – Ansatz auf visueller Ebene:<\/p>\n

Hier sieht man die visuelle \u00c4nderung. Man sieht allerdings nicht, ob sich auch die Verlinkung ge\u00e4ndert hat oder nicht.<\/p>\n

\"\"<\/p>\n

Was dieses Beispiel zeigt ist, dass der Ansatz auf Code-Ebene lediglich vollzogene \u00c4nderungen zeigt, nicht aber die Auswirkungen im Erscheinungsbild. Umgekehrt sieht man beim visuellen Snapshot-Testing-Ansatz lediglich das finale Erscheinungsbild, nicht aber funktionelle \u00c4nderungen am Code.<\/p>\n

Um die \u00c4nderungen auf Code-Basis sichtbar machen zu k\u00f6nnen, gibt es schon zahlreiche gute Snapshot-Testing-L\u00f6sungen, wie z.B. Jest<\/a>. Auch f\u00fcr visuelle \u00c4nderungen gibt es bereits Tools, die allerdings verh\u00e4ltnism\u00e4\u00dfig lang f\u00fcr einzelne Testl\u00e4ufe brauchen. Um den Entwicklern hier ein schnelleres Feedback zu erm\u00f6glichen, haben wir OSnap entwickelt.<\/p>\n

Kurz gefasst und weiter gedacht<\/b><\/h2>\n

F\u00fcr die Mehrzahl unserer Kunden setzen wir bereits zentralisierte Pattern Libraries ein. Mit dem Einsatz einer Pattern Library ist eine Grundlage daf\u00fcr gelegt, auf strukturierte und gekapselte Gestaltungselemente zur\u00fcckgreifen zu k\u00f6nnen.\u00a0<\/span><\/p>\n

Dies kann mit Hilfe von Snapshot-Testings eben auch daf\u00fcr genutzt werden, herum zu experimentieren – ohne daf\u00fcr die komplette gestalterische Basis ver\u00e4ndern zu m\u00fcssen.<\/span><\/p>\n

Mit dem Prinzip der Snapshot-Tests k\u00f6nnen ungewollte \u00c4nderungen schnell erkennbar gemacht werden. Auch wenn Anpassungen bisher nur f\u00fcr einen Teil der Elemente eines gesamten Gestaltungsgef\u00fcges vorgenommen wurden, weist ein Snapshot-Testingtool auf noch fehlende \u00c4nderungen hin, wie hier beispielsweise:<\/span><\/p>\n

\"\"<\/p>\n

Dies ist die Ausgabe der Tests in der Konsole am Beispiel einer \u00c4nderung beim Button.<\/span><\/p>\n

Das ist nat\u00fcrlich nicht nur f\u00fcr den einzelnen Entwickler sehr hilfreich in seiner Arbeit, sondern kann tats\u00e4chlich zur Effizienz in dezentral zusammenarbeitenden Entwicklerteams beitragen.<\/span><\/p>\n

Und jetzt wird es spannend<\/b><\/h2>\n

In Projekten kommt es regelm\u00e4\u00dfig vor, dass ein Kunde, auch wenn das Design im Prinzip l\u00e4ngst final abgenommen ist, noch \u00c4nderungen sehen bzw. testen m\u00f6chte. Das Prinzip der Zentralisierung und agilen Arbeitsweise verspricht implizit ja auch diese Freiheit.<\/span><\/p>\n

Mit Anforderungen wie \u201cZeigt uns doch bitte mal, wie die Bilder auf unserer Seite mit abgerundeten Ecken aussehen w\u00fcrden.\u201d bringt man normalerweise nicht nur das Kreationsteam, sondern insbesondere auch das Frontend ins Schwitzen. Denn eine solch vermeintlich harmlose Anfrage hat eben Auswirkungen im gesamten Gestaltungsgef\u00fcge und f\u00fcr die verschiedenen Views und Screengr\u00f6\u00dfen.<\/span><\/p>\n

Und genau hier kann Snapshot-Testing nicht nur f\u00fcr das Identifizieren von Fehlern, sondern auch zum Testen genutzt werden.\u00a0<\/span><\/p>\n

Automatisiertes Abgleichen<\/b><\/h2>\n

Insbesondere f\u00fcr Projekte mit vielen Gestaltungskomponenten wird eine Qualit\u00e4tssicherung ohne automatisiertes Snapshot-Testing schier unm\u00f6glich. Aus diesem Grund hat Torben Ewert, Frontend Developer bei Logic Joe ein eigenes Snapshot-Testing-Tool entwickelt, welches anderen Tools gegen\u00fcber folgende Vorteile mitbringt:<\/span><\/p>\n

    \n
  • OSnap ist schneller als andere (mit anderen Tools braucht das Testen von 400 verschiedenen Komponenten ca. 20 Minuten. Unser Tool testet das selbe Projekt in ca. 3 Minuten)<\/span><\/li>\n
  • bestimmte Bereiche k\u00f6nnen vom Test-Run explizit ausgeschlossen werden<\/span><\/li>\n
  • Zu testende Elemente k\u00f6nnen gefiltert werden (\u201cTeste nur den Button und \u00fcberspringe alle anderen Tests\u201c)<\/span><\/li>\n<\/ul>\n