こんにちは、Selenium + RobotFrameworkでe2eテストをひたすら書いてる鶴田です。UIの自動テストはブラウザが勝手に動いているのを眺めているだけで楽しいです。ただ量が増えてくるとデバッグの時間にもろに影響してきてつらい。。 そこで今回は、Seleniumを用いたe2eテストのデバッグ効率を上げて実装スピードを爆上げする方法を紹介していきます。(Seleniumへの操作は、RobotFrameworkのSelenium2Libraryを使います)

ヘッドレスブラウザを使おう

基本的にUIのe2eテストは完了までに時間がかかるものなので、実行中は他の作業をしたいですよね。しかし悲しいことに、テスト実行中のブラウザはアクティブウィンドウの最前面にきてしまうのです。。一回後ろに戻してもテスト中にクリックやテキスト入力などの処理が入ると、また最前面に戻ってきてしまいます。私が作っていたe2eテストは全て実行するのに約40分かかります。40分まともに他の作業できないのは本当につらいので、ブラウザを表示させずにテストできる方法を調べました。するとChromeのヘッドレスブラウザというものを発見。

ヘッドレスブラウザは、GUIを持つ必要のない自動テスト環境やサーバー環境にとてもよいツールです。

これは使えそう。ということで実装してみました。Chromeのwebdriverのオプションに--headlessを付け加えるだけでヘッドレスブラウザとして使用できるそうです。

${options} =  Evaluate  sys.modules['selenium.webdriver'].ChromeOptions()  sys
Call Method  ${options}  add_argument  --headless
Create Webdriver  Chrome  chrome_options=${options}

実際にテストを実行してみると、ディスプレイに何も表示されていないのにテストは正常に実行されていていました。ヘッドレスブラウザでも、エラー時のスクリーンショットも撮ってくれました。これでテスト中に作業を邪魔されずに済みそうです!
 また、画面を開いたり閉じたりする動作を省けるのでテスト完了までの時間も短縮できました。実際にブラウザでYahooのホームページを表示して、表示されたことを確認するテストを10回行うのに掛かった時間を、普通のChromeとヘッドレスブラウザのChromeで比較してみました。
 結果、普通のブラウザが74秒、ヘッドレスブラウザが46秒でした。画面を開いて閉じるだけでも、1回で約3秒の差がでていることが分かります。
 このようなメリットがあるので、デバッグ時は基本的にヘッドレスブラウザを使うのが良さそうです。

静的な要素に対して「〇〇になるまでX秒待つ」処理をやめよう

画面遷移してから読み込みに3秒ほどかかるページにおいて静的な要素があることを確認したいとき、「5秒間要素が表示されるまで待つ」という処理は意味がありません。なぜならWebDriverは、ページの読み込みが終わるまでブラウザへの操作を行わないからです
 なのでこの場合だと、ページが完全に読み込まれてから5秒待つことになります。これが成功すれば問題ないですが、もし失敗すれば3秒読み込まれるまで待って、無駄に5秒間待ち続けなければなりません。デバッグ時に無駄な待機時間ができるので、とても効率が悪くなってしまいます。ページが読み込まれたらすぐに、要素があることを確認する処理に変更しましょう。ただし、Ajaxを用いて非同期で表示される要素や、ボタンをクリックしたら動的に生成される要素などには有効な処理です。
 
RobotFrameworkのSelenium2Libraryを使っているのであれば、Wait Until Element 〇〇系のキーワード(指定した秒数の間、特定の要素がある状態になるまで待つ)をElement Should Be 〇〇系のキーワードに変えましょう。

おわりに

みなさんもこの記事を参考にしてデバッグ時間を短縮してを実装効率を上げていきましょう!ちなみにSeleniumへの操作はRobotFrameworkがオススメです!
今後はRobotFrameworkを用いたテストケースの書き方なんかも記事にしていきたいです。

© 2018. SuperSoftware Co., Ltd. All Rights Reserved.