Vitest Browser Mode 取代 jsdom：用真实像素做前端测试
Software Testing: Vitest Browser Mode statt jsdom: Tests mit echten Pixeln | heise online
Alexander Opalic 在访谈中介绍用 Vitest Browser Mode 把 Datepicker、表格和 Modal 隔离渲染在 iFrame 中，从用户视角而非方法调用做测试，能发现白底灰字这类模拟环境识别不了的问题。代价是每次点击耗时从 20 毫秒升到 200 毫秒，他还谈到为自有 UI 库做截图测试，以及代码越来越多由 AI 生成时为何更值得建立清晰的测试策略。
主题
正文
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)