View
32
Download
2
Category
Preview:
Citation preview
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
Recommended