如何建立可重現的全頁截圖測試：測試頁、標記與驗收記錄
在隨機新聞源上測試螢幕截圖工具會得到不明確的結果。頁面可以在運行之間改變，廣告可以調整大小，圖像可以旋轉，並且個性化模組可以因帳戶而異。可重現的測試需要具有已知功能和明確的預期端點的受控頁面。
Screenshot PDF 提供了一個公開的全頁擷取固定裝置。它不包含用戶數據，並被標記為 noindex，因為它是診斷介面，而不是搜尋登陸頁面。本文介紹如何使用它以及如何建立其他人可以重複的接受記錄。
測試頁包含什麼
該頁面是獨立的，不依賴第三方映像或API。它包括：
- 黏性標題應該在完成的捕獲中出現一次；
- 固定的角控制，不應在後面的切片中重複；
- 依已知順序編號的部分標記；
- 交替明暗表面以進行可見接縫檢測；
- 進入視窗後觸發延遲視覺區塊；
- 用於對齊和頁邊界檢查的密集表；
- Canvas 產生的條紋圖案；
- 必須存在的最終綠色端點。
定義測試環境
捕獲之前，記錄：
|領域|範例格式 |
| --- | --- |
|瀏覽器 | Chrome 主要版本 |
|擴充|截圖 PDF 0.0.13 |
|視窗|寬度 × 高度 CSS 像素 |
|放大|百分比 |
|裝置像素比 |瀏覽器報告的值 |
|拍攝模式|整頁或無分割|
|主題 |淺色或深色|
|開始時間 |本地時間戳與時區 |
不要將使用不同視窗寬度進行的兩個捕獲進行比較，就好像它們是相同的測試一樣。響應式佈局可以更改部分高度、換行、表格寬度和切片數量。
運行基線捕獲
在新分頁中開啟測試頁並重新載入。基準測試前不要手動捲動。啟動全頁截圖並等待編輯器開啟；嘗試任何替代方法前，先保留第一次結果。
然後驗證：
- 部分標記依升序顯示，沒有缺失。
- 黏性標題出現在開頭，而不是出現在每個視窗間隔。 3.固定角點控制不會遮擋後面的部分。
- 延遲塊包含其最終的條紋圖案而不是空佔位符。
- 表行保持對齊且沒有行重複。
- 交替背景相交，沒有缺失或重複的水平條帶。
- 最終的綠色端點可見。
如果端點遺失，請記錄最後一個可見標記並測量頁面的 CSS 高度。目前的整頁工作流程限制為 15,000 CSS 像素；故意較長的裝置或使用者頁面必須分段捕獲。
單獨測試延遲載入行為
重新載入測試頁，從上到下緩慢捲動，等待每個延遲載入區塊出現，再回到頂部重新截圖。將這個預載入結果與基準結果比較。
如果基線有空區塊但預先載入結果已完成，則擷取管道正在運行，但頁面的載入延遲超出了自動滾動期間可用的等待時間。正確的解決方法是預先載入或分段頁面，而不是將遺失的影像標記為拼接錯誤。
無需猜測即可識別接縫
使用交替部分背景和畫布條紋圖案。缺少的條帶會導致條帶序列突然跳躍。重疊重複條紋或標記。動態高度變化會使內容在邊界上錯位。
檢查實際像素大小，而不僅僅是適合視窗。記錄近似垂直座標以及問題上方和下方的標記。這為開發人員提供了一個可複製的位置，而不是「靠近中間的某個位置」。
驗證來源頁面的恢復
無論截圖成功或失敗，都返回測試頁分頁，確認：
- 頁面位於頂部；
- 黏性標題和固定控制再次可見；
- 沒有捕獲進度元素剩餘；
- 滾動仍然有效；
- 延遲的內容仍然可用。
恢復是測試的一部分，因為擴充會暫時改變浮動元素的可見性。正確的輸出不能成為來源選項卡處於修改狀態的藉口。
建立最小故障重現頁面
如果部分失敗，請先使用固定裝置進行重現，然後使用僅包含相關行為的縮小的本機頁面進行重現。刪除私有資料、身分驗證、廣告、分析和不相關的框架。保留觸發問題所需的最小 CSS 或 JavaScript。
提供瀏覽器和擴充功能版本、視窗、縮放、擷取模式、標記範圍、預期結果、實際結果以及預先載入是否會變更結果。附加裁剪後的證據而不是整個私人頁面。
驗收記錄
每次運行使用一行：
|執行|標記完整 |浮動介面僅一次 |延遲載入區塊完整 |拼接無接縫|末端標記存在 |來源頁面已復原 | | --- | --- | --- | --- | --- | --- | --- | |基線|通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 | |預裝|通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 |通過/失敗 |
為每個失敗添加一個簡短的註釋並保留原始輸出。可重複的固定裝置無法覆蓋每個網站，但它可以將擴展範圍內的回歸與網站的動態行為分開。
高质量的屏幕截图测试并不是“尝试几个页面，看看它们看起来是否正常”。它定義輸入，公開已知的邊緣情況，記錄端點，檢查恢復情況，並產生其他人可以重複的結果，而無需訪問私人資訊。