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.

OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化

43,565 views

Published on

2014/2/28に開催された「Enterprise × HTML5 Conference」(http://conference.html5biz.org/2014spring/)の資料です。
時間の関係で当日使用しなかった未発表スライドも多数含んでいます。

Published in: Technology
  • Be the first to comment

OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化

  1. 1. OSSのブラウザ自動テストツール 「Selenium」を使った、 開発・テストの効率化 2014/02/28 日本Seleniumユーザーコミュニティ 伊藤望
  2. 2. 自己紹介 伊藤 望  コミュニティ     「日本Seleniumユーザーコミュニティ」を主宰 テスト自動化研究会 会社    株式会社TRIDENT 代表取締役 テスト自動化の支援を行うベンチャー www.trident-qa.com
  3. 3. 今日はこんなことをお話します  ビジネスにおけるテスト自動化の価値  Seleniumと関連ツール群の紹介  テスト自動化を成功させるために
  4. 4. なぜテストを自動化するのか
  5. 5. 近年のビジネスのトレンド  変化のスピードが早くなっている  トレンドを象徴するキーワード <アジャイル> <リーンスタートアップ> <DevOps>
  6. 6. Webシステムはどうあるべきか?  変化にいち早く対応するために すばやく改善したい 絶えず改善したい  このようなシステムが実現できれば、 競争優位に立てる
  7. 7. テストはどうあるべきか? システムをすばやく改善したい  システムを絶えず改善したい   自動テストの場合なら   手動よりも短時間で実行可能! 低コストで何度でも実行可能! スピードと品質の両立
  8. 8. さまざまな「自動テスト」の種類  自動テスト  人間の手を介さず、テストプログラムによってテストを行う ユニットテスト • 関数やクラスのテストを自動化 • JUnit, PHPUnit, などなど 要件定義 基本設計 総合テスト 結合テスト 画面テスト • 画面からのテストを自動化 詳細設計 単体テスト • Selenium 実装
  9. 9. ユニットテスト  テストしたいプログラム public int add(int arg1, int arg2) { return arg1 + arg2; }  テストプログラム assertEquals(2, add(1, 1));  あとで「add」メソッドの実装を変更しても、 正しく動いているかチェックできる
  10. 10. 画面テスト  ブラウザ画面を操作するSeleniumスクリプト (例) driver.get("http://google.co.jp"); driver.findElement(By.id("search")) .sendKeys("HTML5 カンファレンス"); driver.findElement(By.id("go_button")).click(); assertEquals(driver.getTitle(), "検索結果");
  11. 11. Selenium
  12. 12. Selenium オープンソースの画面テストツール  仕組み  クライアント端末 操作 HTTP通信 Webサーバー Selenium ブラウザ
  13. 13. Selenium 特徴 その1 クロスブラウザ 1つのテストスクリプトを様々なブラウザで クライアント端末 操作 HTTP通信 Webサーバー
  14. 14. Selenium 特徴 その2 マルチプラットフォーム 様々なOS・デバイスから デ ス ク ト ッ プ Webサーバー モ バ イ ル
  15. 15. Selenium 特徴 その3 マルチプログラミング言語 テストスクリプトはお好みの言語で Webサーバー  ブラウザ操作を記録してスクリプトを生成することも
  16. 16. Selenium 誕生は2004年  今やブラウザテストの世界標準  W3C Working Draftとして、標準化も始まっている   Chrome、Operaは、 ブラウザ開発チームがメンテナンス http://docs.seleniumhq.org/download/ より
  17. 17. Selenium  Selenium利用トレンド  順調に伸びている
  18. 18. 様々なSelenium Selenium1 (Selenium RC) WebDriver 様々な機能制限 安定性に課題 Selenium1の課題を解消 Selenium2 (Selenium WebDriver) Selenium RCとWebDriverの統合 Selenium3 Coming soon? Selenium IDE Selenium Builder ブラウザ操作の記録・再生ができる Firefoxプラグイン
  19. 19. 様々なSelenium  Selenium WebDriver   プログラミング言語のコードから実行 Selenium IDE  ブラウザ操作の記録・再生ができるFirefoxプラグイン
  20. 20. Selenium WebDriver
  21. 21. Selenium WebDriver プログラミング言語からブラウザ操作  例) Java  driver.get("http://google.co.jp"); driver.findElement(By.id("search")) .sendKeys("HTML5 カンファレンス"); driver.findElement(By.id("go_button")).click();  例) Ruby @driver.get "http://google.co.jp" @driver.find_element(:id, "search") ¥ .send_keys "HTML5 カンファレンス" @driver.find_element(:id, "go_button").click
  22. 22. Selenium WebDriver デモ (Java) http://www.youtube.com/watch?v=QM63IRzV7tw
  23. 23. Selenium WebDriver 使い慣れた言語でスクリプトを書ける  if文、for文、変数が使える  プログラム共通化で、メンテナンスコスト削減 
  24. 24. Selenium WebDriver 操作対象を指定する方法 要素のidやname  リンクのテキスト  CSSセレクター  画面変更の影響を受けにくい 読みやすいが、変わりやすい By.cssSelector("#search div")  HTMLツリーの階層(xPath)で指定 By.xpath("//input[@id='search']/div") 最後の手段
  25. 25. Selenium WebDriver 値をチェックする方法  例) 表示テキストの値をチェック assertEquals( driver.findElement(By.id("total")).getText(), "100円");  様々な情報をチェックできる  チェックボックス・ラジオボタンの選択状態  要素の表示・非表示 要素のグレーアウト 
  26. 26. Selenium WebDriver AJAX非同期処理  非同期処理が完了するまでWaitする必要がある  例) idが「message」の要素のテキストが 「登録が完了しました」になるまで待機 new WebDriverWait(driver, 10).until( ExpectedConditions.textToBePresentInElement( By.id("message"), "登録が完了しました"));
  27. 27. Selenium WebDriver スクリーンショット File file = ((TakesScreenshot) driver) .getScreenshotAs(OutputType.FILE); FileUtils.copyFile(file, new File("C:¥¥..."));  さすがに毎回書くのは面倒 たいてい、ラッパーを作って対応
  28. 28. Selenium WebDriver ブラウザの切り替え  Internet Explorer WebDriver driver = new InternetExplorerDriver()  Chrome WebDriver driver = new ChromeDriver()  Firefox WebDriver driver = new FirefoxDriver()  「driver」を生成する部分を書き換える
  29. 29. Selenium IDE
  30. 30. Selenium IDE  ブラウザ操作の記録・再生ができる、 Firefoxプラグイン
  31. 31. Selenium IDE  活用方法 その1    記録したブラウザ操作から、 Selenium WebDriverのスクリプトを生成(エクスポート) スクリプトの作成が楽になる 活用方法その2  Selenium IDEの画面でスクリプトを管理  プログラマーでなくてもメンテナンスできる
  32. 32. デモ http://www.youtube.com/watch?v=BtUkFAp4UTg
  33. 33. Selenium 関連トピック ※特に断りがない限り、全てオープンソース
  34. 34. モバイルテスト  Seleniumプロジェクト公式ドライバー    サポート終了へ サードパーティ製ドライバー     iPhoneDriver AndroidDriver Appium ios-driver Selendroid Seleniumプロジェクト推奨 Selenium次期バージョン(Selenium3)  Appium, ios-driver, SelendroidのAPIを、 モバイルのSelenium APIとして統合へ http://www.selenium.jp/translation/androidtoiosnosapoto より
  35. 35. モバイルテスト Appium [アピウム] Seleniumと同じようなコマンド体系  iOS、Anroid  ネイティブ、ハイブリッド、ブラウザ  エミュレータ、実機 
  36. 36. HTML5  画面テストに関係するところ      inputの新しいtype Web Storage video canvas ドラッグ&ドロップ sendKeysコマンドやJavaScript関数呼び出しで、たい てい扱える  専用のコマンドは用意されていない(今後の課題?)  ブラウザごとに対応状況にばらつき 
  37. 37. もっと書きやすく  そのままのSeleniumテストスクリプト(Ruby) @driver.find_element(:id, "search") ¥ .send_keys "HTML5 カンファレンス" @driver.find_element(:id, "go_button").click  Capybara (Ruby) fill_in("search", :with => "HTML5 カンファレンス") click_button("go_button")  Geb [ジェブ] (Groovy)
  38. 38. もっと多機能に  DBのデータをチェックしたい   Excelからテストデータを読み込みたい   Junitの@Parameters機能 ブラウザごとの、レイアウト崩れを検出したい    DBUnit キャプチャをSeleniumで取得して、目視チェック 画像比較ツールを活用 様々なOSSを組み合わせて活用
  39. 39. Jenkins ビルド デプロイ テスト リリース 様々なツールを組み合わせ実現するが…  Jenkins      組み合わせが簡単に 実行が簡単に 結果の確認・通知が簡単に 一連の流れを自動化し、何度でも実行できる  継続的インテグレーション、継続的デリバリー
  40. 40. Jenkins  Seleniumに無い機能はJenkinsが補ってくれる    テストのスケジュール実行 テスト結果通知(メール等) テスト結果、履歴、集計データの照会(ブラウザ上で)
  41. 41. 複数の端末を使ったテスト  Selenium Grid & RemoteWebDriver   複数のマシンでテストを並列実行 様々な種類のOS・端末でテストを実行 ノード端末 ハブ端末
  42. 42. クラウドの活用 大量のテストを実行する場合、一時的に大量の マシンリソースが必要になる クラウドが最適  クラウドのSelenium実行環境 (有料)     SauceLabs TestingBot モバイル端末でのSeleniumテスト(有料)  Scirocco Cloud(日本)
  43. 43. ヘッドレスブラウザ  PhantomJS      画面描画を行わない、「ヘッドレスブラウザ」 描画しない分高速に動作する 描画しないがスクリーンショットは取れる WebKitベースの実装 実際のブラウザと完全に同じ挙動ではない
  44. 44. テスト自動化を 成功させるために
  45. 45. テスト自動化マネジメント3つの誤解 誤解 その1 自動化すれば、 テストのコストがかからない! 誤解 その2 誤解 その3 記録機能で、誰でも 簡単にスクリプトが作れる! 全テストを Seleniumで自動化すればいい!
  46. 46. 誤解 その1 自動化すれば、テストのコストがかからない  スクリプト作成にはコストがかかる  作った後もメンテナンスコストがかかる メンテナンスのコストは 発生し続けると考える
  47. 47. 誤解 その2 全テストをSeleniumで自動化すればいい  画面テストはメンテナンスのコストが高い ユニットテストでできるだけカバーする  諸事情でユニットテストが書けない場合は、 メンテナンスできない量のテストを作らない
  48. 48. 全てを自動化、できるのか?  「全て自動化」に近い企業は存在する 開発段階から、自動化がプロセスに組み込まれてい ないと困難  簡単に実現できるものではない 
  49. 49. 誤解 その3 記録機能で、誰でも簡単にスクリプトが作れる  記録しただけでは安定したスクリプトにならない    画面変更に強いスクリプト データ変更に強いスクリプト 不安定なスクリプトだと 不具合でもないのに頻繁に失敗する 誰も見なくなる それなりのスキルが必要
  50. 50. なんのためにテストを自動化するのか コスト削減のため  デグレードをなくすため  すばやく、絶えずソフトウェアを改善し続けるため  攻めの自動化!
  51. 51. どこから自動化すればよいか? バージョン管理(Subversion, Git)やコンパイル自動化 (Jenkins)がまだなら、まずはそこから  パイロットプロジェクト等で小さく始める OSSは最適  費用対効果が高そうな領域から    クロスブラウザテスト 入力値パターンを変えて処理を繰り返すテスト まずは小さな成功体験を得る
  52. 52. 最後になりましたが.. Seleniumコミュニティのご紹介
  53. 53. 日本Seleniumユーザーコミュニティ 2013年7月設立  メンバーは250名を突破  www.selenium.jp 翻訳記事 オンラインフォーラム 勉強会資料 困った時に質問できる場所  最新情報や様々なノウハウが得られる 
  54. 54. 今日のメッセージ  変化にいち早く対応するために すばやく改善  絶えず改善   テストの自動化で品質を担保  スピードと品質を両立し、競争に勝つ!
  55. 55. ご清聴ありがとうございました

×