hacomono-tech https://blog.hatena.ne.jp/hacomono-tech/ hacomono TECH BLOG https://techblog.hacomono.jp/ Nuxt3 どうも、フロントエンドの開発基盤を担当している、みゅーとん(@_mew_ton)です 前回 (Nuxt3 でモックサーバ作ってみる) では Nuxt3 でモックサーバモードの実装について紹介しました。 今回は、これを使って E2E テストを実装する体制を整えたので、紹介します！ ビジュアルリグレッションテストとは？ ざっくりいうと、変更前と後での見た目を画像差分で比較し、変化がないかどうかをテストする方法です。 スナップショットテストなどと表記される場合もありますが、スナップショットテストでは DOM 構造を文字列としてスナップショットするケースが有り、厳密には一致しません。 ページのビジュア… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftechblog.hacomono.jp%2Fentry%2F2023%2F02%2F07%2F070000" title="Nuxt3 モックサーバモードで Playwright を使った Visual Regression Test - hacomono TECH BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/h/hacomono-tech/20230206/20230206135301.png Hatena Blog https://hatena.blog 2023-02-07 07:00:00 rich https://techblog.hacomono.jp/entry/2023/02/07/070000 1.0 100%