Tech Sketch Bucket of Technical Chips by TIS Inc.

Selenium WebDriver でテストを自動化しよう — テストコード作成編 –

Pocket

この記事はeXcale Developer's Blogから移転されたものです。


eXcale 開発チームの冨樫です。

Webブラウザ上の動作を Selenium WebDriver にまかせて、Webアプリケーションのテストを自動化しよう。ということで、前回のブログ では Selenium WebDriver の実行環境を作成しましたが、今回はその上で動かすテストコードを Selenium IDE を使って作成してみようと思います。使用するブラウザは Firefox です。


今回ご紹介する内容の題目です

  • Selenium IDE の概要
  • Selenium IDE のインストール
  • 動作確認用アプリ作成
  • ブラウザ操作を記録/再生
  • テストコードの作成
  • Selenium WebDriver 上で動かす

Selenium IDE は Firefox のプラグインで、ユーザが行った操作を記録/再生できます。また記録した内容を、下記言語のスクリプトに変換することができるため、WebDriver との連携も容易です。

  • Ruby(RSpec、TEST::Unit)
  • Python2(unittest)
  • Java(Junit3, Junit4, TestNG)
  • C#(NUnit)

では実際に使ってみましょう。

Selenium IDE のインストール

Selenium IDE プラグインを Firefox にインストールします。
公式の Download ページより最新版を取得し、インストールしてください。
※ Firefoxの再起動が必要です。

動作確認用アプリ作成

ここでは、サンプルアプリを利用して、以下の動作確認を行おうと思います。

① テキストを入力して送信
② 入力値が表示されていることを確認

サンプルアプリは以下の PHP でサクッと作ってしまいましょう。

PHP の動作環境については eXcale をご利用頂けます(基本無料です)。
また、デプロイ方法につきましては こちらのページ をご参照ください(5分程度で完了します)。

テキストフォームに入力後に送信ボタンを押すと入力した値が表示されることを確認してください。

ブラウザ操作を記録/再生

では Selenium IDE で記録/再生を行ってみましょう
まずは記録から。
Firefox を起動し、「ツール」 → 「SeleniumIDE」 を選択してください。
Selenium IDE の画面が表示されます。
右上の赤い丸が押されていると、操作を記録している状態です。
サンプルアプリが動いているページを開き、記録を開始してください。

記録を開始したら、Firefox 上で「Hello World!」と入力し、送信ボタンをクリックしてください。操作と同時に SeleniumIDE 画面に操作内容が記録されます。
赤い丸をクリックして、記録を終了してください。

では、次に再生してみましょう。
再生はFirefoxが現在開いているページ上で行われるため、「Ctrl + T」等で新しいタブを開いてから、SeleniumIDE のメニューより「アクション」 → 「現在のテストケースを実行」を選択してください。

サンプルアプリのページに遷移し、Hello World! が表示されるところまでの操作が再生されます。

テストコードの作成

再生した結果、問題無かったかどうかを判断するテスト処理を追加します。
入力した値「Hello World!」が表示されていることをテストします。

まず、SeleniumIDE のコマンド欄で「assertText」を選択します。
次にSelect 機能によって対象を選択します。Select ボタンをクリック後、ブラウザ上で該当個所を選択してください。
Selectボタンをクリック
ブラウザ上で選択

最後、値欄に「Hello World!」と入力してください。
以下のような記入になっているかと思います。
上記まで完了しましたら、先ほどと同様にSeleniumIDE のメニューより「アクション」 → 「現在のテストケースを実行」を選択してください。
"Failures:0" となっていればテスト成功です。

# 試しに値欄を「Hello World!」以外の文字列で実行してみてください。テストが失敗し、"Failures:1" となることが確認できます。
では、テストコードに変換しましょう。様々な言語、ライブラリに対応していますが、今回は Ruby(Rspec)を使用します。SeleniumIDE のメニューより「テストケースをエクスポート」→「Ruby / RSpec / WebDriver」を選択し、任意のファイル名で保存してください。

エクスポートしたファイル内に「$${receiver}」の記載がある場合は全て「@driver」に置換してください(Selenium Ruby Formatters のバグによって、上記変換ができていないようです)。

Selenium WebDriver 上で動かす

前項で作成したテストコードを、前回のブログ にて作成した環境で動かします。

今回はテストにRSpecを使用するため、まずは rspec コマンドを使えるようにしましょう

次にテストコードのファイルを、該当サーバに SCP もしくはコピペ等で作成してください。(例: ~/hello_world_spec.rb)

では Xvfb を起動し、rspecコマンドを実行してみましょう

実行結果が、下記の通りになっていれば成功です。
「1 example, 0 failures」


最後に

今回は Selenium IDE でのテストコード作成方法をご紹介させて頂きました。
前回のブログ で用意したSelenium WebDriver から実行させることもでき rspec コマンドのみでテストを実施させることも可能です。Webアプリのテストにお役立てください。

エンジニア採用中!私たちと一緒に働いてみませんか?