搭配螢幕截圖擷取的視覺回歸測試
開發團隊使用 Webshot 來捕捉單元測試無法發現的錯誤——例如版面錯亂、字型降級、圖示遺失、響應式設計狀態異常等。擷取測試環境、擷取正式環境，然後比較兩者差異。將差異圖檔貼到 PR 留言中，證明您的變更是安全的（或證明新錯誤剛出現）。
所有按鈕都會開啟預先配置好的擷取表單。頁面載入後，您可以更改格式和視口設定。
為什麼選擇 Webshot
像素級精準擷取
PNG 模式能保留清晰的文字和邊緣——非常適合像素比對工具（如 `pixelmatch`、ImageMagick `compare`），可避免 JPG 壓縮雜訊造成的誤判。
每次都使用相同視口
Webshot 每次執行都在完全相同的視口、捲動位置和字型載入等待時間下進行擷取——確保比對結果可靠。
對 API 友善
將免費的 Webshot API 連接到您的 CI：在部署前和部署後進行擷取，使用 `pixelmatch` 比較差異，若像素變更超過閾值則建置失敗。
無需 headless-Chrome 樣板程式碼
跳過 puppeteer 設定、字型安裝、沙盒旗標等步驟。Webshot 已在我們的基礎設施上運行這一切。您的 CI 只需發出一個 HTTP 請求即可。
如何進行視覺迴歸測試擷取
- 選擇您想監控的頁面——首頁、關鍵的到達頁面、結帳流程，或任何發生迴歸問題會造成損失的地方。
- 使用 PNG + 桌面版完整頁面 + 行動版完整頁面模式擷取每個頁面，建立您目前正式環境外觀的基準。
- 在下次部署後，再次擷取相同的 URL。使用 `pixelmatch` 或 ImageMagick 比較新舊版本的差異——任何超過 1% 的像素變更都值得人工審查。
- 將其整合到 CI 中：一個部署前掛鉤（pre-deploy hook）擷取測試環境，一個部署後掛鉤（post-deploy hook）擷取正式環境，如果差異超過您設定的閾值，則建置失敗。
常見問題
在 CI 中使用 headless Chrome 意味著需要安裝 Chromium、字型、沙盒核心旗標，並要持續更新。使用 Webshot，您可以完全跳過安裝過程——您的 CI 只需向我們的 API 發出一個 HTTP 請求，就能取回 PNG 檔案。我們負責處理 Chrome 更新、字型快取和 SSRF 保護。
是的，只要您使用 PNG 格式、相同的視口和相同的等待策略。Webshot 會固定視口大小，並等待 fonts.ready、網路閒置（network-idle）以及任何透過 `prefers-reduced-motion` 查詢宣告的動畫完成。隨機動畫（如 lottie 循環、Date.now() 背景）每次執行都會產生不同的差異；請在您的測試環境中凍結這些動畫。
無法在一次呼叫中完成——您需要分別擷取每個 URL，然後使用獨立的函式庫進行比較。我們將 API 的重點放在擷取功能上；比較差異只需一個 30 行的腳本。請參閱 `/developers` 頁面查看範例程式碼。
是的。Webshot 在擷取前會等待網路閒置（500 毫秒內沒有請求）和 fonts.ready，因此 React、Vue、Svelte 和 Next.js 等應用程式在截圖前都能完全渲染。對於永遠不會達到網路閒置狀態的網站（例如長輪詢、websockets），您可以透過 API 傳遞 `maxWait` 參數。
免費的公開表單限制為每個 IP 每 15 分鐘 5 次——這對 CI 來說太低了。免費 API 等級則更為寬鬆；詳情請見 `/developers`。對於高流量的迴歸測試（每次建置超過 50 次擷取），商用 API 方案則移除了每個 IP 的限制。
Webshot 本身只負責擷取——您需要提供比較差異的工具。一個兩行指令的解決方案：`npx pixelmatch baseline.png new.png diff.png`。或者使用託管的視覺化差異比對服務（如 Percy、Chromatic、BackstopJS），並將 Webshot 產生的 PNG 檔案提供給它們。
其他應用情境： Google 地圖截圖 · WordPress 網站截圖 · 到達頁面品管 · 法律證據截圖 · 社群媒體截圖 · 開發者工作流程截圖 · 查看全部 →