Vitest Browser Mode Replaces jsdom: Frontend Testing with Real Pixels
In an interview, Alexander Opalic explains how he uses Vitest Browser Mode to render Datepicker, tables, and Modal in isolation within an iFrame, testing from the user's perspective rather than through method calls, which can catch issues like gray text on a white background that simulated environments cannot detect. The trade-off is that each click takes 200 milliseconds instead of 20 milliseconds. He also discusses doing screenshot testing for his own UI library, and why it is more worthwhile to establish a clear testing strategy as more and more code is generated by AI.
Topics
Body
Richard Seidl spricht mit Alexander Opalic darüber, warum Frontend-Testing mehr Anforderungen stellt als das Testen im Backend und was sich ändert, wenn Komponenten nicht mehr in jsdom, sondern in einem echten Browser laufen.
Weiterlesen nach der Anzeige
Opalic rendert Datepicker, Tabellen und Modals mit dem Vitest Browser Mode isoliert in einem iFrame und testet sie aus der Perspektive des Nutzers, nicht entlang ihrer Methoden. Grauer Text auf weißem Hintergrund fällt so automatisch auf, ein Fall, den eine emulierte Umgebung nicht erkennt.
Die beiden sprechen über den Zeitpreis von 200 statt 20 Millisekunden pro Klick, über Screenshot-Tests für die eigene UI-Bibliothek und darüber, warum sich eine saubere Teststrategie lohnt, wenn Code zunehmend mit KI entsteht.
Richard Seidl ist Berater, Speaker und Podcast-Host. Für ihn ist klar: Wer heute exzellente Software kreieren möchte, denkt den Entwicklungsprozess ganzheitlich: Menschen, Kontext, Methoden und Tools. Er hat seine Erfahrungen in acht Fachbüchern veröffentlicht, betreibt erfolgreich zwei Community-Podcasts und ist Beirat der heise-Konferenz betterCode() Testing.
„Ich finde, Frontend-Testing ist komplizierter als Backend-Testing.“ – Alexander Opalic
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Alexander Opalic ist Full-Stack-Entwickler mit über acht Jahren Erfahrung und arbeitet bei Otto Payments. Auf alexop.dev schreibt er über moderne Webentwicklung, TypeScript, AI Agents und die Zukunft der Softwareentwicklung. Als Speaker beschäftigt er sich besonders mit neuen Developer-Workflows, Testing und der Frage, wie AI verändert, wie wir Software bauen.
Softwarequalität im Gespräch
Hier dreht sich alles um Softwarequalität. Ob Testautomatisierung, Qualität in agilen Projekten, Testdaten oder Testteams: Richard Seidl und seine Gäste schauen sich die Dinge an, die mehr Qualität in die Softwareentwicklung bringen.
Weiterlesen nach der Anzeige
Die aktuelle Episode ist auch auf Richard Seidls Blog und auf YouTube verfügbar.
(mro)