第5回勉強会

第 5 回　勉強会
～ Web での自動結合テストへの
いざない Groovy から Spock まで～
2016/2/26

今日やること
– 前回までは、 Java の文法、 Spring を使った
Web アプリケーションの構築、単体テスト、
JUnit を使った Unit テストのお話しでした。今日からはここ

Web アプリケーションのテストを
自動化するために
• Selenium Web Driver 　
（ http://www.seleniumhq.org/ ）
　プログラムを書いてブラウザテストを自動的に実行す
るためによく用いられる
– 特徴１：マルチ言語
• Java 　 C ＃　 PHP Python 　 Ruby 　 Perl JavaScript 　
など
– 特徴２：マルチブラウザ対応
• Firefox 　 InternetExplorer 　 Safari 　 Opera 　 Chrome
※Selenium の情報の探し方
http://qiita.com/gluelan2013/items/a
9096d052dc2ab660728

Web アプリケーションのテストを
自動化するために
• なぜ、 Selenium へのダメだし？
– 　コーディングが非常に大変
• 初心者に難しい
• 自動化テストを安定動作させるだけでも大変
– 　 Selenium Web Driver が高速ではない
• テストスローの問題を招きやすい
– 　まだ、 Edge にドライバが対応していない
– 　スマートフォン、タブレットに対応しきれ
ていない
• Selenium3 に期待したいがいつ出るのだろう

Groovy + Spock + Geb
• Groovy
– Java を極限まで簡単にしたスクリプト言語
– 1 時間で学べる学習コストの低さ
– Java のクラスライブラリは全部呼び出せる
• Geb
– ゲブではなくジェブと読みます
– Groovy で動く Selenium WebDriver のラッパー
– jQuery のような Locator を指定して記述
– コード量が少なく、すっきり

Groovy + Spock + Geb
• ツールの立ち位置をマトリックスにしてみ
ると
ブラウザ操作 WebDriver Geb
テスティング
フレームワーク
JUnit
TestNG
Spock
言語 Java Groovy
マルチブラウザ対応
データ駆動テスト
強力な Assert
なんとか Geb でテストケースを
書いてブラウザテストを自動実行したい

Groovy のインストール方法
• http://www.groovy-lang.org/download.html
– Windows インストーラでインストール
• ソース配布などもあるが、バイナリ版の Windows イ
ンストーラでのインストールが一番楽
– Build ツールからインストール
• Maven 、 Gradle
– IDE のプラグイン
• Eclipse,NetBeans,Intelli-J など各 IDE にプラグインあり
• http://www.groovy-lang.org/ides.html

Groovy のインストール方法
• Eclipse 　 Plugin
– こちらを詳しくみると Eclipse への対応
https://github.com/groovy/groovy-eclipse/wiki
– EclipseMars(4.5.1) 対応
http://dist.springsource.org/snapshot/GRECLIPSE/e4.5/

Groovy の文法を 1 時間でマスターする
• 世界最小の一文から
　セミコロンはいらない　（あっても動作す
る）
　かっこ（）もいらない　（あっても動作す
る）
‘’　さすがにはないと　下記の Exception を吐く
。
　
　
println 'Hello'
Exception thrown
groovy.lang.MissingPropertyException: No such property:
Hello for class: Helllo
at Helllo.run(Helllo.groovy:1)

• 世界最小の一文から
Java Class
Groovy Script
　
　
println 'Hello'
public class Main {
public static void main(String[] args) {
System.out0.println("Hello");
}
}

• 型宣言
　型宣言はいらない　 ( 動的型つけ言語）
　
Java の型はそのまま使える。型を宣言してもよ
い
s = 'Hello'
println s
String s = 'Hello'
println s
def s = 'Hello'
println s

• 　テキストリテラル
”“ を付けたほうが変数が評価されて展開され
る
　他のスクリプト言語でもよくある動作です
　
msg = “<<This is message>>”
println “${msg}”
println ‘${msg]’

• 　演算子
これなんて出力されると思います？
　
msg = "Hello"
msg -= "l"
msg *= 3
println msg

• 　クラスとメソッド
　　　　コンストラクタ、インスタンス変数、メ
ソッド
　　　　オブジェクト作成の概念は Java と同じ
class Helo {
def msg
Helo(s){
msg = s
}
def sayHello(){
println msg
}
}
new Helo(" こんにちは ").sayHello()

• 　クラスとメソッド
　
　　　　　クラスの継承や抽象クラスの
　　　　　考え方は Java と同じ
abstract class Abstract {
String name
abstract def abstractMethod()
def concreteMethod() {
println 'concrete'
}
}
class Concreate extends Abstract {
def abstractMethod(){
println "AbstractMethod 実装 "
}
}
concrete = new Concreate();
concrete.abstractMethod();

• リストとマップ
　　　　リストとマップはこんな風に書きます。
　　　　
　　　　これ、なんて出力されると思いますか
　　　　こんなリストの演算もできます。
arr = [1,2,3]
arr = ['one':1, 'two':2, 'three':3]
arr = [1,2,3]
arr += [4,5]
arr -= [2,4]
arr *= 2
println arr

• 条件分岐
　　　　
　　　　 if 文はこのように書きます。
　　　　 Java と同じですね。
num = new Random().nextInt(100)
if (num % 2){
println "${num} は、奇数 "
} else {
println "${num} は、偶数 "
}

• 条件分岐
　　　　
　　　　
　　　　 case 文は Java とちょっとちがいますね
。
　　　　より強力です。
　　　　 case の中に配列が渡されています。
val = new Random().nextInt(10)
switch(val){
case [0,2,4,6,8]:
println "${val} は、偶数 "
break
case [1,3,5,7,9]:
println "${val} は、奇数 "
}

• 繰り返し
　　　　
　　　　 for 文も Java とほとんど同じですね。
　　　
arr = [1,2,3,4,5]
n = 0
for(item in arr){
println("$n + $item = " + (n + item))
n += item
}
println " 合計： $n"

• クロージャ
　　　　こんな風に関数を書きます。
　　　　　
　　　　　変数 total に関数 each の中からアクセスして
います。
　　　　　さらに it には１から 100 までの数字が外から
　　　　　渡されています。
　　　　　関数ブロックの外の変数を操作できる関数の
msg = {str -> println " こんにちは、 ${str} さん！ " }
msg(' 太郎 ')
total = 0
(1..100).each { total += it }
println total

• クロージャ　例をもう一つ
　　　　
　　　引数の型が異なっても大丈夫。　
　　　　　
　
　　　引数が可変長でも大丈夫。
def adder = {a,b -> a + b}
assert adder(1,2) == 3
assert adder(‘a’,’b’) == ‘ab’
def sum = { ... elements -> elements.sum()}
assert sum(1,2) == 3
assert sum('a', 'b' ,'c') == 'abc'

• クロージャ　例をさらに一つ
　　　　
　　　　引数にデフォルト値を設定
　
　　　　　
　
　　　
def mult = {int a, int b = 10 -> a * b}
assert mult(2,3) == 6
assert mult(5) == 50

• クロージャ　例をまだまだ
　　　　
　　　　
　　　　　　
Persons の配列から年齢が１ 8 歳より下のオブジェクトを取り
出す。　　　　　　　　　　　　　　　　　　　　　　　　
@groovy.transform.Immutable
class Person {
String name
int age
}
def Persons = [
new Person('Guillaume',36),
new Person('Marion',6),
new Person('Erine',1)
]
def names =
Persons.findAll { it.age < 18 }
.collect { it.name.toUpperCase()}
.sort()
.join(',')

• クロージャ　例　ファイル読み書き
　　　　
　　　　
　　　　 Persons の配列から年齢が１ 8 歳より下のオブジェ
クトを取り出す。
　　　　　　　　　　 Java で書くと結構複雑になりますよ。
new File('input.txt').withReader { r ->
new File('output.txt').withWriter { w ->
r.eachlinie { line ->
if (line.contains('Groovy'))
w << line.toUpperCase()
}
}
}

• クロージャ　例　リストと組み合わせ
た例
　　　　
　　　　
　　　　 list ’の配列に d’ を追加した後、クロージャ
を使った
　　　　処理を継続
def list =['a','b','c']
list << 'd'
assert list.contains('d')
assert list.findAll { it.startsWith 'a' }.size() == 1
assert list.collect { it.toUpperCase() } == ['A','B','C','D']
assert list.inject(''){a, b -> a + b} == 'abcd'

• オープンクラス
　　　
　　
　　　　 Expando というクラスを new してオブジェク
トを
　　　　作成するとオブジェクトの作成の後にインスタ
ンス変数や、メソッドを追加できる。
　　　　　
　　　
obj = new Expando()
obj.name = "taro"
obj.message = " こんにちは！ "
obj.say = { name = it println message + name }
obj.say(" 花子さん ")

• デフォルトで import されるパッケージ
– java.io.*
– java.lang.*
– java.math.BigDecimal
– java.math.BigInteger
– java.net.*
– java.util.*
– groovy.lang.*
– groovy.util.*

• Java
　　　　　
　　　
Public class Greeter {
private String owner;
public String getOwner() {
return owner;
}
public void setOwner(String owner) {
this.owner = owner;
}
public String greet(String name) {
return “Hello “ + name + “, I am “ + owner;
}
}
Greeter greeter = new Greeter() ;
greeter.setOwner(“Guillaume”);
System.out.println(greeter.greet(“Marion”));
この Java コードが

• Groovy Script
　　　　　
　　　
class Greeter {
String owner
String greet(String name) {
“Hello ${name}, I am ${owner}”
}
}
def greeter = new Greeter(owner: “Guillaume”)
println greeter.greet(“Marion”)
こんなに簡単な Script に

Groovy を使った Web システムのテスト
• PowerAssert
　　　　　
　　　
def x = [1,2,3,4,5]
assert (x << 6) == [6,7,8,9,10]
Exception thrown
Assertion failed:
assert (x << 6) == [6,7,8,9,10]
| | |
| | false
| [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6]
at Helllo.run(Helllo.groovy:2)

Groovy を使った Web システムのテスト
• Spock を使った記述方法
　　　　　
　　　
@Grab('org.spockframework:spock-core:0.7-groovy-2.0')
import spock.lang.*
class MathSpec extends Specification {
def "maximum of two numbers"() {
expect:
Math.max(a,b) ==c
where:
a|b||c
1|3||3
7|4||7
0|0||0
}
}
ラベルを使った期待値の記述方法
テストにあった
名前をメソッド名
をつける
テストデータの組み合わせを
このように表現する

今までの Groovy 、 Spock の知識を踏まえて、
Geb を使って Web システムの自動実行をする

Geb でできること
1. Cross 　 Browser ( クロスブラウザ）
2. ｊ Quey-like API (jQuery 的な API)
3. Page 　 Objects 　（ページオブジェクト）
4. Asynchronus Pages( 非同期ページの対応 )
5. Testing( テスティング）
6. Build Integration ( ビルドツールとの統合）
7. Screen Scraping （スクリーンキャプチャ）

コードで簡単さを体験。
import geb.Browser
/**
* フォームに入力する簡単なコード
*/
Browser.drive {
go "http://myapp.com/login"
　　 // 見出しが Please 　 Login であることを確認
assert $("h1").text() == "Please Login"
$("form.login").with {
username = "admin"
password = "password"
login().click()
}
　　 assert $("h1").text() == "Admin Section"
}
Geb の API を使って簡単
に
ｊ Query のセレクタのよ
うな記述
次のページの h1 を確認し
て
Admin 　 Section なら OK

PageObject パターンとは
 アプリケーションの画面を１つのオブジェクトとしてモデリングするデザインパターン
 Seleniumの公式サイトで保守性の高いテストコードを作成する書き方として推奨
テストコードに保守性？
テストを継続的に実行していくということを考えると、製品コードの画面変更に合わせて常にテストコードを迅速に、低コストで保守していく必要がある。
テストの自動化のメリットは、同じテストを何度も実行する場合でないと薄いと考えると、テストコードが保守性に強いことは絶対に必要。

Seleniumの公式サイトに記載してあるPageObjectパターンの原則を紹介
・The public methods represent the services that the page offers
（publicメソッドは、ページが提供するサービスを表す）
・Try not to expose the the internals of the page
（ページの内部を公開しないこと）
・Generally don’t make assertions
（原則としてassertionを行わないこと）
・Methods return other PageObjects
（メソッドは他のPageObjectsを返す）
・Need not represent an entire page
（ページ全体を表す必要はない）
・Different results for the same action are modelled as different as different methods
（同じアクションに対して異なる結果となる場合には異なるメソッドとしてモデル化する）

実際にSeleniumで記述したコード例を見てみましょう。
コードは大まかに２種類
1.画面を操作するためのPageクラス
画面やダイアログの単位で作成
ボタンやテキストフィールドなどのHTML要素を保持
各要素を操作するためのAPIを定義
２．Pageクラスを操作してテストシナリオを記述するクラス
1. 原則としてPageクラスのAPIだけを呼ぶ
2. 直接HTML要素を操作しない

public class 商品検索ページ {
WebDriver driver;
// ページ内の要素を定数として定義
By textKeyword = By.name("keyword");
By buttonSearch = By.id("search");
public 商品検索ページ (WebDriver driver) {
this.driver = driver;
}
// そのページで行える動作をメソッドとして定義
public 商品検索ページ商品検索を行う (String
keyword) {
driver.findElement(textKeyword).sendKeys(keyword);
driver.findElement(buttonSearch).click();
return this;
}
public 商品詳細ページ商品詳細ページに遷移する
(String name) {
// （詳細ページに遷移する処理）
return new 商品詳細ページ (driver);
}
}
他の PageObject パターン
のページを返す、メソッド
実際に HTML のページ要素
に触るのはこちらだけ
アプリケーションの
レイアウト変更には
かなり強くなる
商品検索ページをモデル化したクラス

public class 商品詳細ページ {
WebDriver driver;
public 商品詳細ページ (WebDriver driver) {
this.driver = driver;
}
public 商品詳細ページ商品をカートに入れ
る () {
// （カートに入れる処理）
return this;
}
public 購入確認ページ購入確認画面に遷移
する () {
// （画面遷移の処理）
return new 購入確認ページ (driver);
}
}
商品詳細ページをモデル化したクラス

@Before
public void シナリオ実行前に必要な処理
() {
(new ログイン画面 (driver))
. ログインする ()
. 商品画面に遷移する ();
}
@Test
public void 購入フローのテスト () {
(new 商品画面 (driver))
. 商品検索を行う (" 商品名 ")
. 商品詳細画面に遷移する ()
. 商品をカートに入れる ()
. 購入確認画面に遷移する ()
. お届け先を選択する ( 自宅 )
. 支払い方法を選択する ( 代引 )
. 注文確認画面に遷移する ()
. 注文終了後にホーム画面に遷移する ();
}
２つのページをテストする
テストケース
メソッドチェーンを用いて
かなりわかり安い記述になる。

Geb でも PageObject パターン
GebはもちろのんPageObjectパターンをきちんとサポートしています。
　　　　　
　　　
　
class ExamplePage extends Page {
static url = "http://www.example.com/"
static at = { title = "Example Page"}
static content = {
textUserName = {$("input[name=user_name")}
textmailAddress = {$("input[name=mail_address")}
}
}
Browser.drive {
to ExamplePage
at ExamplePage
}
セレクタを用いた
アクセスの仕方に
なるのがまず大きな違い。

先ほどとは違うGebページオブジェクトパターンの例
　　　　　
　　　
　
GoogleHomePage （ Google の検索ページ用 PageObject ）
import geb.*
class GoogleHomePage extends Page {
static url = "http://google.com/?complete=0"
static at = { title == "Google" }
static content = {
//"content"のDSLは以下のように定義する
//«name» { «definition» }
searchField { $("input[name=q]") }
searchButton(to: GoogleResultsPage) { $("input[value='Google Search']") } }
void search(String searchTerm) {
searchField.value searchTerm searchButton.click()
}
}

先ほどとは違うGebページオブジェクトパターンの例
　　　　　
　　　
　
GoogleHomePage （ Google の検索ページ用 PageObject ）
class GoogleResultsPage extends Page {
static at = { waitFor { title.endsWith("Google Search") } }
static content = {
//"wait"オプションによって、Googleの検索結果ページに
//$("li.g")が表示されるまで一定時間待つことができる。
//もし、表示されなかった場合は"RequiredPageContentNotPresent" 例外が
//発生する
results(wait: true) { $("li.g") }
result { index -> results[index] }
resultLink { index -> result(index).find("a") }
}
}

Geb を使った Web システムのテスト
つべこべ言わずにいきなり体験してみましょう。
１． https://github.com/geb/geb-example-gradle
2. 　上記を clone して gradlew コマンドを実行
./gradlew.bat chromeTest
./gradlew.bat firefoxTest
./gradlew.bat phantomJsTest
To run with all, you can run:
./gradlew.bat test

Spock をもちいた記述の仕方
class LoginSpec extends GebSpec {
def "ID とパスワードを組み合わせてログインす
る "() {
setup:
to "http://www.example.com/login"
when :
$("#loginId").value("user01")
$("#password").value("pass01")
$("#login").click()
then :
at "http://www.example.com/home/"
cleanup:
}
}
ブロックを使ってテストケースを記述する

Spock をもちいた記述の仕方
class LoginSpec extends GebSpec {
def "ID とパスワードを組み合わせてログインす
る "() {
when :
$("#loginId").value(loginId)
$("#password").value(password)
$("#login").click()
then :
$("#error").text() == errorMessage
where:
loginId | password || errorMessage
"" | "pass01" || " ログイン ID を入力してく
ださい "
"user01" | "" || " パスワードを入力してくだ
さい "
"hoge" | "fuga" || "ID とパスワードの組み合
わせが正しくありません "
}
データ駆動テストのシンプルな記述の仕方

Geb を使った取り組み
どのようなことに Geb を使うか。
応用の可能性として考えられるもの。
1.Web システムのリグレッションテストの自動化
2.Web システムの疎通テストの自動化
3.Web システムのクロスブラウザ試験
4.Web システムの大量スナップショットとり
5.Web システムの受け入れテスト、結合テストの
データ準備
6.Web システムの負荷テスト
7.JavaScript のユニットテスト

参考 URL
– Groovy
• http://groovy-lang.org/
• https://speakerdeck.com/glaforge/what-makes-
groovy-groovy ( スライド )
– SPOCK
• https://code.google.com/p/spock/
– Geb
• http://www.slideshare.net/youtaroutakahashi/what
-makes-geb-groovy 　 ( スライド )
• http://www.slideshare.net/hirokotamagawa/20141
018-2selenium-40423299?next_slideshow=1 ( スラ
イド )
• http://www.gebish.org
•

第5回勉強会

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a 第5回勉強会

Semelhante a 第5回勉強会 (20)

Mais de Mugen Fujii

Mais de Mugen Fujii (17)

Último

Último (9)

第5回勉強会