yfj2’s Automatic Web Test Related Blog

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

【入門】Geb+SpockではじめるWebテスト～クロスブラウザテスト編～ / Setting up and running of the cross-browser test

【入門】Geb+SpockではじめるWebテスト～クロスブラウザテスト編～ / Setting up and running of the cross-browser test

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

この記事は、以下の記事の続きです。/ This article is a continuation of the following article.
初めて訪問した方は以下の記事を参照してください。 / First person who visited, please see the following article.

目次 / Table of contents

  1. 前回までのあらすじ / Overview of up to the previous article
  2. 今回の目的 / The goal of this article
  3. ChromeによるWebテスト / Web testing with Chrome
  4. IEによるWebテスト / Web testing with IE
  5. FireFoxによるWebテスト / Web testing with FireFox
  6. まとめ

1. 前回までのあらすじ

  1. Gebとは何かの説明 / The description of what is Geb
  2. Gebのメリット説明 / Description of Geb benefits
  3. 「Eclipse + maven + Geb + Spock」での開発環境構築説明 / Development environment construction described with using "Geb + Spock"
  4. サンプルプログラム実装 / Sample program implementation
    1. google検索⇒検索結果⇒WIKIという流れのWebテスト実施 / Web test explanation that "google search ⇒ results ⇒WIKI"
    2. 「Geb + Spock」による上記Webテストの実施 / Implementation of the above Web test using the "Geb + Spock"

2. 今回の目的 / The purpose of this article

  • クロスブラウザテストができるようになること / To get ability cross-browser testing with "Geb and Spock".
    • 対象はChrome , InternetExplorer(IE) , FireFoxの3ブラウザ / Taget browser are Chrome , InternetExplorer(IE) and FireFox

3. ChromeによるWebテスト / Web testing with Chrome

  1. GoogleWikipediaTest Projectにdriverフォルダを作成します / You create a driver folder in GoogleWikipediaTest Project
    • GoogleWikipediaTest/driver
  2. chromedriver_win32.zipを取得します / You get chromedriver_win32.zip
  3. chromedriver_win32.zipを解凍して、chromedriver.exeをdriverフォルダに置きます
    • GoogleWikipediaTest/driver/chromedriver.exe
  4. GebConfig.groovyをGoogleWikipediaTest/src/main/resourcesに作成します / You create a GebConfig.groovy to GoogleWikipediaTest/src/main/resources
    • GoogleWikipediaTest/src/main/resources/GebConfig.groovy
  5. GebConfig.groovyにChromeの設定を追記します / You append the Chrome settings GebConfig.groovy
//choose "htmlunit", "firefox", "ie", "chrome"
driver = "chrome"

//chrome - http://chromedriver.storage.googleapis.com/index.html
System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe")

6. GoogleWikipediaMainTest.groovyを実行します / Run the GoogleWikipediaMainTest.groovy
7. Chromeが起動してテストが実行されればOKです / Chrome setting is the OK, if the test is up and running

4. IEによるWebテスト / Web testing with IE

  1. IEのセキュリティ設定を「保護モードを有効にする」で統一します / Unify the IE security settings in the "Enable Protected Mode"
    • インターネットオプション > セキュリティ
    • Internet Options > Security
    • f:id:yfj2:20141109003646p:plain
  2. Get IEDriverServer_Win32_2.47.0.zip
  3. 解凍してIEDriverServer.exeをdriverフォルダに置きます / Unzip to place the IEDriverServer.exe to driver folder
    • GoogleWikipediaTest/driver/IEDriverServer.exe
  4. GebConfig.groovyを修正します / Change the GebConfig.groovy
    • driver = "ie"
    • System.setProperty("webdriver.ie.driver", "driver/IEDriverServer.exe")
//choose "htmlunit", "firefox", "ie", "chrome"
driver = "ie"

//chrome - http://chromedriver.storage.googleapis.com/index.html
System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe")

//ie - http://selenium-release.storage.googleapis.com/index.html
System.setProperty("webdriver.ie.driver", "driver/IEDriverServer.exe")

6. GoogleWikipediaMainTest.groovyを実行します / Run the GoogleWikipediaMainTest.groovy
7. IEが起動してテストが実行されればOKです / IE setting is OK, if the test is up and running

5. FireFoxによるWebテスト / Web testing with FireFox

  1. GebConfig.groovyを修正します/ Change the GebConfig.groovy
    • driver = "firefox"
//choose "htmlunit", "firefox", "ie", "chrome"
driver = "firefox"

//chrome - http://chromedriver.storage.googleapis.com/index.html
System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe")

//ie - http://selenium-release.storage.googleapis.com/index.html
System.setProperty("webdriver.ie.driver", "driver/IEDriverServer.exe")

2. GoogleWikipediaMainTest.groovyを実行します / Run the GoogleWikipediaMainTest.groovy
3. firefoxが起動してテストが実行されればOKです / firefox setting is OK, if the test is up and running

6. まとめ / Summary

  1. driverフォルダにIEとChromeのライブラリを追加する / Add the IE and Chrome's library to driver folder
    • f:id:yfj2:20141109004706p:plain
  2. GebConfig.groovyに設定を追記する / Append the setting to GebConfig.groovy
    • driver
    • System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe")
    • System.setProperty("webdriver.ie.driver", "driver/IEDriverServer.exe")
  3. "driver=***"に「"chrome", "ie", "firefox"」のいずれかを設定することでクロスブラウザテストができる / Cross-browser tests can by setting to "driver = ***", " chrome " or " ie " or " firefox "
  • (ex)driver = "chrome"

参考文献 / Bibliography