第4回　Seleniumの実行環境を作ってみよう - テスト講座

Seleniumをセットアップしてみよう

早速Seleniumを使えるようにしてみましょう。環境を作って実行することによってSeleniumの威力を体感してみましょう。

今回使用するのはSelenium Coreと呼ばれるものになります。では次の順番でSelenium Coreの実行環境を準備していきましょう。

(事前準備) Webアプリケーションの実行環境を作る

ご自分のマシンでApache+PHPの実行環境をあらかじめ準備してください。Apache+PHPの実行環境の作り方はPHPプロ!の「PHPプロ！Saity先生のPHP基礎講座」の第1回でも解説されていますので、参考にして準備してみてください。
http://www.phppro.jp/school/phpschool/vol1/1

この講座ではこれ以降Apaceh+PHPの環境があることを前提に進めていきます。解説を読むだけではなく、実際に実行することによって理解も深まると思いますのでがんばって準備してみましょう。

(1) Selenium Coreの配布ページにアクセスする

Selenium CoreはOpenQAで配布されています。2008年7月15日現在入手最新バージョンは 1.0 beta-1 ですが、今回は安定版最新の0.8.3を使用します。

今回使用するSelenium Coreのページは次のURLになります。
http://selenium-core.openqa.org/

(2) Selenium Coreの対応ブラウザ等をチェックする

先ほどのページでまず確認しておきたいのが"Platform and Browser Compatibility"の項目です。Selenium Coreを使ったテストができるOS環境およびWebブラウザのバージョン等が記載されています。

Selenium CoreはHTMLとJavaScriptがあれば動作しますが、そのJavaScriptの対応状況が問題となりますので、ここに記載されているブラウザでテストを行ってください。一般的に使われているブラウザでは動作しますのであまり問題にならないと思います(おそらく業務でWebアプリケーションを開発されている方はここに記載されていないブラウザは対象ブラウザとはしていないと思います)。

こちらに記載されているブラウザであればどれでもテストはできますが、Firefoxであれば次回説明するSelenium IDEという便利なツールが使用できます。

(3) Selenium Coreの最新版をダウンロードする

先ほどのページに"download now"リンクがありますので、そのリンクをクリックしてください。次のページで"Version 0.8.3"の"Full release"のリンクをクリックするとZIPファイル(selenium-core-0.8.3.zip)をダウンロードすることができます。

(4) ZIPファイルを展開し、Apache+PHP環境に配置する

先ほど入手したZIPファイルを展開してください。

展開してできあがったディレクトリをApache+PHPの実行環境にコピーしましょう。

"事前準備"で作成したApache+PHP環境のDocumentRoot(htdocs等になっていると思います)以下に"selenium-core"という名前でコピーをしてください。

!!!注意!!! この作業はあくまでもご自分の作業マシン(ノートパソコン等)で作った開発環境で行ってください。外部の人がアクセスできるWebサーバ(レンタルサーバ等も含む)では行わないでください。最終的には会社内の共用開発サーバで実行するということもあるかもしれませんが、最初はご自分のマシンで動作確認をするところから始めてくださいね。

(5) ブラウザからアクセスしてみる

次のURLにアクセスしてみてください。
http://localhost/selenium-core/

次のページが表示されましたか？表示されない場合はApache+PHPのセットアップがうまくいってないか、コピーの場所が間違っている可能性があるので、もう一度手順を見直してください。

■ Selenium Core 最初のページ

このページが表示されたら"Selenium TestRunner"のリンクをクリックしてください。次のページが表示されます。

■ Selenium Core Test Runner

(6) あらかじめ準備されているテストを実行してみる

Selenium CoreのTestRunnerでは4つのフレームで分割された画面でテストが行われます。それぞれ以下のような意味があります。

(a) Test Suite

上側3分割されている左の部分で、最初は"Test Suite"と呼ばれるファイルの指定を行います。そこで"Test Suite"を選択するとそれに含まれるテスト一覧が表示されます。

(b) Current Test

上側3分割されている真ん中の部分で、現在実行されているテスト内容が表示されます。ここで表示されて実行されるものを自分で作ることになります。

(c) Control Panel

上側3分割されている右の部分で、テストの開始/終了や、テストの実行状況等を見ることができます。

(d) Webアプリケーション動作領域

上下分割された下側の領域で、この部分でWebアプリケーションが実際に動作しながらテストが行われます。

さて、説明だけではわかりにくいと思いますので、"Test Suite"の領域であらかじめ選択されている"../tests/TestSuite.html"を実際に動作させてみましょう。

"Test Suite"で"../tests/TestSuite.html"を選択したままの状態で"Go"ボタンを押すと、"Test Suite"画面がテスト項目一覧に切り替わります。

■ Selenium Core Test Runner(Test Suite選択後)

この画面になったら、"Control Panel"のテスト開始ボタンを押してください。

■ Selenium Core のテスト開始ボタン

いかがですか？目の前でSelenium Core自体であらかじめ準備されたテストが自動的に実行されたでしょうか？

今まで手動でテストを行っていた方は次々と自動でテストがされる状態をみて圧倒されるかもしれませんね。

Seleniumを使いこなせば、ご自分のWebアプリケーションも同じようにテストすることができます。