概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その３０ )( Geb を 2.0 へバージョンアップする＋Firefox headless モードを使用する ) の続きです。

今回の手順で確認できるのは以下の内容です。
- テスト対象のブラウザに Headless Chrome と HtmlUnit を追加します。
- Chrome と Firefox （どちらも Headless モード）と HtmlUnit で連続してテストする gradle のタスクを作成します。

参照したサイト・書籍

ヘッドレス Chrome ことはじめ
https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja
Headless Chrome and Selenium on Windows?
https://stackoverflow.com/questions/43880619/headless-chrome-and-selenium-on-windows
SeleniumHQ/htmlunit-driver
https://github.com/SeleniumHQ/htmlunit-driver
Where to find 64 bit version of chromedriver.exe for Selenium WebDriver?
https://stackoverflow.com/questions/23081507/where-to-find-64-bit-version-of-chromedriver-exe-for-selenium-webdriver
【入門】Geb+SpockではじめるWebテスト～クロスブラウザテスト編～ / Setting up and running of the cross-browser test
http://yfj2.hateblo.jp/entry/2014/11/09/004011
ChromeDriver - WebDriver for Chrome
https://sites.google.com/a/chromium.org/chromedriver/
geb/geb-example-gradle/build.gradle
https://github.com/geb/geb-example-gradle/blob/master/build.gradle

手順

Chrome と HtmlUnit 用の Selenium WebDriver をインストールする

build.gradle を以下のように変更します。

dependencies {
    ..........

    // for Geb + Spock
    testCompile("org.gebish:geb-spock:2.0")
    testCompile("org.seleniumhq.selenium:selenium-chrome-driver:${seleniumVersion}")
    testCompile("org.seleniumhq.selenium:selenium-firefox-driver:${seleniumVersion}")
    testCompile("org.seleniumhq.selenium:htmlunit-driver:2.27")
    testCompile("org.seleniumhq.selenium:selenium-support:${seleniumVersion}")
    testCompile("org.seleniumhq.selenium:selenium-api:${seleniumVersion}")
    testCompile("org.seleniumhq.selenium:selenium-remote-driver:${seleniumVersion}")
}

以下の行を追加します。
- testCompile("org.seleniumhq.selenium:selenium-chrome-driver:${seleniumVersion}")
- testCompile("org.seleniumhq.selenium:htmlunit-driver:2.27")
HtmlUnit 用の WebDriver として selenium-htmlunit-driver がありますが、https://mvnrepository.com/ で selenium-htmlunit-driver を見てみると最新バージョンが 2016/2 にリリースされた 2.52.0 で、3.x 系がリリースされていませんでした。さすがに 3.6.0 と組み合わせるのは無理だろうと思い Web で探してみると、WebDriver compatible を謳っている htmlunit-driver が見つかり、こちらは 2017/6 に 2.27 がリリースされていましたので、htmlunit-driver をインストールすることにします。

変更後、Gradle Tool Window の左上にある「Refresh all Gradle projects」ボタンをクリックして更新します。

ChromeDriver をダウンロードして配置する

Chrome を操作するためには Firefox の geckodriver と同じように ChromeDriver が必要です。ダウンロードして配置します。

ChromeDrive の Downloads ページの Latest Release の右側に表示されている「ChromeDriver 2.33」リンクをクリックして次のページへ進んだ後、「chromedriver_win32.zip」リンクをクリックして chromedriver_win32.zip をダウンロードします。64bit版は提供されていませんが、chromedriver_win32.zip のファイルで 64bit の Windows + Chrome でも問題なく動作します。

ダウンロード後、C:\chromedriver\2.33 ディレクトリを作成した後、chromedriver_win32.zip を解凍して出来る chromedriver.exe をその下に配置します。

f:id:ksby:20171029004812p:plain

GebConfig.groovy を修正する

src/test/resources/GebConfig.groovy を以下のように変更します。

import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.chrome.ChromeOptions
import org.openqa.selenium.firefox.FirefoxDriver
import org.openqa.selenium.firefox.FirefoxOptions
import org.openqa.selenium.htmlunit.HtmlUnitDriver

System.setProperty("webdriver.gecko.driver", "C:/geckodriver/0.19.0/geckodriver.bat")
System.setProperty("webdriver.chrome.driver", "C:/chromedriver/2.33/chromedriver.exe")
driver = {
    FirefoxOptions firefoxOptions = new FirefoxOptions()
    firefoxOptions.setHeadless(true)
    new FirefoxDriver(firefoxOptions)
}
baseUrl = "http://localhost:8080"
waiting {
    timeout = 15
}

environments {

    chrome {
        driver = {
            ChromeOptions chromeOptions = new ChromeOptions()
            chromeOptions.setHeadless(true)
            new ChromeDriver(chromeOptions)
        }
    }

    firefox {
        driver = {
            FirefoxOptions firefoxOptions = new FirefoxOptions()
            firefoxOptions.setHeadless(true)
            new FirefoxDriver(firefoxOptions)
        }
    }

    htmlunit {
        new HtmlUnitDriver(true)
    }

}

System.setProperty("webdriver.gecko.driver", "C:/geckodriver/0.19.0/geckodriver.bat") を driver の中に書いていたのを外に出します。
System.setProperty("webdriver.chrome.driver", "C:/chromedriver/2.33/chromedriver.exe") を追加します。
environments { ... } の定義を追加し、この中に chrome, firefox, htmlunit の driver の定義を記述します。

build.gradle にタスクを定義する

build.gradle に各ブラウザ毎のテスト用タスクと、全てのブラウザのテスト用タスクを連続実行するためのタスクを追加します。このタスクは geb/geb-example-gradle/build.gradle からコピーしました。

..........

test {
    // test タスクの jvmArgs は tasks.withType(Test) { ... } で定義している
    exclude "geb/**"
}

// for Geb + Spock Integration Test
def drivers = ["chrome", "firefox", "htmlunit"]
drivers.each { driver ->
    task "${driver}Test"(type: Test) {
        // 前回実行時以降に何も更新されていなくても必ず実行する
        outputs.upToDateWhen { false }
        systemProperty "geb.env", driver
        exclude "ksbysample/**"
    }
}
task gebTest {
    dependsOn drivers.collect { tasks["${it}Test"] }
    enabled = false
}

tasks.withType(Test) {
    jvmArgs = ['-Dspring.profiles.active=unittest']
}

// for Doma-Gen
task domaGen {
    ..........

test タスクから jvmArgs = ['-Dspring.profiles.active=unittest'] を削除します。
記述していた task gebTest(type: Test) { ... } を削除します。
// for Geb + Spock Integration Test から下の部分を記述します。リストからタスクを動的に作成したり、動的に作成されたタスクを依存関係に指定する方法があるとは、初めて知りました。。。
tasks.withType(Test) { ... } を追加し、Test タイプのタスク共通の設定はこちらに記述します。今回は jvmArgs のみ記述します。

変更後、Gradle Tool Window の左上にある「Refresh all Gradle projects」ボタンをクリックして更新します。

更新すると Gradle projects の other の下に chromeTest, firefoxTest, gebTest, htmlunitTest の４つのタスクが表示されます。

f:id:ksby:20171029085625p:plain

動作確認

最初に clean タスク → Rebuild Project → build タスクを実行して BUILD SUCCESSFUL のメッセージが出力されることを確認します。追加した chromeTest, firefoxTest, gebTest, htmlunitTest のタスクが実行されていないことも確認できます。

f:id:ksby:20171029090212p:plain

chromeTest タスクを実行します。ブラウザの画面が表示されず、テストは成功します。また ChromeDriver のメッセージが出力されており、Chrome がテストに使われていることが分かります。

f:id:ksby:20171029090534p:plain

firefoxTest タスクを実行します。こちらもブラウザの画面は表示されず、テストは成功します。

f:id:ksby:20171029090804p:plain

htmlunitTest タスクを実行します。HtmlUnit はブラウザではないので当然画面は表示されず、テストは成功します。

f:id:ksby:20171029091445p:plain

最後に gebTest タスクを実行します。chromeTest, firefoxTest, htmlunitTest の３つのタスクが実行されてそれぞれ成功し、gebTest タスクは build.gradle 内で enabled = false を記述しているので SKIP されることが確認できます。

f:id:ksby:20171029091741p:plain

ちなみに src/test/groovy/geb/gebspec/SimpleTestSpec.groovy をテストが失敗するように変更してから、

class SimpleTestSpec extends GebSpec {

    def "動作確認用"() {
        ..........

        then: "「お名前（漢字）」の必須チェックエラーのメッセージが表示される"
        $("#form-group-name .js-errmsg").displayed == true
//        $("#form-group-name .js-errmsg").text() == "お名前（漢字）を入力してください"
        $("#form-group-name .js-errmsg").text() == "エラーです"
    }

}