wdio-video-reporter はサードパーティ製のパッケージです。詳細については、GitHub | npmを参照してください。

Logo

これは、wdioテストの実行のビデオを生成するWebdriver IO v6以降のレポーターです。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をサポートするすべてのWebドライバーで動作します
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で依存関係をインストールします。次に、デモディレクトリでyarn e2eまたはnpm run e2eを実行し、最後にyarn reportまたはnpm run reportを実行してAllureレポートを表示します。

インストール

レポーターをインストールする

yarn add wdio-video-reporter または npm install wdio-video-reporter

レポーターを構成に追加する

wdio.conf.jsファイルの先頭で、ライブラリをrequireします

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

次に、videoレポーターを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を使用します。 デフォルト: undefined
outputDir 設定されていない場合は、wdio.config.outputDirを使用します。 デフォルト: undefined
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を使用してください。そうしないと、失敗したテストがステップ定義で壊れていると報告されます
wdio.conf.jsファイルのAllureオプションにuseCucumberStepReporter: trueを追加します。典型的な構成は次のようになります

  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です。デスクトップのChromeブラウザと同じSelenium Gridでデバイスを使用する場合のChrome Webdriverのバグを回避するために、*すべての*ブラウザにbrowserVersionを含めることをお勧めします。

生成されたビデオファイルには、ブラウザ名にdeviceTypeも追加されます。

Appium構成の例

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

そして wdio-config.json

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

貢献

フォークし、変更を加え、いくつかのテストを作成し、lintを実行し、テストを実行し、ビルドし、デモで変更が期待どおりに動作することを確認してから、PRを作成してください。

デモフォルダーはライブラリのビルドバージョンで動作するため、新しい機能を追加して試したい場合は、必ずビルドしてください。

感謝

多くのユーザーから要望のあったCucumberサポートを修正してくれたJohnson Eに感謝します。

インストール

レポーターをインストールする​

レポーターを構成に追加する​

Allureとの使用​

設定

通常の構成パラメーター​

高度な構成パラメーター​

Cucumberのサポート​

Appiumの設定​

貢献

感謝