Viewing entries tagged
Geb

Gebチュートリアル

Gebチュートリアル

みなさんこんにちは。KEYチームの武永です。

先日とある学生さんから以下のようなメールを貰いました。

武永さんのGebのブログを読んでGebに興味が出てきて
実際に動作させてみたいと思ったのですが、 環境構築の仕方が分からず動かせていない状況です。
メールでもブログでもいいのでご助力いただけると幸いです。

詳しく状況を聞いてみると
「いつもはRubyを触っているが、何から手をつけていいのか分からない」
「私がどのような環境で動かしているのか興味がある」との事でした。
こういう連絡が来るとは思っていませんでした。

初歩的な情報でも参考になる方は多いのかなと思ったので今回は環境構築から 公式のサンプルコードの実装と説明の日本語訳 + 簡単なコードの説明を書いていこうと思います。
※英語は得意ではないので訳が100%正しいものとは言えないです。。。

使用する環境

  • Mac OS X Yosemite
  • Java8
  • IntelliJ IDEA14.1 Community Edition

環境構築

さて、さっそく環境構築を進めていきましょう。
とは言っても環境構築自体はGebはGroovyなので全く難しくありません。
※Javaのインストールは省略します。

IntelliJ IDEA14 インストール

既にIntelliJ IDEAがインストールされている方は読み飛ばして大丈夫です。

  1. https://www.jetbrains.com/idea/download/
    上記へアクセス
  2. 「Download Community」ボタンを押下
    「Ultimate Edition」でも問題はありません。
    ダウンロードが始まります。
  3. ダウンロードされた「ideaIC-14.1.4.dmg」を開く
    Intellij IDEA を アプリケーションへドラッグアンドドロップ

IntelliJ IDEAは標準でGroovyに対応しているので準備完了です。

プロジェクト作成

  • new project → Maven → next

Project SDKが設定されていない場合は用意したJDKを選択しておいてください。 JDKの場所はデフォルトならば [/Library/Java/JavaVirtualMachines/jdk1.8.0_60.jdk/Contents/Home] 上記のようになっています。

  • GroupIdとArtifactIdを入力 → next → ProjectNameを入力 → finish

pom.xmlの編集

pom.xmlを以下のとおりに編集します。

サンプルコード実装

Gebが動く環境は整ったので実装に入ります。
以下の様に「module」と「page」Packageを作成します。

  • module配下に「SelectableLinkModule.groovy」を作成します。
  • module配下に「HighlightsModule.groovy」を作成します。
  • page配下に「GebHomePage.groovy」を作成します。
  • test直下に「GebHomepageSpec.groovy」を作成します。

以上でサンプル実装終了です。
では実際に動かしてみましょう。
「GebHomepageSpec」を左クリック → Run 'GebHomepageSpec' をクリックで実行できます。

実行結果がこちらの動画です。

最後に

まさか私のブログを読んでメールを送ってきてくれるとは思っていなかったのでメールを受け取った時には非常に驚きました。
個人的にはメールを送ってくれた方には是非会ってみたいなと思っています。
今回の記事でGebをとりあえず動かしてみようと思ってくれる人がいると幸いです。

GebでCookieを扱ってみる

GebでCookieを扱ってみる

みなさんこんにちは。KEYチームの武永です。

今回も引き続きGebネタです。 前回の記事は こちら。

今回はGebでCookieを触れるのかちょっと個人的に気になったので調査して実際に動かしてみました。

作成したプログラムは以下の様な単純なものです。

  1. 「Yahoo!JAPAN」にアクセス
  2. タイトルの検証
  3. 現在のCookieを全てコンソール上に表示
  4. 以下のようなCookieをセット
    Name : GebCookie
    Value : atware.co.jp
  5. セット後のCookieを全てコンソール上に表示

ソースコードはこちらです

そして実行して表示されたものがこちらになります。

--設定前 Cookie 出力開始-----
name  : btpdb.2wzBV9u.dGZjLjE5ODkzNTc, value : REFZUw
name  : B, value : 5g9cb99atlbkl&b=3&s=3n
name  : btpdb.2wzBV9u.dGZjLjE0MzQzNDg, value : VVNFUg
name  : btpdb.2wzBV9u.dGZjLjE0NDcxNDU, value : UkVRVUVTVFMuMA
--設定前 Cookie 出力終了-----
--設定後 Cookie 出力開始-----
name  : btpdb.2wzBV9u.dGZjLjE5ODkzNTc, value : REFZUw
name  : GebCookie, value : atware.co.jp
name  : B, value : 5g9cb99atlbkl&b=3&s=3n
name  : btpdb.2wzBV9u.dGZjLjE0MzQzNDg, value : VVNFUg
name  : btpdb.2wzBV9u.dGZjLjE0NDcxNDU, value : UkVRVUVTVFMuMA
--設定後 Cookie 出力終了-----

確かに作成したCookieがセットされていることが確認できます（赤字部分）。

このやり方を使えば自分達が意図したとおりにCookieがセットされているかどうかを確認することが出来ますね。
実際にCookieの値を検証するかどうかはプロジェクト次第ではあると思いますが、参考になれば幸いです。

Gebでのドラッグ＆ドロップ

Gebでのドラッグ＆ドロップ

みなさんこんにちは。KEYチームの武永です。
今回はWebテスト自動化フレームワークであるGebのNavigator APIのドラッグ&ドロップを使ってみましたのでそちらについて書いていこうと思います。
最近はNavigator APIの説明をしている記事は結構増えてきているのですが、 ドラッグ&ドロップを使用した記事は私が見る限りでは見つけられなかったため使ってみました。

Gebとは

  • Luke Daley氏を中心に開発されているWebアプリケーション向けの機能テストを自動化するためのGroovy言語で書かれたフレームワーク
  • GroovyなのでJavaと互換性があり、SeleniumWebDriverの資産をそのまま利用できる
  • jQueryライクな記述で簡潔なDSLでテストスクリプトを記述可能
  • Page Object Patternをサポートしているので画面変更に強いテストを簡単に作成可能
  • JUnitやSpockなどのテストフレームワークと統合することも可能なため、TDDやBDDなどの開発プロセスに取り入れやすい
  • テスト中の画面をキャプチャして出力できる

このような特徴があるテストフレームワークです。
ちなみに「ジェブ」と発音します。
私の周りで初めて「Geb」という単語を見た時に「ゲブ」と発音した方がいたので結構間違える人も多いのではないでしょうか。
公式でも「ジェブ」と発音しろと明記されているほどです。
http://www.gebish.org/

  • jQueryのような文法でHTML要素を取得することができるAPIのこと
  • "$"関数を使うことでコンテンツ内容を取得することができる
  • inputタグ, selectタグの値取得はもちろんのこと、値のセットも簡単におこなうことができる
  • クリックやドラッグ&ドロップといった動作も実行することができる

"$"関数の定義は

$(«css selector», «index or range», «attribute / text matchers»)

のようになっており、以下のようなコードを書いた場合は

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

h1タグでクラスが"heading"の要素の中の、3番目(indexの最初は0)のものを取得できます。

以下、一例ですが、form内の要素の値検証、値入力等が非常に簡単だと思っています。
・HTML

・Geb

では本題のドラッグ&ドロップに入って行きたいと思います。
今回は以下の様な青と赤のブロックをグレイのブロックの上に移動すると
メッセージが表示されるというページを作成しましたのでこれを使って進めていきます。

このページに対してGebのコードは以下になります。

では、実際に動かしてみましょう。

マウスで動かすように徐々に移動するのではなく一瞬で移動するので分かりづらいかもしれませんが、
無事、赤いブロックを移動させてメッセージが表示されることの確認が出来ました。

最後に

現在参画しているプロジェクトでは実際にGebを使用していますが、このNavigator APIは非常に便利で使いやすいと感じています。
私は、Gebが初めて触れたWebテスト自動化フレームワークだったので他のフレームワークと詳しく比較することはできませんが、
個人的に少しWebDriverを使ってみた時には圧倒的にGebのほうが使いやすいと感じました。
WebDriverはちょっとしたことを書くためでもGebよりもコードが長くなってしまい見づらくなるのではないかと思っています。
今回使ってみたドラッグ&ドロップでもWebDriverでの実装よりGebならばコード量は明らかに減るということが分かりました。
実際にドラッグ&ドロップを使ったテストを書く機会があるのかはプロダクト次第かもしれませんが。。。

今後もGebを学んでいって、Gebに関する記事を書いていこうと思っていますのでまた読んでいただけたら嬉しいです。