WebdriverIO検証 #TypeScript

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の組み合わせのものは以下の通り。

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

@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を使うと不一致率を計算できる。