初投稿です。
システムテストや受入テストなどで大量のテストパタンを１つ１つ画面表示確認している人も多いかと思います。私も昔は途方もない作業を手で行っていましたが、数十パタンもあると病んできますよね^^;
今回は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ビルドファイル
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の設定などを行っています。実行するブラウザを変更したい場合はここに書くことになります。
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を継承することで、実行終了時に自動的にキャプチャが取得されます。
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"]
}
}
検索用のトップページに相当するオブジェクト
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は他にもいろいろな使い方ができると思います。今回は紹介しませんでしたが、別のブラウザを実施することなども簡単にできます。興味のある方は調べてみてください。
ブラウザを使っていれば導入できる内容ですのでぜひチャレンジを！