Gebで画面遷移をテストする

Geb Advent Calendar6日目です。本日はGebでタウンワークマガジンを簡単にテストしてみます〜！

#開発環境

• Java1.8
• sdkmanを使ってgroovyをインストール
• IDEはIntelliJ IDEAを利用

#サンプルを動かす
まずはGebになれるためにサンプルコードを動かしてみます。今回使ったのはこちら→ geb-example-gradle
さっそくcloneし、readmeに書いてあるようにテストを走らせてみました。chromeだけでテストしたいので./gradlew chromeTestを実行すると、chromeが自動的に立ち上がり下記のようにテストが無事に実行されました。

$ ./gradlew chromeTest
:compileJava UP-TO-DATE
:compileGroovy UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:compileTestJava UP-TO-DATE
:compileTestGroovy UP-TO-DATE
:processTestResources UP-TO-DATE
:testClasses UP-TO-DATE
:downloadChromeDriver UP-TO-DATE
:unzipChromeDriver UP-TO-DATE
:chromeTest

BUILD SUCCESSFUL

Total time: 34.545 secs

サンプルのテストコードはgeb-example-gradle/src/testにあるので、今回はこちらを元にテストコードを書いていきます。
テスト実行や結果の確認は、Geb Advent Calendar2日目 posaunehmさんが書いてくれていたので見ていただければと思います。

#タウンワークマガジンサイトをテストする
タウンワークマガジンは、アルバイト・パートなどの求人サイトであるタウンワークの記事コンテンツサイトです。さっそくこのサイトのナビゲーションバーにあるメニュー「仕事ノウハウ」をタップして画面遷移するかテストしてみます。

##準備
まず要件を整理すると下記。

• テスト対象
  • タウンワークマガジン
• やりたいテスト
  • 「仕事ノウハウ」ページへ遷移できるかテスト
• 必要なページオブジェクト
  • 「タウンワークマガジントップ」ページ
  • 「仕事ノウハウ」ページ

では、準備ができたところで早速書いてきましょう(๑˃̵ᴗ˂̵)و

##1. サンプルコードにテスト対象をセット

src/test/resouces/GebConfig.groovyにあるbaseUrlにタウンワークマガジンのURLを置き換えます。

GebConfig.groovy

baseUrl = "https://townwork.net/magazine/"

##2.「仕事ノウハウ」ページへ遷移できるかテストを作成
下記のようにテストを作成しました。

TransitToKnowHowTopSpec.groovy

package spec.functional.transit

import geb.spock.GebReportingSpec
import page.KnowHowPage
import page.TownWorkMagazineTopPage

class TransitToKnowHowTopSpec extends GebReportingSpec {

    def "タウンワークマガジントップから仕事ノウハウの記事一覧に遷移できる"() {
        given: 'タウンワークマガジントップを表示し'
        to TownWorkMagazineTopPage

        when: '仕事ノウハウを選択すると'
        knowHowMenu.click()

        then: '仕事ノウハウの記事一覧ページに遷移する'
        at KnowHowPage
    }
}

↑のコードは、最初whenにタウンワークマガジントップを表示し仕事ノウハウを選択するとを合わせてに入れていたら、PoohSunnyくんから「タウンワークマガジントップにいることは事前準備にあたるとしたらgivenじゃない？」とspockにあるgiven-when-thenのGherkin記法を教えてもらいました。綺麗になった！

##3. ページオブジェクトを作成
次に、遷移前のページ「タウンワークマガジントップ」と、遷移後のページ「仕事ノウハウ」のオブジェクトを下記のように作成しました。

TownWorkMagazineTopPage.groovy

package page

import geb.Page

class TownWorkMagazineTopPage extends Page {

    static at = { title == "アルバイトや転職に役立つ情報が満載！最新のお仕事ニュースなら | タウンワークマガジン" }

    static content = {
        globalNav { $("nav", class: "global") }
        knowHowMenu { globalNav.find("a", href: "//townwork.net/magazine/knowhow/") }
    }
}

KnowHowPage.groovy

package page

import geb.Page

class KnowHowPage extends Page {

    static at = { title.startsWith("仕事探し・応募面接・入社後・制度ノウハウのまとめ") }

    static content = {
        knowHowMenu { $("h1", class: "global") }
    }
}

ナビゲーション要素を保持する変数（globalNav ）を作る場合に、groovyだとメソッドで記述することはびっくりしました。

#4. テスト実行
最終的なファイル構成は下記の感じになりました。

さっそくテストを実行すると、、、

$ ./gradlew chromeTest
:compileJava UP-TO-DATE
:compileGroovy UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:compileTestJava UP-TO-DATE
:compileTestGroovy
:processTestResources UP-TO-DATE
:testClasses
:downloadChromeDriver UP-TO-DATE
:unzipChromeDriver UP-TO-DATE
:chromeTest

BUILD SUCCESSFUL

Total time: 12.295 secs

chromeが立ち上がりテストが動きました〜！テストが動くと気持ちいいですね。

以上