Edited at
GebDay 1

Gebってなんぞ? #gebAdvent

More than 1 year has passed since last update.


はじめに

このエントリーは、Geb Advent Calendar 2016の1日目の記事です。今日は初日ということで、そもそもGebってなんぞ? という話を書きます。

Geb Advent Calendar、まだまだ空きがあるので、TIPsや使用感など、なんでもいいのでご興味があれば是非参加よろしくお願いします。


Gebとは?

ブラウザのオートメーションツールです。

Seleniumをご存知であれば、そのラッパーライブラリーといったほうがしっくりくると思います。Groovyで実装されており、Groovyの機能を活かした簡潔な記述でコードを書くことができます。

とても大事なことですが、げぶではなくじぇぶと読みます


公式サイト

これです。

http://www.gebish.org/

ここからドキュメントやソースコードへのリンクもあります。


百聞は一見にしかず

というわけで、Gebで書かれたコードを見てみます。先述のサイトに載っているサンプルコードから引用します(これ以後のサンプルコードも、公式サイトから引用しています)。

下記はログイン処理の操作をするスクリプトです。

Browser.drive {

go "http://myapp.com/login"

assert $("h1").text() == "Please Login"

$("form.login").with {
username = "admin"
password = "password"
login().click()
}

assert $("h1").text() == "Admin Section"
}

上記の内容は

1. http://myapp.com/login というURLに遷移して

2. 遷移先のページのh1に、Please Loginという文言があるかを確認して

3. ログインフォームにユーザー名とパスワードを入力してログインボタンをクリックして

4. 遷移先のページのh1Admin Sectionという文言があるかを確認する

という処理をしています。

Seleniumでテストの自動化にトライしたことがある方はわかるかもしれませんが、Seleniumでやろうとすると、これらの処理は意外とコードを書かなければなりません。

上記のサンプルだと出てきていませんが、もう少し複雑になると、ページや特定のエレメントのwaitなどを考える必要が出たりするので、記述も複雑になりがちです。


Gebの良いところ

Gebでは、複雑になりがちなコードを簡潔に書くことができます。ざっとハイライトしていきますね。


jQueryっぽいAPI

Seleniumを使っていて辛い事の一つは、エレメントの取得方法が冗長なことです。

Gebは下記のように、jQuery「っぽい」APIを用意しているので、エレメントの取得は楽になります。

例えばこんな感じ

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

$("h1", text: "All about Geb")
$("div").find(".b")

ここではさわりだけですが、もう少し詳しく見たい方は下記が参考になると思います。

http://qiita.com/itagakishintaro/items/1fa06904bd0a6de73ee2


ページオブジェクトを標準装備

Seleniumのコードをメンテナンスしやすくする手法として、ページオブジェクトパターンというのがあります。

日本語だと下記のサイトにわかりやすくまとまっています。

http://softwaretest.jp/labo/tech/labo-292/

Seleniumですと、例えばJavaだと自分でページオブジェクトを表現するベースクラスを作って、それをここのページで継承して、ということが発生しますが、Gebは標準でページオブジェクトを装備しています。

そのため、自分でベースになるクラスを作る必要がありません。さらに、Groovyを活かして、よりページらしい表現ができるようになります。(例えば、ページのコンテンツになるものは文字どおりcontentという名のクロージャー内に記述するなど)

サンプルは下記の通りです。

class LoginPage extends Page {

static url = "http://myapp.com/login"
static at = { heading.text() == "Please Login" }
static content = {
heading { $("h1") }
loginForm { $("form.login") }
loginButton(to: AdminPage) { loginForm.login() }
}
}

最初は記法に戸惑うかもしれませんが、慣れると直感的で楽です。


waitが楽

ブラウザ操作の自動化で、最も悩ましいのがwaitです。特にAJAXによる非同期なロードやアニメーションが普通になってしまった今では、waitが適切に入っていないととても不安定な自動化スクリプトが出来上がってしまいます。

そこでwaitの処理を描くわけですが、こちらもSeleniumだと少し冗長です。Gebだと下記の通り

waitFor { 

$("p.status").text() == "Asynchronous operation complete!"
}

waitForでくくるだけ。簡単ですね。

上記のサンプルでは、エレメントのテキストがAsynchronous operation complete!となるのを待ってましたが、他にもエレメントの存在や、表示・非表示など、様々なものを条件にwaitをかけることができます。


まとめ

Gebは簡潔な記述がウリです。特にjQueryっぽいAPIの提供や、ページオブジェクトの標準装備、waitの記述の簡潔さでブラウザの自動化を楽にしています。

まだ試したことがない人は是非この機会に試してみてください!


明日のエントリー

http://qiita.com/posaunehm さんのターンです! Geb + Spock な話 わくわく!