Storybook — Alle Artikel & Tutorials

Storybook hat sich als Referenzumgebung für die Entwicklung, Dokumentation und das Testen isolierter UI-Komponenten etabliert. Für Teams, die ein Design System pflegen, wird jede Story zu einem natürlichen Ziel des visuellen Testings: eine in einem präzisen Zustand gerenderte Komponente, ohne Anwendungsabhängigkeit, perfekt reproduzierbar. Diese feine Granularität ermöglicht es, eine visuelle Regression auf Button- oder Card-Ebene zu erkennen, bevor sie sich in einer zusammengebauten Seite ausbreitet.

Die Artikel auf dieser Seite behandeln das Storybook-Ökosystem unter dem Aspekt des visuellen Testings: Integration mit Chromatic (dem nativen Werkzeug des Storybook-Teams), Alternativen wie Loki, Storyshots oder Playwright Component Testing, Verwaltung von Decorators und Zuständen (Hover, Focus, Dark Mode), Best Practices, um Stories deterministisch zu machen. Wir behandeln auch die wiederkehrende Frage: Sollte man nur die Komponenten in Stories testen oder auch die echten Seiten, die sie zusammenbauen? Beide Ansätze ergänzen sich, und genau dort positioniert sich Delta-QA – beim Test von Webseiten, die unter realen Bedingungen gerendert werden, ergänzend zu einer durch Storybook gewährleisteten Komponentenabdeckung. Diese Seite hilft, eine kohärente Strategie zwischen den beiden Ebenen zu strukturieren.