iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0

視覺回歸測試(Visual Regression Testing),是在開發應用程式上,為確保每次更動 feature 後的介面,與前次視圖上的差異是否如預期。因此可以透過「截圖(screenshot)」保留畫面,並透過工具來比較。

流程如下:

  • 建立基準線(Baseline): 即截圖當前穩定版本的視圖,作為比較標準。
  • 開始執行測試:對於異動版本進行截圖。
  • 比較結果:使用工具,比較前兩步驟產生的視圖的差異。
  • 產生測試報告:測試報告中,會標出差異的部分。

視覺回歸測試非常適合用來檢視肉眼觀察不出的細緻差異,舉凡色相、字體大小、圖表、元素尺寸...。且當前許多測試工具(例如: BackstopJS、Puppeteer、Chromatic、Percy)有提供「比較圖像」的功能,甚至有的使用了一定程度的 AI 分析。讓工程師僅需執行,就可以獲得試圖差異比較報告,非常的便利。


上一篇
[Day 22] 前端效能測試(二)- 前端效能測試方法
下一篇
[Day 24] 視覺回歸測試(二)- Cypress Plugin Snapshots
系列文
手動測試好累喔!一起來寫前端自動化測試吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言