再現可能なフルページのスクリーンショット テストを構築する: フィクスチャ、マーカー、および合格記録
ランダムなニュース フィードでスクリーンショット ツールをテストすると、あいまいな結果が得られます。ページは実行ごとに変更され、広告のサイズが変更され、画像が回転され、パーソナライズされたモジュールはアカウントごとに異なる場合があります。再現可能なテストには、既知の機能と明示的な予想エンドポイントを備えた管理されたページが必要です。
スクリーンショット PDF は、公開されている フルページ キャプチャ フィクスチャ を提供します。これにはユーザー データが含まれておらず、検索ランディング ページではなく診断画面であるため、noindex とマークされています。この記事では、その使用方法と、他の人が繰り返すことができる承認記録を作成する方法について説明します。
器具の内容
このページは自己完結型であり、サードパーティの画像や API に依存しません。これには次のものが含まれます。
- 完成したキャプチャに 1 回表示されるスティッキー ヘッダー。
- 後のスライスで繰り返さない固定コーナー コントロール。
- 既知の順序で番号が付けられたセクション マーカー。
- 目に見える継ぎ目を検出するための明暗の表面を交互に配置します。
- ビューポートに入った後にトリガーされる遅延ビジュアルブロック。
- 整列とページ境界検査のための高密度のテーブル。
- Canvas で生成されたストライプ パターン。
- 存在する必要がある最後のグリーンエンドポイント。
テスト環境を定義する
キャプチャの前に、次のことを記録します。
|フィールド |フォーマット例 |
| --- | --- |
|ブラウザ | Chrome メジャー バージョン |
|拡張子 |スクリーンショット PDF 0.0.13 |
|ビューポート |幅 × 高さ CSS ピクセル |
|ズーム |パーセンテージ |
|デバイスのピクセル比 |ブラウザによって報告される値 |
|キャプチャモード |フルページまたは分割なし |
|テーマ |明るいか暗い |
|開始時間 |ローカルのタイムスタンプとタイムゾーン |
異なるビューポート幅で作成された 2 つのキャプチャを、同じテストであるかのように比較しないでください。レスポンシブ レイアウトでは、セクションの高さ、行の折り返し、テーブルの幅、スライスの数を変更できます。
ベースライン キャプチャを実行する
新しいタブでフィクスチャを開き、リロードします。ベースラインを手動でスクロールしないでください。フルページのキャプチャを開始し、エディターを待ちます。回避策を試みる前に、最初の結果を保存してください。
次に、次のことを確認します。
- セクション マーカーは昇順に表示され、欠落するものはありません。
- スティッキー ヘッダーは、ビューポート間隔ごとではなく、最初に表示されます。
- 固定コーナー コントロールは、後のセクションを隠しません。
- 遅延ブロックには、空のプレースホルダーではなく、最終的なストライプ パターンが含まれます。
- テーブルの行は整列されたままであり、重複する行はありません。
- 交互の背景は、水平ストリップが欠けたり繰り返されたりすることなく結合されます。
- 最後の緑色のエンドポイントが表示されます。
エンドポイントが見つからない場合は、最後に表示されたマーカーを記録し、ページの CSS 高さを測定します。現在のフルページ ワークフローは 15,000 CSS ピクセルに制限されています。意図的に長いフィクスチャまたはユーザー ページはセクションに分けてキャプチャする必要があります。
遅延読み込み動作を個別にテストする
フィクスチャをリロードし、上から下にゆっくりスクロールし、遅延ブロックが表示されるまで待機し、先頭に戻って再度キャプチャします。このプリロードされた結果をベースラインと比較します。
ベースラインに空のブロックがあるが、プリロードされた結果が完了している場合、キャプチャ パイプラインは機能していますが、ページの読み込み遅延が自動スクロール中に発生する待機時間を超えています。正しい回避策は、欠落している画像をステッチング エラーとしてラベル付けするのではなく、ページをプリロードまたはセクション化することです。
推測せずに継ぎ目を特定
交互のセクションの背景とキャンバスのストライプ パターンを使用します。ストリップが欠けていると、ストライプ シーケンスに突然のジャンプが生じます。オーバーラップはストライプまたはマーカーを繰り返します。動的な高さの変更により、境界を越えてコンテンツの位置がずれます。
ウィンドウに合わせるだけでなく、実際のピクセル サイズで検査します。おおよその垂直座標と、問題のすぐ上と下のマーカーを記録します。これにより、開発者は「中間付近」ではなく、再現可能な場所を得ることができます。
ソースページの復元を確認する
キャプチャが成功または失敗したら、「フィクスチャ」タブに戻ります。確認する：
- ページは上部にあります。
- スティッキーヘッダーと固定コントロールが再び表示されます。
- キャプチャ進行要素は残りません。
- スクロールは引き続き機能します。
- 遅延したコンテンツは引き続き使用できます。
拡張機能によりフローティング要素の可視性が一時的に変更されるため、復元はテストの一部です。出力が正しいからといって、ソース タブが変更された状態のままであることは許されません。
失敗を最小限に抑えた再現を作成する
1 つのセクションが失敗した場合は、最初にフィクスチャを使用して再現し、次に関連する動作のみを含む縮小されたローカル ページを使用して再現します。プライベートデータ、認証、広告、分析、および無関係なフレームワークを削除します。問題を引き起こすために必要な最小限の CSS または JavaScript を維持します。
ブラウザと拡張機能のバージョン、ビューポート、ズーム、キャプチャ モード、マーカー範囲、期待される結果、実際の結果、プリロードによって結果が変わるかどうかを提供します。プライベートページ全体ではなく、トリミングされた証拠を添付してください。
合格実績
実行ごとに 1 行を使用します。
|実行 |マーカーが完成しました |フローティング UI を 1 回 |遅延ブロックの準備ができました |きれいな縫い目 |エンドポイントが存在する |ソースが復元されました | | --- | --- | --- | --- | --- | --- | --- | |ベースライン |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 | |プリロード済み |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 |合格/不合格 |
すべての失敗について短いメモを追加し、元の出力を保持します。再現可能なフィクスチャはすべての Web サイトをカバーすることはできませんが、拡張機能全体の回帰を 1 つのサイトの動的な動作から分離することができます。
高品質のスクリーンショット テストは、「いくつかのページを試して問題なく表示されるかどうかを確認する」ことではありません。入力を定義し、既知のエッジケースを明らかにし、エンドポイントを記録し、復元をチェックし、個人情報にアクセスせずに別の人が繰り返すことができる結果を生成します。