Selenium2(WebDriver)の勉強したことのまとめ。 GUIの操作を自動化しようと思い、UWSC、Sikuli、Seleniumを試してみた。 GUIを自動化したいだけだったらSikuli使ったほうがよさそう。

1. 長谷川
1

2. Selenium2(WebDriver) の使い方などを紹介をします。
【参考URL】
Seleniumの公式HP
http://www.seleniumhq.org/docs/index.jsp
2

3. 1. Seleniumの概要
2. Google検索を自動でやる
3. 操作系APIの使い方
4. WebDriver
5. デザインパターン
3

4. Selenium1/Selenium2の概要、比較
4

5.  Selenium1(Selenium Remote Control)
◦ HTTP Proxyサーバーとして動作し、スクリプトがブラウザ内
で動作する。
 Selenium1自体にテスト機構があり、Selenium1だ
けでテストが可能。2が出てからはあまり使われてい
ない。
5
Webサーバー
Selenium RC
JSで記述
ブラウザ
Selenium RC(.js)+Web APLWeb APL

6.  Selenium2(WebDriver)
◦ Web Driver APIを介してブラウザを操作する。
◦ WebDriver自体にテストの機構がないため、WebDriverに
アクセスするスクリプトのフレームワークでテストを作成する
必要がある(xUnit等で)。
6
Webサーバー Chrome
IE
WebDriver
(ブラウザ操作API)
スクリプト
(Java,Python,
Rubyで記述)

7.  使ってみた感想
◦ コードの記述性はSikuliより低い。結構コードを書く必要があ
る。ただ、工夫すればコード量は減らせそう。
◦ 調べた限りだとHTML/XPathによる要素指定しかできないの
で、jsの試験は難しい。
◦ GUIの自動操作をやりたいくらいなら、Sikuli、UWSCなどの
方がよい。
◦ xUnitと連携してGUIの試験ができるのは便利。
7

8. 8

9.  Google検索する方法
◦ Firefox＋Javaでやります。
 必要なもの
◦ Firefox（Firebug、FirePathのアドオン入り）
◦ JDK
◦ Eclipse
◦ Selenium(Java用)：selenium-java-2.46.0.zip
◦ インストール方法は省略
9

10.  新規プロジェクト作成時に「Add External JARs..」で
selenium-java-2.46.0.zip内のjarを全て追加する。
10

11. 11
3,4：WebDriverのインポート
9：FirefoxのWebDriverのインスタンス化
10：指定したURLをブラウザ(Firefox)にロード
実行するとFirefoxが起動してGoogleにアクセスする。

12.  WebElementクラスを使用することでWeb画面の要
素(HTML、XPath)にアクセスできる。
◦ findElemntメソッド：指定したWebElementを返す。
[型] WebElement findElement(By by)
◦ By.nameメソッド、By.idメソッド：name、idでWebElement
を指定する。
◦ <input type=“text” name=“Name” />
上記のテキストボックスを取得する場合は
findElement(By.name(“Name”)) とする。
12

13. 13
検索ボックスの
nameは「q」なの
で

14. 14
13：name「q」をもつWebElement searchBoxをインスタンス化
（Googleの検索ボックス）
14：searchBoxに”Hello, world!”を設定。
15：フォームの内容を送信
Firefoxが起動し、Googleで”Hello, world!”を検索する。

15.  getAttribute：name、class、id等の属性を取得する。
 sendKey：キーボード入力。
 Keys.chord：キーの同時押し。
Keys.chord(Keys.SHIFT, “aaaa”)でAAAAになる。
 clear：テキストの削除。
 submit：フォームの送信
 getLocation：Webページ上の相対位置(x,y)を返す。
⇒レイアウトの検証に使えそう。
 getSize、getText、isEnabled、isSelectedなど
詳細はAPIリスト参照。
http://docs.seleniumhq.org/docs/03_webdriver.js
p
15

16. 複雑なキーボード操作
複雑なマウス操作
16

17.  https://jqueryui.com/resources/demos/selectable/default.html
 Ctrl押しながらクリックすると1個、
Ctrl押しながらクリックすると複数選択できるリスト。
WebDriverを使ってItem1,3,5のクリックを実施する。
17

18. 18
name, idが使えないのでXPathで指定する。
Item1：//ol/li[1]
Item3：//ol/li[3]
Item5：//ol/li[5]
設計時にユニークなname, idをつけておくとよい。

19. 19
14：URLを変更しておく。
15～17：各ボタンをXPathで指定し、
インスタンス化する。
Actionsクラスはユーザ操作をエミュレー
トするクラス。
20：Ctrlキーを押す
21～23：Button1、3、5をクリック
24：Ctrlキーを離す
25：実行
実行するとItem1、3、5を選択する。

20.  moveByOffset(x, y)：現在位置から(x,y)移動する。
 click：現在位置でクリックする。
 clickAndHold：クリックしたまま離さない。
 dragAndDropBy：ドラッグ＆ドロップ座標指定。
 dragAndDrop：ドラッグ＆ドロップElement指定。
 moveToElement：クリックして移動する。
 doubleClick：ダブルクリック
 contextClick：右クリック
マウスの操作は難しい。出来る限りのWebElement指定推奨。
20

21.  https://jqueryui.com/resources/demos/draggable/default.html
 自由にドラッグできるボックス。
21
自由にドラッグできるボックス

22. 22
13：URLを変更しておく。
14：ボックスをXPathで指定し、インスタンス化する。
18：ボックスを(100,100)の座標へ移動する。

23. 機能の有効/無効
イベント
23

24.  WebDriverをインスタン化するときに
DesiredCapabilitiesを指定することで指定した機能
（各種機能のON/OFF）をWebDriverに設定できる
◦ スクリーンショット
◦ ブラウザ設定
◦ Cookie操作
などいろいろある。
◦ Hash（key-value）で各種設定をしてWebDriverのコンスト
ラクタに渡す。
24

25.  2つのクラスでイベントの処理をする。
◦ EventFiringWebDriver：イベントを発生させる。WebDriver
のラッパークラス。
◦ WebDriverEventListener：イベントリスナー。
EventFiringWebDriverに登録することでイベントを待ち受
ける。Interfaceで20個くらいメソッドがある。
同じイベントリスナーがあったら全て呼ばれる。
 afterChangeValueOf：値が変化したとき
 afterClickOn：クリックしたとき
 afterNavigateBack：ページを移動したとき
 onException：例外をキャッチしたとき
など
25

26.  WebDriverを引数に呼ばれる。
26

27. 27
14：イベントリスナーの登録
15～17：ページ移動
コンソールの表示。下記契機でイベントリスナーが呼び出されている。
Googleへ移動する前（beforeNavigateTo）
Googleへ移動した後（afterNaviateTo）
Yahooへ移動する前（ beforeNavigateTo ）
Yahooへ移動した後（afterNaviateTo）
Backする前（beforeNaviateBack）
Backした後（afterNaviateBack）

28.  RemoteWebDriverクラス：クライアント/サーバー構
成。サーバー側のRemoteWebDriverはクライアント
側のRemoteWebDriverの要求により
WebDriver(Firefox/IE/Chromeなど)を起動する。
28
Webサーバー
Chrome IE
WebDriver
(ブラウザ操作API)
スクリプト
(Java,Python,
Rubyで記述)
RemoteWebDriver
(サーバー）
RemoteWebDriver
(クライアント）
テストサーバーとクライアントを
分けたいときなどに使うらしい。
テストサーバー

29. PageObjectパターン
29

30.  テストのWebページをオブジェクトとしてテストから切り離
し、内部構造をカプセル化するデザインパターン。
 Selenium公式HPでも推奨されている、保守性の高いテ
ストコードを書くための方法の一つ。
https://code.google.com/p/selenium/wiki/PageObjects
 Webページのレイアウトが変更されてもテストコードの変
更を最小限に抑えられる。
 WebDriverではPageObject/PageFactoryというクラス
で実現可能。
30

31.  PageObjectサマリ
1. PublicメソッドはWebページが提供するサービスを表す。
2. Webページの内部(HTML等)を公開しない（カプセル化）。
3. Assertionをできるだけ使用しない。
4. メソッドは他のPageObjectを返す。
5. Webページ全体を表す必要はない。
6. 同じアクションに違う結果を返す場合、異なるメソッドとして
実装する。
https://code.google.com/p/selenium/wiki/PageObjects より引用
Webページを扱うクラス(PageObject)、テストクラスを分けるイ
メージ。
Webページを扱うクラスではユーザーに提供するサービスをメ
ソッドにする。（注）ユーザーの操作ではない。
31

32.  テキストボックスページをPageObjectで作る場合。
32
PageObject
void テキストの変更(String)
void テキストの削除()
String テキストの取得()
テストクラス
①テキストの削除確
認。
②テキストの変更確
認。
Webページ
テキストボックス

33.  https://jqueryui.com/resources/demos/autocomplete/default.html
33

34. 34
イメージを実装したPageObject