Selenium2(WebDriver)

長谷川

1

Selenium2(WebDriver) の使い方などを紹介をします。

【参考 URL 】Selenium の公式 HPhttp://www.seleniumhq.org/docs/index.jsp

まえがき

2

1. Selenium の概要

2. Google 検索を自動でやる

3. 操作系 API の使い方

4. WebDriver

5. デザインパターン

もくじ

3

Selenium の概要Selenium1/Selenium2 の概要、比較

4

Selenium1(Selenium Remote Control)◦ HTTP Proxy サーバーとして動作し、スクリプトがブラウザ内で動作する。

　 Selenium1 自体にテスト機構があり、 Selenium1 だけでテストが可能。 2 が出てからはあまり使われていない。

5

Selenium の概要

Web サーバー Selenium RCJS で記述 ブラウザ

Selenium RC(.js)+Web APLWeb APL

Selenium2(WebDriver)◦ Web Driver API を介してブラウザを操作する。

◦ WebDriver 自体にテストの機構がないため、 WebDriver にアクセスするスクリプトのフレームワークでテストを作成する必要がある (xUnit 等で ) 。

6

Selenium の概要

Web サーバー Chrome

IE

WebDriver( ブラウザ操作

API)

スクリプト(Java,Python,Ruby で記

述 )

使ってみた感想◦コードの記述性は Sikuli より低い。結構コードを書く必要がある。ただ、工夫すればコード量は減らせそう。

◦調べた限りだと HTML/XPath による要素指定しかできないので、 js の試験は難しい。

◦ GUI の自動操作をやりたいくらいなら、 Sikuli 、 UWSC などの方がよい。

◦ xUnit と連携して GUI の試験ができるのは便利。

7

以降、使い方の説明

Google 検索を自動でやる

8

Google 検索する方法◦ Firefox ＋ Java でやります。

必要なもの◦ Firefox （ Firebug 、 FirePath のアドオン入り）◦ JDK◦ Eclipse◦ Selenium(Java 用 ) ： selenium-java-2.46.0.zip

◦インストール方法は省略

9

簡単な動かし方＋必要なもの

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

10

Eclipse の設定

11

Google にアクセス (get メソッド )

3,4 ： WebDriver のインポート

9 ： Firefox の WebDriver のインスタンス化

10 ：指定した URL をブラウザ (Firefox) にロード

実行すると Firefox が起動して Google にアクセスする。

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

Google で検索 (WebElementクラス )

13

Google で検索 (WebElementクラス )

検索ボックスのname は「 q 」

なので

14

Google で検索 (WebElementクラス )

13 ： name 「 q 」をもつ WebElement searchBox をインスタンス化（ Google の検索ボックス）

14 ： searchBox に” Hello, world!” を設定。15 ：フォームの内容を送信

Firefox が起動し、 Google で” Hello, world!” を検索する。

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.jsp

15

WebElement で可能な操作

操作系 API の使い方複雑なキーボード操作複雑なマウス操作

16

https://jqueryui.com/resources/demos/selectable/default.html

　 Ctrl 押しながらクリックすると 1 個、　 Ctrl 押しながらクリックすると複数選択できるリスト。　 WebDriver を使って Item1,3,5 のクリックを実施する。

　

17

複雑なキーボード操作①

　

18

複雑なキーボード操作①

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

　

19

複雑なキーボード操作①

14 ： URL を変更しておく。15 ～ 17 ：各ボタンを XPath で指定し、　　　　　　　インスタンス化する。

Actions クラスはユーザ操作をエミュレートするクラス。20 ： Ctrl キーを押す21 ～ 23 ： Button1 、 3 、 5 をクリック24 ： Ctrl キーを離す25 ：実行

実行すると Item1 、 3 、 5 を選択する。

moveByOffset(x, y)：現在位置から (x,y)移動する。 click：現在位置でクリックする。 clickAndHold：クリックしたまま離さない。 dragAndDropBy：ドラッグ＆ドロップ座標指定。 dragAndDrop：ドラッグ＆ドロップ Element指定。 moveToElement：クリックして移動する。 doubleClick：ダブルクリック contextClick：右クリック

マウスの操作は難しい。出来る限りのWebElement指定推奨。

20

マウス操作

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

21

dragAndDrop[By]

自由にドラッグできるボックス

22

dragAndDrop[By]

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

WebDriver機能の有効 / 無効イベント

23

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

24

WebDriver に機能を設定する

2 つのクラスでイベントの処理をする。◦ EventFiringWebDriver ：イベントを発生させる。 WebDriver のラッパークラス。

◦ WebDriverEventListener ：イベントリスナー。 EventFiringWebDriver に登録することでイベントを待ち受ける。 Interface で 20 個くらいメソッドがある。

　同じイベントリスナーがあったら全て呼ばれる。 afterChangeValueOf ：値が変化したとき afterClickOn ：クリックしたとき afterNavigateBack ：ページを移動したとき onException ：例外をキャッチしたとき　　など

25

イベント

WebDriver を引数に呼ばれる。

26

イベント　 EventListener

27

イベント　 EventFiringWebDriver

14 ：イベントリスナーの登録15 ～ 17 ：ページ移動

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

RemoteWebDriver クラス：クライアント / サーバー構成。サーバー側の RemoteWebDriver はクライアント側の RemoteWebDriver の要求により WebDriver(Firefox/IE/Chrome など ) を起動する。

28

リモートで実行

Web サーバー

Chrome IE

WebDriver( ブラウザ操作

API) スクリプト(Java,Python,Ruby で記

述 )

RemoteWebDriver( サーバー）

RemoteWebDriver( クライアント）

テストサーバーとクライアントを分けたいときなどに使うらしい。

テストサーバー

デザインパターンPageObject パターン

29

テストの Webページをオブジェクトとしてテストから切り離し、内部構造をカプセル化するデザインパターン。

Selenium 公式HPでも推奨されている、保守性の高いテストコードを書くための方法の一つ。

https://code.google.com/p/selenium/wiki/PageObjects

Webページのレイアウトが変更されてもテストコードの変更を最小限に抑えられる。

WebDriver では PageObject/PageFactory というクラスで実現可能。

30

PageObject パターン

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

PageObject パターン

テキストボックスページを PageObject で作る場合。

32

イメージ

PageObject

void テキストの変更 (String)void テキストの削除 ()String テキストの取得 ()

テストクラス

① テキストの削除確認。

② テキストの変更確認。

Web ページ

テキストボックス

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

33

具体例

34

PageObject

イメージを実装した PageObject