wdio-video-reporter 是一個第三方套件，如需更多資訊，請參閱 GitHub | npm

Logo

這是一個用於 Webdriver IO v6 及更高版本的報表器，它會產生您的 wdio 測試執行的影片。如果您使用 allure，則測試案例也會自動使用影片進行裝飾。（對於 Webdriver IO v5，請使用 wdio-video-reporter 版本 ^2.0.0。）

影片會存放在 wdio.config.outputDir 中

在此處查看包含失敗測試的影片的範例 Allure 報表：https://presidenten.github.io/wdio-video-reporter-example-report/

example-allure-report

優點

您的 allure 報告中有不錯的影片
即使測試速度很快，也有不錯的真人速度影片
可與 Selenium grid 搭配使用
可與所有支援 saveScreenshot 的 WebDriver 搭配使用
已在以下使用 Selenium 3.141.59 的桌面瀏覽器上驗證
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
已在以下使用 Appium 1.13.0-beta3 的 iOS 和 Android 裝置上驗證
- iPhone 8
- iPad Gen 6
- Samsung Galaxy S9
- Samsung Galaxy Tab A10

缺點

透過在「動作」後擷取螢幕截圖來運作，這會使測試速度稍慢。這可透過仔細選擇哪些 jsonWireProtocol 訊息應導致螢幕截圖來減輕
Selenium 驅動程式未在螢幕截圖中包含警示方塊和彈出視窗，因此它們在影片中不可見

快速開始

請查看 wdio-template 中的簡單範本，以快速上手。

複製其中一個儲存庫，並使用 yarn 或 npm install 安裝相依性。然後在 demo 目錄中執行 yarn e2e 或 npm run e2e，最後執行 yarn report 或 npm run report 以查看 allure 報告。

安裝

安裝報表器

yarn add wdio-video-reporter 或 npm install wdio-video-reporter

將報表器新增至設定

在 wdio.conf.js 檔案的頂部，需要這個程式庫

const video = require('wdio-video-reporter');

然後將影片報表器新增至 reporters 屬性中的設定

 reporters: [
    [video, {
      saveAllVideos: false,       // If true, also saves videos for successful test cases
      videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
    }],
  ],

搭配 Allure 使用

同時新增 Allure 報表器，會自動使用影片更新報告，而無需設定任何內容 :-)

 reporters: [
    [video, {
      saveAllVideos: false,       // If true, also saves videos for successful test cases
      videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
    }],
    ['allure', {
      outputDir: './_results_/allure-raw',
      disableWebdriverStepsReporting: true,
      disableWebdriverScreenshotsReporting: true,
    }],
  ],

設定

一般設定參數

大多數使用者可能需要設定這些

saveAllVideos 設定為 true 可儲存通過測試的影片。預設值：false
videoSlowdownMultiplier [1-100] 之間的整數。如果影片播放速度太快，請增加此值。預設值：3
videoRenderTimeout 等待影片呈現的最長秒數。預設值：5
outputDir 如果未設定，則會使用 wdio.config.outputDir。預設值：未定義
outputDir 如果未設定，則會使用 wdio.config.outputDir。預設值：未定義
maxTestNameCharacters 測試名稱的最大長度。預設值：250

進階設定參數

想要變更引擎進行螢幕擷取時間的進階使用者可以編輯這些。這些陣列可以使用 jsonWireProtocol 訊息的最後一個字來填入，即 /session/:sessionId/buttondown。

addExcludedActions 新增不需要螢幕截圖的動作。預設值：[]
addJsonWireActions 新增缺少螢幕截圖的動作。預設值：[]
recordAllActions 跳過篩選並擷取所有內容的螢幕截圖。（不建議）預設值：false

若要查看已處理的訊息，請設定 wdio.config.logLevel: 'debug' 並查看 outputDir/wdio-X-Y-Video-reporter.log。這也會讓螢幕截圖輸出目錄保持完整以供檢閱

若要完全避免額外的記錄，只取得影片檔案，請設定 wdio.config.logLevel: 'silent'。

Cucumber 支援

如果您使用 Allure 報表器，則需要確保您執行下列步驟

使用 chai 而不是使用內建的節點判斷提示，否則失敗的測試會回報為步驟定義中已損毀
將 useCucumberStepReporter: true 新增至 wdio.conf.js 檔案中的 Allure 選項，典型的設定看起來會像這樣

  reporters: [
    [video, {
      saveAllVideos: false,       // If true, also saves videos for successful test cases
      videoSlowdownMultiplier: 3, // Higher to get slower videos, lower for faster videos [Value 1-100]
    }],
    ['allure', {
      outputDir: './_results_/allure-raw',
      disableWebdriverStepsReporting: true,
      disableWebdriverScreenshotsReporting: true,
      useCucumberStepReporter: true
    }],
  ],

如需完整範例，請查看 wdio-template 的 cucumber 分支

Appium 設定

自 wdio-video-reporter v1.2.4 起，支援協助 Allure 區分桌面和裝置上的 Safari 和 Chrome 瀏覽器。報表器使用自訂屬性 deviceType 來識別不同的裝置。建議的值為 phone 和 tablet。建議也將 browserVersion 包含在所有瀏覽器中，以避免在與桌面 Chrome 瀏覽器使用相同 Selenium grid 中的裝置時，發生 Chrome WebDriver 中的錯誤。

產生的影片檔案也會將 deviceType 新增至瀏覽器名稱。

Appium 設定範例

  "capabilities": [
    {
      ...
      "deviceType": "phone",
      "browserVersion": "73.0-phone-1",
      ...
    }
  ],

以及 wdio-config.json

  "capabilities": [
    {
      ...
      "appium:deviceType": "phone",
      "browserVersion": "73.0-phone-1",
      ...
    },
  ],

貢獻

分支、進行變更、撰寫一些測試、執行程式碼檢查、執行測試、建置，並在示範中驗證變更是否如預期運作，然後提出 PR。

demo 資料夾可與程式庫的已建置版本搭配使用，因此請務必在新增新功能並想要試用時進行建置。

感謝

感謝 Johnson E 修復了許多使用者要求的 Cucumber 支援。

安裝

安裝報表器​

將報表器新增至設定​

搭配 Allure 使用​

設定

一般設定參數​

進階設定參數​

Cucumber 支援​

Appium 設定​

貢獻

感謝