面倒な画面確認から解放されるためのgeb自動キャプチャ


初投稿です。

システムテストや受入テストなどで大量のテストパタンを１つ１つ画面表示確認している人も多いかと思います。私も昔は途方もない作業を手で行っていましたが、数十パタンもあると病んできますよね^^;

今回はgebを使って自動キャプチャをとることで画面の表示確認作業を楽にする方法を紹介したいと思います。

少し前にも、テスト結果のスクリーンショットをexcelに張り付ける話が出てましたね。それも楽になるはずです♪


## Gebとは
Webアプリケーションのテストを自動化するツールです。簡単なコードでブラウザを操作し、キャプチャをとることができます。

詳細な説明は[こちら](http://www.gebish.org/)をご覧ください（英語）


## 試した環境
以下の通りです。申し訳ありませんが、これらの具体的なセットアップ手順は省略します

* Mac OS
* Intellij IDEA 13.1
* gradle 1.12
* java 1.7
* groovy 

windowsやeclipseでもそんなにハマることなく実現できると思います。

## ソース

ソースはGitHubでも公開しています　https://github.com/nyasba/gebsample

#### ディレクトリ構成

関係ないところは一部省略しています。

```
$ tree .
.
├── build.gradle
├── driver
│   ├── chromedriver
│   └── chromedriver.exe
├── report
│   └── geb
│       └── nyasba
│           └── sample
│               └── story
│                   └── SampleSearchGeb
│                       ├── 001-001-gebを検索する-検索画面.png
│                       ├── 001-002-gebを検索する-end.png
│                       ├── 002-001-spockを検索する-検索画面.png
│                       └── 002-002-spockを検索する-end.png
└── src
    ├── main
    │   └── groovy
    └── test
        ├── groovy
        │   └── geb
        │       └── nyasba
        │           └── sample
        │               ├── page
        │               │   └── TopPage.groovy
        │               └── story
        │                   └── SampleSearchGeb.groovy
        └── resources
            └── GebConfig.groovy
```

今回はChromeを用いますので、以下のサイトから環境に応じたChromeDriverをダウンロードして、driver配下に格納する必要があります(Mac、Windows用は格納済)
https://code.google.com/p/selenium/wiki/ChromeDriver


#### Gradleビルドファイル
``` build.gradle
apply plugin: 'groovy'
apply plugin: 'idea'

repositories {
    mavenCentral()
}

dependencies {
    testCompile "org.gebish:geb-spock:0.9.2"
    testCompile "org.spockframework:spock-core:0.7-groovy-2.0"
 
    testCompile "org.seleniumhq.selenium:selenium-chrome-driver:2.37.1"
    testRuntime "org.seleniumhq.selenium:selenium-support:2.37.1"
}

task wrapper(type: Wrapper) {
	gradleVersion = '1.12'
}
```

#### 設定ファイル
Driverの設定などを行っています。実行するブラウザを変更したい場合はここに書くことになります。

```src/test/resources/GebConfig.groovy
import geb.report.CompositeReporter
import geb.report.ScreenshotReporter

import org.openqa.selenium.chrome.ChromeDriver


reportsDir = "./report"

// 環境にあったChromeDriverを以下からダウントードして指定して下さい。
// https://code.google.com/p/selenium/wiki/ChromeDriver
System.setProperty("webdriver.chrome.driver", "driver/chromedriver")

driver = {
	return new ChromeDriver()
}

reporter = new CompositeReporter(
	new ScreenshotReporter(){
		@Override
		protected escapeFileName(String name) {
			name.replaceAll('[\\\\/:\\*?\\"&lt;>\\|]', '_')
		}
	},
	new ScreenshotReporter(){
		@Override
		protected escapeFileName(String name) {
			name.replaceAll('[\\\\/:\\*?\\"&lt;>\\|]', '_')
		}
	}
)
```

#### テストシナリオに相当するオブジェクト

GebReportingSpecを継承することで、実行終了時に自動的にキャプチャが取得されます。

```src/test/groovy/geb/nyasba/sample/story/SampleSearchGeb.groovy
package geb.nyasba.sample.story

import geb.nyasba.sample.page.TopPage
import geb.spock.GebReportingSpec
import spock.lang.Unroll

class SampleSearchGeb extends GebReportingSpec{

    @Unroll("#keywordを検索する")
    def "BIGLOBE検索を行う"( String keyword ){
		
		expect:
            // TopPage にアクセスする
			to TopPage

            // TopPage にアクセスできたことを確認
            at TopPage

            // 検索キーワードにkeywordを入力
            searchKeyword.value(keyword)

            // TOP画面をキャプチャにとる
            report("検索画面")

            // 検索ボタンをクリック
            searchButton.click()

            // 終了（この時点のキャプチャも自動的に取られている）

		where :
            // expectの処理を以下のパラメータ(keyword)で何度も繰り返す。複数定義も可能
			keyword << ["geb", "spock"]
	}
}
```

#### 検索用のトップページに相当するオブジェクト

```src/test/groovy/geb/nyasba/sample/page/TopPage.groovy
package geb.nyasba.sample.page

import geb.Page

/**
 * Webサイト１ページ単位で作成するageObject
 */
class TopPage extends Page {

    // to TopPage でアクセスするURLを定義
	static url = "http://www.biglobe.ne.jp/"

    // at TopPage で満たすべきassert条件を記載
	static at = { title == "BIGLOBE" }

    // TopPageのコンテンツ
	static content = {

        // 検索キーワードのテキストボックスはid=txtbox
		searchKeyword { $('#txtbox') }

        // 検索ボタンはid=search-btn
		searchButton  { $('#search-btn') }
	}
}
```

## 実行
IntellijIDEAでインポートし、SampleSearchGebを実行するだけです。
自動でChromeが立ち上がり、自動でキャプチャが取得され、report配下に格納されます。


## まとめ
gebを使って画面の表示確認作業を楽にする方法を紹介しました。

gebは他にもいろいろな使い方ができると思います。今回は紹介しませんでしたが、別のブラウザを実施することなども簡単にできます。興味のある方は調べてみてください。

ブラウザを使っていれば導入できる内容ですのでぜひチャレンジを！

## 参考にしたもの
[GebではじめるWebテスト 〜第1回 導入編〜](http://beta.mybetabook.com/showpage/4f27c8cc0cf26106dca875c8)
[The Book of Geb](http://www.gebish.org/manual/0.9.2/)