Cloud-Service Chromatic: Visuelles Testing in Storybook, Playwright und Cypress

Der Cloud-Service Chromatic absolviert visuelle Tests deutlich schneller als bisher und bringt neben Storybook auch Anbindungen an Playwright und Cypress.

In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
Symbolbild Hände an Laptop-Tastatur

(Bild: JARIRIYAWAT/Shutterstock.com)

Lesezeit: 2 Min.
Von
  • Maika Möbus

Chromatic hat Version 3.0 erreicht. Der Cloud-basierte Testing-Service entspringt dem Core-Entwicklungsteam von Storybook, einem Tool für das Entwickeln und Testen von UI-Komponenten. Chromatic ermöglicht visuelles Testing nun neben Storybook auch mit den Testing-Frameworks Playwright und Cypress. Im neuen Release soll es Tests zudem deutlich schneller durchführen und stellt TurboSnap als beschleunigte Testing-Methode bereit.

Seit dem kürzlich erschienenen Release Storybook 8 steht ein Add-on für Chromatic bereit, um visuelle Tests direkt innerhalb des UI-Tools auszuführen. Das Add-on setzt eine Registrierung bei Chromatic voraus und bietet in der kostenlosen Version bis zu 5000 Snapshots pro Monat. Nun sind auch Integrationen mit den Testing-Frameworks Playwright und Cypress verfügbar.

Damit sollen funktionales und visuelles Testing in Playwright und Cypress in einem einzigen Test-Run ablaufen können. Die Integrationen erlauben Zugriff auf alle Chromatic-Features innerhalb von End-to-End-Tests. Dazu zählen unbeschränkte, parallelisierte, Cloud-basierte visuelle Tests, die Kompatibilität mit den gängigsten Browsern und der Einsatz von Chromatics UI-Review-Plattform.

Zu Beginn des Early-Access-Programms im August 2023 stellte das Chromatic-Team den Einsatz mit Playwright näher vor. Im Februar 2024 beschrieb es in einem Blogeintrag den Einsatz mit Cypress im Beta-Status. Weitere Informationen zu den Integrationen mit Storybook, Playwright und Cypress bietet die Website des Herstellers.

Heise-Konferenz: enterJS 2024

Die Enterprise-JavaScript-Konferenz enterJS findet am 7. und 8. Mai in Mainz statt. Die Veranstalter dpunkt.verlag und iX präsentieren über 35 Vorträge und drei Workshops rund um JavaScript, Frameworks sowie Tools und Techniken.

Im neuen Release führt Chromatic die Funktion TurboSnap ein. Wie das Entwicklungsteam ausführt, können auch kleine Anwendungen ein komplexes User Interface besitzen, sodass das visuelle Testen einer gesamten Anwendung langsam und kostspielig sein kann.

Kosteneffizienter soll der Einsatz von TurboSnap sein: Beim Konfigurieren von TurboSnap innerhalb eines Projekts soll Chromatic auf Basis von Dependency Graph und Git-Historie identifizieren, wo und wie sich das UI geändert hat. Dann erstellt Chromatic Snapshots ausschließlich der veränderten UI-Bereiche. So soll sich der Snapshot-Verbrauch um bis zu 80 Prozent pro Test-Run verringern und Test-Zeiten sollen stark verkürzt sein.

Insgesamt soll Chromatic 3 – unter Verwendung von Chromatic Capture Cloud 6, TurboSnap und Storybook 8 – visuelle Tests bis zu viermal schneller als vor einem Jahr durchführen können. Alle Details zum neuen Major Release lassen sich dem Chromatic-Blog entnehmen.

(mai)