デブサミ関西2012 B-3

ブラウザテストを
自動化することにした
〜～TestNGとSeleniumでやってみる〜～

#kansumiB3 阪田浩一
フリュー株式会社
ソーシャルネットワーク事業部
1
Developers Summit 2012
2012年9月15日土曜日 1

みなさん、
こんにちは
こんにちは!!

2

まずは

3

安心と定番の

4

自己紹介から。

5

阪田浩一
(さかたこういち)

6

「すごくない」
プログラマです。

7

Twitter: @jyukutyo
はてな: jyukutyo
「じゅくちょー」

8

神戸出身
大阪在住

9

フリュー株式会社
ソーシャルネットワーク
事業部

10
2012年9月15日土曜日 10

プリントシール機と
連動した画像SNSを
作っています。

11
2012年9月15日土曜日 11

半年前まで
SIの世界(客先常駐)に
いました。

12
2012年9月15日土曜日 12

こんな本とか記事
書いています。

13
2012年9月15日土曜日 13

日本語版韓国語版

14
2012年9月15日土曜日 14

@IT連載
次世代テスティングフレームワーク
「TestNG」
http://www.atmarkit.co.jp/fjava/
rensai4/testng01/testng01_1.html

15
2012年9月15日土曜日 15

関西Javaエンジニアの会
(関ジャバ)

16
2012年9月15日土曜日 16

というコミュニティ
やってます。

17
2012年9月15日土曜日 17

では

18
2012年9月15日土曜日 18

今日のゴール

Original Update by opofatticus
19
2012年9月15日土曜日 19

ブラウザでのテストを
全部人間がやる必要って
あるのかなあ…

20
2012年9月15日土曜日 20

という疑問を
持ってもらうこと！

21
2012年9月15日土曜日 21

このセッションで
ターゲットとする人

Original Update by ##Erika**
22
2012年9月15日土曜日 22

Webアプリケーション開発に関係します！
JUnitでテストコード書いてます！
結合テストとかめんどくさすぎ！
JenkinsとかCIツールでビルドしています！
TestNG？なにそれ？おいしいの？

23
2012年9月15日土曜日 23

どれかに
当てはまれば
OK！

24
2012年9月15日土曜日 24

では
本題スタート！

25
2012年9月15日土曜日 25

結合テスト(機能テスト)
フェーズ…

Original Update by Phillie Casablanca
26
2012年9月15日土曜日 26

IEとExcelとクリックの
日々が続いていた…

27
2012年9月15日土曜日 27

あ〜～めんどくせぇ
クリックするのも
面倒でいやだ

28
2012年9月15日土曜日 28

そうだ！
ブラウザでのテストも
ユニットテストみたいに
自動化できれば…！
29
2012年9月15日土曜日 29

ブラウザテスト自動化…

30
2012年9月15日土曜日 30

よし、全力でいくか…

31
2012年9月15日土曜日 31

ブラウザでの
操作をコーディングする
方法がある。

32
2012年9月15日土曜日 32

そのためのツール
「Selenium」

33
2012年9月15日土曜日 33

「Selenium」には
3つのものがある。

34
2012年9月15日土曜日 34

Firefoxアドオンで
ブラウザでの操作を
記録する
「Selenium IDE」
35
2012年9月15日土曜日 35

ブラウザでの操作を
コーディングする
「Selenium WebDriver」
(Remote Controlの後継)

36
2012年9月15日土曜日 36

複数ブラウザでの
テストを複数マシンで
並列実行する
「Selenium Grid」
37
2012年9月15日土曜日 37

WebDriverを使う…

38
2012年9月15日土曜日 38

WebDriverなら、
Java、C#、Python、
Ruby、PHP、Perl
で書けるんだぜ…
39
2012年9月15日土曜日 39

今回テスト対象とする
アプリはこれだ！

40
2012年9月15日土曜日 40

41
2012年9月15日土曜日 41

さて、

42
2012年9月15日土曜日 42

ブラウザでのテストって、
基本こうだよな…

43
2012年9月15日土曜日 43

1.とある画面にアクセスして、
2.入力項目になんか入れて、
3.サブミットしたら、
4.画面が再描画される。

44
2012年9月15日土曜日 44

これをWebDriverの
コードにすると、

45
2012年9月15日土曜日 45

とある画面にアクセスして、
// ブラウザを表すオブジェクトを生成する
WebDriver driver = new FirefoxDriver();

// URLにアクセスする
driver.get("http://localhost:8080/login.html");

46
2012年9月15日土曜日 46

入力項目になんか入れて、
// 画面上の項目を取得する
// HTMLのname属性で要素を指定する
WebElement userId =
driver.findElement(By.name("j_username"));
WebElement password =
driver.findElement(By.name("j_password"));

// テキストボックスに値を入力する
userId.sendKeys("admin");
password.sendKeys("spring");

47
2012年9月15日土曜日 47

サブミットしたら、
// XPathを使って要素を取得することもできる
WebElement loginButton =
driver.findElement(
By.xpath("//input[@type='submit']"));

// ボタンをクリックして、サブミットする
loginButton.click();

48
2012年9月15日土曜日 48

画面が再描画される。
// ログインが成功したら、商品一覧画面に遷移する
// HTMLのタイトル文字列で遷移を確認することにする
Assert.assertEquals(driver.getTitle(),
"マスタ管理 - 商品一覧画面");

49
2012年9月15日土曜日 49

簡単じゃないか…

50
2012年9月15日土曜日 50

ブラウザも
Firefoxだけじゃない

51
2012年9月15日土曜日 51

FirefoxDriver
InternetExplorerDriver
ChromeDriver
OperaDriver
HtmlUnitDriver
AndroidDriver
iPhoneDriver
52
2012年9月15日土曜日 52

そして、

53
2012年9月15日土曜日 53

画面上の
要素を取得する方法は
いくつもある。

54
2012年9月15日土曜日 54

要素を取得する方法まとめ
ID属性で取得する By.id("item_name")

クラス名で取得する By.className("required")

タグ名で取得する By.tagName("div")

name属性で取得する By.name("item_name")

リンクのテキストで取得する By.linkText("add item")

CSSセレクタで取得する By.cssSelector("#food span")

XPathで取得する By.xpath("//input")
(WebElement) ((JavascriptExecutor)driver).
jQueryで取得する executeScript("return $('.cheese')")
55
2012年9月15日土曜日 55

話を戻して。

56
2012年9月15日土曜日 56

このテストは
うまくいかなかった。

57
2012年9月15日土曜日 57

同じテストでも
成功するときと
失敗するときが
あった！
58
2012年9月15日土曜日 58

なぜだ！

59
2012年9月15日土曜日 59

ブラウザだからさ…

60
2012年9月15日土曜日 60

遷移より早く、assertが実行される

// ログインが成功したら、商品一覧画面に遷移する
// HTMLのタイトル文字列で遷移を確認することにする
Assert.assertEquals(driver.getTitle(),
"マスタ管理 - 商品一覧画面");

61
2012年9月15日土曜日 61

実際の画面遷移より早く、
assertが
実行されてしまう！

62
2012年9月15日土曜日 62

そんなこともあろうかと！

63
2012年9月15日土曜日 63

タイムアウトを設定して、待つ

// 3秒を超えたら、TimeoutExceptionが発生する
final int timeoutInSeconds = 3;
WebDriverWait wait =
new WebDriverWait(driver,timeoutInSeconds);
wait.until(
ExpectedConditions.titleIs(
"マスタ管理 - 商品一覧画面"));

64
2012年9月15日土曜日 64

完璧じゃないか…

65
2012年9月15日土曜日 65

これだけじゃダメだ！

66
2012年9月15日土曜日 66

今回のテスト対象アプリを
思い出してみよう。

67
2012年9月15日土曜日 67

商品追加画面に
ファイルアップロード
あるんですけど…

68
2012年9月15日土曜日 68

できます！

69
2012年9月15日土曜日 69

ファイルをアップロードする
// <INPUT type="file">の要素を取得する
WebElement file =
driver.findElement(By.id("fileUpload"));

// アップロードするファイルのパスを渡す
file.sendKeys("/home/jyukutyo/duke.jpeg");

70
2012年9月15日土曜日 70

商品削除画面に
JavaScriptのダイアログ
あるんですけど…

71
2012年9月15日土曜日 71

できます！

72
2012年9月15日土曜日 72

JavaScriptのアラートやダイアログを制御する
button.click();

// アラート(ダイアログ)に制御を移す
Alert alert = driver.switchTo().alert();

// OKならaccept()、キャンセルならdismiss()を呼ぶ
alert.accept();

73
2012年9月15日土曜日 73

ふう。
これで問題は解決し…

74
2012年9月15日土曜日 74

まだ終わっちゃいない！

75
2012年9月15日土曜日 75

いわゆる結合テストには
あの仕事がある…

76
2012年9月15日土曜日 76

エビデンス
77
2012年9月15日土曜日 77

Excelに
スクリーンショットを
貼るお仕事。

78
2012年9月15日土曜日 78

Seleniumなら、

79
2012年9月15日土曜日 79

スクリーンショット
(キャプチャ、ハードコピー)
を撮れます！

80
2012年9月15日土曜日 80

スクリーンショットを撮る
// スクリーンショットを撮る
File file = ((TakesScreenshot)
driver).getScreenshotAs(OutputType.FILE);

// ファイルとして保存する
FileUtils.copyFile(file, new File("/tmp/" +
method.getName() + ".png"));

81
2012年9月15日土曜日 81

これでブラウザ操作を
自動化できた。

82
2012年9月15日土曜日 82

さあJUnitで
テストコードを…

83
2012年9月15日土曜日 83

待てあわてるな

84
2012年9月15日土曜日 84

こういうものもある

85
2012年9月15日土曜日 85

TestNG

86
2012年9月15日土曜日 86

JUnitと同じく
テスティング
フレームワーク

87
2012年9月15日土曜日 87

なぜ「TestNG」か

88
2012年9月15日土曜日 88

XMLファイルにテスト対象を定義できる
前後処理のタイミングが豊富である
テストをグループ化できる
テスト間に依存関係を定義できる

89
2012年9月15日土曜日 89

XMLファイルにテスト対象を定義できる
<!DOCTYPE suite SYSTEM "http://testng.org/
testng-1.0.dtd" >

<suite name="Suite" verbose="2">
<test name="all" >
<packages>
<package name="test" />
</packages>
</test>
</suite>

90
2012年9月15日土曜日 90

実行するテストを
選択できる

91
2012年9月15日土曜日 91

TestNGの概念
Suite
Test
Test Class Test Class
Test Test Test Test
Method Method Method Method

Test
Test Class Test Class
Test Test Test Test
Method Method Method Method

92
2012年9月15日土曜日 92

前後処理のタイミングが豊富である
@BeforeSuite <suite>要素に含まれる全テストメソッドを呼び出す前
@AfterSuite にアノテーションを付けたメソッドを実行する

@BeforeTest <test>要素に含まれる全テストメソッドを呼び出す前に
@AfterTest アノテーションを付けたメソッドを実行する

@BeforeGroups そのグループにある全テストメソッドを呼び出す前にア
@AfterGroups ノテーションを付けたメソッドを実行する

@BeforeClass そのクラスにある全テストメソッドを呼び出す前後にアノ
@AfterClass テーションを付けたメソッドを実行する

@BeforeMethod そのクラスにある各テストメソッドを呼び出す前後にアノ
@AfterMethod テーションを付けたメソッドを実行する
93
2012年9月15日土曜日 93

なぜタイミングが多いと
いいの？

94
2012年9月15日土曜日 94

たとえば、

95
2012年9月15日土曜日 95

このコードは重い

// ブラウザを表すオブジェクトを生成する
WebDriver driver = new FirefoxDriver();

96
2012年9月15日土曜日 96

Suiteの前に1回だけ
インスタンスを生成させる

97
2012年9月15日土曜日 97

テスト実行時間が
短くできる

98
2012年9月15日土曜日 98

テストをグループ化して
最低限のテストだけを
コミットビルドで
実行し、
99
2012年9月15日土曜日 99

重いテストは
定期ビルド
で実行する

100
2012年9月15日土曜日 100

依存関係を設定し、
前提テストが失敗すれば、
後続のテストを
スキップする
101
2012年9月15日土曜日 101

他にも、
複数スレッドでテストを
実行し、
テスト実行時間を
短くできたり…
102
2012年9月15日土曜日 102

そして、
こういうテストコードが
できた

103
2012年9月15日土曜日 103

protected static WebDriver driver;

@BeforeSuite
@Parameters({"browser"})
public static void createDriver(
@Optional("firefox") String browser) {
if ("firefox".equals(browser)) {
driver = new FirefoxDriver();
return;
}
if ("safari".equals(browser)) {
driver = new SafariDriver();
return;
}
if ("unit".equals(browser)) {
driver = new HtmlUnitDriver();
return;
}
} 104
2012年9月15日土曜日 104

@BeforeMethod
public void toLoginPage() {
driver.get(
"http://localhost:8080/login.html");
}

105
2012年9月15日土曜日 105

@Test
public void ログインする() {
WebElement userId =
driver.findElement(By.name("j_username"));
...(中略)...
userId.sendKeys("admin");
password.sendKeys("spring");

final int timeoutInSeconds = 3;
WebDriverWait wait = new
WebDriverWait(driver, timeoutInSeconds);
wait.until(
ExpectedConditions.titleIs("商品一覧画面"));
}

106
2012年9月15日土曜日 106

@AfterSuite
public static void closeDriver() {
driver.quit();
}

107
2012年9月15日土曜日 107

テストコードを
実行してみる

108
2012年9月15日土曜日 108

109
2012年9月15日土曜日 109

まだだ。
まだ終わらんよ！

110
2012年9月15日土曜日 110

クロスブラウザ

111
2012年9月15日土曜日 111

Driverインスタンスを
変えればいい

112
2012年9月15日土曜日 112

マルチプラットフォーム
✕
クロスブラウザ

113
2012年9月15日土曜日 113

WindowsのIEと
OS XのSafariで
動作確認とか…

114
2012年9月15日土曜日 114

こんなこともあろうかと

115
2012年9月15日土曜日 115

複数ブラウザでの
テストを複数マシンで
並列実行する
「Selenium Grid」
116
2012年9月15日土曜日 116

Test Code

Selenium
Hub
Grid

Node Node Node

Browser Browser Browser
117
2012年9月15日土曜日 117

使い方は簡単。

118
2012年9月15日土曜日 118

JARをダウンロードして起動するだけ！
// start Hub
java -jar selenium-server-standalone-2.25.0.jar -hub

// start Node
java -jar selenium-server-standalone-2.25.0.jar -role
node -hub http://hubserver:4444/grid/register

119
2012年9月15日土曜日 119

テストコードを少し変える
// 要求する実行環境。
// ブラウザのバージョンなども指定できる。
DesiredCapabilities capability =
DesiredCapabilities.firefox();

// RemoteWebDriverというドライバを使う。
// 要求を満たすブラウザがNodeから選択される。
driver = new RemoteWebDriver(
new URL(
"http://hubserver:4444/wd/hub"),
capability);
120
2012年9月15日土曜日 120

テストコードを少し変える
// RemoteWebDriverはTakesScreenshotを実装していない。
// スクリーンショットを撮れるRemoteWebDriverの実装であれば、
// AugmenterがTakesScreenshotインタフェースを追加する。
WebDriver augmentedDriver =
new Augmenter().augment(driver);
File file = ((TakesScreenshot)augmentedDriver).
getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(file, new File(
"/tmp/" + method.getName() + ".png"));

121
2012年9月15日土曜日 121

そして、

122
2012年9月15日土曜日 122

Selenium Gridを
使うとき、

123
2012年9月15日土曜日 123

JenkinsとSelenium
Pluginを使うと
便利！

124
2012年9月15日土曜日 124

Jenkinsとは

125
2012年9月15日土曜日 125

CIツール
(Continuous Integration)

126
2012年9月15日土曜日 126

基本的な使い方としては、

127
2012年9月15日土曜日 127

SCMへのコミットをフックにして
最新のソースコードを取得し、
ビルドやテストを実行する
アプリケーション

128
2012年9月15日土曜日 128

本題と外れるので、
詳細は省略します。

129
2012年9月15日土曜日 129

で、Selenium Pluginを使って
Jenkinsでテストを
実行させる

130
2012年9月15日土曜日 130

Selenium Pluginが便利！

JenkinsサーバがHubになります！
Hubを自動起動してくれます！
JenkinsのスレーブをNodeとして
自動的にHubに登録してくれます！

131
2012年9月15日土曜日 131

Jenkinsサーバ(マスタ)が
GNU/Linuxで
あっても

132
2012年9月15日土曜日 132

余ったWindowsマシンを
Jenkinsスレーブにして

133
2012年9月15日土曜日 133

IEでのテストを
実行させよう！

134
2012年9月15日土曜日 134

デモ

135
2012年9月15日土曜日 135

役割

Jenkinsのマスタサーバ。
OS X Selenium GridのHub。
Firefoxでのテストを実施する。

Jenkinsのスレーブ。
VirtualBox上
Selenium GridのNode。
のWindows XP
IEでのテストを実施する。
136
2012年9月15日土曜日 136

137
2012年9月15日土曜日 137

JenkinsとSelenium Gridの組み合わせは、
川口さんの記事を参考にいたしました。

138
2012年9月15日土曜日 138

まとめ

139
2012年9月15日土曜日 139

Jenkinsサイコー！(違

140
2012年9月15日土曜日 140

ブラウザテストも
自動化できる
(部分がある)

141
2012年9月15日土曜日 141

めんどくさいことは
できる限りマシンに
やらせよう

142
2012年9月15日土曜日 142

今日のソースコード
Github
https://github.com/jyukutyo/devsumi-kansai2012
https://github.com/jyukutyo/devsumi-kansai2012-Grid

143
2012年9月15日土曜日 143

ご清聴
ありがとうございました！

144
2012年9月15日土曜日 144

デブサミ関西2012 B-3

More Related Content

Similar to デブサミ関西2012 B-3

More from Koichi Sakata

デブサミ関西2012 B-3