【入門】Geb+SpockではじめるWebテスト / [Introduction] Let's start Web Browser Automation Testing using Geb, Spock and Groovy

【入門】Geb+SpockではじめるWeb自動テスト / [Introduction] Let's start Web Browser Automation Testing using Geb, Spock and Groovy

著者：ふじさわゆうき
Author: Yuki Fujisawa

更新日:2015/10/25
Updated date:2015/10/25

Mac版はこちら(2016/11/13 作成)

super-apparel-engineer.hatenablog.com

目次 / Table of contents

Gebとは / What's Geb ?
Gebのメリット / Why we have to use Geb ?
開発環境構築(Groovy Mars) / Development Environment Building (Groovy Mars)
サンプルプログラム実装(Geb+Spock+Maven) / Sample program implementation (Geb + Spock + Maven)
クロスブラウザテストの設定と実行 / Setting up and running of the cross-browser test
- 【入門】Geb+SpockではじめるWebテスト～クロスブラウザテスト編～ / Setting up and running of the cross-browser test - yfj2’s Automatic Web Test Related Blog
テスト失敗時のスクリーンショット出力 / How to output screen-shot of test failure? (2014/11/09 update)
- 【入門】Geb+SpockではじめるWebテスト～スクリーンショット編～ - yfj2’s Automatic Web Test Related Blog
Mavenコマンドによるテスト実行 / How to run test by Maven command?(2014/11/29 update)
- 【入門】Geb+SpockではじめるWebテスト～Maven編～ / How to run test by Maven command using Geb+Spock? - yfj2’s Automatic Web Test Related Blog
"GitHub + Jenkins"によるWEBテストの自動化 / Automation of WEB tests by use to the "GitHub + Jenkins"(2014/11/30 update)
- 【入門】Geb+SpockではじめるWebテスト～GitHub + JenkinsによるWEBテスト自動化編～ - yfj2’s Automatic Web Test Related Blog
GebとSpockによるWebテストTips集 / Web test Tips collection about Geb and Spock(2015/01/25 update)
- GebとSpockによるWebテストTips集 - yfj2’s Automatic Web Test Related Blog

1. Gebとは / What's Geb ?

Groovy言語で書かれたWebテスト自動化フレームワーク / Web test automation framework written in Groovy language
SeleniumWebDriverで挙がっている問題（例えば、ログインボタンを押すだけでもおおくの記述が必要など）を解決している / Geb solved Selenium Web Driver problems , for example we need only even many description press the login button

2. Gebのメリット / Why we have to use Geb ?

WebDriverと比較して、より短く、よりわかりやすいテストを記述することができる。Gebの提供するナビゲーターAPI(Navigator API)というjQueryのようなAPIがそれを可能にしている / Compared to WebDriver, shorter, and can be described more meaningful test. Navigator API like jQuery is allow it
- Navigator APIの詳細 ⇒ 【Geb】ナビゲーターAPIとは? / What is Navigator API ? - yfj2’s Automatic Web Test Related Blog
Page Object patternをサポートしているので画面変更に強いテストを作成することができる / Since Page Object supports pattern, it is possible to create a test that we can handle screen change.
- Page Object patternの詳細 ⇒ 【Geb】ページオブジェクトパターンとは? / What is Page Object pattern ? - yfj2’s Automatic Web Test Related Blog
Mavenで提供されるのでテスト作成の環境構築が簡単にできる / It is possible to easily environment construction of test creation because it is provided by Maven
GroovyなのでJavaと互換性があり、SeleniumWebDriverの既存資産をそのまま利用することができる / Since using Groovy has Java-compatible, it is possible to directly utilize existing SeleniumWebDriver's assets
Moduleを使うことで共通部分を部品化することができる / By using the Module, it can be part of a common portion
- Moduleの詳細 ⇒ 【Geb】モジュールとは? / What isModules ? - yfj2’s Automatic Web Test Related Blog

3. 開発環境構築(Eclipse Mars) / Development Environment Building (Eclipse Mars)

Java JDK 8のインストール / Installation of Java JDK 8

Download jdk-8u60-windows-x64.exe(2015/10/25 time)
- Java SE Development Kit 8 - Downloads
Install
- C:\Program Files\Java\jdk1.8.0_66
Environment variable settings
- New Variable
  - JAVA_HOME : C:\Program Files\Java\jdk1.8.0_66
- Path
  - %JAVA_HOME%

Eclipseのインストール / Installation of Eclipse

下記、URLから"Eclipse Mars for Java and DSL Developers Windows 64-bit版"をダウンロード / First You download the "Eclipse Mars for Java and DSL Developers Windows 64-bit version" from URL.
- Eclipse IDE for Java and DSL Developers | Packages

Eclipseのメモリ設定 / Memory setting of Eclipse

eclipse-dsl-mars\eclipse.ini
Xms256m -> Xms512m
Xmx1024m -> Xmx2048m

-startup
plugins/org.eclipse.equinox.launcher_1.3.100.v20150511-1540.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.300.v20150602-1417
-product
org.eclipse.epp.package.dsl.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.7
-Xms512m
-Xmx2048m

Eclipse起動 / Start Eclipse

eclipse.exeを実行する / You run eclipse.exe
- eclipse-dsl-mars\eclipse.exe
Select of workspace
- (ex)C:\gebworkspace

Groovy Pluginのインストール / Installation of Groovy Plugin

Help > Install New Software... > Add...
- Name: GRECLIPSE-e4.5
- Location: http://dist.springsource.org/snapshot/GRECLIPSE/e4.5

Java JDK 8の設定 / Setting of Java JDK 8

4. サンプルプログラム実装(Geb+Spock+Maven) / Sample program implementation (Geb + Spock + Maven)

GoogleWikipediaTest Projectの新規作成とMavenの設定 / GoogleWikipediaTest Project New Create and setting of Maven

File > new > other... > Maven > Maven Project
pom.xmlの編集 / setting of pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>mygroup</groupId>
	<artifactId>GoogleWikipediaTest</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>GoogleWikipediaTest</name>
	<dependencies>
		<dependency>
			<groupId>org.codehaus.groovy</groupId>
			<artifactId>groovy-all</artifactId>
			<version>2.4.3</version>
		</dependency>
		<dependency>
			<groupId>org.spockframework</groupId>
			<artifactId>spock-core</artifactId>
			<version>1.0-groovy-2.4</version>
		</dependency>
		<dependency>
			<groupId>org.gebish</groupId>
			<artifactId>geb-spock</artifactId>
			<version>0.12.2</version>
		</dependency>
		<dependency>
			<groupId>org.seleniumhq.selenium</groupId>
			<artifactId>selenium-firefox-driver</artifactId>
			<version>2.48.2</version>
		</dependency>
		<dependency>
			<groupId>org.seleniumhq.selenium</groupId>
			<artifactId>selenium-support</artifactId>
			<version>2.48.2</version>
		</dependency>
		<dependency>
			<groupId>org.seleniumhq.selenium</groupId>
			<artifactId>selenium-chrome-driver</artifactId>
			<version>2.48.2</version>
		</dependency>
		<dependency>
			<groupId>org.seleniumhq.selenium</groupId>
			<artifactId>selenium-ie-driver</artifactId>
			<version>2.48.2</version>
		</dependency>

	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-surefire-plugin</artifactId>
				<version>2.18</version>
				<configuration>
					<includes>
						<include>**/*Test.class</include>
						<include>**/*Spec.class</include>
					</includes>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<encoding>UTF-8</encoding>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.gmavenplus</groupId>
				<artifactId>gmavenplus-plugin</artifactId>
				<version>1.5</version>
				<executions>
					<execution>
						<goals>
							<goal>addSources</goal>
							<goal>addTestSources</goal>
							<goal>generateStubs</goal>
							<goal>compile</goal>
							<goal>testGenerateStubs</goal>
							<goal>testCompile</goal>
							<goal>removeStubs</goal>
							<goal>removeTestStubs</goal>
						</goals>
						<configuration>
							<providerSelection>1.8</providerSelection>
							<sourceEncoding>UTF-8</sourceEncoding>
						</configuration>
					</execution>
				</executions>
				<dependencies>
					<dependency>
						<groupId>org.codehaus.groovy</groupId>
						<artifactId>groovy-all</artifactId>
						<version>2.4.3</version>
					</dependency>
				</dependencies>
			</plugin>
		</plugins>
		<pluginManagement>
			<plugins>
				<!--This plugin's configuration is used to store Eclipse m2e settings 
					only. It has no influence on the Maven build itself. -->
				<plugin>
					<groupId>org.eclipse.m2e</groupId>
					<artifactId>lifecycle-mapping</artifactId>
					<version>1.0.0</version>
					<configuration>
						<lifecycleMappingMetadata>
							<pluginExecutions>
								<pluginExecution>
									<pluginExecutionFilter>
										<groupId>org.codehaus.gmavenplus</groupId>
										<artifactId>gmavenplus-plugin</artifactId>
										<versionRange>
											[1.5,)
										</versionRange>
										<goals>
											<goal>addSources</goal>
											<goal>addTestSources</goal>
											<goal>generateStubs</goal>
											<goal>compile</goal>
											<goal>testGenerateStubs</goal>
											<goal>testCompile</goal>
											<goal>removeStubs</goal>
											<goal>removeTestStubs</goal>
										</goals>
									</pluginExecutionFilter>
									<action>
										<ignore></ignore>
									</action>
								</pluginExecution>
							</pluginExecutions>
						</lifecycleMappingMetadata>
					</configuration>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
</project>

Groovyプロジェクトへの変換 / Convert to Groovy Project

GoogleWikipediaTest Project > Configure > Convert to Groovy Project

Maven Update Project

GoogleWikipediaTest Project > Maven > Update Project

Gebスクリプトの作成 / Creating Geb script

下記のようなフォルダとファイルを作成します / Create a folder and files, such as the following
- GoogleWikipediaTest/src/main/groovy/GoogleWikipediaMain.groovy
- GoogleWikipediaTest/src/main/groovy/module/GoogleSearchModule.groovy
- GoogleWikipediaTest/src/main/groovy/page/GoogleHomePage.groovy
- GoogleWikipediaTest/src/main/groovy/page/GoogleResultsPage.groovy
- GoogleWikipediaTest/src/main/groovy/page/WikipediaPage.groovy
- GoogleWikipediaTest/src/test/groovy

Java Build Pathの設定もします / You also set Java Build Path
- GoogleWikipediaTest > Properties > Java Build Path > Add Folder...
  - src/main/groovy , src/test/groovy

GoogleWikipediaMain.groovy

import geb.Browser
import page.GoogleHomePage
import page.GoogleResultsPage

Browser.drive {
	to GoogleHomePage
	search.field.value("wikipedia")
	waitFor { at GoogleResultsPage }
	firstResultLink.click()
}

GoogleSearchModule.groovy

package module

import geb.Module

class GoogleSearchModule extends Module {
	// a parameterised value set when the module is included
	def buttonValue

	// the content DSL
	static content = {
		// name the search input control “field”, defining it with the jQuery like navigator
		field { $("input", name: "q") }
	}
}

GoogleHomePage.groovy

package page

import geb.Page
import module.GoogleSearchModule

class GoogleHomePage extends Page {

	// pages can define their location, either absolutely or relative to a base
	static url = "http://google.com/ncr"

	// “at checkers” allow verifying that the browser is at the expected page
	static at = { title == "Google" }

	static content = {
		// include the previously defined module
		search { module GoogleSearchModule, buttonValue: "Google Search" }
	}
}

GoogleResultsPage.groovy

package page

import geb.Page
import module.GoogleSearchModule

class GoogleResultsPage extends Page {
	static at = { title.endsWith "Google Search" }
	static content = {
		// reuse our previously defined module
		search { module GoogleSearchModule}

		// content definitions can compose and build from other definitions
		results { $("div.g") }
		result { i -> results[i] }
		resultLink { i -> result(i).find("a") }
		firstResultLink { resultLink(0) }
	}
}

WikipediaPage.groovy

package page

import geb.Page

class WikipediaPage extends Page {
	static at = { title == "Wikipedia" }
}

Gebの実行 / Execution of Geb

GoogleWikipediaMain.groovy > Run As > Groovy Script
'http://en.wikipedia.org/wiki/Main_Page'が起動すればOK / If you can invoke the 'http://en.wikipedia.org/wiki/Main_Page' , This test is OK .

Spockの実装 / Creating spock script

下記のようなフォルダとファイルを作成します / Create a folder and files, such as the following
- GoogleWikipediaTest/src/test/groovy/GoogleWikipediaMainTest.groovy
GoogleWikipediaMainTest.groovy

import geb.spock.GebSpec
import page.GoogleHomePage
import page.GoogleResultsPage
import page.WikipediaPage

class GoogleWikipediaMainTest extends GebSpec {

	def "first result for wikipedia search should be wikipedia"() {
		given:
		to GoogleHomePage

		expect:
		at GoogleHomePage

		when:
		search.field.value("wikipedia")

		then:
		waitFor { at GoogleResultsPage }

		and:
		firstResultLink.text() == "Wikipedia"

		when:
		firstResultLink.click()

		then:
		waitFor { at WikipediaPage }
	}
}

Spockの実行 / Execution of Geb

GoogleWikipediaMainTest.groovy > Run As > JUnit Test
テストが成功すればOK / If the test is successful OK

5. クロスブラウザテストの設定と実行 / Cross-browser test setting and running

以下、記事を参考に設定＆実行する
【入門】Geb+SpockではじめるWebテスト～クロスブラウザテスト編～ / Setting up and running of the cross-browser test - yfj2’s Automatic Web Test Related Blog

6. テスト失敗時のスクリーンショット出力 / How to output screen-shot of test failure?

以下、記事を参考に設定＆スクリーンショット出力する
【入門】Geb+SpockではじめるWebテスト～スクリーンショット編～ - yfj2’s Automatic Web Test Related Blog

7. Mavenコマンドによるテスト実行 / How to run test by Maven command?

以下、記事を参考にMavenコマンドでテストを実行する。
Mavenコマンドでテスト実行をできるようにしておくことでJenkinsとの連携が可能となる。
【入門】Geb+SpockではじめるWebテスト～Maven編～ / How to run test by Maven command using Geb+Spock? - yfj2’s Automatic Web Test Related Blog

8. "GitHub + Jenkins"によるWEBテストの自動化 / Automation of WEB tests by use to the "GitHub + Jenkins"

以下、記事を参考に"GitHub + Jenkins"によるWEBテストの自動化を実現する
【入門】Geb+SpockではじめるWebテスト～GitHub + JenkinsによるWEBテスト自動化編～ - yfj2’s Automatic Web Test Related Blog

9. GebとSpockによるWebテストTips集 / Web test Tips collection about Geb and Spock

以下、記事を参考にしつつ、自分でテストコードを作成してみてレベルアップする
GebとSpockによるWebテストTips集 - yfj2’s Automatic Web Test Related Blog

yfj2’s Automatic Web Test Related Blog

yfj2のWEBテスト自動化に関わるブログ