スクリーンショット取得によるビジュアルリグレッションテスト
開発チームは、単体テストでは見逃しがちな種類のバグ(レイアウトの崩れ、フォントのフォールバック、欠落したアイコン、壊れたレスポンシブ状態)を検出するためにWebshotを使っています。ステージングを取得し、本番を取得し、その2つを差分比較します。差分をPRコメントに貼り付ければ、変更が安全であることの証拠(または新しいバグが発生したばかりであることの証拠)になります。
すべてのボタンは設定済みの取得フォームを開きます。ページが読み込まれた後で形式やビューポートを変更できます。
この用途でWebshotを使う理由
ピクセル単位で正確な取得
PNGモードはくっきりとしたテキストとエッジを保持するため、JPGの圧縮ノイズが誤検出を生んでしまうピクセル差分ツール(`pixelmatch`、ImageMagickの`compare`)に最適です。
毎回同じビューポート
Webshotは実行ごとにまったく同じビューポート、スクロール位置、フォント読み込みの待機時間で取得するため、差分結果の信頼性が高くなります。
APIに優しい
無料のWebshot APIをCIに組み込みましょう。デプロイ前とデプロイ後に取得し、`pixelmatch`で差分を取り、変更ピクセルがしきい値を超えたらビルドを失敗させます。
headless Chromeの定型処理が不要
Puppeteerのセットアップ、フォントのインストール、サンドボックスフラグは不要です。Webshotはそれらすべてを当社のインフラ上で動かしています。CIはHTTP呼び出しを行うだけです。
ビジュアルリグレッションテストの取得方法
- 監視したいページを選びます。トップページ、主要なランディングページ、チェックアウトフローなど、リグレッションが起きると困る箇所ならどこでも構いません。
- それぞれをPNG + desktop_full + mobile_fullで取得し、現在の本番の見た目をベースライン化します。
- 次のデプロイ後、同じURLを再度取得します。古い版と新しい版を`pixelmatch`やImageMagickで差分比較し、変更ピクセルが1%を超えるものは人による確認に値します。
- CIに組み込みましょう。デプロイ前フックがステージングを取得し、デプロイ後フックが本番を取得し、差分がしきい値を超えたらビルドを失敗させます。
よくある質問
CIでheadless Chromeを動かすには、Chromium、フォント、サンドボックスのカーネルフラグをインストールし、それらをすべて最新に保つ必要があります。Webshotならインストールは一切不要です。CIは当社のAPIにHTTP呼び出しを行い、PNGを受け取るだけです。Chromeの更新、フォントのキャッシュ、SSRF対策は当社で対応します。
PNG + 同じビューポート + 同じ待機方法を使えば安定します。Webshotはビューポートサイズを固定し、fonts.ready + network-idle + `prefers-reduced-motion`クエリで宣言されたアニメーションを待ちます。ランダムなアニメーション(lottieループ、Date.now()による背景)は実行ごとに異なる差分が出るため、テスト環境ではそれらを固定してください。
1回の呼び出しではできません。各URLを個別に取得し、別のライブラリで差分を取ります。APIは取得に特化させており、差分処理は30行のスクリプトで済みます。サンプルコードは`/developers`をご覧ください。
はい。Webshotは取得前にnetwork-idle(500ミリ秒間リクエストがない状態)とfonts.readyを待つため、React、Vue、Svelte、Next.jsのアプリはすべてスクリーンショット前に完全に描画されます。network-idleに到達しないサイト(ロングポーリング、websocket)には、API経由で`maxWait`パラメータを渡せます。
無料の一般公開フォームはIPあたり15分で5枚で、CIには少なすぎます。無料APIティアはより寛容です。`/developers`をご覧ください。大量のリグレッションテスト(ビルドあたり50枚以上)には、商用APIプランでIPごとの上限が撤廃されます。
Webshot自体は取得のみを行い、差分処理の層はお客様側でご用意いただきます。2行で済む解決策は`npx pixelmatch baseline.png new.png diff.png`です。あるいはマネージドのビジュアル差分サービス(Percy、Chromatic、BackstopJS)を使い、WebshotのPNGをそれらに渡すこともできます。
その他の活用事例: Google Mapsのスクリーンショット · WordPressのスクリーンショット · ランディングページのQA · 法的証拠のスクリーンショット · SNSのスクリーンショット · すべて見る →