はじめに
このエントリーは、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"
}
上記の内容は
-
http://myapp.com/login
というURLに遷移して - 遷移先のページの
h1
に、Please Login
という文言があるかを確認して - ログインフォームにユーザー名とパスワードを入力してログインボタンをクリックして
- 遷移先のページの
h1
にAdmin 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 な話 わくわく!