使用 Nightwatch 進行視覺回歸測試 (VRT)

概述

視覺回歸測試 (VRT) 是一種軟體測試技術，它比較應用程式變更前後的使用者介面螢幕截圖或影像。VRT 的目標是偵測在開發過程中可能引入的意外視覺變更，例如版面配置、顏色、排版或其他視覺元素的變更。

視覺回歸測試通常包含以下步驟

  1. 擷取應用程式或網頁在變更前後的螢幕截圖。
  2. 逐像素比較螢幕截圖以找出任何差異。
  3. 檢閱和分析差異，以判斷它們是故意的還是無意的。
  4. 如果變更是故意的，則核准變更

它是如何運作的？

Nightwatch 使用 JIMP，這是一個沒有原生相依性的 Javascript 影像處理函式庫來進行影像比較。

Nightwatch 邏輯

  1. 等待元素出現
  2. 截取螢幕截圖
  3. 將螢幕截圖與基準比較
  4. 在 VRT 報告中顯示目前螢幕截圖與基準之間的視覺差異

安裝

步驟 1

使用此指令安裝外掛

npm i @nightwatch/vrt --save-dev

步驟 2

更新 Nightwatch 組態以將外掛新增至清單

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/vrt']
  // other nightwatch settings...
}

編寫視覺回歸測試

為了使用 nightwatch-vrt，您只需要叫用 screenshotIdenticalToBaseline 斷言，並傳遞要比較的 DOM 元素的 CSS 選擇器。您也可以傳遞自訂檔案名稱、visual_regression_settings 覆寫和自訂記錄訊息。

screenshotIdenticalToBaseline 採用 4 個參數作為輸入

  1. selector - 識別將在螢幕截圖中擷取的元素
  2. fileName - 此螢幕截圖的可選檔案名稱；預設為選擇器
  3. settings - 可選設定以覆寫預設值和 visual_regression_settings
  4. message - 可選 message，供 nightwatch 在完成時記錄

例如

vrt-demo.js
describe('VRT demo test', function() {
    it('Test Google UI loads correctly', function(browser) {
        browser
            .navigateTo('https://www.google.co.uk')
            .assert.screenshotIdenticalToBaseline('body',  /* Optional */ 'custom-name', {threshold: 0.0}, 'VRT custom-name complete.')
            .end()
    })
})

第一次執行測試時，將會建立基準螢幕截圖並儲存在磁碟上。您應該一律註冊基準螢幕截圖。此測試的進一步執行將會與此基準比較。

視覺回歸設定

Nightwatch VRT 隨附經過仔細考慮的預設設定。以下是清單

  1. generate_screenshot_path 預設無 - 傳遞將產生螢幕截圖路徑的函式
  2. latest_screenshots_path 預設 "vrt/latest" - 最近擷取的螢幕截圖的路徑
  3. latest_suffix 預設 "" - 附加到最近擷取的螢幕截圖結尾的字串
  4. baseline_screenshots_path 預設 "vrt/baseline" - 基準預期螢幕截圖的路徑
  5. baseline_suffix 預設 "" - 附加到基準螢幕截圖結尾的字串
  6. diff_screenshots_path 預設 "vrt/diff" - 兩個螢幕截圖的差異影像路徑
  7. diff_suffix 預設 "" - 附加到差異影像結尾的字串
  8. threshold 預設 0.0 - 比對臨界值，範圍從 0 到 1。較小的值會使比較更敏感
  9. prompt 預設 false - 如果為 true，當最近擷取的螢幕截圖不同時，系統會提示使用者覆寫基準螢幕截圖
  10. updateScreenshots 預設 false - 如果為 true，最近擷取的螢幕截圖將一律覆寫基準

但是，這些可以透過 nightwatch.conf.js 全域覆寫，如下所示

nightwatch.conf.js
module.exports = {
  

  //... other config
  

  '@nightwatch/vrt': {
    latest_screenshots_path: 'vrt/latest',
    latest_suffix: '',
    baseline_screenshots_path: 'vrt/baseline',
    baseline_suffix: '',
    diff_screenshots_path: 'vrt/diff',
    diff_suffix: '',
    threshold: 0.00,
    prompt: false,
    updateScreenshots: false
  },
}

此外，設定也可以作為 JSON 物件（設定引數）傳遞來覆寫，如 範例 所示，作為 screenshotIdenticalToBaseline 斷言的一部分。作為函式引數傳遞的設定將覆寫組態檔中的設定和預設值。

檢閱

測試執行完成後，將會產生一份報告。在 vrt-report 資料夾下。您可以手動開啟它，或使用執行測試指令的 --open 來自動開啟報告。

基準 & 差異

這顯示基準影像以及差異。每個不符合的像素都會在差異影像中標示為紅色。

Baseline & Diff

如您所注意到的，也顯示了差異百分比。如果差異百分比小於臨界值，VRT 引擎將不會將測試標示為失敗。

基準 & 最新

這顯示目前影像與基準影像的差異。

Baseline & Latest

核准

在您檢查過所有視覺變更都是故意的後，您可以使用 --update-screenshots 旗標更新基準。這很重要，因為所有進一步的比較都將針對新的基準進行。

例如

npx nightwatch <path to tests> --update-screenshots