• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

Webプログラミング実力アップ

Part4 テストを自動化する注目のツールSelenium

こまめなテストがバグ早期発見の決め手に

2007/10/26 日経ソフトウエア
出典:ずばりわかる!Webプログラミング2.074ページより
(記事は執筆時の情報に基づいており、現在では異なる場合があります)
目次一覧
笠谷 真也(かさたに しんや)
ケイビーエムジェイ 最高技術責任者。普段はWebアプリケーションの開発を主に行っています。Seleniumを初めて知ったときは,特にWebブラウザが自動的に操作される様子が見えることや,そのテストの書き方の単純さに感動しました。その後テストをさらに簡単に作成できるようにしたいと思い,Selenium IDEを開発しています。

 多くのWebサイトは,一度リリースしたらそれで終わりということはありません。リリース後も多くの機能追加や機能変更によるアップデートが頻繁に行われます。プログラムに変更を加えたときには,新たなバグが入り込んでいないことを確認するテストが不可欠です。

 システムのリリース前にテストを実施するのはWebサイトに限った話ではありません。が,Webサイトの開発では,画面の確認のような手間がかかるテストが必要です。リリースの頻度が高い場合,そのようなテストを毎回手作業で行うとコストが膨れ上がってしまいます。コストを抑えつつ十分なテストをするには,テストをできるだけ自動化することが重要になります。低コストでテストができれば,リリース前だけでなく,開発の途中から頻繁にテストできるようになり,問題を早期に発見することにもつながります。

 テストを自動化するためのツールとしては,JUnitのようなユニット・テスト(単体テスト)のツールがよく知られています。ユニット・テストのツールは,コードに対する細かいテストには有効です。ただ,ブラウザでWebサイトにアクセスしながら画面を確認するようなテストには向いていません。

 そのようなテストに向いているのが,このパートで紹介するSeleniumというテスト・ツールです。ブラウザから実行するテストを自動化できます。品質管理(QA)関連のソフトウエアのオープンソース・プロジェクトを支援するサイト「OpenQA
http://www.openqa.org/)」を拠点に開発が進められています。

Selenium IDE

Firefoxでテストを手軽に記録/再生

 Seleniumは,中心部分である「Selenium Core」,ブラウザでの操作を記録/再生/編集する「Selenium IDE」,Webサーバーを変更せずにテストするための「Selenium Remote Control(Selenium RC)」という大きく三つのツールで構成されています。まずは,最も手軽に使えるSelenium IDEというツールを使ってテストの記録と再生を行ってみましょう。

 Selenium IDEは,Webブラウザ「Firefox」の拡張機能として実装されています。2007年3月上旬時点の最新のバージョンは0.8.6で,Firefox 1.5以降で利用できます。FirefoxでSeleniumIDEのダウンロード・ページ
http://www.openqa.org/selenium-ide/download.action) を開き“ Firefox extension(requires Firefox…)”のリンクをクリックするとインストールできます(図1(a))。

図1●Selenium IDEのインストール手順
図1●Selenium IDEのインストール手順

 初めてインストールしようとしたときには,設定変更が必要なことを示すメッセージが表示されます(b)。これは,SeleniumIDEの配布元であるwww.openqa.orgが“信頼できる配布元”に設定されていないためです。[設定を変更]のボタンをクリックして,[許可サイト-アドオンのインストール]のダイアログで[許可]ボタンを押し,再度リンクをクリックしてください。拡張機能をインストールするダイアログが現れます(c)。ダウンロード/インストールが終わると,Firefoxの再起動を促されます(d)。再起動するとSelenium IDEが使えるようになっています。

 Selenium IDEをインストールしたら,[ツール]メニューから[Selenium IDE]を選択してSelenium IDEを表示してみましょう(図2)。この状態で,ブラウザ上でGoogle
http://www.google.com/)を開き,「日経ソフトウエア」を検索してみてください。操作を進めるにしたがって,Selenium IDEに何かが記録されていくのがわかると思います(図3)。

図2●Selenium IDEを起動したところ
図2●Selenium IDEを起動したところ

図3●Googleで“日経ソフトウエア”を検索したときのSelenium IDEの表示
図3●Googleで“日経ソフトウエア”を検索したときのSelenium IDEの表示

 次に,Selenium IDEのツールバーにある緑の三角の[再生]ボタンを押してみてください。すると,ブラウザに対して行った,Googleを開いて「日経ソフトウエア」を検索するという操作を再生できます。このように,Selenium IDEを利用すると,ブラウザを使って行った操作を記録し,それと同じ操作を繰り返し実行できるようになります。

 Selenium IDEが記録した操作内容を「テスト・ケース」と呼びます。テスト・ケースはファイルに保存して,後から呼び出すことができます。Seleniumのテスト・ケースのファイルは,リスト1のような単純なHTMLファイルです。テーブルの中にテストの手順が書いてあります。各手順の意味については後で解説することにして,テストを作成する操作をもう少し詳しく見てみましょう。

リスト1●Googleで“日経ソフトウエア”を検索するテスト・ケース。ブラウザ上で行った操作がそのままHTML形式で記録される
リスト1●Googleで“日経ソフトウエア”を検索するテスト・ケース。ブラウザ上で行った操作がそのままHTML形式で記録される

操作の途中で画面の状態などを検証できる

 テスト対象として,ショッピング・サイトをイメージしたサイトを用意しました。このサイトはHTMLと画像だけで作ったものですが,Seleniumを使えば,実際のオンライン・ショップのような動的なWebアプリケーションに対しても同様にテストを行うことができます。

 このサイトで図4のような画面遷移をテストすることにします。Selenium IDEのメニューから“テストを新規作成”を選択した後,ブラウザ上でindex.htmlを開き,図4のような画面遷移をたどってみましょう。すると,Selenium IDEには図5のような内容が記録されます。

 図5の各行はSeleniumに対する命令に当たります。これを「コマンド」と呼びます。各行では,コマンドの名前に続いて「対象」「値」といった二つまでの引数を指定できます。

図4●ショッピング・サイトを模したサンプル
図4●ショッピング・サイトを模したサンプル

図5●図4の画面遷移を実行するテスト・ケースのコマンド列
図5●図4の画面遷移を実行するテスト・ケースのコマンド列

 1行目では,openコマンドを使って引数で指定したページ(index.html)を開いています。2行目のclickAndWaitコマンドで,引数で指定した個所をクリックし,ページが遷移するまで待ちます。ここでは“商品一覧”というテキストが含まれるリンクがクリックされます。3行目でも同様に,“みかん”というテキストを含むリンクがクリックされてページ遷移を待ちます。

 このように,Seleniumを使えばコマンドを通してブラウザを自動的に操作できます。ただ,テストを実行する際には,操作を行うだけでなく,意図した通りの内容が表示されているかどうかを検証する必要があります。このような検証もSeleniumで実行できます。

 ここでは,図4中央の“商品一覧”ページで“みかん”をクリックして遷移した先の“商品詳細”のページ(detail.html)に“おいしいみかんだよ!”というテキストが含まれるかどうかを検証するコマンドを追加してみましょう。このために必要な操作は,商品詳細のページ上で“おいしいみかんだよ!”と表示されている個所を右クリックし,コンテキスト・メニューから[verifyTextPresent おいしいみかんだよ!]を選択するだけです(図6)。すると,Selenium IDEにverifyTextPresentコマンドを実行する新しい1行が記録されます。

図6●検証処理をテスト・ケースに追加する
図6●検証処理をテスト・ケースに追加する因

 Selenium IDEの[再生]ボタンを押して,今行った操作が再生されるのを確認しましょう。すると,図7のようにすべてのコマンドの背景が緑になり,テストが成功したことがわかります。では試しにdetail.html中の“おいしいみかんだよ!”を“おいしいりんごだよ!”に変更してテストを実行してみましょう。すると,図8のように検証を行う行の背景が赤くなり,テストが失敗したことがわかります。

図では濃い灰色   図では濃い灰色
図7●検証を含むテストの実行結果。成功するとすべての行の背景が緑色で表示される(図では濃い灰色)
[画像のクリックで拡大表示]
  図8●検証に失敗した場合の実行結果。失敗した検証の行が赤い背景色で表示される(色付きの部分)
[画像のクリックで拡大表示]

ここから先はITpro会員(無料)の登録が必要です。

次ページ コマンドとエレメント・ロケータで操作を記述
  • 1
  • 2
  • 3
  • 4

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る