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

  • 45
    Like
  • 2
    Comment
More than 1 year has passed since last update.

初投稿です。

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

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

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

Gebとは

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

詳細な説明はこちらをご覧ください(英語)

試した環境

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

  • 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('[\\\\/:\\*?\\"<>\\|]', '_')
        }
    },
    new ScreenshotReporter(){
        @Override
        protected escapeFileName(String name) {
            name.replaceAll('[\\\\/:\\*?\\"<>\\|]', '_')
        }
    }
)

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

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サイト1ページ単位で作成する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回 導入編〜
The Book of Geb