テスト自動化について(Selenium IDE × FireFox)

テスト自動化について(Selenium IDE × FireFox)

はじめまして!最近「魔女の一撃」を食らって衝撃を受けた、プログラマーの「かぽん」です。

名前の由来は子供のころのあだ名をもじったもので、特に意味はありません。

今回はselenium IDEというFireFoxのアドオンを使ったテスト自動化についてまとめたいと思います。

 

はじめに

テストというのは実装作業などに比べ、「おかしくない事を検証する」作業なので、やりがいが見出しにくいですよね。

フォームが何個もあるサイトで登録処理や自動返信メールを共通化していた場合、

その共通処理を修整すると、そのフォーム分テストをしないといけなくなると思います。

そのフォームの送信を自動で行い、テスト時間を短縮しようというのが今回のお話です。

 

インストール

  • FireFoxのメニューボタンをクリックして一覧から「アドオン」をクリックします。

  • 左側のメニューから①「拡張機能」を選択します。
  • 右上の検索ボックスに②「Selenium IDE」と入力して、検索ボタンをクリック。
  • ③「利用可能なアドオン」のラジオボタンを選択して、一覧から下記の「インストール」をクリックしてインストール
    「Selenium IDE」
    「Selenium IDE Button」(メニューにボタンを追加するアドオン)
  • メニューボタンの左隣に「Selenium IDE」のボタンが追加されている事を確認
    ※メニューバーの「ツール」をクリックして表示される一覧にも追加されます。
    ※追加されない場合、一度FireFoxを再起動してみてください。

 

使い方

テスト実行用のファイルの作成(テストケース、テストスイート)

テストケースの作成

  • テストしたいサイトを開いて、Seleniumボタンをクリックすると画像のようなウィンドウが表示されると思います。
  • 「記録ボタン」をクリックして記録を開始します。
  • フォームの各項目を入力して送信。
  • 「記録ボタン」を再度クリックして記録を停止します。
  • 1つのフォームの一連の動作を1つのテストケースとして保存します。
    ※テストケースとはブラウザ上の動きを記録したものです。
  • フォーム分テストケースを作成します。

テストスイートの作成

  • 一度に全フォームのテストを出来るようにテストスイートを作成します。
    ※テストスイートとはどのテストケースをどの順番で実行するかまとめたものです。
  • メニューバーの「ファイル」の「テストケースを追加」からテストしたいテストケースを追加していきます。
  • メニューバーの「ファイル」の「テストスイートのに名前を付けて保存」で保存します。

テスト実行

  • メニューバーの「ファイル」の「テストスイートを開く」から、先ほど作成したテストスイートを開きます。
  • 「再生ボタン1」をクリックするとテストスイートに登録されているテストケースが全て実行されます。
  • エラーがあった場合、左側の「Failures:」がエラーの数になり、ログに詳細が出力されます。

デバッグ方法

  • テストケースの開始したい行で右クリックして、「開始位置の指定/解除」を選択
  • テストケースの止めたい行で右クリックして、「ブレークポイントの指定/解除」を選択
  • 「再生ボタン2」をクリックすると、指定した範囲のみ実行されます。

 

まとめ

ブラウザ上の挙動を記録する方法だと、まだ正しく動作しない事もありますが、

テストケースをテキストエディタで正しく修整する事で動作するように出来ます。

テストケースを修整する方法は、また次の機会に書きたいと思いますが、

その方法をつかえばJSを実行したりも出来るので、複雑な動作でも再現可能になると思います。

またSeleniumにはFireFoxのアドオン以外にも、いろんな種類がありますので、

自分の環境、好みによって使い分けるといいと思います。

日本人は諸外国に比べ働きすぎと言われていますが、出来る事はなるべく効率化して残業0の社会を目指しましょう!


Previous: HTML5 カスタムデータ属性から二次元配列を取得してみた Next: 保存版!Webで使える心理学 ~オトリ効果編~

© 2017 ALL CONNECT Inc. All Rights Reserved.