Novus 視覺回歸服務

wdio-novus-visual-regression-service 是一個第三方套件，如需更多資訊，請參閱 GitHub | npm

用於 WebdriverIO 的視覺回歸測試

基於 Jan-André Zinser 在 wdio-visual-regression-service 和 wdio-screenshot 上的工作

安裝

您可以像平常一樣透過 NPM 安裝 wdio-novus-visual-regression-service

$ npm install wdio-novus-visual-regression-service --save-dev

關於如何安裝 WebdriverIO 的說明，請參閱這裡。

設定

將 novus-visual-regression 新增至 WebdriverIO 設定的服務區段中，並在服務選項中定義您所需的比較策略，即可設定 wdio-novus-visual-regression-service。

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

function getScreenshotName(basePath) {
  return function(context) {
    var type = context.type;
    var testName = context.test.title;
    var browserVersion = parseInt(context.browser.version, 10);
    var browserName = context.browser.name;
    var browserViewport = context.meta.viewport;
    var browserWidth = browserViewport.width;
    var browserHeight = browserViewport.height;

    return path.join(basePath, `${testName}_${type}_${browserName}_v${browserVersion}_${browserWidth}x${browserHeight}.png`);
  };
}

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.LocalCompare({
          referenceName: getScreenshotName(path.join(process.cwd(), 'screenshots/reference')),
          screenshotName: getScreenshotName(path.join(process.cwd(), 'screenshots/screen')),
          diffName: getScreenshotName(path.join(process.cwd(), 'screenshots/diff')),
          misMatchTolerance: 0.01,
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

選項

在 wdio.config.js 中的 visualRegression 鍵下，您可以傳遞具有以下結構的設定物件

compare Object
螢幕截圖比較方法，請參閱比較方法
viewportChangePause Number（預設值：100）
視口變更後等待 x 毫秒。瀏覽器可能需要一段時間才能重新繪製。這可能會導致渲染問題，並在執行之間產生不一致的結果。
viewports Object[{ width: Number, height: Number }]（預設值：[目前視口]）（僅限桌面）
所有螢幕截圖將在不同的視口尺寸中擷取（例如，用於回應式設計測試）
orientations String[] {landscape, portrait}（預設值：[目前方向]）（僅限行動裝置）
所有螢幕截圖將在不同的螢幕方向擷取（例如，用於回應式設計測試）

比較方法

wdio-novus-visual-regression-service 允許使用不同的螢幕截圖比較方法。

VisualRegressionCompare.LocalCompare

顧名思義，LocalCompare 會在本機電腦上擷取螢幕截圖，並將其與先前的執行進行比較。

您可以將以下選項以物件的形式傳遞給其建構函式

referenceName Function
傳入一個函式，該函式會傳回參考螢幕截圖的檔案名稱。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
screenshotName Function
傳入一個函式，該函式會傳回目前螢幕截圖的檔案名稱。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
diffName Function
傳入一個函式，該函式會傳回差異螢幕截圖的檔案名稱。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
misMatchTolerance Number（預設值：0.01）
介於 0 到 100 之間的數字，定義將兩個影像視為相同時要考慮的不匹配程度，增加此值將會降低測試覆蓋率。
ignoreComparison String（預設值：無）
傳入一個值為 nothing、colors 或 antialiasing 的字串，以調整比較方法。

如需產生依賴目前測試名稱的螢幕截圖檔案名稱的範例，請參閱設定的範例程式碼。

VisualRegressionCompare.SaveScreenshot

此方法是 VisualRegressionCompare.LocalCompare 的精簡變體，僅用於擷取螢幕截圖。當您只想建立參考螢幕截圖並覆寫先前的螢幕截圖而不進行比較時，這非常有用。

您可以將以下選項以物件的形式傳遞給其建構函式

screenshotName Function
傳入一個函式，該函式會傳回目前螢幕截圖的檔案名稱。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。

VisualRegressionCompare.Spectre

此方法用於將螢幕截圖上傳到 Web 應用程式 Spectre。Spectre 是用於視覺回歸測試的 UI。它會儲存螢幕截圖並進行比較，這對於持續整合非常有用。

您可以將以下選項以物件的形式傳遞給其建構函式

url String
傳入 Spectre Web 服務 URL。
project String
傳入您專案的名稱。
suite String
傳入您的測試套件名稱。一個專案可以包含多個套件。
test Function
傳入一個函式，該函式會傳回螢幕截圖的測試名稱。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
browser Function
傳入一個函式，該函式會傳回螢幕截圖的瀏覽器。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
size Function
傳入一個函式，該函式會傳回螢幕截圖的大小。函式會接收一個 context 物件作為第一個參數，其中包含有關命令的所有相關資訊。
fuzzLevel Number（預設值：30）
介於 0 到 100 之間的數字，定義 Spectre 影像比較方法的模糊因數。如需更多詳細資訊，請參閱Spectre 文件。

範例

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.Spectre({
          url: 'https://127.0.0.1:3000',
          project: 'my project',
          suite: 'my test suite',
          test: function getTest(context) {
            return context.test.title;
          },
          browser: function getBrowser(context) {
            return context.browser.name;
          },
          size: function getSize(context) {
            return context.meta.viewport != null ? context.meta.viewport.width : context.meta.orientation;
          },
          fuzzLevel: 30
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

用法

wdio-novus-visual-regression-service 使用以下命令增強 WebdriverIO 執行個體

browser.checkViewport([{options}]);
browser.checkDocument([{options}]);
browser.checkElement(elementSelector, [{options}]);

所有這些都提供選項，可協助您在不同的尺寸中擷取螢幕截圖，或排除不相關的部分（例如內容）。以下選項可用

exclude String[]|Object[]（尚未實作）
排除螢幕截圖中經常變更的部分，您可以傳遞所有不同的WebdriverIO 選取器策略，這些策略會查詢一個或多個元素，或者您可以定義會延伸矩形或多邊形的 x 和 y 值
hide Object[]
隱藏所有透過各種不同的 WebdriverIO 選擇器策略查詢到的元素 (透過 visibility: hidden)
remove Object[]
移除所有透過各種不同的 WebdriverIO 選擇器策略查詢到的元素 (透過 display: none)
viewports Object[{ width: Number, height: Number }] (僅限桌面版)
覆寫此指令的全域 viewports 值。所有螢幕截圖將在不同的視窗尺寸中擷取 (例如，用於響應式設計測試)
orientations String[] {landscape, portrait} (僅限行動版)
覆寫此指令的全域 orientations 值。所有螢幕截圖將在不同的螢幕方向中擷取 (例如，用於響應式設計測試)
misMatchTolerance Number
覆寫此指令的全域 misMatchTolerance 值。傳入一個介於 0 到 100 之間的數字，該數字定義了將兩張圖片視為相同的匹配容差程度。
fuzzLevel Number
覆寫此指令的全域 fuzzLevel 值。傳入一個介於 0 到 100 之間的數字，該數字定義了 Spectre 圖片比較方法的模糊因子。
ignoreComparison String
覆寫此指令的全域 ignoreComparison 值。傳入一個字串，其值為 nothing 、colors 或 antialiasing 來調整比較方法。
viewportChangePause Number
覆寫此指令的全域 viewportChangePause 值。在視窗變更後等待 x 毫秒。

授權條款

MIT

安裝​

設定​

選項​

比較方法​

VisualRegressionCompare.LocalCompare​

VisualRegressionCompare.SaveScreenshot​

VisualRegressionCompare.Spectre​

用法​

授權條款​

安裝

設定

選項

比較方法

VisualRegressionCompare.LocalCompare

VisualRegressionCompare.SaveScreenshot

VisualRegressionCompare.Spectre

用法

授權條款