CircleCI + BackstopJS (Puppeteer) でビジュアルリグレッションテストを継続的に監視する
CircleCI と BackstopJS を組み合わせて、『継続的に Web ページの視覚的な変化を監視するツール』を作成しました。
Motivation
Web アプリを運用する上で、システム改善は継続的に行われます。 そのシステム改善をリリースする前に、入念なテスト（ユニットテスト、インテグレーションテスト、E2E テスト）をパスする必要があります。しかし、Web アプリの規模が大きくなるにつれて、意図せずデグレが発生してしまう可能性が大きくなります。 そのデグレを気づくのが『社内部指摘』なのか『エンドユーザからのお問い合わせ』からなのか分かりません。 そこで、Web アプリを定期的に監視することで、予想外なデグレッションを早期に発見できる仕組みが欲しくなりました。
必要とする要件は、次のとおりです。
- スケジューリング実行可能
- 無料で使えること
- わかりやすい視覚的変化のレポート
- カスタマイズしやすい監視方法
ここから、CircleCI + BackstopJS(Puppeteer)という組み合わせが生まれました。
Usage
次の手順で構築できます。
~ $ node -v
v12.9.1- backstop.json に監視したい URL を設定
- CircleCI に必要な環境変数を設定(README.md参照)
- CircleCI で Job を実行し、Artifacts にあるレポートを閲覧
Puppeteer を使って Web アプリへリクエストしています。 そのため、『Javascript を無効にする』や『Cookie を設定する』といったニーズに対応できます。
Conclusion
このツールにより、外部から Web アプリの変化を早期に発見できるようになりました。 ただし、リクエストするスケジューリング間隔には十分にお気をつけください。 リクエストをしすぎると、対象 Web アプリの負荷が高まってしまいます。
-
シェアする
フォローする
関連する記事
タグ「DevOps」の記事
フィーチャーフラグ（Feature Flag）をご存知でしょうか？これは新機能のリリース制御やABテストを容易にする強力なツールです。しかし、適切な管理ツールなければ、フィーチャーフラグの管理は容易なことではありません。今回は、そんなフィーチャーフラグの管理を効率化するツール、**Unleash**について解説します。
2023-06-29
あけまして、おめでとうございます。神社のおみくじで、人生はじめて大吉を引きました、silverbirder です。普段の業務で、FigmaのデザイントークンやAPIのスキーマファイル、i18nのメッセージファイルなどを、フロントエンドへ同期するコミュニケーションが不毛に感じています。そこで、GitHub ActionsとPull Requestを活用して、同期コミュニケーションを削減する仕組みを紹介します。
前々から気になっていた、CI/CD の非ベンダーロックインな Dagger というツールを試してみました。本記事では、試した内容について共有しようと思います。
タグ「テスト」の記事
Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。 flex-shrink の指定を忘れて、要素が押しつぶされてしまった z-index の指定を間違えて、要素が意図せず前面（また
AIの進化によって、プロダクションコードに対するテストコードは、以前と比べて格段に書きやすくなったと感じています。 単体テストに関する基本的なお作法については、以前に以下の記事で整理しました。 興味があれば、参考として読んでもらえると嬉しい
2026-01-09
はじめに Playwright で E2E テストを書く際、playwright codegen や、近年では Playwright MCP を利用して、テストコードの雛形を作成することが多いと思います。 ただし、生成したテストコードが正し
2025-12-26