WebDriverを使って画面テストでJavascriptエラーを検知する方法

WebDriverを使って受け入れテストを自動化できないかなーといろいろ試しているが、「何を持ってOK」にするか悩ましい。デザインはキャプチャとってみてもらうしかないけど、単純な遷移であればURLをチェックして、あとはJavascriptエラーが出ていないかを確認したい。

Javascriptのエラー検知は結構手間で、色々調べてみたけど海外のページでいくつかやりかたが紹介されていた。

もっともわかり易かったのがWebDriver: capture JS errors while running testsに書かれていた内容。

onerrorで検知する作戦

ページに以下を埋め込んでおく。

https://gist.github.com/daipresents/b84610dd770afdda87cfbaeb0b429a51.js?file=gistfile1.txt

onerrorで検知して、jsErrorsにメッセージを貯めていく。あとは、WebDriverからJavascriptを実行して、値をWebDriverの世界に持ってくる。rubyのバインディングを使うならこんな感じ。

https://gist.github.com/daipresents/b84610dd770afdda87cfbaeb0b429a51.js?file=gistfile2.txt

シンプルだけどページに埋め込んでおかないとダメなのが面倒くさい。

ハンドラ自体をWebDriverで実行する作戦

execute_scriptメソッドがあるので、各ページでハンドラ自体を実行すればいいのでは？というアイデア。

https://gist.github.com/daipresents/b84610dd770afdda87cfbaeb0b429a51.js?file=gistfile3.txt

この問題は、ページが表示されたあとにこれが実行されてしまうので、ページ表示時に動いたJavascriptのエラーを検知できない。

JSErrorCollectorを使う作戦

FireFoxに限定するけど、JSErrorCollectorというFireFoxプラグインを使うことでエラーをプラグインに蓄積することもできる。

https://gist.github.com/daipresents/b84610dd770afdda87cfbaeb0b429a51.js?file=gistfile4.txt

これでWebDriverを実行すればFireFoxの右下に「JSErrorCollector」が表示され、ここにエラーが蓄積してく。取得も簡単。

https://gist.github.com/daipresents/b84610dd770afdda87cfbaeb0b429a51.js?file=gistfile5.txt

まとめ

Javaでの実装例はDetecting javascript errors using JSErrorCollector in firefox with cucumber and selenium or watir-webdriverでも紹介されている。このページだとCucumberを使って実行してますね。Rubyのサンプルコードもgithubで探せば見つかった。