webdriver.jsでブラウザ側の例外をキャッチする

はじめに

自分の趣味プロジェクトではseleniumを動かすためにwebdriver.jsを使っていますが、ブラウザ側の例外もキャッチできたら便利だなーと思いました。以外とそのやり方があまり載っていなかったので、忘備録も兼ねてまとめてみました。

やり方

まずはクライアントのhtmlに以下のコードを追加します。

window.jsErrors = [];
window.onerror = function(errorMessage) {
　　　　window.jsErrors.push(errorMessage);
}

次にテストコード側に以下のコードを追加します。

driver.executeScript(function(){
  return window.jsErrors;
}).then(function(jsErrors) {
  if(jsErrors.length > 0) {
    throw new Error(jsErrors);
  }
})

元ネタはここです。
https://mguillem.wordpress.com/2011/10/11/webdriver-capture-js-errors-while-running-tests/

解説

(1)クライアントに追加したコード

window.jsErrors

上記コードで、例外を入れておく変数を宣言しています。もっとクールなやり方はあると思いますが、これはグローバル変数で定義しています。

window.onerror = function(errorMessage) {
　　　　window.jsErrors.push(errorMessage);
}

window.onerrorとは例外が発生した際に実行される処理です。この中で先ほどグローバル変数に定義したjsErrorsにエラーメッセージを格納しています。

(2)テストに追加したコード
webdriver.jsでは基本的にPromiseを使っています。Promiseについてはこの記事がわかりやすいです。

driver.executeScript(function(){
  // ここにブラウザで実行するjavascriptを書く
  // return すればブラウザ側の変数をテストコードに持ってくることができる
});

executeScriptでブラウザ側のエラーを取得しています。

}).then(function(jsErrors) {
  if(jsErrors.length > 0) {
    throw new Error(jsErrors);
  }
})

jsErrorsは例外が起こるたびにエラーメッセージが入る配列です。なので、配列の長さが0より大きいということは、エラーが1回でも発生したという意味になります。throw new Error('エラーメッセージ')でテストフレームワークにエラーを伝えています。

ソースコードとか

手前味噌で申し訳ありませんが、自作ゲームで実装してみた例です。

変更を加えた箇所は、こんな感じ。
https://github.com/kaidouji85/gbraver/commit/b06f9f248338d3c574157ce4c4662837dc118fe9

プロジェクト全体はここです。
https://github.com/kaidouji85/gbraver/tree/b06f9f248338d3c574157ce4c4662837dc118fe9