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 というツールを試してみました。本記事では、試した内容について共有しようと思います。
タグ「テスト」の記事
以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi
業務でWebフロントエンドのテストコードを書く際に、どこに何を書くかというのをざっくりと考えをまとめてみます。 前提 Webアプリケーションのプログラムファイルがツリー構造である前提とします。 tree よくあるフィーチャー単位のフォルダ構
2026年06月05日
個人開発のバイブコーディングでテストコードを書かせているが意味がなかった。 期待する機能をプロンプトで指示しプロダクションコードが出来上がるが、同時にテストコードも書かせていた。 そのテストコードは、プロダクションコードをそのままテストコー