WebdriverIO検証

WebdriverIOを使ったE2Eテスト自動化の検討メモ

TypeScriptとasync/awaitのサポート

TypeScriptは公式にサポートされている。

async/await にも対応しているが、コードを単純化するために同期的に実装することが推奨されている。

• WebdriverIOのメソッドは function() {} 内で呼び出されると同期的に実行され、 async function() {} 内で呼び出されると非同期になる（ Promise を返却する）。
• 同期的な実装をサポートするために、Promise を返却する非同期メソッドを同期的に実行できる browser.call メソッドが提供されている。

ひな型プロジェクト（Boilarplate Project）

Boilerplate Projectをベースにプロジェクトを作成すると、TypeScriptやReportingライブラリを1からセットアップする手間が省ける。

WebdriverIO v5対応していてTypeScript + Mochaの組み合わせのものは以下の通り。

• https://github.com/jpolley/WebdriverIO_v5_TypeScript
• https://github.com/WillLuce/WebdriverIO_Typescript
• https://github.com/dalenguyen/WebdriverIO-TypeScript-Boilerplate

ローカルマシンで各ブラウザを使ってテストを実行する

@wdio/selenium-standalone-serviceを使うとnpmでWebDriverをインストールでき、テスト開始前にSeleniumサーバーを起動してくれる。

• インストールするWebDriverはwdio.conf.jsに設定する。

• Windows 10環境でChrome、Firefox、InternetExplorerを使う場合の設定例：

  {
    services: ['selenium-standalone'],
    seleniumArgs: {
      drivers: {
        chrome: {},
        firefox: {},
        // Use ia32 version of IEDriver as x64 version is not stable.
        ie: { arch: "ia32" }
      }
    },
    seleniumInstallArgs: {
      drivers: {
        chrome: {},
        firefox: {},
        ie: { arch: "ia32" },
      }
    }
  }
  

  ※ 64bit版 IEDriverを使うとフォームへの文字列入力が遅くなるため、32bit版を指定している。

テスト開始前に処理を入れる

WebdriverIOのHooksを定義するか、（テストランナーにMochaを使っている場合）Root-level hookを使えばよい。

ただし、MochaのRoot-level hookはspecファイルごとに実行される。（参考）

スクリーンショットの比較による回帰検査を実装する

Stack Overflowで議論されているライブラリはメンテされていなくWebdriverIO v5未対応のため、現状は自力でスクリーンショットを取得して比較する必要がある。

• wdio-visual-regression-service：v4時点で開発が停止している。
• webdrivercss：v3以降対応していない。

WebDriverのTake Screenshotでは表示領域のみのスクリーンショットしか取得できないため、表示領域よりもページのサイズが大きい場合は、スクロールをしながらスクリーンショットを取る必要がある。

• 表示領域・ページサイズの取得：WebDriverのAPIでは取れないのでJavaScriptで取得する

  const size = browser.execute(function() {
    return { 
      viewWidth: document.documentElement.clientWidth,
      viewHeight: document.documentElement.clientHeight,
      pageWidth: document.body.scrollWidth,
      pageHeight: document.body.scrollHeight,
    };
  });
  

• スクロール：サイズ取得同様にJavaScriptで実装する

  browser.execute(function (x, y) {
    window.scrollTo(x, y);
  }, x, y);
  

  ※ Internet ExplorerでJavaScriptを実行する際は browser.execute(() => {}); のようにアロー関数を使うとエラーになることに注意すること。

取得したスクリーンショットを比較は、resemblejsを使うと不一致率を計算できる。