さまざまなブラウザのテスト大変ですよね・・・・
いろんなブラウザ使っている人が多いのでWebアプリ作る人にとって対応は必須です。
特にIEってWindowsでしか確認できないし、バージョンごとにJavascriptまわりの挙動が違うので色んなバージョンで操作テストするのは非常に骨が折れます。
１つのマシンに複数のバージョンのIEを入れることはできないので、テストのためだけに複数台Windowsを用意するのも大変です。
なんとかならないのでしょうか・・・・
実はマイクロソフトがテスト用の環境を提供してくれていた！
マイクロソフトはそんな状況を打開できるように、検証用環境を用意してくれています。
modern.IE https://www.modern.ie/ja-jp/
modern.IEは以下の機能を提供してくれています。
- 仮想マシン
- IE6〜11まで各バージョンのIEがインストールされた仮想環境を提供
- サイトスキャン
- Webページのコーディング問題をスキャン
- ブラウザースクリーンショット
- 各種ブラウザやデバイスでWebサイトがどのように見えるかスクリーンショットを取得
- 互換性レポート
- IEのバージョン間の互換性に問題がある部分を調査しレポート出力
どれも便利ですが今回は仮想マシンを使います。
Windows環境があれば、FirefoxもChromeもIEもいっきに確認できちゃいますね。
IEテスト環境構築
事前準備
今回はVirtualBoxの環境で構築しますので、事前にVirtualBoxをインストールしておきます。
また、Selenium Server用にJDKもインストールしておきます
IE11仮想マシンのダウンロード
以下のURLを開き、IE11のcURLですべて入手するのリンクをクリックします。
https://www.modern.ie/ja-jp/virtualization-tools#downloads
するとダイヤログが出てくるのでそこに記載されているコマンドをコピーします。
コピーしたコマンドをターミナルで実行するとダウンロードが開始されます。
# 例えばこんな感じ
$ curl -O -L "https://www.modern.ie/vmdownload?platform=mac&virtPlatform=virtualbox&browserOS=IE11-Win8.1&parts=4&filename=VMBuild_20140402/VirtualBox/IE11_Win8.1/Mac/IE11.Win8.1.For.MacVirtualBox.part{1.sfx,2.rar,3.rar,4.rar}"
IE11の環境だけでいいです。
ダウンロードしたファイルは圧縮し分割されているのでそれをまとめます。
$ chmod +x *.sfx
$ ./*.sfx
しばらく時間がかかりますが、終了するとWin8.1.ovaファイルが生成されます。
IE11仮想環境のセットアップ
生成されたWin8.1.ovaファイルをVirtualBoxでインポートします。
メニューから[ファイル]→[仮想アプライアンスのインポート]をクリックして生成されたovaファイルを指定するとインポートが開始されます。
あとは通常通りVirtualBox上で仮想マシンを起動すればIE11が使える環境になっているはずです。
IE7/8/9/10環境のエミュレート
IEにはF12の開発者ツールにIE7/8/9/10のエミュレーションをする機能があります。
IE7/8/9/10それぞれの仮想マシンが提供されているのでそれを使うのもひとつの手ですが、結構面倒です。
簡単にすませるのであればエミュレート機能を使って1環境でさっくり複数バージョンのテストしてみましょう。
IE11でF12を押すかメニューから表示することができます。
すると画面下に分割ウィンドウが表示されるのでそこからEmulationのタブを開きます。
そこでDocument modeを7〜10のいずれかに設定することでIEの各バージョンをエミュレートできるようになります。
なぜか上手く表示できないことがあるみたいなので、その場合以下などを参考にしましょう。
IE11で、IE7/IE8/IE9/IE10をエミュレーションで表示確認するときの注意事項
これで少なくとも手動という前提ならば各バージョンのIEをテストできるようになりました。
ブラウザテスト自動化ツールの導入
ブラウザテスト自動化のために今回はseleniumを導入します。
テストケースはホスト環境から仮想環境に流し込むことで極力仮想環境にデプロイする手間を省きます。
Selenium IDEインストール(ホスト環境）
テストケースの流し込みはいろいろやり方がありますが、今回はIDEを使います。
理由は以下のとおり。
- なんといっても覚えるのが楽でエンジニアではない人でも使えること
- テスト流し込みだけでなくテストケース作成（記録）も簡単にできること
- 再実行や部分実行などが容易なこと
Selenium IDEはFirefoxのアドインとして提供されているので以下のページをfirefoxで開いて、最新バージョンのIDEをインストールしておきます。
また、上記URLから以下もダウンロードしておきます。
- Selenium Server
- The Internet Explorer Driver Server
加えて、必須ではありませんが以下のアドインもインストールしておくと便利です。
Selenium IDEでテストケース作成（ホスト環境）
テストケースを作成します。
テストケース作成については色んな所で解説されているので今回は省略します。
参考サイト
基本的には以下の様な流れになると思います。
- 記録モードにしてWeb画面上で各種入力操作
- 記録モードを終了して、テストケース実行
- 失敗する部分のtarget指定（cssまたはxpath）が一意かどうかを見直し修正する
- 再度テストケースを実行し全部成功することを確認する
seleniumのコマンドをいろいろ覚えるとバリデーションのチェックなどもできるようになるので一度どんなコマンドがあるのか見てみるのをおすすめします。
Selenium Serverを構築（仮想環境）
Selenium ServerやThe Internet Explorer Driver Serverは、ホスト環境においておき、Virtual Boxの共有フォルダ機能で仮想環境からも見れるようにしておきます。
(zip圧縮ファイルは解凍しそれぞれ同じフォルダにjarファイルとexeファイルを配置します）
Selenium Serverはjarファイルとなっていて、JDKインストール済みの環境でコマンドプロンプトから以下を実行することでSelenium Serverを立ち上げることができます。
$ java -jar selenium-server-standalone-*.jar
コマンドプロンプトの画面は表示されたままにしておきます。
Selenium IDEから仮想環境にテストケース流し込み（ホスト環境）
いよいよテストケースを流し込みます。
Selenium IDEの設定を開き、WebDriverタブを開いてEnable WebDriver PlayBackにチェックを入れます。
その後、下の入力エリアにieと入力して保存し、念のため一度IDEを再起動します。
ここらへんの設定に関しては以下が参考になります。
ただ環境によってはうまくいかないこともあるようです。
Selenium IDEを使わず仮想環境にテストケース流し込み
IDEですでにテストケースを作っていたらそのテストケースをIDEを使わず流しこむことができます。
$ java -jar selenium-server-standalone-*.jar -htmlSuite <ブラウザ> <テスト対象URL> <テストスイートファイル> <テスト結果ファイル>
ブラウザのところには以下いずれかを指定します。
- *firefox
- *chrome
- *iexplore
firefox以外に流し込む場合には以下Webドライバを指定します。
# chromeの場合追加で以下を指定
-Dwebdriver.chrome.driver=<Chromeドライバファイル>
# ixexploreの場合追加で以下を指定
-Dwebdriver.ie.driver=<ieドライバファイル>
その他詳細はSelenium Documentationから参照できます。