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 アプリの負荷が高まってしまいます。
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「DevOps」の記事
フィーチャーフラグ（Feature Flag）をご存知でしょうか？これは新機能のリリース制御やABテストを容易にする強力なツールです。しかし、適切な管理ツールなければ、フィーチャーフラグの管理は容易なことではありません。今回は、そんなフィーチャーフラグの管理を効率化するツール、 **Unleash** について解説します。
2023年06月29日
あけまして、おめでとうございます。神社のおみくじで、人生はじめて大吉を引きました、silverbirder です。普段の業務で、FigmaのデザイントークンやAPIのスキーマファイル、i18nのメッセージファイルなどを、フロントエンドへ同期するコミュニケーションが不毛に感じています。そこで、GitHub ActionsとPull Requestを活用して、同期コミュニケーションを削減する仕組みを紹介します。
前々から気になっていた、CI/CD の非ベンダーロックインな Dagger というツールを試してみました。本記事では、試した内容について共有しようと思います。
タグ「テスト」の記事
以下の記事で書いた CSSをテストする方法について、試してみました。 https://zenn.dev/silverbirder/articles/df6752b230f04c ソースコードは、以下に置いています。 https://gith
Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。 flex-shrink の指定を忘れて、要素が押しつぶされてしまった z-index の指定を間違えて、要素が意図せず前面（また
AIの進化によって、プロダクションコードに対するテストコードは、以前と比べて格段に書きやすくなったと感じています。 単体テストに関する基本的なお作法については、以前に以下の記事で整理しました。 興味があれば、参考として読んでもらえると嬉しい
2026年01月09日