メインコンテンツへスキップ
50% off 全プラン対象、期間限定。月額 $2.48/mo
13 min left
開発者ツールとDevOps

Self-Hosted Visual Regression Testing: BackstopJS vs. Argos (and What Happened to Lost Pixel)

M 著者 Matej 13 分で読めます
Comparison of self-hosted visual regression testing tools BackstopJS, Argos, and the archived Lost Pixel.

CIを、誰もが候補に挙げる3つのオープンソースのビジュアルリグレッションテストツール(BackstopJS、Argos、Lost Pixel)のいずれかに標準化しようとして、検証を始めて一週間後に、3つのうち2つが外から見えていたものとは違うと気づく場面を想像してください。ArgosはGitHubに優れたコードを持っていますが、そのメンテナーはセルフホスティングはサポートもドキュメント化もされていないと明言しています。Lost Pixelは2026年4月22日、チームがFigmaに参加した際にアーカイブされ、すでに使っていたチームに移行の道筋を何も残しませんでした。

そうなると、今日本当にセルフホストでき、かつメンテナンスされているものは、3つのうちちょうど1つだけが残ります。これほど選択肢がありそうに見えるカテゴリーについて言うのは奇妙ですが、状況は実際そうなっています。人々が3つの同格として扱うツールは、実際には、機能するセルフホスト型の選択肢が1つ、他人のサーバー上で動く強力なツールが1つ、そしてあなたが移行すべきものが1つです。

これは、現実との衝突を生き延びるセルフホスト型のビジュアルリグレッションテストツールについて、セルフホスティングを最優先に据えた読み物です。どれがどの制約に合うのか、そして今Lost Pixelを使っているなら何をすべきかを扱います。

短いバージョン

  • BackstopJS はセルフホスト可能で、メンテナンスされ、MITライセンスで、コストゼロの選択肢です。デフォルトでPuppeteer、Playwrightのサポート、Resemble.jsによるピクセル差分、そしてHTMLのレビューUI(計画に入れておく必要のあるDockerレンダリングの注意点付き)を備えます。
  • Argos はワークフローの面でより強力なツールで(PRレビューと、2025年後半以降のARIAスナップショット差分)、ただし実際にはマネージドSaaSです。メンテナーは自分で動かすためのサポートもドキュメントも提供していません。
  • Lost Pixel は2026年4月にアーカイブされました。新しい作業には採用せず、使っているなら今すぐ移行を計画してください。

一行での結論:完全にセルフホストのCIパイプラインには、BackstopJSが実用的な選択です。最良のレビューワークフローが欲しく、SaaSへの依存を受け入れられるなら、Argosの方が優れたツールです。

(これが扱わないもの:Cypressベースのビジュアルテスト、Storybook固有のコンポーネントワークフロー、そして手作業で測定したパフォーマンス数値。この比較は、私自身が動かしたテスト台ではなく、一次情報源の事実から構築されています。)

セルフホスト型ビジュアルリグレッションテストの状況は変わった

この一年で起きた2つの具体的な出来事がこの候補リストを作り変えました。そのどちらも、それらの前に書かれたまとめ記事を元に作業していると見落としやすいものです。

1つ目: 2025年9月のGitHubの議論で、Argosのメンテナーが、Argosはマネージドサービス外での実行についてサポートもドキュメントも提供しないと述べました。コードはMITライセンスで公開されているので「自分でセルフホストできる」は技術的には正しいのですが、サポートされた道筋は存在しません。これは、あなた自身がそれの当番になった途端に途方もなく重要になる区別です。

2つ目: Lost Pixelのリポジトリがアーカイブされた のは2026年4月22日、読み取り専用として、チームが Figmaに参加すると発表したときです。終了に移行ガイドは一切伴いませんでした。つい最近までPercyやChromaticの正当な無料セルフホスト代替だったツールが、今やメンテナー不在の依存物です。

どちらの変化も同じ方向を指しています。チームがそもそもここに行き着く理由、つまりブラウザ×ビューポート×ページで膨らむSaaSの料金や、未公開UIのスクリーンショットを第三者にアップロードすることを禁じるコンプライアンス規則は、消えていません。変わったのは、セルフホストのメニューが見た目より短いということです。

このセクションの要点:人々が候補に挙げる3つのツールのうち、今日本当にセルフホスト可能で、かつ積極的にメンテナンスされているのは1つだけです。

Timeline showing the self-hosted visual regression landscape in 2025-2026: BackstopJS remains maintained and self-hosted, Argos shifts to SaaS-only in practice, and Lost Pixel is archived and read-only.

BackstopJS:本当にセルフホスト可能な選択肢

インストールは npm install -g backstopjs (またはローカルのプロジェクトインストール)であり、この1つの事実こそが、BackstopJSがセルフホスティングの軸で勝つ理由の大半を説明します。リバースエンジニアリングすべきサービスも、密かに依存するマネージドバックエンドも存在しません。あなたが管理するインフラ上で、MITライセンスのもと、ライセンス費用ゼロで、npmパッケージまたはDockerコンテナとして動きます。 README には、現在のライン(6.3.x)がNode 20をサポートすると記されています。

内部ではデフォルトでPuppeteer(ヘッドレスChrome)を駆動し、chromium、firefox、webkit全体でPlaywrightもサポートします。差分はResemble.jsによるピクセルベースで、どれだけのピクセルのずれを失敗とみなすかを制御する設定可能な値 misMatchThreshold を持ちます。承認は、変更を受け入れるためのブラウザ内UIを備えたHTMLレポートを通じて行われます。

制約は、戦略的な判断が下される場所です。BackstopJSには組み込みのPRブロック用ワークフローがありません。差分が存在することは教えてくれますが、それを「このPRはマージできない」というゲートに組み込むのはあなたの仕事です。設定は1シナリオずつJSONに存在し、数百のテストケースになるとそのJSON自体が保守対象の面になります。開発は速いというより遅い方です。プロジェクトはアーカイブされておらず、パッケージは現在 バージョン6.3.25にあり、リポジトリはGitHubスターがおよそ7,200個、オープンなissueが516件あることを示しています。ですからBackstopJSは、成熟して使えるものとして扱い、急速に進化するビジュアルテストのプラットフォームとしては扱わないでください。

最も鋭い運用上のリスクはDockerのレンダリングです。2つのissue、 Dockerでの白いまたは切れたスクリーンショット(#1156)Dockerのv5.3.0へのアップグレード後の一貫しない結果(#1303)が、何年も未解決のまま開いています。Dockerは同時に、マシン間でレンダリングを正規化するので、まさにCIに欲しいものでもあります。つまり、最も多くの制御を与えてくれるツールが、あなたがそれを動かすまさにその構成において、既知で未修正の不安定性のクラスを手渡してもくるのです。それは計画可能なリスクであって、決定的な欠陥ではありませんが、コミットする前にテーブルの上に載せておくべきです。

プロのヒント:OS間のベースラインの罠。開発者がmacOSでベースラインを取り、CIランナーがLinuxなら、実際のリグレッションが存在するより前に、フォントのアンチエイリアスの違いだけでテストが落ちます。ある実務者が 記録しているように、フォントのレンダリングは、CIサービスで使われるLinuxイメージとローカルのmacOSマシンとで異なり、ビジュアルテストがそれ自体で落ちるのに十分なほどです。解決策は、ベースラインを1つの環境で生成して比較すること(CIで使うのと同じDockerイメージの中でBackstopJSをローカルで動かす)で、参照画像と比較画像が同一のレンダリングから来るようにすることです。

Argos:最良のワークフロー、しかし実際にはSaaS

Argosは、BackstopJSにはできない形でレビュー体験を的確に押さえており、それがセルフホスティングの注意点にもかかわらずこのリストに入っている理由のすべてです。Playwright、Cypress、Storybook、WebdriverIO、Puppeteerと統合し、GitHub Actions、GitLab CI、Bitbucket、Azure DevOpsに接続します。PRレビューのワークフローは一級の製品面であり、動き続けてきました。最近の changelogの項目 は、ピン留めコメント付きの共同レビュー(2026年6月)と、不安定な変更の自動無視を追加しています。

最も興味深い技術的な差別化要因は差分です。決定論的なピクセル差分の上に、Argosは 2025年11月4日にPlaywright SDK向けのARIAスナップショット差分を追加しました。ARIAスナップショット差分は、アクセシビリティツリー(ロール、ラベル、構造)をピクセルのスクリーンショットと並べて比較し、純粋なピクセル差分が見逃しうる意味的・アクセシビリティ上のリグレッションのクラスを捕捉します(たとえば、見た目は同じでもアクセシブルなラベルを失ったボタンなど)。アクセシビリティへのコミットメントを持つチームにとって、これはピクセルのみのツールが提供しない本物の機能です。

それから制約です。コードはMITですが、製品はマネージドサービスであり、メンテナーはセルフホスティングは未ドキュメントで未サポートだと明言しています。ソースから立ち上げることはできます。ただ、上流のどんな変更でもデプロイが壊れうること、そして誰も助ける義務がないことを承知の上で行うだけです。断言するより指摘しておく価値のある関連する不確実性があります。コミュニティの報告は、GitLab Self-Managedとの統合がEnterpriseプランを想定していることを示唆しています(私はこれを確認済みの仕様ではなくコミュニティの信号として扱っているので、判断を左右させる前にご自身の構成で検証してください)。

これは居心地の悪いギャップを生みます。厳格なプライバシー要件を持つチーム(まさにセルフホストへの動機が最も強いチーム)が、Argosのレビュー体験も欲しい場合、良い道がありません。マネージドサービスを使って第三者依存を受け入れるか、サポートなしでセルフホストするか、別のツールを選ぶかです。きれいな第4の扉はなく、オープンソースライセンスがそれを閉じているかのように装うより、それを名指しする方が誠実です。

このセクションの要点:Argosはより強力なツールです。それをセルフホストすることはサポートされておらず、運用上もろいものです。

Lost Pixel:アーカイブ済み、そして使っている場合の対処

Lost Pixelのリポジトリ自身の バナー が、その物語のすべてを1行で語っています。リポジトリは2026年4月22日に所有者によってアーカイブされ、今は読み取り専用です。チームはFigmaに参加し、最後のリリースは2024年11月のv3.22.0で、移行ガイドは一切公開されませんでした。

アーカイブまで、Lost Pixelは妥当な選択でした(Dockerベースのレンダリング、PlaywrightとStorybookのサポートに加えてLadleとHistoire、そして全ページと コンポーネント単位の両方のビジュアルテスト)。そのどれも4月22日に技術的に変わったわけではありません。変わったのは、今やメンテナーがなく、セキュリティパッチがなく、ロードマップがないことで、これはCIの依存物にとっては、現行バージョンがどれほどよく動こうと、新しい作業には失格を意味します。

今日それを使っているなら、移行は使い方によって分かれます。コンポーネント単位のテスト、特にStorybookやLadleのワークフローに頼っていたなら、最も近い代替はArgosのマネージドサービスか、 Playwrightのネイティブなスクリーンショットテストです。BackstopJSはセレクターやStorybookのURLを取り込めますが、Lost Pixelが提供したのと同じ組み込みのコンポーネントワークフローは与えてくれないので、それらのコンポーネントの状態は自分でモデル化する必要があります。全ページのビジュアルリグレッションに使っていたなら、BackstopJSが直接のセルフホスト型の後継です。いずれにせよ、この移行は「ビルドが明日壊れる」という意味では急ぎではありませんが、時計は動いています。メンテナンスされないテストツールは、ブラウザ、OS、フレームワークのバージョンが、それが最後にビルドされた対象から離れていくにつれて、静かに朽ちていきます。

一目でわかる比較

CIの判断で重要な軸を、自分の制約に当てはめる前にざっと見渡せるよう、同じ情報を並べたものです。

BackstopJSArgosLost Pixel
ライセンスMITMITコード、マネージドSaaS製品MIT
セルフホスティングの実態設計上、完全にセルフホスト可能可能だがサポートなし・ドキュメントなしかつてはセルフホスト可能、今はアーカイブ済み
メンテナンス状況メンテナンスあり、進みは遅く成熟アクティブ(マネージドサービス)2026年4月22日にアーカイブ
差分の手法ピクセル差分(Resemble.js)ピクセル差分にARIAスナップショット差分を加えたものピクセル差分(メンテナンスなし)
フレームワークとエンジンのサポートPuppeteer(デフォルト)、PlaywrightPlaywright, Cypress, Storybook, WebdriverIO, PuppeteerPlaywright、Storybook、Ladle、Histoire(アーカイブ時点)
レビューワークフローHTMLレポート、手動承認、PRゲートなしPRレビュー、共同コメント、PRゲーティング該当なし(アーカイブ済み)
コスト無料SaaS料金(スナップショット単位)無料だがメンテナンスなし
Side-by-side comparison of BackstopJS, Argos, and Lost Pixel across self-hosting, maintenance, diffing, review workflow, and cost.

選び方(意思決定の枠組み)

機能リストからではなく、最も厳しい制約から始めてください。制約が、メニューの大半をあなたのために消してくれます。

  • 完全にセルフホスト、予算ゼロ、そして手動レビューでの全ページのみのテストを受け入れられる場合: BackstopJS。セルフホスト・メンテナンスあり・無料を同時に満たす唯一の選択肢で、トレードオフ(PRゲートなし、JSON設定、Dockerの不安定さ)は、その周りで設計できる既知の量です。
  • 最良のレビュー体験、PRゲーティング、ARIA差分が欲しく、SaaSへの依存を受け入れられる場合: Argosのマネージドサービス。これは、未サポートのセルフホスティングのリスクなしにArgosの強みへ至る道です。コンプライアンス規則が第三者へのスクリーンショットのアップロードを禁じているなら、この扉は閉じており、あなたはBackstopJSに戻ります。
  • 小さなテストスイート、またはPlaywright優先: 専用ツールをまったく追加しないことを検討してください。Playwrightは toHaveScreenshot() をネイティブに同梱しており、おおよそ100テスト未満のスイートなら、それだけで十分かもしれません。ある 実務者のガイド は、専用ツールが元を取り始める転換点を、おおよそその規模に置いています(これは公式のPlaywrightの数字ではなく、業界の観察として扱ってください)。gitのベースラインファイルを管理するオーバーヘッドはその点を越えると増大し、まさにそこで専用ツールが元を取ります。
  • 現在Lost Pixelを使用中: 前のセクションの分け方に従って、今すぐ移行してください。「まだ動く」を、留まる理由として受け取らないでください。

これらすべてのツールに先立ち、そしてそれらより長く残る注意点があります。 Sparkboxチームは、何年も前に書いていて、エンジニアに実際にテストを使わせることがセットアップより難しかったからこそ、あえてホスト型の選択肢を選びました。レビューUIの弱いセルフホスト型ツールは、コストで勝ち、採用で負けることがあります(チームが騒がしいBackstopJSのレポートを無視するなら、そのゼロのライセンス費用はあなたに何ももたらしていません)。価格だけでなく、レビュー体験を判断に織り込んでください。

このセクションの要点:制約がツールを選びます。セルフホストで無料はBackstopJSを、最良のワークフローでSaaSを受け入れ可能はArgosを、そして小規模でPlaywright優先はまったくツールなしを指すかもしれません。

ヘッドレスChromium向けにCIランナーのサイズを決める

3つのツールはいずれもヘッドレスChromiumを駆動し、ランナーのサイズを決めるのはCPUではなくChromiumのメモリ使用量です。同時に動く各ブラウザワーカーが、それぞれ数ギガバイトのRAMを欲しがるからです。マシンを小さくしすぎると、ビジュアルテストはきれいには落ちません。実行の途中でOOMに殺され、不安定なインフラのノイズとして報告されます。これはデバッグするのに最悪の種類の失敗です。

おおよその目安として、固い数字ではなく並列度で見積もったものです(実際の使用量は、ページの複雑さと、並列で動かすワーカー数に依存します)。

  • 小さなチーム、または直列テスト: およそ2 vCPU / 4 GB RAMで、CIデーモンのオーバーヘッドを含め、単一のヘッドレスChromiumワーカーをさばけます。
  • チームでのCI利用: およそ4 vCPU / 8 GB RAMで、おおよそ2〜4の並列ブラウザワーカーをサポートします。ここがほとんどのチームの落ち着き先です。
  • 高スループット、または大きなスイート: 高い並列度のため、あるいはビジュアルリグレッションの実行が他のCI作業とランナーを共有する場合、およそ8 vCPU / 16 GB RAM。

ストレージは静かな費目です。スクリーンショットの成果物と過去のベースラインは実行のたびに積み上がるので、その成長を見込んでください。ベースラインをローカルに保持するなら余裕あるストレージを確保し、あるいはベースラインと成果物をオブジェクトストレージへ押し出して、ランナーのディスクが制約にならないようにしてください。

これを行うセルフホスト型のCIランナーにとって、VPSは自然なホストです。Chromiumワーカーのために予測可能で専有のRAMが欲しく、ホームラボのマシンはハードウェアがすでにそこにある場合にしか意味をなさないからです。周辺のCIスタックも立ち上げるなら、ビジュアルテストツールの周りの部品は、Cloudzyのマーケットプレイスでのワンクリックのデプロイです。CIフォージにはGitea、GitLab、Jenkins、Forgejo、そしてツールが必要とするレンダリングの一貫性のためにDocker。ビジュアルリグレッションツール自体はnpmまたはDockerでその上にインストールするので、上記の範囲でサイズを決めた Linux VPS を立ち上げ、そこで動かしてください。DockerベースのCIを組むなら、Cloudzyの セルフホスト型GitLab代替Dockerコンテナの一覧表示 のガイドが、隣接するセットアップをカバーしています。

CI runner sizing for headless Chromium across three tiers: 2 vCPU / 4 GB for serial tests, 4 vCPU / 8 GB for 2 to 4 parallel workers, and 8 vCPU / 16 GB for large suites, with storage headroom for baselines.

よくある質問

Argosはセルフホスト可能ですか?

技術的には可能です(コードはMITライセンス)が、メンテナーは2025年9月に、Argosはマネージドサービス外での実行についてサポートもドキュメントも提供しないと述べました。セルフホスティングは未サポートで運用上もろいものとして扱ってください。上流のどんな変更でも壊れうるうえ、どのメンテナーにも助ける義務はありません。ほとんどのチームにとって、マネージドサービスがArgosの利点を得る実用的な方法です。

Lost Pixelに何が起きたのですか?

Lost Pixelは2026年4月22日、チームがFigmaに参加して製品を終了したときにアーカイブされました。リポジトリは読み取り専用で、最後のリリースは2024年11月のv3.22.0、移行ガイドは提供されませんでした。新しい作業には採用しないでください。使っているなら、BackstopJS(全ページのテスト)か、ArgosおよびPlaywrightネイティブ(コンポーネントのテスト)への移行を計画してください。

ARIAスナップショット差分とは何ですか?

ARIAスナップショット差分は、アクセシビリティツリー(ロール、ラベル、構造)をピクセルのスクリーンショットと並べて比較し、ピクセル差分だけでは見逃しうる意味的・アクセシビリティ上のリグレッション、たとえば見た目は同じでもアクセシブルなラベルを失ったボタンなどを捕捉します。Argosは2025年11月4日にこの機能を追加しました。

CIでヘッドレスChromiumはどれくらいRAMが必要ですか?

単一の直列ワーカーはたいていおよそ2〜4 GBで動き、同時に動くワーカーはそこからほぼ線形にRAMをスケールします。実際の使用量は、ページの複雑さと、並列で動かすブラウザインスタンス数に依存するので、これらの値は固い数字ではなく目安として扱い、OOMに殺されるテスト実行を避けるために余裕を残してください。

BackstopJSはPlaywrightをサポートしますか?

はい。Puppeteerがデフォルトのエンジン(ヘッドレスChrome)で、BackstopJSはchromium、firefox、webkit全体でPlaywrightもサポートします。エンジンは設定で選びます。

共有

ブログの他の記事

読み進める。

デプロイの準備はできましたか? 月額2.48ドルから。

2008年から独立運営のクラウド。AMD EPYC、NVMe、40 Gbps。14日間返金保証。