Weitere ähnliche Inhalte Ähnlich wie 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介 (20) Kürzlich hochgeladen (10) 10. 10
サンプルコード解説の楽しみ方
公式マニュアル The Book Of Gebの「４章
Interacting with content 」を開きます
http://www.gebish.org/manual/current/navigator.html
#interacting_with_content
この章の順番通りに説明していきます
原文と突き合わせながらプレゼンを聞いて
ください！
GebStudyのテスト対象は以下のサイト
http://www.gebish.org/
https://account.edit.yahoo.co.jp/registration
14. 14
4. The $ Function
＄関数は、jQueryのような記法でNavigatorオ
ブジェクトを返す関数
Navigatorオブジェクトは、seleniumの
WebElementインタフェースを実装している
$( css selector ,≪ ≫
≪index / range ,≫
≪attribute / text matchers )≫
$("h1", 2, class: "heading")
$("div p", 0)
$("div p", title: "something")
$(title: "something")
15. 15
4.1.2 Indexes and Ranges
コンテンツを単一で取得できる
配列で複数取得することもできる
<p>a</p>
<p>b</p>
<p>c</p>
$("p", 0).text() == "a"
$("p", 2).text() == "c"
$("p", 0..1)*.text() = ["a", "b"]
$("p", 1..2)*.text() = ["b", "c"]
17. 17
4.1.3 Attribute and Text Matching
HTMLのAttributeとTextにマッチさせること
ができる
<p attr1="a" attr2="b">p1</p>
<p attr1="a" attr2="c">p2</p>
$("p", attr1: "a").size() == 2
$("p", attr2: "c").size() == 1
$("p", attr1: "a", attr2: "b").size() == 1
$("p", text: "p1").size() == 1
$("p", text: "p1", attr1: "a").size() == 1
19. 19
4.1.3.1 Using Patterns
パターンマッチも可能
<p attr1="a" attr2="b">p1</p>
<p attr1="a" attr2="c">p2</p>
$("p", text: ~/p./).size() == 2
$("p", text: startsWith("p")).size() == 2
$("p", text: endsWith("2")).size() == 1
20. 20
4.1.3.1 Using Patterns
Gebで指定可能なパターンリスト
Case Sensitive Description
startsWith 指定した文字列で開始する値とマッチする
contains 指定した文字列を含む値とマッチする
endsWith 指定した文字列で終了する値とマッチする
containsWord 指定した単語（前後に半角スペースを含む文字
列）を含む値とマッチする
notStartsWith 指定した文字列で開始しない値とマッチする
notContains 指定した文字列を含まない値とマッチする
notEndsWith 指定した文字列で終了しない値とマッチする
notContainsWord 指定した単語（前後に半角スペースを含む文字
列）を含まない値とマッチする
22. 22
4.1.4 Navigators are Iterable
Navigatorオブジェクトは、Iterableインタ
フェースを実装しているのでmax(),min()の
ようなGroovyの文法を使うこともできる
<p>1</p>
<p>2</p>
$("p").max { it.text() }.text() == "2"
$("p")*.text().max() == "2"
24. 24
4.2 Finding & Filtering
“find”, ”$”は子要素を検索するための関数で
ある。“filter”, ”not”は、要素を減らすための
関数である
<div class="a">
<p class="b">geb</p>
</div>
<div class="b">
<input type="text"/>
</div>
$("div").find(".b").text() == “geb”
$("div").$(".b").text() == “geb”
$("div").filter(".b").text() == “”
$(".b").not("p").text() == “”
$("div").has("p").text() == “geb”
$("div").has("input", type: "text").text() == “”
25. 25
4.2 Finding & Filtering
Finding & Filteringのメソッドリスト
Method Description
find 指定したContentのListに対して、指定した条件に合致した
それぞれのContentの子ContentのListを取得する
$ findと同様の機能
filter 指定したContentのListから、指定した条件に合致しない
Contentを除外したListを取得する
not 指定したContentのListにから、指定した条件に合致した
Contentを除外したListを取得する
has 指定したContentのListに対して、指定した条件に合致した
子を持つcontetを取得する
closest 指定したContentから一番近くの条件に一致したcontentを
取得する
nextUntil nextUntilは、指定したContentから条件に合致するまで
List取得する。指定したContentと条件は含まない
27. 27
4.3 Traversing
検索したコンテンツ前後のコンテンツと
マッチさせることができる
<div class="a">
<div class="b">
<p class="c"></p>
<p class="d"></p>
<p class="e"></p>
</div>
<div class="f"></div>
</div>
$("p.d").previous() // 'p.c'
$("p.e").prevAll() // ['p.c' , 'p.d]
$("p.d").next() // 'p.e'
$("p.c").nextAll() // ['p.d' , 'p.e']
$("p.d").parent() // 'div.b'
$("p.d").siblings() // ['p.c' , 'p.e']
$("div.a").children() // ['div.b' , 'div.f]
34. 34
4.6 Determining Visibility
Navigator objectsには、displayedプロパ
ティが定義されている。displayed==falseの
場合は、マッチしても操作することができ
ない
“Navigator.isDisplayed() == false”の場合に
Navigator.click()を実行すると例外が発生す
る
ElementNotVisibleException
36. 36
4.7 Size and Location
PageのSizeとLocationを取得できる
LocationはPageの左上からのx , yプロパティ
でpixel指定する
$("div").height == 20
$("div").width == 40
$("div").x == 60
$("div").y == 80
$("div")*.height == [20, 30]
$("div")*.width == [40, 50]
$("div")*.x == [60, 70]
$("div")*.y == [80, 90]
38. 38
4.8 Accessing tag name, attributes, text
and classes
Navigator objectsのtag(), text(), @attribute
and classes()を使って値を取得できる
classes()は、class属性を java.util.List形式
で返す
<p title="a" class="a para">a</p>
<p title="b" class="b para">b</p>
<p title="c" class="c para">c</p>
$("p").text() == "a"
$("p").tag() == "p"
$("p").@title == "a"
$("p").classes() == ["a", "para"]
44. 44
4.11 Accessing input values
Input, select, textarea など入力値は、value
メソッドでセットすることができる
checkbox は、booleanをセットすることも
できる
multiple select は配列をセットすることもで
きる
46. 46
4.12 Form Control Shortcuts
Input, selectなどform要素への入力に対して
簡単に入力できるようにしている
<form>
<input type="text" name="geb" value="testing" />
</form>
$("form").geb == "testing"
$("form").geb = "goodness"
$("form").geb == "goodness"
47. 47
4.12 Form Control Shortcuts
<select name="artist">
<option value="1">Ima Robot</option>
<option value="2">Edward Sharpe</option>
<option value="3">Alexander</option>
</select>
$("form").artist = "1" //Ima Robot
$("form").artist = 2 //Edward Sharpe
$("form").artist = "Alexander" //Alexander
selectタグは、value, textまたは順番の値を
渡すことで選択できる
48. 48
4.12 Form Control Shortcuts
<select name="genres" multiple>
<option value="1">Alt folk</option>
<option value="2">Chiptunes</option>
<option value="3">Electroclash</option>
<option value="4">G-Funk</option>
<option value="5">Hair metal</option>
</select>
$("form").genres = ["2", "3"]
$("form").genres = [1, 4, 5]
$("form").genres = ["Alt folk", "Hair metal"]
$("form").genres = []
multiple Selectタグも同様に、value, textま
たは順番の配列を渡すことで選択できる
49. 49
4.12 Form Control Shortcuts
<input type="checkbox" name="pet" value="dogs" />
<input type="checkbox" name="pet" value="cats" />
$("input", type: "checkbox", name: "pet").value("dogs")
$("input", type: "checkbox", name: "pet").value() ==
"dogs"
$("input", type: "checkbox", name: "pet").value() ==
false
if ($("input", type: "checkbox", name: "pet").value()) {
//petが選択されていれば実行される
}
checkboxは、valueで選択することができる
未選択の場合は、falseが返ってくる
50. 50
4.12 Form Control Shortcuts
<label for="site-current">Search this site</label>
<input type="radio" id="site-current" name="site"
value="current">
<label>Search Google
<input type="radio" name="site" value="google">
</label>
$("form").site = "current" //Search this site
$("form").site = "Search this site" //Search this site
$("form").site = "Search Google" //Search Google
RadioButtonは、valueまたはlabelのtextで選択す
ることができる
51. 51
4.12 Form Control Shortcuts
<input name="postcode" />
("form").postcode = "12345"
$("form").postcode() << Keys.BACK_SPACE
assert $("form").postcode == "1234"
Text Inputは、文字列を渡すことで入力できる
キーストロークもKeysクラスを使うことで入力
できる
52. 52
4.12 Form Control Shortcuts
<input type="file" name="csvFile">
//絶対パスでファイルを指定する
$("form").csvFile = "/path/to/my/file.csv"
絶対パスを渡すことでファイルのアップロード
もできる
54. 54
4.13.2 Using Actions
WebDriver driverのActionクラスを使うこと
で複雑な動作も実行することができる
def actions = new Actions(driver)
WebElement someItem = $('li.clicky').firstElement()
def shiftDoubleClickAction =
actions.keyDown(Keys.SHIFT).doubleClick(someItem).
keyUp(Keys.SHIFT).build()
shiftDoubleClickAction.perform()
55. 55
4.13.3 Using Interact Closures
Interact Closuresを使うと、Actionよりも簡
単に実装できる
interact {
keyDown(Keys.SHIFT)
doubleClick($('li.clicky'))
keyUp(Keys.SHIFT)
}
interact {
keyDown(Keys.CONTROL)
click($('ul.multiselect li', text: 'Order 1'))
click($('ul.multiselect li', text: 'Order 2'))
click($('ul.multiselect li', text: 'Order 3'))
keyUp(Keys.CONTROL)
}
