【Vitest5.0大解剖】Vitest5.0のTrace View

Transcript

1. 2026年9月 Vitest 全5回 5.0② デバッグとレポート の Trace View 赤神 青空
2. ▪BrowserTrace View とは何か Mode 向けの組み込みトレース 操作・アサーション・ page.mark をDOMスナップショットとして記録し、ステップごとに再生する。 ステップを選ぶとその瞬間のページが復元され、操作した要素が強調される 失敗したアクションとアサーションは赤で表示される ブラウザUI・Vitest UI・HTMLレポーターのいずれからも開ける キーボード操作とwatchモードでのライブ更新に対応 今ココ デバッグ 2/7
3. ▪記録するところと、見るところ Trace View の仕組み 実⾏中：操作‧アサーション‧page.mark を記録する click(button) fill(input) page.mark('保存') expect ✕ 失敗 DOM スナップショット DOM スナップショット DOM スナップショット DOM スナップショット 実⾏後：ステップを選んで、その瞬間のページを⾒る Trace View click(button) fill(input) expect ✕ その時点のページを復元 操作した要素を強調∕失敗は⾚ ソース位置をエディタ枠に表⽰ ブラウザUI / Vitest UI / HTMLレポーター 実行中にステップごとのDOMを記録し、実行後に選んで復元する 今ココ デバッグ 3/7
4. ▪公式が挙げている違いは2つ Playwright Traces との違い Trace View はプロバイダに依存せず、別のビューアも要らない。 ローカルのデバッグにも、CIで落ちたときの調査にも同じものが使えます。 今ココ デバッグ 4/7
5. ▪設定ファイルでも 有効にする CLI でも ts export default defineConfig({ test: { browser: { traceView: true, }, }, }) // CLI: vitest --browser.traceView 今ココ デバッグ 5/7
6. ▪Trace View調査とレポートの改善 以外に入ったもの で、結果に関係なく各テストを指定回数繰り返せる（flaky調査向け） ロケーターが要素を見つけられないとき、HTMLに加えてARIAスナップショットを表示する レポーターの出力先がプロジェクト直下の .vitest ディレクトリに集約された HTMLレポーターの singleFile で、1枚のindex.htmlにまとめられる --repeats 今ココ デバッグ 6/7
7. ▪ 第2回のまとめ 落ちたテストを、終わったあとから見に行けるようになった。 Trace View ステップごとのDOMを記録し、選んで復元する。 レポート 出力は .vitest に集約。HTMLは1枚にもできる。 Browser Mode を使っているなら、まず browser.traceView を有効にしてみてください。 今ココ おわりに 7/7