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

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

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