読者です 読者をやめる 読者になる 読者になる

yfj2’s Automatic Web Test Related Blog

yfj2のWEBテスト自動化に関わるブログ

【Geb】ナビゲーターAPIとは? / What is Navigator API ?

【Geb】ナビゲーターAPIとは? / What is Navigator API ?
著者:ふじさわゆうき

この記事では、以下を目的としています。

Navigator APIについて公式ページの翻訳を通して理解すること
*Gebの開発環境構築については以下の記事を参照してください

目次

  1. Navigator APIとは?
  2. まとめと感想
  3. 原文情報
  4. 原文と翻訳

Navigator APIとは?

  • jQueryのような文法でコンテンツ内容を取得するAPIをGebでは、"Navigator API"と呼んでいる
  • "$"関数を使うことでCSSセレクタを基にしてコンテンツ内容を取得することができる
// CSS 3 selectors
$("div.some-class p:first[title='something']")
 
// index and/or attributeをマッチングすることで検索する
$("h1", 2, class: "heading")
$("p", name: "description")
$("ul.things li", 2)
 
//"text"は、テキスト内容要素のための特別な属性である
$("h1", text: "All about Geb")
 
// Gebが提供するmatcherや正規表現でも取得が可能
$("p", text: contains("Geb"))
$("input", value: ~/\d{3,}-\d{3,}-\d{3,}/)
 
// Chaining
$("div").find(".b")
$("div").filter(".c").parents()
$("p.c").siblings()

まとめと感想

Navigator APIを使うことで・・・

  • 様々なHTML要素を、簡単かつ柔軟に取得することができる
  • inputタグ, selectタグの値取得はもちろんのこと、値のセットも簡単におこなうことができる
  • クリックやドラック&ドロップといった動作も実行することができる
    • "dragAndDropBy($('#element'), 400, -150)"のような感じで
  • WebDriverを直節利用することもでき、より複雑な動作を実行することもできる
    • "WebElement someItem = $('li.clicky').firstElement()"のような感じで

翻訳してみて、個人的な感想としては、「Gebの価値の7割はNavigator APIである」
といえるほど、奥が深いし、すごく便利だと思いました。
以下、一例ですが、form内の要素への値検証、値セット等が非常に簡単だなーと感じています。

・HTML
<form>
    <input type="text" name="geb" value="testing" />
</form>

・Geb
//"testing"検証
$("form").geb == "testing"

//"goodness"入力
$("form").geb = "goodness"

//"goodness"検証
$("form").geb == "goodness"

Navigator APIを完全に理解し業務で使いこなせれば、非常に効率的にWeb自動テストが作成できると確信することができました。
Gebに興味がある方は、是非、実際のGebコードを書きつつ、今回の「4 Interacting with content」を参照しつつ、より効率的なWebテスト作成にお役立てください。Gebのような、素晴らしい言語が日本に広まって、テストに関わる皆様の作業効率がよりUPすることを心から願っています。

それでは、以下、「4 Interacting with content」の原文と翻訳をお楽しみください。
翻訳がおかしい箇所があれば、是非、コメントください!!より読みやすい翻訳によってGebの普及に貢献できれば嬉しいので。

原文と翻訳

目次


4 Interacting with content / コンテンツとの対話
4.1 The $ Function / $ 関数
4.1.1 CSS Selectors / CSSセレクター
4.1.2 Indexes and Ranges / インデックスと範囲
4.1.3 Attribute and Text Matching / 属性、テキストとのマッチング
4.1.3.1 Using Patterns / パターンの使用
4.1.4 Navigators are Iterable / NavigatorはIterableである
4.2 Finding & Filtering / Finding & Filtering
4.3 Traversing / トラバース(登山用語で斜面や岩壁を横(水平方向)に移動すること。)
4.4 Composition / 構成
4.5 Clicking / クリック
4.6 Determining Visibility / 可視性の決定
4.7 Size and Location / サイズと位置
4.8 Accessing tag name, attributes, text and classes / タグのname , attribute , text , classにアクセスする
4.9 Css properties / CSSプロパティ
4.10 Sending keystrokes / キーストロークを送信する
4.10.1 Non characters (e.g. delete key) / 文字以外(deleteキーのような)
4.11 Accessing input values / 入力値にアクセスする
4.12 Form Control Shortcuts / Formコントロールのショートカット
4.12.1 Setting Values / 設定値
4.12.1.1 select
4.12.1.2 multiple select
4.12.1.3 checkbox
4.12.1.4 radio
4.12.1.5 text inputs and textareas
4.12.1.6 file upload
4.13 Complex Interactions / 複雑な相互作用
4.13.1 Using the WebDriver API directly / WebDriverを直接使用する
4.13.2 Using Actions / アクションを使う
4.13.3 Using Interact Closures / インターアクトクロージャを使う
4.13.4 Interact Examples / 相互作用例
4.13.4.1 Drag and Drop / ドラック&ドロップ
4.13.4.2 Control-Clicking / Controlキーを押しながらクリック

4 Interacting with content / コンテンツとの対話

Geb provides a concise and Groovy interface to the content and controls in your browser. This is implemented through the Navigator API which is a jQuery inspired mechanism for finding, filtering and interacting with DOM elements.
Gebはブラウザ内のコンテンツやコントロールに簡潔でGroovyのインタフェースを提供する。これは、検索、フィルタリングおよびDOM要素とやりとりするためにjQueryのような仕組みのNavigator APIを介して実装されている。

4.1 The $ Function / $ 関数

The $ function is the access point to the browser’s page content. This returns a geb.navigator.Navigator object that is roughly analogous to a jQuery object. It is analogous in that it represents one or more elements on the page and can be used to refine the matched content or query the matched content. When a $ function is called that does not match any content, an “empty” navigator object is returned that represents no content. Operations on “empty” navigators return null or another “empty” navigator or other values that make sense (e.g. the size() method returns 0).
$関数は、ブラウザのページコンテンツへのアクセスポイントである。これはjQueryオブジェクトとほぼ類似してgeb.navigator.Navigatorオブジェクトを返す。
ページ上の1つ以上の元素を表し、マッチしたコンテンツを絞り込むか、一致した内容を照会するために使用することができるという点では類似している。
$関数は、任意のコンテンツと一致しないことが呼び出されたときに、「empty」のNavigator Objectはそれが全く内容を返す。
「empty」のナビゲーター上の操作は、nullを返すか、意味をなさない別の「empty」のNavigatorまたは他の値となる(例えば、size()メソッドは0を返す)。

The signature of the $ function is as follows
$関数のシグネチャは次のようになる

$(≪css selector≫, ≪index or range≫, ≪attribute / text matchers≫)

The following is a concrete example
以下、具体例である

$("h1", 2, class: "heading")

This would find the 3rd h1 element whose class attribute is exactly “heading”.
上記具体例は、class属性が正確に「heading」されている3番目のH1要素を検索することができる

All arguments are optional, meaning the following calls are all valid:
すべての引数は、次の呼び出しではすべてのオプションは有効である

$("div p", 0)
$("div p", title: "something")
$(0)
$(title: "something")

4.1.1 CSS Selectors / CSSセレクター

You can use any CSS selector that the underlying WebDriver supports…
WebDriverがサポートしているCSSセレクタを使用することができる

$("div.some-class p:first[title='something']")

In the case of the HTMLUnit driver, which does not support CSS selectors at all, only basic CSS 2 type selectors can be used. A future version of the HTMLUnit driver may gain better CSS selector support.
HTMLUnitドライバは、全くCSSセレクタをサポートしていない。基本的なCSS 2タイプのセレクタのみ使用することができる。 HTMLUnitドライバの将来のバージョンでは、より良いCSSセレクタのサポートを得られるかもしれない

4.1.2 Indexes and Ranges / インデックスと範囲

When matching, a single positive integer or integer range can be given to restrict by index.
マッチングの際に、単一の正の整数または整数範囲はインデックスによって制限することができる。

Consider the following html…
次のHTMLを検討してみよう

<p>a</p>
<p>b</p>
<p>c</p>

We can use indexes to match content like so.
私たちはそうのようなコンテンツに一致するようにインデックスを使用することができる。

$("p", 0).text() == "a"
$("p", 2).text() == "c"
$("p", 0..1)*.text() = ["a", "b"]
$("p", 1..2)*.text() = ["b", "c"]

See below for an explanation of the text() method and the use of the spread operator.
text()メソッドの説明とpread operatorの使用については、以下を参照すること

4.1.3 Attribute and Text Matching / 属性、テキストとのマッチング

Matches can be made on attributes and node text values via Groovy’s named parameter syntax. The value text is treated specially as a match against the node’s text. All other values are matched against their corresponding attribute values.
Matches
Groovyでパラメータ構文と呼ばれる属性とノードテキスト値で一致させるができる。テキスト値は、ノードテキストに対する一致として特別に扱われている。他のすべての値は、対応する属性値と一致する

Consider the following html
次のHTMLを検討してみよう

<p attr1="a" attr2="b">p1</p>
<p attr1="a" attr2="c">p2</p>

We can use attribute matchers like so…
次のように属性マッチを使用することができる

$("p", attr1: "a").size() == 2
$("p", attr2: "c").size() == 1

Attribute values are anded together
属性値がAND抽出される

$("p", attr1: "a", attr2: "b").size() == 1

We can use text matchers like so…
次のようにテキストマッチを使うことができる

$("p", text: "p1").size() == 1

4.1.3.1 Using Patterns / パターンの使用

To match the entire value of an attribute or the text you use a String value. It is also possible to use a Pattern to do regexp matching…
属性値またはテキストと完全一致することで、String値を使用することができる。正規表現マッチングを行うためにパターンを使用することも可能である

$("p", text: ~/p./).size() == 2

Geb also ships with a bunch of shortcut pattern methods
Gebのショートカットパターンメソッドを利用することができる

$("p", text: startsWith("p")).size() == 2
$("p", text: endsWith("2")).size() == 1

The following is the complete listing:
以下、リストである

Case Sensitive Case Insensitive Description
startsWith iStartsWith 指定した値で始まる値と一致する
contains iContains 指定した値を含む値と一致する
endsWith iEndsWith 指定した値で終わる値と一致する
containsWord iContainsWord 指定した値が空白に囲まれていても、指定した値を含む値と一致する
notStartsWith iNotStartsWith 指定した値で始まらない値と一致する
notContains iNotContains 指定した値が何も含まない値と一致する
notEndsWith iNotEndsWith 指定した値で終わらない値と一致する
notContainsWord iNotContainsWord 空白や先頭または末尾に囲まれた値が含まれていない値に一致する

All of these methods themselves can take a String or a Pattern
これら全てのメソッドは、それ自体が文字列またはパターンを取ることができる

$("p", text: contains(~/\d/)).size() == 2

4.1.4 Navigators are Iterable / ナビゲーターはIterable

The navigator objects implement the Java Iterable interface, which allows you to do lots of Groovy stuff like use the max() function
Navigator objectを使用すると、Java Iterable interfaceを実装することができる。Java Iterable interfaceは、max()関数のような多くのGroovy機能を利用することもできる。

<p>1</p>
<p>2</p>
$("p").max { it.text() }.text() == "2"

This also means that navigator objects work with the Groovy spread operator
これはまた、Navigator objectがGroovyのspread operatorで動作することを意味する

$("p")*.text().max() == "2"

4.2 Finding & Filtering / Finding & Filtering

Navigator objects have find and $ methods for finding descendants,
filter and not methods for reducing the matched content.
Navigator objectには、findメソッドと$メソッドがある。

Consider the following HTML
次のHTMLを検討してみよう

<div class="a">
    <p class="b">geb</p>
</div>
<div class="b">
    <input type="text"/>
</div>

We can select p.b by
p.bを以下のようにセレクトすることができる

$("div").find(".b")
$("div").$(".b")

We can select div.b by
div.bを以下のようにセレクトすることができる

$("div").filter(".b")

or
または

$(".b").not("p")

We can select the div containing the p with…
pを含むdivというセレクトもできる

$("div").has("p")

Or select the div containing the input with a type attribute of “text” like so…
属性が"text"のinputタグを含んだdivでもセレクトできる

$("div").has("input", type: "text")

The find and $ methods support the exact same argument types as the $ function.
findメソッドと$メソッドは同じ引数の型を提供する。$関数として。

The filter, not and has methods have the same signatures - they accept: a selector string, a predicates map or both.
フィルター, "not" "and" は同様のシグネチャをもつ。

These methods return a new navigator object that represents the new content.
これらのメソッドは、新しいコンテンツを表す新しいNavigator objectを返す

4.3 Traversing / トラバース(登山用語で斜面や岩壁を横(水平方向)に移動すること。)

Navigators also have methods for selecting content around the matched content.
Navigatorは、マッチしたコンテンツ周りのコンテンツを選択するためのメソッドも実装している

Consider the following HTML…
次のHTMLを検討してみよう

<div class="a">
    <div class="b">
        <p class="c"></p>
        <p class="d"></p>
        <p class="e"></p>
    </div>
    <div class="f"></div>
</div>

You can select content around p.d by…
次のように"p.d"周りを選択できる

$("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.c").siblings() // 'p.d' & 'p.e'
$("div.a").children() // 'div.b' & 'div.f'

Consider the following HTML…
次のHTMLを検討してみよう

<p class="a"></p>
<p class="b"></p>
<p class="c"></p>

The following code will select p.b & p.c
次のコードで"p.b"と"p.c"を選択できるだろう

$("p").next()

The previous, prevAll, next, nextAll, parent, parents, closest, siblings and children methods can also take CSS selectors and attribute matchers.
次のメソッドも、CSSセレクタ、属性値とマッチする。"previous", "prevAll", "next", "nextAll", "parent", "closest", "siblings", "children"

Using the same html, the following examples will select p.c…
上記と同様のHTMLを使って"p.c"を選択する例を挙げてみよう

$("p").next(".c")
$("p").next(class: "c")
$("p").next("p", class: "c")

Likewise, consider the following HTML
次のHTMLも検討してみよう

<div class="a">
    <div class="b">
        <p></p>
    </div>
</div>

The following examples will select div.b
次は、"div.b"を選択する例である

$("p").parent(".b")
$("p").parent(class: "b")
$("p").parent("div", class: "b")

The closest method is a special case in that it will select the first ancestors of the current elements that match a selector. There is no no-argument version of the closest method.
closestメソッドは、特別な場合に利用する。その場合とは、セレクタとマッチした現在要素の一番親を選択する場合である。closestメソッドには、引数無しバージョンは存在しない。

these will select div.a…
以下、"div.a"が選択されるだろう

$("p").closest(".a")
$("p").closest(class: "a")
$("p").closest("div", class: "a")

The nextUntil, prevUntil and parentsUntil methods return all nodes along the relevant axis until the first one that matches a selector or attributes. Consider the following markup:
"nextUntil", "prevUntil", "parentsUntil"のメソッドは、セレクタや属性に一致する最初の一つまで、関連する軸に沿ってすべてのノードを返す。

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

The following examples will select div.b and div.c
次の例では、"div.b"と"div.c"が選択されるだろう

$(".a").nextUntil(".d")
$(".a").nextUntil(class: "d")
$(".a").nextUntil("div", class: "d")

4.4 Composition / 構成

It is also possible to compose navigator objects from other navigator objects, for situations where you can’t express a content set in one query. To do this, simply call the $ function with the navigators to use…
一つのクエリでコンテンツのセットを表現できない状況のために、他のnavigator objectからnavigator objectを構成することができる
これを行うには、単に使用するためにnavigatorと$関数を呼び出す

$($("div.a"), $("div.d"))

This will return a new navigator object that represents only the a and d divs.
上記は、"div.a"と"div.d"を含んだnavigatorが返されるだろう

You can compose navigator objects from content. So given a page content definition:
コンテンツからnavigotor objectを構成することができる。なので、ページ内容定義はすることができる

static content = {
    divElement { divClass -> $('p', 'class': divClass) }
}
$(divElement('a'), divElement('d'))

You will get a navigator that contains the same elements as the one above.
上記のものと同じ要素が含まれているnavigatorを取得するだろう

4.5 Clicking / クリック

Navigator objects implement the click() method, which will instruct the browser to click only the first item the navigator has matched.
Navigator objectは、click()メソッドを実装している。それは、最初にマッチしたnavigator要素のブラウザクリックとなる。

There are also click(Class) and click(List) methods that are analogous to the browser object’s page(Class) and page(List) methods respectively.
This allow page changes to be specified at the same time as click actions.
"click(Class)"とclick(List)メソッドは、各ブラウザの"page(Class)" と "page(List)" メソッドに似ている
これらのメソッドにより、ページの変更をクリック・アクションと同時に指定することができる

For example
例えば、

$("input.loginButton").click(LoginPage)

Would click the “input.loginButton” element, then effectively call browser.page(LoginPage) and verify that the browser is at the expected page.
「input.loginButton」要素をクリックすることで、browser.page(LoginPage)を効果的に呼び出し、ブラウザが予期したページであることを確認することができる

All of the page classes passed in when using the list variant have to have an “at” checker defined, otherwise an UndefinedAtCheckerException will be thrown.
全てのページクラスは、"at"チェッカーに定義した検証リストに合格しなければならない。さもないと"UndefinedAtCheckerException"例外がスローされる。

4.6 Determining Visibility / 可視性の決定

Navigator objects have a displayed property that indicates whether the element is visible to the user or not. The displayed property of a navigator object that doesn’t match anything is always false
Navigator objectは、要素がユーザかに表示されるかどうかを示す表示された特性を有している。何も一致しないnavigatorオブジェクトの表示されたプロパティは常にfalseとなる

4.7 Size and Location / サイズと位置

You can obtain the size and location of content on the page. All units are in pixels. The size is available via the height and width properties, while the location is available as the x and y properties which represent the distance from the top left of the page (or parent frame) to the top left point of the content.
そのページ上のコンテンツのサイズと位置を取得することができる。すべてのユニットはピクセル単位で指定する。位置はコンテンツのページ(または親フレーム)の左上からの距離を表し、xとyプロパティとして利用可能である。サイズは、高さと幅のプロパティを介して利用可能である。

All of these properties operate on the first matched element only.
以下に示すプロパティはすべて、最初にマッチした要素上でのみ動作する

$("div").height == 20
$("div").width == 40
$("div").x == 60
$("div").y == 80

To obtain any of the properties for all matched elements, you can use the Groovy spread operator.
すべてのマッチした要素のプロパティのいずれかを取得するには、Groovyのspread operatorを使用することができる

$("div")*.height == [20, 30]
$("div")*.width == [40, 50]
$("div")*.x == [60, 70]
$("div")*.y == [80, 90]

4.8 Accessing tag name, attributes, text and classes / タグのname , attribute , text , classにアクセスする

The tag(), text(), @attribute and classes() methods return the requested content on the first matched content.
The classes() method returns a java.util.List of unique class names sorted alphabetically.

tag(), text(), @attributeおよびclasses()メソッドは、最初にマッチしたコンテンツに対する要求されたコンテンツを返す。
classes()メソッドは、アルファベット順にソートユニークなクラス名のjava.util.Listを返す。

Consider the following HTML…
次のHTMLを検討してみよう

<p title="a" class="a para">a</p>
<p title="b" class="b para">b</p>
<p title="c" class="c para">c</p>

The following assertions are valid
次のアサーションによって検証する

$("p").text() == "a"
$("p").tag() == "p"
$("p").@title == "a"
$("p").classes() == ["a", "para"]

To obtain information about all matched content, you use the Groovy spread operator
すべてのマッチしたコンテンツに関する情報を取得するには、Groovyのspread operatorを使用する

$("p")*.text() == ["a", "b", "c"]
$("p")*.tag() == ["p", "p", "p"]
$("p")*.@title == ["a", "b", "c"]
$("p")*.classes() == [["a", "para"], ["b", "para"], ["c", "para"]]

4.9 Css properties / Cssプロパティ

Css properties of a navigator can be accessed using the css() method.
ナビゲーターのCSSプロパティは、css()メソッドを使用してアクセスすることができる

Consider the following HTML…
次のHTMLを検討してみよう

<div style="float: left">text</div>

You can obtain value of the float css property in the following way
次のようにfloat cssプロパティの値を取得することができる

$("div").css("float") == "left"

There are some limitations when it comes to retrieving css properties of Navigator objects.
Color values should be returned as rgba strings, so, for example if the background-color property is set as green in the HTML source, the returned value will be rgba(0, 255, 0, 1).
Note that shorthand CSS properties (e.g. background, font, border, border-top, margin, margin-top, padding, padding-top, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification -
you should directly access the longhand properties (e.g. background-color) to access the desired values.
Navigator objectのCSSプロパティを取得する場合、いくつかの制限がある。
例えば、背景色プロパティがHTMLソースに"green"と設定されている場合、色の値はRGBAの文字列を返さない。返される値はRGBAとなる(0, 255, 0 , 1)
そのshorthand CSSプロパティに注意すること(例:background, font, border, border-top, margin, margin-top, padding, padding-top, list-style, outline, pause, cue)は、DOM CSS2仕様に従って、返されません -
直接、取りたい値にアクセスするためは、longhand特性(例えば、背景色)にアクセスする必要がある。

4.10 Sending keystrokes / キーストロークを送信する

Keystrokes can be sent to any content via the leftShift operator, which is a shortcut for the sendKeys() method of WebDriver.
WebDriverのためのsendKeys()を使って、leftShift操作をどのコンテンツにも送信することができる

("div") << "abc"

4.10.1 Non characters (e.g. delete key) / 文字以外(例えばdeleteキー)

It is possible to send non-textual characters to content by using the WebDriver Keys enumeration.
WebDriverのキー定数を使うことによって、コンテンツに文字以外のキーを送信することができる

import org.openqa.selenium.Keys
 
$("input", name: "firstName") << Keys.chord(Keys.CONTROL, "c")

4.11 Accessing input values / 入力値にアクセスする

The value of input, select and textarea elements can be retrieved and set with the value method.
"input", "select", "textarea"の要素には、valueメソッドを使うことで取得、設定することができる

Calling value() with no arguments will return the String value of the first element in the Navigator.
value()を引数無しで呼び出すことによって、Navigatorの最初の要素のStringを取得することができる

Calling value(value) will set the current value of all elements in the Navigator.
value(value)メソッドを呼び出すことによって、Navigatorのすべての値に値をセットすることができる

The argument can be of any type and will be coerced to a String if necessary.
引数は、任意のタイプのものであってもよいし、必要に応じて文字列に強制してもよい。

The exceptions are that when setting a checkbox value the method expects a boolean (or, an existing checkbox value) and when setting a multiple select the method expects an array or Collection of values.
例外は、メソッドがbooleanを期待するcheckboxの値を設定する際(または、既存のcheckboxの値)を、複数の方法を選択設定することである。その際には値の配列またはCollectionを想定していることである。

4.12 Form Control Shortcuts / Formコントロールのショートカット

Interacting with form controls (input, select etc.) is such a common task in web functional testing that Geb provides convenient shortcuts for common functions.
"input"、"select"などフォームコントロールとのやり取りには、Web機能テストのような共通タスクを提供する。Gebは、共通機能として便利なショートカットを提供する。

Geb supports the following shortcuts for dealing with form controls.
Gebは、フォームコントロールショートカットをサポートしている

Consider the following HTML…
次のHTMLを検討してみよう

<form>
    <input type="text" name="geb" value="testing" />
</form>

The value can be read and written via property notation…
プロパティを介して、値の読み込みと書き込みができる

$("form").geb == "testing"
$("form").geb = "goodness"
$("form").geb == "goodness"

These are literally shortcuts for…
上記、記法は、次の記法のショートカットである

$("form").find("input", name: "geb").value() == "testing"
$("form").find("input", name: "geb").value("goodness")
$("form").find("input", name: "geb").value() == "goodness"

There is also a shortcut for obtaining a navigator based on a control name
コントロール"name"に基づいて、navigatorを取得するショートカットもある

$("form").geb()

Which is literally a shortcut for…
上記、記法は以下記法のショートカットである

$("form").find("input", name: "geb")

If your content definition (either a page or a module) describes content which is an input, select or textarea, you can access and set its value the same way as described above for forms. Given a page and module definitions for the above mentioned HTML:
あなたのコンテンツ定義(ページまたはモジュールのどちらか)が"input"、"select"または"textarea"で内容を記述した場合は、上記、フォームコントロールと同様に値をセットしたり、取得したりすることができる。上記のHTMLのページとモジュール定義を考えてみよう

class ShortcutModule extends Module {
    static content = {
        geb { $('form').geb() }
    }
}
 
static content = {
    geb { $('form').geb() }
    shortcutModule { module ShortcutModule }
}

The following will pass
次のようになる

assert geb == "testing"
geb = "goodness"
assert geb == "goodness"

As well as:
同様に

assert shortcutModule.geb == "testing"
shortcutModule.geb = "goodness"
assert shortcutModule.geb == "goodness"

The following examples describe usage of form controls only using code like "$("form").someInput".
次の例では、"$("form").someInput"のようなコードを使ってフォームコントロールを説明する

4.12.1 Setting Values / 設定値

Trying to set a value on an element which is not one of input, select or textarea will cause an UnableToSetElementException to be thrown.
"input" , "select" , "textarea"のどれでもないelementに値を設定しようとするとUnableToSetElementExceptionがスローされる

4.12.1.1 select

Select values are set by assigning the value or text of the required option.
Assigned values are automatically coerced to String. For example…
必須オプションである"value" , "option" , "test"のいづれかを指定することで選択値をセットすることができる。
セットした値は、自動的にStringに強制変換される

<select name="artist">
    <option value="1">Ima Robot</option>
    <option value="2">Edward Sharpe and the Magnetic Zeros</option>
    <option value="3">Alexander</option>
</select>

We can select options with
次のようにオプションを選択できる

$("form").artist = "1"         // first option selected by its value attribute
$("form").artist = 2           // second option selected by its value attribute
$("form").artist = "Ima Robot" // first option selected by its text

If you attempt to set a select to a value that does not match the value or text of any options, an IllegalArgumentException will be thrown.
任意のオプションの値またはテキストと一致しない値を選択して設定した場合、IllegalArgumentExceptionがスローされる

4.12.1.2 multiple select

If the select has the multiple attribute it is set with a array or Collection of values.
Any options not in the values are un-selected. For example…
"select"は、複数属性の場合、"array" または "Collection"をセットする
どの値も選択しない場合の値は、"un-selected"である。例を挙げる。

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

We can select options with…
次のようにオプションを選択することができる

$("form").genres = ["2", "3"]                 // second and third options selected by their value attributes
$("form").genres = [1, 4, 5]                  // first, fourth and fifth options selected by their value attributes
$("form").genres = ["Alt folk", "Hair metal"] // first and last options selected by their text
$("form").genres = []                         // all options un-selected

If the collection being assigned contains a value that does not match the value or text of any options, an IllegalArgumentException will be thrown.
指定したcollectionが"value", "text" ,"options"のどれにもマッチしない場合は、IllegalArgumentExceptionがスローされる

4.12.1.3 checkbox

Checkboxes are generally checked/unchecked by setting their value to true or false.
"Checkbox"は、値に"true"または"false"を設定することで"選択済み/未選択"を設定することが通常できる。

You can also check a checkbox by explicitly setting its value.
This is useful when you have a number of checkboxes with the same name.
明示的にその値を設定することで、checkboxを選択することもできる。
同じnameのcheckboxが複数ある場合に便利だろう。その例を示す

<input type="checkbox" name="pet" value="dogs" />
<input type="checkbox" name="pet" value="cats" />


You can select dogs as your pet type, as follows:
次のようにすることでname="pet"の"dogs"を選択することができる

$("input", type: "checkbox", name: "pet").value("dogs")

Calling value() on a checked checkbox will return the value of its value attribute, i.e:
選択済みのcheckboxでvalue()を呼び出すとその属性の値を返す。次に例を示す

・html
<input type="checkbox" name="pet" value="dogs" checked="checked"/>

・Geb
assert $("input", type: "checkbox", name: "pet").value() == "dogs"

Calling value() on an unchecked checkbox will return false, i.e:
未選択のcheckboxでvalue()を呼び出すと、falseが返される。次に例を示す

・html
<input type="checkbox" name="pet" value="dogs"/>
 
・Geb
assert $("input", type: "checkbox", name: "pet").value() == false

In general you should use Groovy Truth when checking if a checkbox is checked:
通常、checkboxが選択済みであれば、Groovy Truthを使うべきだろう

if ($("input", type: "checkbox", name: "pet").value()) {
    //checkboxの"pet"が選択済みの場合のみ処理が実行される
}

4.12.1.4 radio

Radio values are set by assigning the value of the radio button that is to be selected or the label text associated with a radio button.
ラジオボタンに関連するラベルテキスト、または"selected" によってRadioボタンの値をセットすることができる

For example, with the following radio buttons…
次にラジオボタンの例を示す

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

We can select the radios with
次のようにラジオボタンを選択することができる

$("form").site = "current"          // selects the first radio by its value
$("form").site = "Search this site" // selects the first radio by its label
$("form").site = "Search Google"    // selects the second radio by its label

4.12.1.5 text inputs and textareas

In the case of a text input, the assigned value becomes the input’s value attribute and for a textarea effectively becomes the text.
テキスト入力の場合、割り当てられた値は、inputのvalue属性になり、TextAreaの効果的にテキストになる。

It is also possible to append text by using the send keys shorthand…
ショートカットキーを使うことで、テキスト追加することができる

・html
<input name="language" value="gro" />

・Geb
$("form").language() << "ovy"
assert $("form").language == "groovy"

Which an also be used for non-character keys…
非文字キーを使うこともできる

・html
<input name="postcode" />
 
・Geb
import org.openqa.selenium.Keys
 
$("form").postcode = "12345"
$("form").postcode() << Keys.BACK_SPACE
assert $("form").postcode == "1234"

4.12.1.6 file upload

It’s currently not possible with WebDriver to simulate the process of a user clicking on a file upload control and choosing a file to upload via the normal file chooser.
However, you can directly set the value of the upload control to the absolute path of a file on the system where the driver is running and on form submission that file will be uploaded.
ユーザーがファイルアップロードコントロールをクリックして、アップロードするファイルを選択することは現在はできません。なぜならWebDriverで出来ないから。
ただし、システム上ファイルの絶対パスをアップロード・コントロールの値に設定することで直接ファイルをアップロードすることはできる。

<input type="file" name="csvFile">
 
$("form").csvFile = "/path/to/my/file.csv"

4.13 Complex Interactions / 複雑な相互作用

WebDriver supports interactions that are more complex than simply clicking or typing into items, such as dragging.
You can use this API from Geb, or use the more Geb friendly interact {} DSL (explained below).
WebDriverはより複雑でよりシンプルなクリック、タイピング、ドラックをサポートしてくれるだろう。
GebのAPIまたは、Gebの簡単な相互作用{}DSLを(後述)を使用することができる。

4.13.1 Using the WebDriver API directly / WebDriverを直接使用する

A Geb navigator object is built on top of a collection of WebDriver WebElement objects.
It is possible to access the contained WebElements via the following methods on navigator objects:

Geb navigator objectはWebDriver WebElement objectのコレクションの上に構築されている
navigator objectのメソッドを経由してWebDriverに含まれているWebElementsにアクセスすることが可能である。

WebElement firstElement()
WebElement lastElement()
Collection<WebElement> allElements()

By using the methods of the WebDriver Actions class with WebElements, complex user gestures can be emulated.
WebElementsと一緒にしてWebDriver Actions classWebDriverアクションクラスのメソッドを使用することにより、複雑なユーザのジェスチャーをエミュレートすることができる。

4.13.2 Using Actions / アクションを使う

Create an Actions instance after obtaining the WebDriver driver:
"WebDriver driver"を取得した後にActionインスタンスを作成する

def actions = new Actions(driver)

Next, use methods of Actions to compose a series of UI actions, then call build to create a concrete Action:
次に、一連のUIコンポーネントされたアクションメソッドを利用することで、具体的なアクションを作成するためにビルドする

import org.openqa.selenium.Keys
 
WebElement someItem = $('li.clicky').firstElement()
def shiftDoubleClickAction = actions.keyDown(Keys.SHIFT).doubleClick(someItem).keyUp(Keys.SHIFT).build()

Finally, call "perform()" to actually trigger the desired mouse or keyboard behavior:
最後に、実際に必要なマウスやキーボードの動作をトリガーするために"perform()"を呼び出す、

shiftDoubleClickAction.perform()

4.13.3 Using Interact Closures / インターアクトクロージャを使う

To cut down on the amount of typing required, use an interact closure instead of using class Actions explicitly.
必要なタイピングの量を削減するには、明示的にクラスアクションを使用する代わりにinteract closureを使用します

When using an interact closure, an Actions instance is implicitly created, built into an Action, and performed.
interact closureを使用する場合は、Actionのインスタンスが暗黙のうちに、作成したアクションに組み込まれ、そして実行される

As an added bonus, Geb navigators can be passed directly to Actions methods within an interact closure.
追加ボーナスとして、Geb navigatorは、interact closure内では、Actionメソッドに直接渡すことができる

This interact closure performs the same work as the calls in the ‘Using Actions’ section:
interact closureは、‘Using Actions’と同等に動作する

import org.openqa.selenium.Keys
 
interact {
    keyDown(Keys.SHIFT)
    doubleClick($('li.clicky'))
    keyUp(Keys.SHIFT)
}

This method creates code that is more readable than using Actions directly.
このメソッドを使うことで、Actionを直接使用するよりも読みやすいコードを作成することができる

For the full list of available interactions, see the documentation for the WebDriver Actions class.
利用可能な相互作用の完全なリストについては、WebDriver Actions classのドキュメントを参照してください。
http://selenium.googlecode.com/svn/trunk/docs/api/java/org/openqa/selenium/interactions/Actions.html

4.13.4 Interact Examples / 相互作用例

Interact closures (or Actions) can be used to perform behaviors that are more complicated than clicking buttons and anchors or typing in input fields.
Interact closure(またはAction)を使うことで、ボタンとanchorをクリックする、またはinputフィールドにタイプするなどより複雑な動作を実行することができる

Shift-double-clicking was demonstrated earlier.
Shiftキーを押しながらダブルクリックできることが、以前に実証された。

4.13.4.1 Drag and Drop / ドラック&ドロップ

You can drag and drop an element on the page by using clickAndHold, moveByOffset, and then release.

clickAndHold, moveByOffset, and then release drag and drop an element on the page.
clickAndHold, moveByOffset, そしてreleaseを使うことで、そのページの要素をドラック&ドロップすることができる

interact {
    clickAndHold($('#element'))
    moveByOffset(400, -150)
    release()
}

Drag-and-dropping can also be accomplished using the dragAndDropBy convenience method from the Actions API:
Drag-and-droppingもAction APIからdragAndDropByのような便利なメソッドを用いて達成することができる。

interact {
    dragAndDropBy($('#element'), 400, -150)
}

In this particular example, the element will be clicked then dragged 400 pixels to the right and 150 pixels upward before being released.
上記の例では、ある要素をクリックして、右に400 pixels 上に150 pixels 移動してリリースする

4.13.4.2 Control-Clicking / Controlキーを押しながらクリック

Control-clicking several elements, such as items in a list, is performed the same way as shift-clicking.
クリックをコントロールするいくつかの要素(listのなかのitemsのような)は、shift-clickingと同様のやり方で動作する

import org.openqa.selenium.Keys
 
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)
}