この記事は「Fenrir Advent Calendar 2016」 の5日目の記事です。
こんにちは。エンジニアの岡本です。
Selenium というテストツールをご存知でしょうか。
ざっくり説明すると、ブラウザ操作をシミュレーションするソフトウェアです。
Selenium は 10 年以上の歴史があるソフトウェアですが、
2016 年と言わず、数年前からにわかに話題になっているようです。
この記事では、 Selenium の名前は知っているけど何のソフトかわからない、使ったことがない、過去に挫折した方を対象にして、 Selenium の紹介をいたします。
なぜ今 Selenium なのか？
Selenium がここ数年盛り上がっている理由としては、継続的インテグレーションだったり継続的デリバリーだったり、自動でなにかしら品質を担保しておく、という風潮が追い風になっているからでしょう。
それもあってか、Selenium と連携して使用する WebDriver が W3C で標準仕様として検討中ですし、2016 年 10 月には Selenium v3.0 という v1.x 時代の過去の遺産を切り捨てた最新版がでました。
まさに今年グッとくるホットな話題なのです。
数年前僕は・・
数年前僕は、 Selenium を入門しようと色々なサイトを漁って情報収集をし、ローカル環境でテスト項目を作ろうとしていましたが、
- Selenium の歴史ゆえ、v1.x 系の解説サイトが出てきてよくわからない
- 動作する環境作るまで何時間もかかった
- Firefox で動かす Selenium IDE がうまく動かない
こういった理由から挫折しました。
しかし今年は逃げません。
検索すると古い情報が出て来る問題も、会社に今年発売の本を買ってもらうことで解決です。
Selenium実践入門 ―― 自動化による継続的なブラウザテスト (WEB+DB PRESS plus)
良書です。参考書にさせていただきます！
それではさっそく再入門していきましょう。
Selenium とは
Selenium は「画面テストツール」や「E2E テストツール」と呼ばれています。
Web ブラウザ上に表示される内容は、以下の実行結果といえます。
- ネットワーク越しに動くサーバーやネットワーク
- HTML や CSS といったマークアップ
- JavaScript 等のプログラム
Web システムの最終出力結果がブラウザ上に描画されているので、
システム全体が正しく動作することを確認できます。
Selenium が嬉しいのは、クロスブラウザテストが実際のブラウザを使ってできるところです。
ブラウザのコントロール API である WebDriver を入れ替えれば、
同じテストコードでテストするブラウザを入れ替えることができます。
ただし、この Selenium 単体でテストを実装することはないでしょう。
実際は「テストフレームワーク」と呼ばれるソフトウェアと合わせて、テストを記述していくことになります。
さっそく使ってみる
ここからはサンプルとして、ブラウザ上の内容を取得するスクリプトを作ります。
Selenium は Java, Ruby, JavaScript, C#, Python に公式対応しています。
僕はフロントエンドエンジニアとしての仕事が多いので、 Node.js の書き方に馴染みがあります。
以下の事項に注意して進めて行きましょう。
Node.js のバージョンは v6.0 以上必須
バージョンが古いと、以下のように Selenium 内の可変長引数（...）が実装されている箇所でこけます。
/Users/***************/node_modules/selenium-webdriver/index.js:115
static createSession(...args) {}
^^^
SyntaxError: Unexpected token ...
FirefoxDriver の準備が必要
ネットや書籍には Firefox さえインストールされていれば Selenium は動くとありますが、現バージョンの Firefox では以下のエラーがでて実行できません。
Error: The geckodriver executable could not be found on the current PATH. Please download the latest version from https://github.com/mozilla/geckodriver/releases/WebDriver and ensure it can be found on your PATH.
別途 FirefoxDriver を用意するようにします。
セットアップ
Firefox でブラウザテストを行う環境を構築します。
MDN のドキュメントを元にドライバーのインストールをします。
WebDriver – Mozilla | MDN
WebDriver のインストール
$ npm install selenium-webdriver $ npm list | grep selenium-webdriver └─┬ selenium-webdriver@3.0.1
FirefoxDriver のダウンロード
Marionette
ダウンロードしたファイルは、npm installを実行したディレクトリに設置します。
スクリプトの用意
npm installを実行したディレクトリに設置します。
sample.js
// WebDriver の初期化
const webdriver = require('selenium-webdriver');
// ブラウザの選択
const driver = new webdriver.Builder().forBrowser('firefox').build();
// ページタイトルの取得
driver.get('http://example.selenium.jp/reserveApp/').then(()=>{
driver.getTitle().then(title => console.log('ページタイトル:',title))
});
// ブラウザの終了
driver.quit();
今回アクセスするサイトは、日本Seleniumユーザーコミュニティが Selenium の動作デモ用に用意されているページです。
実行
$ node sample.js ページタイトル: 予約情報入力
Firefox が起動し、一瞬ページが表示されて、すぐ閉じられたかと思います。
成功です！
続けてスクリプト中に if 文で、取得できたページタイトルが意図した文字列かどうかをチェックしても良いですが、一般的にテストフレームワークを利用して、テストケースを記述していくようです。
おわりに
いかがでしたか。
Selenium の導入手順をご紹介しました。
今回テスト方法までは述べませんでしたが、自動的にブラウザ上の内容を取得してくるその動作を見れば、どのようなテストができるのか、自分の携わるプロジェクトにどう適用できるのか、想像が膨らみますね。
僕もこれから Selenium とともに自動テストの学習と導入を進めていきたいと思います。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
