Visual Regression Testing Layout testing Visual Feature testing Percy Applitools BackstopJS Screener Galen Galen Framework Selenium Cypress playwright QA QA testing Automate 品質 交付

Visual Regression Test

張庭瑋 Gary Chang 2024/03/18 10:00:00
1308

 

前言

 

Regression Test 即回歸測試,懶人包定義:『確保新功能的加入,不會影響既有的舊功能』然後再針對開發的規模大小,又可以分為:單元測試、整合測試、系統測試、驗收測試而為了節省每次開發完都要重新測試的時間,我們會利用自動化測試工具諸如:Selenium, Robot Framework, Cypress, Playwright…

 

上面提到的工具是確保功能(Feature)可以正常運作,也是我們提到自動化測試時最常聯想到的,那標題的“Visual” 又是怎麼一回事?

 

 

動機

 

   這篇文章放到現在來看,其實並沒有完全取代人眼,即使用了screenshot把測試結果 過程保留起來,最後還是要花人力去點開確認。既然有人工,就有可能出錯,自動化的前提是建立在測試流程99%正確,它的測試報告才有參考價值,所以才要花費大量時間編寫腳本。

 

 

  上面提到的工具,都是透過網頁元素來達成目標,並無法完全模擬人眼來和前端GUI互動,功能測試就交給功能測試的工具,視覺效果就交給Visual testing tool ( 終於要講正題了 )

 

 

  什麼是視覺回歸測試

 

『視覺回歸測試應用相同的邏輯,但將測試限制在軟體的視覺方面。換句話說,它檢查程式碼變更不會破壞軟體視覺介面的任何方面。

 

視覺回歸測試透過比較程式碼更改前後的螢幕截圖來檢查用戶在執行任何程式碼變更後將看到的內容。這就是為什麼視覺回歸測試有時也稱為視覺快照測試。』

 

Google 翻譯 from What is visual regression testing

  *目前中文資訊沒有太多關於視覺回歸測試的說明,為避免誤導,以下我都會使用Visual /Layout Testing 而非google 的翻譯

 

看文字可能沒有太大感覺,來看看幾款比較常見的Visual testing tool他們怎麼介紹自己:

 

 

Percy

 

 

 

 

 

 



 

Applitools