読者です 読者をやめる 読者になる 読者になる

ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

Geb(GroovyのSeleniumライブラリ)でのWeb画面キャプチャが簡単でめちゃ便利

自社のホームページやWebシステムの画面キャプチャを保存する作業は、 それほど頻度は高くないけどいざやるとなるとめんどくさいものだ。

Seleniumでどうにかしようと調べてみたら、GroovyからSeleniumを 扱うためのGebというライブラリが便利そうだったので試しに作ってみたら、 思ったより簡単にできた。

auto_capture.groovy

@Grab('org.gebish:geb-core')
@Grab('org.seleniumhq.selenium:selenium-firefox-driver')
@Grab('org.seleniumhq.selenium:selenium-ie-driver')
@Grab('org.seleniumhq.selenium:selenium-chrome-driver')

import geb.Browser
import geb.Configuration
import org.openqa.selenium.firefox.FirefoxDriver
import org.openqa.selenium.ie.InternetExplorerDriver
import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.WebDriverException

System.setProperty('webdriver.chrome.driver', './chromedriver.exe')
System.setProperty('webdriver.ie.driver', './IEDriverServer.exe')

//ブラウザ起動時の設定
Configuration conf = new Configuration()
conf.baseUrl = '.'

//起動するブラウザを選択。Firefoxが無難。
conf.driverConf = 'firefox'
//conf.driverConf = 'chrome'
//conf.driverConf = 'ie'

//キャプチャ画像を保存するフォルダを指定
conf.reportsDir = new File('./captures')

def loginUrl = 'http://gebtest.jp/'
def loginId = 'testlogin'
def loginPw = 'testpw'

def clientUrls = [
    top: 'http://gebtest.jp/top/',
    shohin_list: 'http://gebtest.jp/item/itemList',
    shohin_detail: 'http://gebtest.jp/item/itemDetail',
    cart: 'http://gebtest.jp/cart',
    chumon: 'http://gebtest.jp/chumon'
]

//ここからメイン処理。ブラウザが起動して処理を順次実行する
Browser.drive(conf) {
    //goで指定したURLを開く
    //クローズドなサイトの場合は最初にログイン処理を実行しておく
    go loginUrl
        report 'login_page'
        $('form', id: 'login').id = loginId
        $('form', id: 'login').pw = loginPw
        $('.login_btn').$('a').click()

        //URLのリストをループで回す
        for (url in clientUrls) {
            //別のURLを開く
            go url.value

                if (url.key != 'top') {
                    //Javascriptの処理を呼び出すこともできる!
                    //ここではキャプチャに不要な要素を非表示にしてる
                    js.exec('return \$('#sub_navi').hide();')
                }

            //report関数で現在開いている画面が引数をファイル名としてreportsDirで指定したフォルダに保存される
            report url.key
        }

    //終了後にブラウザを閉じる場合は下記のコメントを外す
    //quit()
}

Firefox以外のブラウザ(ChromeやInternetExplorer)を使用する場合は ドライバアプリを入手する必要がある。下記のSeleniumの本家サイトからダウンロード可能。 http://www.seleniumhq.org/download/

試してみたところ、 Firefoxは標準対応だけあって、サクサク問題なく動く。 Chromeは動くけどやたら動作が遅かった。 IEはうまく動作しなかった。IE11ではうまく動かないとかどこかの掲示板に 書いてあったけど、未確認。

Gebのドキュメントはこちら http://www.gebish.org/manual/current/

上記のスクリプトをベースに、 キャプチャの必要なURLのリストを作成し、 Javascriptで画面を調整する処理を書けば、 手作業よりも楽にキャプチャ画像を用意できると思う。

目の前でブラウザが自動で立ち上がって動作するのを見るのは、なかなか楽しい。

実践 Selenium WebDriver

実践 Selenium WebDriver