Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Selenium IDE for primer

1,409 views

Published on

Selenium IDE for primer
Selenium IDE 入門セミナー資料

Published in: Internet
  • Be the first to comment

Selenium IDE for primer

  1. 1. 株式会社シーケンス Nov. 14, 2014
  2. 2. ご挨拶 株式会社シーケンス代表取締役 篠原康行 我々は、オレンジソフト様からテスト自動化のお話をいただき、 2014年3月から約8ヵ月に渡り、Selenium IDEに使ったテスト自動化 に取り組んで参りました。 今回のセミナーでは、その取り組みで得られた知見等をこの場で ご報告させて頂きたいと思います。 また、今後のテスト自動化の普及に繋がれば幸いです。 テスト対象アプリケーション: xgate4 (Webメールソフト) ※メール誤送信対策機能搭載 製造元: 株式会社オレンジソフト
  3. 3. 内容 1. Seleniumとは 2. Selenium何がいいの? 3. Seleniumいろいろあるけど・・・ 4. Selenium IDEを使う 5. テスト自動化を行うにあたって Q&A
  4. 4. 1.Seleniumとは Webブラウザを使ったWebアプリケーションのテスト を自動化するツール - 始まりは、社内ツール(2004) - オープンソースソフトウェア(OSS) ライセンス: Apache 2.0 License - Seleniumプロジェクトhttp://www.seleniumhq.org/ - ターゲットブラウザFireFox, IE, Chrome, Safari
  5. 5. 2.Selenium何がいいの? 1. 手入力要素のテスト 2. 複数条件のテスト 3. 表示内容のテスト 4. テストの記録 5. テスターに依存しない 6. マルチブラウザでのテスト 7. 思いかけないけど意外にいいかも
  6. 6. 2-1.手入力要素のテスト 手入力要素のテストを自動化できる 入力条件の明確化 入力時間の短縮 手作業によるケアレスミスを防ぐ 例.文字種と文字数制限のテスト [ひらがな]入力ができるかを確認する [128文字]以上の入力はできないことを確認す る
  7. 7. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  8. 8. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  9. 9. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  10. 10. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  11. 11. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  12. 12. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  13. 13. 2-2.複数条件のテスト 複数の要素を組み合わせたテストケースの作成が容易 例.検索を行う
  14. 14. 2-3.表示内容のテスト ページに表示されるべき内容の確認が容易である 例.メニュー項目の確認
  15. 15. 2-4.テストの記録 エビデンスを作成しやすい  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  16. 16. 2-4.テストの記録 エビデンスを作成しやすい  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  17. 17. 2-4.テストの記録 エビデンスを作成しやすい  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  18. 18. 2-4.テストの記録 エビデンスを作成しやすい  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  19. 19. 2-4.テストの記録 エビデンスを作成しやすい  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  20. 20. 2-4.テストの記録 エビデンスを作成しやすい 更新した箇 所  テスト内容や結果についてコメントを入力可能  テストの入力内容や画面遷移を記録可能  テストの結果をログファイルに出力可能  記録に残すことで、Webアプリケーション更新の影 響を確認可能
  21. 21. 2-5.テスターに依存しない  自動化することでテスターによるテストの深さのバ ラツキを防ぐ - 仕様を明確できる - テストデータもSeleniumで作成することでテスターに 依存しない - 大量のテストデータを作成しやすい  手作業によるケアレスミスを防ぐことが容易である
  22. 22. 2-6.マルチブラウザでのテスト 各種ブラウザでテストケースを実行可能  主なブラウザ - FireFox, IE, Chrome, Safari  実行形式 - SeleniumIDEを使用した実行 - SeleniumRCでの実行 - プログラミングにて実行可能 主なプログラミング言語Java, C#, Ruby, Python  ブラウザ間の差違を発見しやすい
  23. 23. 2-7.デグレードしにくい  Webアプリケーションを更新した際にデグレードし ていないか確認しやすい
  24. 24. 2-7.デグレードしにくい  Webアプリケーションを更新した際にデグレードし 更新した箇 ていないか確認しやすい 所
  25. 25. 2-7.思いかけないけど 意外にいいかも 開発者が自身のWebアプリケーションの確認に Selenium を使用すると、意外にいいかも  Seleniumで確認しやすい記述を意識するようになり、 標準的な記述を行うようになるのでは・・・  開発時にデグレードを発見しやすい  開発者自身にとって 単体テストのエビデンスを取ることができる
  26. 26. 3. Seleniumいろいろあるけど・・・ Selenium Grid WebDriver Selenium3 モバイル強化 Selenium RC (Selenium1) Selenium 2 Visual型ツー ル Selenium IDE SeleniumBuilder モバイル向け ios-driver Selendroid Appium
  27. 27. 3-1.Selenium RC (Remote Control) - ① Seleniumスクリプト(HTML形式)をコマンドラインから実行する
  28. 28. 3-1.Selenium RC (Remote Control) - ② コマンドライン Selenium Server >java -jar selenium-server-standalone-2.41.0.jar -htmlSuite *googlechrome WebブラウザはChrome Webアプリケーション URL http://xgate4.orangesoft.co.jp/xgate48/grp/test/b テストスイーツのパステスト結果を出力するファ イル E:JobOrangeSofttsTest.html e:loglog.html
  29. 29. 3-1.Selenium RC (Remote Control) - ② コマンドライン Selenium Server >java -jar selenium-server-standalone-2.41.0.jar -htmlSuite *googlechrome WebブラウザはChrome Webアプリケーション URL http://xgate4.orangesoft.co.jp/xgate48/grp/test/b テストスイーツのパステスト結果を出力するファ イル E:JobOrangeSofttsTest.html e:loglog.html
  30. 30. 3-1.Selenium RC (Remote Control) - ③ Seleniumスクリプトは、Seleniumコマンドの組み合わせの他、JavaScriptを 使ったテストも記述できる
  31. 31. 3-1.Selenium RC (Remote Control) - ④
  32. 32. 3-2.WebDriverとSelenium2 WebブラウザをコントロールするAPI群 WebDriver API 特別なテストケース、SeleniumコマンドとJavaScriptでは記述が 難しいテストケース、あるいは、テストスピードを速くしたいな ど  Java, C#, Ruby, Python他の言語で作成したい場合 マルチブラウザ対応したい、テストレポートを細かにしたい、 etc...  主なWebDriver ChromeDriver, FirefoxDriver, InternetExplorerDriver, SafariDriver, AndroidDriver, ios-driver  主流Selenium 1 + WebDriver = Selenium 2
  33. 33. 3-3.Visual型ツール- ① Selenium IDE - Seleniumテスト用の統合開発環境 - 入力操作の自動記録・再生 - スクリプトを手動で記述・編集・デバッグ - テストケースをその場で実行・検証できる - 複数テストケースをテストスイーツとしてまとめてテスト - ブラウザ内のテスト画面を保存可能 - テストケースをHTML、Ruby、Python、Java、C#など多様な形式 で保存可能デフォルトは、HTML形式 - JavaScriptをスクリプト内または拡張スクリプトファイルにて使 用可能(拡張スクリプト使用時:user-extensions.js必須、.js追加 可能) - FireFoxアドオン - 多種多様なプラグイン(ログファイル出力、制御構造など) - テスト結果をレポートにまとめやすい
  34. 34. 3-3.Visual型ツール- ① Selenium IDE - Seleniumテスト用の統合開発環境 - 入力操作の自動記録・再生 - スクリプトを手動で記述・編集・デバッグ - テストケースをその場で実行・検証できる - 複数テストケースをテストスイーツとしてまとめてテスト - ブラウザ内のテスト画面を保存可能 - テストケースをHTML、Ruby、Python、Java、C#など多様な形式 で保存可能デフォルトは、HTML形式 - JavaScriptをスクリプト内または拡張スクリプトファイルにて使 用可能(拡張スクリプト使用時:user-extensions.js必須、.js追加 可能) - FireFoxアドオン - 多種多様なプラグイン(ログファイル出力、制御構造など) - テスト結果をレポートにまとめやすい
  35. 35. 3-3.Visual型ツール- ② Selenium Builder - Seleniumテスト用の統合開発環境 - SeleniumIDEとほぼ同じ機能を持つ - WebDriverのコマンドをスクリプトに記述可能 Seleniumコマンドより細やかなテストケースを作成可 能 プログラミング向き - FireFoxアドオン
  36. 36. 3-3.Visual型ツール- ② Selenium Builder - Seleniumテスト用の統合開発環境 - SeleniumIDEとほぼ同じ機能を持つ - WebDriverのコマンドをスクリプトに記述可能 Seleniumコマンドより細やかなテストケースを作成可 能 プログラミング向き - FireFoxアドオン
  37. 37. 3-3.Visual型ツール- ② Selenium Builder - Seleniumテスト用の統合開発環境 - SeleniumIDEとほぼ同じ機能を持つ - WebDriverのコマンドをスクリプトに記述可能 Seleniumコマンドより細やかなテストケースを作成可 能 プログラミング向き - FireFoxアドオン
  38. 38. 3-3.Visual型ツール- ② Selenium Builder - Seleniumテスト用の統合開発環境 - SeleniumIDEとほぼ同じ機能を持つ - WebDriverのコマンドをスクリプトに記述可能 Seleniumコマンドより細やかなテストケースを作成可 能 プログラミング向き - FireFoxアドオン
  39. 39. 3-3.Visual型ツール- ③ IDEとBuilder どちらを使う? Seleniumプロジェクトとしては、いずれはSeleniumコ マンドからWebDriverコマンドへ全面的に移行したいの で、Builderを推奨したいようである しかし、歴史が浅い(2013年初め頃)こともあり、 まだ実用性は低い Builderの不便な点として •UIが使いづらい •変数を複数のテストケースで共有できない •データ駆動型のテストができない •対応ブラウザはFireFoxのみ これらは、テストツールを使う上では問題なので、や はりSeleniumIDEを選択した方が良いでしょう
  40. 40. 3-3.Visual型ツール- ③ IDEとBuilder どちらを使う? 個人的には、SeleniumIDEは、 とても使いやすいので、 WebDriverコマンドを記述でき るようになって存続してほしい と思います・・・今もIDEは更 新しているので期待しています SeleniumIDEはWebアプリ ケーションやプログラミングに 精通していなくても扱いやすい とも思います Seleniumプロジェクトとしては、いずれはSeleniumコ マンドからWebDriverコマンドへ全面的に移行したいの で、Builderを推奨したいようである しかし、歴史が浅い(2013年初め頃)こともあり、 まだ実用性は低い Builderの不便な点として •UIが使いづらい •変数を複数のテストケースで共有できない •データ駆動型のテストができない •対応ブラウザはFireFoxのみ これらは、テストツールを使う上では問題なので、や はりSeleniumIDEを選択した方が良いでしょう
  41. 41. 3-4.Selenium Grid  複数のマシンにテストを自動で分散させるツール Webアプリケー ション Windows IE MAC Safari Android Windows FireFox Selenium Grid Serever テストスクリ プト ・・・
  42. 42. 3-5.モバイル向け- ①  本家Seleniumとしてはスマホ向けSeleniumの開発は中止 (TL;DR: We’re retiring Selenium’s own AndroidDriver and iPhoneDriver in favour of any of Selendroid, iosdriver and Appium. If you’re using one of Selenium’s own mobile drivers, please evaluate one of these alternatives.)  iOS向け: ios-driver 今のところiOSシミュレータ上のみで動作  Android向け: Selendroid Androidエミュレータで動作/実機はselendroid-standalone コンポーネントを組み込んで動作  iOS, Android 向け: Appium Sauce Labs社が開発  テストケースは、Java/Ruby/Python/C#で記述 一部、JavaScript可能とのこと
  43. 43. 3-5.モバイル向け- ②  モバイル向けのWebDriverは、未だ実用性が低いようで ある Appiumが実用に一番近いように見受けられる  モバイル向けテスト方法の提案として FireMobileSimulatorを使用してSeleniumIDEにてテス トを実行可能
  44. 44. 3-5.モバイル向け- ②  モバイル向けのWebDriverは、未だ実用性が低いようで ある Appiumが実用に一番近いように見受けられる  モバイル向けテスト方法の提案として FireMobileSimulatorを使用してSeleniumIDEにてテストを実行 可能
  45. 45. 4.Selenium IDEを使う- ①  インストール  Firefoxでhttp://docs.seleniumhq.org/download/にアク セスする  Download latest released version 2.8.0 released on 29/Sep/2014 ここをクリック
  46. 46. 4.Selenium IDEを使う- ②  起動  メニュー→ 開発ツール→ Selenium IDE または  ツールバーのSelenium IDE アイコンをクリック
  47. 47. 4.Selenium IDEを使う- ③  初めての起動 テストケース一 覧 太字になってい るテストケース が編集の対象 ここに編集対象テストケー スのコマンドソースを表示 ここに実行時のロ グ
  48. 48. 4.Selenium IDEを使う- ④  テストケースまたは テストスイーツの 読み込み
  49. 49. 4.Selenium IDEを使う- ⑤
  50. 50. 4.Selenium IDEを使う- ⑥ 実行速度の 調整 テストスイー ツ全体を実行 対象テスト ケースを実行 rollupコマン ドを組み込む デバッグ用 [一時停止/再開] [1ステップ実行] 拡張スクリプ トの再読み込 み テストの記録 開始/停止
  51. 51. 4.Selenium IDEを使う- ⑦  編集する
  52. 52. 4.Selenium IDEを使う- ⑦  編集する 例.編集の様子
  53. 53. 4.Selenium IDEを使う- ⑧  デバッグをする 例.デバッグの様子
  54. 54. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ FireFoxの他にChrome、IEで動作可能 但し、Chrome、IEでの編集は実行前のみ、実行 後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可能  スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成 できるJava, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができる 複数指定できるが、1つはuser-extensions.jsであること メニューから[オプション]→ [設定]でOptionダイアログ表示
  55. 55. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可能  スクリプトファイルをエクスポートすることで、さらに細やかなテスト ケースを作成できるJava, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができる 複数指定できるが、1つはuser-extensions.jsであること メニューから[オプション]→ [設定]でOptionダイアログ表示
  56. 56. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可能  スクリプトファイルをエクスポートすることで、さらに細やかなテスト ケースを作成できるJava, C#, Ruby, Python 他のエディタ を使用して作  拡張スクリプトファイルを取り込むことができる 複数指定できるが、1つはuser-extensions.jsであること 成可能 メニューから[オプション]→ [設定]でOptionダイアログ表示
  57. 57. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可 能  スクリプトファイルをエクスポートすることで、 さらに細やかなテストケースを作成できる Java, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができる 複数指定できるが、1つはuser-extensions.jsであること メニューから[オプション]→ [設定]でOptionダイアログ表示
  58. 58. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可 能  スクリプトファイルをエクスポートすることで、 さらに細やかなテストケースを作成できる Java, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができる 複数指定できるが、1つはuser-extensions.jsであること メニューから[オプション]→ [設定]でOptionダイアログ表示
  59. 59. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可 能  スクリプトファイルをエクスポートすることで、さらに細やかなテストケー スを作成できるJava, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができ る 複数指定できるが、1つはuser-extensions.jsであ ること メニューから[オプション]→ [設定]でOptionダイアログ
  60. 60. 4.Selenium IDEを使う- ⑨ その他いろいろ  マルチブラウザでは・・・ Chrome、IEで動作可能 但し、編集は実行前のみ、実行後の編集は即時実行はできない- 実例 参考:IDEを他のブラウザで動作させる  スクリプトファイルは、HTML形式で出力- テキストエディタで編集可 能  スクリプトファイルをエクスポートすることで、さらに細やかなテストケー スを作成できるJava, C#, Ruby, Python  拡張スクリプトファイルを取り込むことができ る 複数指定できるが、1つはuser-extensions.jsであ ること メニューから[オプション]→ [設定]でOptionダイアログ
  61. 61. 5.テストの自動化を行うにあたって- ① テスト自動化を導入できないのは? 主に次の2点が考えられる  SeleniumIDEでFireFoxのテストケースを作成するこ とは容易であることはわかるが、実際は他ブラウザ での動作確認を必要とするのでプログラミングを行 う必要がある。しかし、Seleniumコマンドと SeleniumAPIそしてWebDriverの扱い方を習得する時 間を取ることができない  全てを自動化できるものとして導入してしまうと Seleniumにとって不得手な対応に工数がかかってし まう
  62. 62. 5.テストの自動化を行うにあたって- ① テスト自動化を導入できないのは? 主に次の2点が考えられる  SeleniumIDEでFireFox例えば のテストケースを作成するこ とは容易であること要素はのわ位置かがる深すがぎる 、実際は他ブラウザ マウスカーソルが手マークに変化 での動作確認を必す要る とするのでプログラミングを行 スクロールバーを表示する う必要がある。しなかどし動的、に変Selenium化するのは苦コ手 マンドと SeleniumAPIそしてWebDriverの扱い方を習得する時 間を取ることができない  全てを自動化できるものとして導入してしまうと Seleniumにとって不得手な対応に工数がかかってし まう
  63. 63. 5.テストの自動化を行うにあたって- ② テストを自動化した場合のメリットを考えるとSeleniumを使用 したい A) 手入力要素の多いWebアプリケーションでは入力できる文 字種と文字数など入力条件を設定できる為、手入力確認に よるテスト漏れ・テストの不十分さをカバーする B) Webアプリケーションの条件設定によるテストのように複 数の要素をマトリックス的に組み合わせたテストケースの 作成が容易である C) 表示内容の確認が容易である D) テストの状況、結果とそのスクリーンショットを記録とし て残すことができる E) テスターに依存しない為、何度でも同じテストを同じ条件 で行う事ができる F) Webアプリケーションの変更による影響の有無を確認でき る G) ブウラウザ間の差違を発見しやすくなる
  64. 64. 5.テストの自動化を行うにあたって- ③  開発に取り入れた場合の例 各種ブラウザ Seleniumで確認 開発 結合 ! NG ! Seleniumで確認 (結合テスト) Seleniumで確認 (単体テスト) ! NG !
  65. 65. Q&A
  66. 66. ありがとうございました テスト対象アプリケーション: xgate4 (Webメールソフト) ※メール誤送信対策機能搭載 製造元: 株式会社オレンジソフト: http://www.orangesoft.co.jp/products/xgate/xgate4/ (株)シーケンスURL : http://www.e-sqc.co.jp/ Selenium メモ(blog) : http://selenium-memo.blogspot.jp/ 実体験(blog) : http://selenium-memo2.blogspot.jp/

×