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

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(int arg1, 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年
 今やブラウザテストの世界標準
 W3C Working 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」の要素のテキストが
「登録が完了しました」になるまで待機
new WebDriverWait(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
WebDriver driver = new InternetExplorerDriver()

Chrome
WebDriver driver = new ChromeDriver()

Firefox
WebDriver driver = new FirefoxDriver()

「driver」を生成する部分を書き換える

29. Selenium IDE

30. Selenium IDE

ブラウザ操作の記録・再生ができる、
Firefoxプラグイン

31. Selenium IDE

活用方法 その1



記録したブラウザ操作から、
Selenium WebDriverのスクリプトを生成(エクスポート)
スクリプトの作成が楽になる
活用方法その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を、
モバイルのSelenium APIとして統合へ
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テスト(有料)

Scirocco Cloud(日本)

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. ご清聴ありがとうございました