![Page 1: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/1.jpg)
jQueryのようにWebテストが書けるGeb Navigator APIの紹介
第一回Geb勉強会
2015/01/31
ふじさわゆうき
![Page 2: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/2.jpg)
2
目次
1.自己紹介2.プレゼン概要3.なぜNavigator APIを紹介するのか4.サンプルコード解説の楽しみ方5.サンプルコード解説
公式マニュアル The Book Of Gebの「4章 Interacting with content 」をもとに説明します
![Page 3: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/3.jpg)
3
自己紹介
![Page 4: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/4.jpg)
4
自己紹介名前ふじさわゆうき現在の仕事部署全体を技術的に底上げするチームに所属テスト自動化、FindBugsルール化、標準開発環境
の提供、ミドルウェア検証、OutOfMemory調査&解決、社内WIKI導入&運用など幅広く担当
経歴高校~大学~社会人とずっとプログラム書いてます株式投資アルゴリズム(Java)のコンテストで優秀ア
ルゴリズム賞を受賞したことがありますなぜかMBAホルダーです
![Page 5: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/5.jpg)
5
プレゼン概要
![Page 6: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/6.jpg)
6
プレゼン概要対象これからGebを始める人Navigator APIについて改めて学びたい人
方針公式サイトマニュアルに従った内容とするGitHubでNavigator APIの例を提供し、参加者にそ
のコードを理解してもらうことで、明日から仕事ですぐに使える知識を提供する
ゴール「便利そうだし、サンプルもあるからGebをやっ
てみよう!」と参加した人がなってくれること「Gebってこんな使い方もできるんだ」と発見が
あること
![Page 7: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/7.jpg)
7
なぜNavigator APIを紹介するのか
![Page 8: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/8.jpg)
8
なぜNavigator APIを紹介するのか
そもそもNavigator APIって??Gebの大きな特徴の一つでjQueryのような文法で
HTML要素を取得できるAPIのこと詳しくはこの後のスライドで説明しますなぜ紹介するのかWebDriverと比較して、このAPIがGebの大きなメ
リットの一つになっていると感じるため深く知っておくべきといえる機能の一つ
![Page 9: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/9.jpg)
9
サンプルコード解説
の楽しみ方
![Page 10: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/10.jpg)
10
サンプルコード解説の楽しみ方
公式マニュアル The Book Of Gebの「4章 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
![Page 11: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/11.jpg)
11
サンプルコード情報
GitHub URLhttps://github.com/gebjp/GebStudy
テストケースGebStudy/src/test/groovy/jp/org/gebjp/manual/
chapter4
実行環境の構築方法http://yfj2.hateblo.jp/entry/2015/01/20/012130
バージョンGeb: 0.10.0
Groovy: 2.3.7
![Page 12: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/12.jpg)
12
質問はツイッターで受け付けます@ffggss
#gebjp
につぶやいてくださいプレゼン終了後にどれかに答えます
![Page 13: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/13.jpg)
13
サンプルコード解説
![Page 14: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/14.jpg)
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")
![Page 15: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/15.jpg)
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"]
![Page 16: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/16.jpg)
16
サンプルコード
Per01_InteractingWithContentTest.groovy
HTML107行目115行目109行目
![Page 17: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/17.jpg)
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
![Page 18: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/18.jpg)
18
サンプルコード
Per01_InteractingWithContentTest.groovy
HTMLaタグ全部
![Page 19: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/19.jpg)
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
![Page 20: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/20.jpg)
20
4.1.3.1 Using Patterns
Gebで指定可能なパターンリストCase Sensitive Description
startsWith 指定した文字列で開始する値とマッチする
contains 指定した文字列を含む値とマッチする
endsWith 指定した文字列で終了する値とマッチする
containsWord 指定した単語(前後に半角スペースを含む文字列)を含む値とマッチする
notStartsWith 指定した文字列で開始しない値とマッチする
notContains 指定した文字列を含まない値とマッチする
notEndsWith 指定した文字列で終了しない値とマッチする
notContainsWord 指定した単語(前後に半角スペースを含む文字列)を含まない値とマッチする
![Page 21: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/21.jpg)
21
サンプルコード
Per01_InteractingWithContentTest.groovy
HTMLaタグ全部
![Page 22: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/22.jpg)
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"
![Page 23: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/23.jpg)
23
サンプルコード
Per01_InteractingWithContentTest.groovy
HTML19-49行目
![Page 24: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/24.jpg)
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() == “”
![Page 25: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/25.jpg)
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と条件は含まない
![Page 26: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/26.jpg)
26
サンプルコード
Per02_InteractingWithContentTest.groovy
HTML132行目133行目103行目
![Page 27: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/27.jpg)
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]
![Page 28: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/28.jpg)
28
4.3 Traversing
Traversingのメソッドリスト
Method Description
previous 指定したcontentの一つ前を取得する
prevAll 指定したcontentの前をListで全て取得する
next 指定したcontentの一つ後を取得する
nextAll 指定したcontentのをListで全て取得する
parent 指定したcontentの親contentを取得する
siblings 指定したcontent以外をListで全て取得する
children 指定したcontentの子contentを配列で取得する
![Page 29: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/29.jpg)
29
サンプルコード
Per03_InteractingWithContentTest.groovy
HTML131-185行目
![Page 30: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/30.jpg)
30
4.4 Composition
複数のNavigatorを組み合わせることができる。PageObjectのcontentを利用することで汎用化することもできる
$($("div.a"), $("div.d")) // ['div.a','div.d']
static content = { divElement { divClass -> $('div', 'class': divClass) }}
$(divElement('a'), divElement('d'))
![Page 31: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/31.jpg)
31
サンプルコード
Per04_InteractingWithContentTest.groovy
HTML131-144行目
![Page 32: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/32.jpg)
32
4.5 Clicking
Navigator objectsは、click()を実装しているclick()は、最初にマッチした要素のみ実行されるclick(Class)を実行するとクリック後、Classがセットされる
$("input.loginButton").click(LoginPage)
![Page 33: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/33.jpg)
33
サンプルコード
Per05_InteractingWithContentTest.groovy
GebTopPage.groovy
HTML54行目57行目
![Page 34: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/34.jpg)
34
4.6 Determining Visibility
Navigator objectsには、displayedプロパティが定義されている。displayed==falseの場合は、マッチしても操作することができない“Navigator.isDisplayed() == false”の場合にNavigator.click()を実行すると例外が発生するElementNotVisibleException
![Page 35: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/35.jpg)
35
サンプルコード
Per06_InteractingWithContentTest.groovy
GebTopPage.groovy
HTML54行目57行目
![Page 36: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/36.jpg)
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]
![Page 37: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/37.jpg)
37
サンプルコード
Per07_InteractingWithContentTest.groovy
HTMLdivタグ全部
![Page 38: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/38.jpg)
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"]
![Page 39: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/39.jpg)
39
サンプルコード
Per08_InteractingWithContentTest.groovy
HTML135行目
![Page 40: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/40.jpg)
40
4.9 Css properties
cssメソッドでCSSプロパティを取得することができる
<div style="float: left">text</div>
$("div").css("float") == "left"
![Page 41: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/41.jpg)
41
サンプルコード
Per09_InteractingWithContentTest.groovy
HTML10行目
![Page 42: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/42.jpg)
42
4.10 Sending keystrokes
leftShiftを使うことでどのコンテンツにもキーストロークを送信することができる
$("div") << "abc"
$("input", name: "firstName") << Keys.chord(Keys.CONTROL, "c")
![Page 43: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/43.jpg)
43
サンプルコード
Per10_InteractingWithContentTest.groovy
HTML5行目
![Page 44: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/44.jpg)
44
4.11 Accessing input values
Input, select, textarea など入力値は、valueメソッドでセットすることができるcheckbox は、booleanをセットすることもできるmultiple select は配列をセットすることもできる
![Page 45: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/45.jpg)
45
サンプルコード
Per11_InteractingWithContentTest.groovy
HTMLYahoo!!
![Page 46: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/46.jpg)
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"
![Page 47: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/47.jpg)
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または順番の値を渡すことで選択できる
![Page 48: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/48.jpg)
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または順番の配列を渡すことで選択できる
![Page 49: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/49.jpg)
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が返ってくる
![Page 50: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/50.jpg)
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で選択することができる
![Page 51: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/51.jpg)
51
4.12 Form Control Shortcuts
<input name="postcode" />
("form").postcode = "12345"$("form").postcode() << Keys.BACK_SPACEassert $("form").postcode == "1234"
Text Inputは、文字列を渡すことで入力できるキーストロークもKeysクラスを使うことで入力できる
![Page 52: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/52.jpg)
52
4.12 Form Control Shortcuts
<input type="file" name="csvFile">
//絶対パスでファイルを指定する$("form").csvFile = "/path/to/my/file.csv"
絶対パスを渡すことでファイルのアップロードもできる
![Page 53: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/53.jpg)
53
サンプルコード
Per12_InteractingWithContentTest.groovy
HTMLYahoo!!
![Page 54: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/54.jpg)
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()
![Page 55: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/55.jpg)
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)}
![Page 56: 20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介](https://reader034.vdocuments.pub/reader034/viewer/2022042817/55a6984a1a28ab752d8b480c/html5/thumbnails/56.jpg)
56
サンプルコード
Per13_InteractingWithContentTest.groovy
HTMLYahoo!!