liguofeng29’s blog

個人勉強用ブログだっす。

groovy,geb(selenium),spockによる自動化テスト その5

gebでframeを操作する方法

  1. 直接操作する
  2. Page Objectを利用する

script5.html

<html>
<body>
    <iframe name="header" src="script5_header_frame.html"></iframe>
    <iframe id="content" src="script5_content_frame.html"></iframe>
    <iframe id="footer" src="script5_footer_frame.html"></iframe>
</body>
</html>

script5_header_frame.html

<html>
<body>
    <span>HEADER</span>
</body>
</html>

script5_content_frame.html

<html>
<body>
    <div>CONTENT1</div>
    <div>CONTENT2</div>
    <div>CONTENT3</div>
</body>
</html>

script5_footer_frame.html

<html>
<body>
    <span>FOOTER</span>
</body>
</html>

script5_Geb_API_Frame.groovy

/**
 * Geb for Frame API
 *
 * http://www.gebish.org/manual/
 *
 * Frameを操作する方法
 * 1. 直接操作
 * 2. Page Object Model利用
 *
 */
import geb.Browser
import geb.Page

def testPage = new File('src/main/java/html/script5.html')

Browser.drive {
    // baseUrl設定
    config.baseUrl = new File(testPage.getAbsolutePath()).toURI()

    // 指定URLでブラウザオープン
    go testPage.toURI().toString()

    /** 1. 直接操作 ** **/
    // page.withFameと同価
    withFrame('header') {assert $('span').text() == 'HEADER' }
    withFrame('footer') {assert $('span').text() == 'FOOTER' }

    withFrame(0) { assert $('span').text() == 'HEADER' }
    withFrame(2) { assert $('span').text() == 'FOOTER' }

    withFrame($('#content')) { assert $('div', 2).text() == 'CONTENT3' }


    /** 2. Page Object **/
    to LayoutPage
    withFrame(contentsFrame) { println "contents frame内のdiv要素数 : " + ($('div').size()) }

    sleep 10 * 1000
}.quit()


class LayoutPage extends Page {
    // baseUrl + url
    static url = 'script5.html'

    static content = {
        contentsFrame(page: ContentsPage){$('#content')}
    }
}

class ContentsPage extends Page {
    // baseUrl + url
    static url = 'script5_content_frame.html'
}

console

contents frame内のdiv要素数 : 3

groovy,geb(selenium),spockによる自動化テスト その4

Geb API

form, input, checkbox, radioなどのHTMLElementの操作する

script4.html

<form id="form1">
    <div class="input1">
        <input name="username1" type="text" placeholder="input your name">
        <input name="password1" type="text" placeholder="input your password">
    </div>
    <div class="input2">
        <input name="username2" type="text" placeholder="input your name">
        <input name="password2" type="text" placeholder="input your password">
    </div>
        <div class="input3">
        <input name="username3" type="text" placeholder="input your name">
        <input name="password3" type="text" placeholder="input your password">
    </div>
</form>


<form id="form2">
    <input type="checkbox" name="checkbox1" value="single-check1"/>
    <input type="checkbox" name="checkbox2" value="single-check2"/>
</form>

<form id="form3">
    <input type="checkbox" name="multicheck" value="multi-check1"/>
    <input type="checkbox" name="multicheck" value="multi-check2"/>
    <input type="checkbox" name="multicheck" value="multi-check3"/>
</form>

<form id="form4">
    <input type="radio" name="sex" value="male" />
    <input type="radio" name="sex" value="female" />
</form>

<form id="form5">
    <input type="file" name="csvFile" />
</form>

<form id="form6">
    <select name="optionlist1">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
    </select>
    <select name="optionlist2">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
    </select>
</form>

script4_Geb_API.groovy

/**
 * Geb API
 *
 * http://www.gebish.org/manual/
 */
import geb.Browser

def testPage = new File('src/main/java/html/script4.html')

Browser.drive {
    // 指定URLでブラウザオープン
    go testPage.toURI().toString()

    /**************/
    /** for form **/
    /**************/
    // direct
    $('input', name: 'username1').value("ユーザ1")
    $('input', name: 'password1').value("パスワード1")

    // use shortcuts
    def form = $('#form1')
    form.username2 = "ユーザ2"
    form.password2 = "パスワード2"

    // use with
    $('#form1').with {
        username3 = 'ユーザ3'
        password3 = 'パスワード3'
    }

    // get value
    println ($('input', name: 'username1').value())
    println ($('#form1').password1)

    /******************/
    /** for checkbox **/
    /******************/
    // click and set value
    $('input', name: 'checkbox1').click()
    $('checkbox', name: 'checkbox1').value(true) // or false

    // click and set value with shortcut
    $('#form2').checkbox2().click()
    $('#form2').checkbox2().value(false)       // or true

    // get value
    println ($('input', name: 'checkbox1').value())
    println ($('#form2').checkbox2().value())


    /************************/
    /** for multi-checkbox **/
    /************************/
    $('#form3').multicheck = true // check all
    println ($('#form3').multicheck) // [multi-check1, multi-check2, multi-check3]

    /************************/
    /** for radio          **/
    /************************/
    $('#form4').sex = "female" // set
    println ($('#form4').sex)  // get female
    assert $('#form4').sex == 'female' // assert

    /************************/
    /** for input file     **/
    /************************/
    // need to set absolute path
    $('#form5').csvFile = new File("src/main/java/csv/data.csv").getAbsolutePath()
    // Or
    // $('input', name : 'csvFile').value('../csv/data.csv')

    /*************************/
    /** for drop-down select**/
    /*************************/
    $('select', name: 'optionlist1').value('2') // Or 'option2'

    // use shortcut
    $('#form6').optionlist2 = 'option3'
    // $('#form6').optionlist = 3

    // get value
    println ($('#form6').optionlist1) // print 2

    // assert
    assert $('#form6').optionlist2 == '3'

    sleep 10 * 1000

}.quit()

f:id:liguofeng29:20170301201129g:plain

groovy,geb(selenium),spockによる自動化テスト その3

Geb Navigator API

  • gebを使えば、jqueryのselectorに似ている書き方で要素page要素を取得することができる。

script3.html

<div>div1 text</div>
<div>div2 text</div>
<div class="search1">
    <form onsubmit="return bridge();">
        <input type="text" placeholder="input keyword" class="input" id="keyword" name="keyword">
        <br>
        <input type="button" value="search" class="submit" id="btnSearch" name="btnSearch" onclick="alert('clicked');">
    </form>
</div>

script3_navigator.groovy

/**
 * Geb Navigator API
 *
 * http://www.gebish.org/manual/current/#the-jquery-ish-navigator-api
 *
 * jquery selector
 * https://www.w3schools.com/jquery/trysel.asp
 * https://www.w3schools.com/jquery/jquery_selectors.asp
 *
 *
 */
import geb.Browser

def keywords = 'javait.hatenablog.com'
def testPage = new File('src/main\\java/html/script3.html')

Browser.drive {
    go testPage.toURI().toString()

// // search element by tag, class, id
//    $("div")
//    // Match the first "div" element on the page.
//    $("div", 0)
//    // Match all "div" elements with a title attribute value of "section".
//    $("div", title: "section")
//    // Match the first "div" element with a title attribute value of "section".
//    $("div", 0, title: "section")
//    // Match all "div" elements who have the class "main".
//    $("div.main")
//    // Match the first "div" element with the class "main".
//    $("div.main", 0)

    // search element by traversing
// <div class="a">
//     <div class="b">
//         <p class="c"></p>
//         <p class="d"></p>
//         <p class="e"></p>
//     </div>
//     <div class="f"></div>
// </div>

// assert $("p.d").previous() == $("p.c")
// assert $("p.e").prevAll() == $("p.c").add("p.d")
// assert $("p.d").next() == $("p.e")
// assert $("p.c").nextAll() == $("p.d").add("p.e")
// assert $("p.d").parent() == $("div.b")
// assert $("p.c").siblings() == $("p.d").add("p.e")
// assert $("div.a").children() == $("div.b").add("div.f")

    // by tag
    println "divタグ数 : " + $("div").size()
    println "2個目divタグのtext : " + $("div", 1).text()

    // by id
    $('#keyword').value(keywords)
    $('#btnSearch').click()

    sleep 10 * 1000

}.quit()

groovy,geb(selenium),spockによる自動化テスト その2

eclipseでGroovy ScriptでGebを利用する

  • eclipse4.6 http://mergedoc.osdn.jp/

  • groovy eclipse https://github.com/groovy/groovy-eclipse/wiki

  • buildship Gradle integration 2.0

  • gradleプロジェクト生成

  • build.gradleに依存関係追加
    dependencies {
    // for geb
    compile “org.gebish:geb-core:1.1.1”
    compile “org.seleniumhq.selenium:selenium-firefox-driver:3.1.0”
    compile “org.seleniumhq.selenium:selenium-support:3.1.0”
    }
  • scpirt1.groovy
/**
 * Geb sample
 *
 * http://www.gebish.org/manual/current/#the-jquery-ish-navigator-api
 *
 * jquery selector
 * https://www.w3schools.com/jquery/trysel.asp
 * https://www.w3schools.com/jquery/jquery_selectors.asp
 *
 *
 */
import geb.Browser

/**
 * geb常用メソッド
 *
 * .value() elementのtext代入
 * .text()  elementのtext取得
 * .click() elementのclick
 * waitFor    条件待ち、時間経過するとWaitTimeoutExceptionが発生する
 *
 */
def keyword = 'javait.hatenablog.com'

Browser.drive {
    go 'http://yahoo.co.jp'

    // タイトルがYahooになるまで待つ
    waitFor { title.startsWith('Yahoo') }

    // keyword入力
    $('#srchtxt').value(keyword)
    // ボタンクリック
    $($('#srchbtn')).click()

    // タイトルが検索結果で終わるまで待つ
    waitFor() { title.endsWith('検索') }

    // waitFor(1) { false } 1秒後timeout
    // waitFor { title.endsWith('設定した時間後timeoutが発生する') }

    // 出力
    $('h3').each { println "* ${it.text()}" }

}.quit()

f:id:liguofeng29:20170301201457g:plain

groovy,geb(selenium),spockによる自動化テスト その1

環境


jdk,mvn,groovy,geb,webdriver

バージョン確認


E:\dev>mvn -version
Apache Maven 3.3.3 (7994120775791599e205a5524ec3e0dfe41d4a06; 2015-04-22T20:57:37+09:00) Maven home: E:\dev\apache-maven-3.3.3 Java version: 1.8.0_40, vendor: Oracle Corporation Java home: D:\pleiades-e4.4\java\8\jre Default locale: ja_JP, platform encoding: MS932 OS name: “windows 7”, version: “6.1”, arch: “amd64”, family: “dos”

E:\dev>groovy -version
Groovy Version: 2.4.8 JVM: 1.8.0_40 Vendor: Oracle Corporation OS: Windows 7

Groovy Shellでgebを実行する


groovysh

ライブラリダウンロード

groovy:000> import groovy.grape.Grape
===> groovy.grape.Grape
groovy:000> Grape.grab(group: ‘org.gebish’, module: ‘geb-core’, version:‘1.1.1’)
===> null
groovy:000> Grape.grab(group: ‘org.seleniumhq.selenium’, module: ‘selenium-firefox-driver’, version: ‘3.1.0’)
===> null

環境変数

groovy:000> System.setProperty(“webdriver.gecko.driver”, “E:\dev\geckodriver.exe”)
===> null
groovy:000> browser = new geb.Browser()
===> geb.Browser@6ad11a56

ブラウザオープン

groovy:000> browser.go ‘http://google.com’

URL:google.comが開かれる。

検索キー入力&検索ボタンクリック

groovy:000>form = browser.$(‘form#tsf’)
groovy:000>form.size()
groovy:000>form.q = ‘http://javait.hatenablog.com/’
groovy:000>btnK = form.find(‘input[name=btnK]’)
groovy:000>btnK.click()

検索結果タイトルを表示

groovy:000>browser.$(‘h3’).each { println it.text() }
liguofeng29’s blog 2016年現在のJavaについて - arclamp arclamp よねのはてな Challenge Java EE A Memorandum HTML5のform関連 - 新規属性 - liguofeng29’s blog 【Java】GETメソッドでHTTP通信をする汎用オブジェクトを自作してみた … google-http-java-client 入門 - ひだまりソケットは壊れない 略・・・・・

Groovy ScriptでGebを利用する

  • スクリプト
@Grab('org.gebish:geb-core:1.1.1')
@Grab('org.seleniumhq.selenium:selenium-firefox-driver:3.1.0')
import geb.Browser

System.setProperty("webdriver.gecko.driver", "E:\\dev\\groovy_geb\\geckodriver.exe")

def keywords = args.join(' ')
Browser.drive {
    go 'http://google.com'
    $('form#tsf').with {
        q = keywords
        btnK().click()
    }
    // argsがなければ
    // geb.waiting.WaitTimeoutException: condition did not pass in 5.0 seconds
    waitFor {           
        $('h3').size() > 0
    }
    $('h3').each { println "* ${it.text()}" }
}.quit()
  • 実行
    groovy script1.groovy javait.hatenablog.com