Selenium
Groovy
Geb

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

More than 3 years have 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