Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介

4,469 views

Published on

・2015/01/31のGeb勉強会資料
・jQueryのようにWebテストが書けるGeb Navigator APIの紹介

Published in: Technology

20150131_jQueryのようにWebテストが書けるGeb Navigator APIの紹介

  1. 1. jQueryのようにWebテストが書ける Geb Navigator APIの紹介 第一回Geb勉強会 2015/01/31 ふじさわゆうき
  2. 2. 2 目次 1.自己紹介 2.プレゼン概要 3.なぜNavigator APIを紹介するのか 4.サンプルコード解説の楽しみ方 5.サンプルコード解説 公式マニュアル The Book Of Gebの「4章 Interacting with content 」をもとに説明します
  3. 3. 3 自己紹介
  4. 4. 4 自己紹介 名前 ふじさわゆうき 現在の仕事 部署全体を技術的に底上げするチームに所属 テスト自動化、FindBugsルール化、標準開発環境 の提供、ミドルウェア検証、OutOfMemory調査&解 決、社内WIKI導入&運用など幅広く担当 経歴 高校~大学~社会人とずっとプログラム書いてます 株式投資アルゴリズム(Java)のコンテストで優秀ア ルゴリズム賞を受賞したことがあります なぜかMBAホルダーです
  5. 5. 5 プレゼン概要
  6. 6. 6 プレゼン概要 対象 これからGebを始める人 Navigator APIについて改めて学びたい人 方針 公式サイトマニュアルに従った内容とする GitHubでNavigator APIの例を提供し、参加者にそ のコードを理解してもらうことで、明日から仕事 ですぐに使える知識を提供する ゴール 「便利そうだし、サンプルもあるからGebをやっ てみよう!」と参加した人がなってくれること 「Gebってこんな使い方もできるんだ」と発見が あること
  7. 7. 7 なぜNavigator APIを紹介す るのか
  8. 8. 8 なぜNavigator APIを紹介するのか そもそもNavigator APIって?? Gebの大きな特徴の一つでjQueryのような文法で HTML要素を取得できるAPIのこと 詳しくはこの後のスライドで説明します なぜ紹介するのか WebDriverと比較して、このAPIがGebの大きなメ リットの一つになっていると感じるため 深く知っておくべきといえる機能の一つ
  9. 9. 9 サンプルコード解説 の楽しみ方
  10. 10. 10 サンプルコード解説の楽しみ方 公式マニュアル The Book Of Gebの「4章 Interacting with content 」を開きます http://www.gebish.org/manual/current/navigator.html #interacting_with_content この章の順番通りに説明していきます 原文と突き合わせながらプレゼンを聞いて ください! GebStudyのテスト対象は以下のサイト http://www.gebish.org/ https://account.edit.yahoo.co.jp/registration
  11. 11. 11 サンプルコード情報 GitHub URL https://github.com/gebjp/GebStudy テストケース GebStudy/src/test/groovy/jp/org/gebjp/manual/ chapter4 実行環境の構築方法 http://yfj2.hateblo.jp/entry/2015/01/20/012130 バージョン Geb: 0.10.0 Groovy: 2.3.7
  12. 12. 12 質問はツイッターで受け付けます @ffggss #gebjp につぶやいてください プレゼン終了後にどれかに答えます
  13. 13. 13 サンプルコード解説
  14. 14. 14 4. The $ Function $関数は、jQueryのような記法でNavigatorオ ブジェクトを返す関数 Navigatorオブジェクトは、seleniumの WebElementインタフェースを実装している $( css selector ,≪ ≫ ≪index / range ,≫ ≪attribute / text matchers )≫ $("h1", 2, class: "heading") $("div p", 0) $("div p", title: "something") $(title: "something")
  15. 15. 15 4.1.2 Indexes and Ranges コンテンツを単一で取得できる 配列で複数取得することもできる <p>a</p> <p>b</p> <p>c</p> $("p", 0).text() == "a" $("p", 2).text() == "c" $("p", 0..1)*.text() = ["a", "b"] $("p", 1..2)*.text() = ["b", "c"]
  16. 16. 16 サンプルコード Per01_InteractingWithContentTest.groovy HTML 107行目 115行目 109行目
  17. 17. 17 4.1.3 Attribute and Text Matching HTMLのAttributeとTextにマッチさせること ができる <p attr1="a" attr2="b">p1</p> <p attr1="a" attr2="c">p2</p> $("p", attr1: "a").size() == 2 $("p", attr2: "c").size() == 1 $("p", attr1: "a", attr2: "b").size() == 1 $("p", text: "p1").size() == 1 $("p", text: "p1", attr1: "a").size() == 1
  18. 18. 18 サンプルコード Per01_InteractingWithContentTest.groovy HTML aタグ全部
  19. 19. 19 4.1.3.1 Using Patterns パターンマッチも可能 <p attr1="a" attr2="b">p1</p> <p attr1="a" attr2="c">p2</p> $("p", text: ~/p./).size() == 2 $("p", text: startsWith("p")).size() == 2 $("p", text: endsWith("2")).size() == 1
  20. 20. 20 4.1.3.1 Using Patterns Gebで指定可能なパターンリスト Case Sensitive Description startsWith 指定した文字列で開始する値とマッチする contains 指定した文字列を含む値とマッチする endsWith 指定した文字列で終了する値とマッチする containsWord 指定した単語(前後に半角スペースを含む文字 列)を含む値とマッチする notStartsWith 指定した文字列で開始しない値とマッチする notContains 指定した文字列を含まない値とマッチする notEndsWith 指定した文字列で終了しない値とマッチする notContainsWord 指定した単語(前後に半角スペースを含む文字 列)を含まない値とマッチする
  21. 21. 21 サンプルコード Per01_InteractingWithContentTest.groovy HTML aタグ全部
  22. 22. 22 4.1.4 Navigators are Iterable Navigatorオブジェクトは、Iterableインタ フェースを実装しているのでmax(),min()の ようなGroovyの文法を使うこともできる <p>1</p> <p>2</p> $("p").max { it.text() }.text() == "2" $("p")*.text().max() == "2"
  23. 23. 23 サンプルコード Per01_InteractingWithContentTest.groovy HTML 19-49行目
  24. 24. 24 4.2 Finding & Filtering “find”, ”$”は子要素を検索するための関数で ある。“filter”, ”not”は、要素を減らすための 関数である <div class="a"> <p class="b">geb</p> </div> <div class="b"> <input type="text"/> </div> $("div").find(".b").text() == “geb” $("div").$(".b").text() == “geb” $("div").filter(".b").text() == “” $(".b").not("p").text() == “” $("div").has("p").text() == “geb” $("div").has("input", type: "text").text() == “”
  25. 25. 25 4.2 Finding & Filtering Finding & Filteringのメソッドリスト Method Description find 指定したContentのListに対して、指定した条件に合致した それぞれのContentの子ContentのListを取得する $ findと同様の機能 filter 指定したContentのListから、指定した条件に合致しない Contentを除外したListを取得する not 指定したContentのListにから、指定した条件に合致した Contentを除外したListを取得する has 指定したContentのListに対して、指定した条件に合致した 子を持つcontetを取得する closest 指定したContentから一番近くの条件に一致したcontentを 取得する nextUntil nextUntilは、指定したContentから条件に合致するまで List取得する。指定したContentと条件は含まない
  26. 26. 26 サンプルコード Per02_InteractingWithContentTest.groovy HTML 132行目 133行目 103行目
  27. 27. 27 4.3 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> $("p.d").previous() // 'p.c' $("p.e").prevAll() // ['p.c' , 'p.d] $("p.d").next() // 'p.e' $("p.c").nextAll() // ['p.d' , 'p.e'] $("p.d").parent() // 'div.b' $("p.d").siblings() // ['p.c' , 'p.e'] $("div.a").children() // ['div.b' , 'div.f]
  28. 28. 28 4.3 Traversing Traversingのメソッドリスト Method Description previous 指定したcontentの一つ前を取得する prevAll 指定したcontentの前をListで全て取得する next 指定したcontentの一つ後を取得する nextAll 指定したcontentのをListで全て取得する parent 指定したcontentの親contentを取得する siblings 指定したcontent以外をListで全て取得する children 指定したcontentの子contentを配列で取得する
  29. 29. 29 サンプルコード Per03_InteractingWithContentTest.groovy HTML 131-185行目
  30. 30. 30 4.4 Composition 複数のNavigatorを組み合わせることができ る。PageObjectのcontentを利用すること で汎用化することもできる $($("div.a"), $("div.d")) // ['div.a','div.d'] static content = { divElement { divClass -> $('div', 'class': divClass) } } $(divElement('a'), divElement('d'))
  31. 31. 31 サンプルコード Per04_InteractingWithContentTest.groovy HTML 131-144行目
  32. 32. 32 4.5 Clicking Navigator objectsは、click()を実装している click()は、最初にマッチした要素のみ実行さ れる click(Class)を実行するとクリック後、Class がセットされる $("input.loginButton").click(LoginPage)
  33. 33. 33 サンプルコード Per05_InteractingWithContentTest.groovy GebTopPage.groovy HTML 54行目 57行目
  34. 34. 34 4.6 Determining Visibility Navigator objectsには、displayedプロパ ティが定義されている。displayed==falseの 場合は、マッチしても操作することができ ない “Navigator.isDisplayed() == false”の場合に Navigator.click()を実行すると例外が発生す る ElementNotVisibleException
  35. 35. 35 サンプルコード Per06_InteractingWithContentTest.groovy GebTopPage.groovy HTML 54行目 57行目
  36. 36. 36 4.7 Size and Location PageのSizeとLocationを取得できる LocationはPageの左上からのx , yプロパティ でpixel指定する $("div").height == 20 $("div").width == 40 $("div").x == 60 $("div").y == 80 $("div")*.height == [20, 30] $("div")*.width == [40, 50] $("div")*.x == [60, 70] $("div")*.y == [80, 90]
  37. 37. 37 サンプルコード Per07_InteractingWithContentTest.groovy HTML divタグ全部
  38. 38. 38 4.8 Accessing tag name, attributes, text and classes Navigator objectsのtag(), text(), @attribute and classes()を使って値を取得できる classes()は、class属性を java.util.List形式 で返す <p title="a" class="a para">a</p> <p title="b" class="b para">b</p> <p title="c" class="c para">c</p> $("p").text() == "a" $("p").tag() == "p" $("p").@title == "a" $("p").classes() == ["a", "para"]
  39. 39. 39 サンプルコード Per08_InteractingWithContentTest.groovy HTML 135行目
  40. 40. 40 4.9 Css properties cssメソッドでCSSプロパティを取得するこ とができる <div style="float: left">text</div> $("div").css("float") == "left"
  41. 41. 41 サンプルコード Per09_InteractingWithContentTest.groovy HTML 10行目
  42. 42. 42 4.10 Sending keystrokes leftShiftを使うことでどのコンテンツにも キーストロークを送信することができる $("div") << "abc" $("input", name: "firstName") << Keys.chord(Keys.CONTROL, "c")
  43. 43. 43 サンプルコード Per10_InteractingWithContentTest.groovy HTML 5行目
  44. 44. 44 4.11 Accessing input values Input, select, textarea など入力値は、value メソッドでセットすることができる checkbox は、booleanをセットすることも できる multiple select は配列をセットすることもで きる
  45. 45. 45 サンプルコード Per11_InteractingWithContentTest.groovy HTML Yahoo!!
  46. 46. 46 4.12 Form Control Shortcuts Input, selectなどform要素への入力に対して 簡単に入力できるようにしている <form> <input type="text" name="geb" value="testing" /> </form> $("form").geb == "testing" $("form").geb = "goodness" $("form").geb == "goodness"
  47. 47. 47 4.12 Form Control Shortcuts <select name="artist"> <option value="1">Ima Robot</option> <option value="2">Edward Sharpe</option> <option value="3">Alexander</option> </select> $("form").artist = "1" //Ima Robot $("form").artist = 2 //Edward Sharpe $("form").artist = "Alexander" //Alexander selectタグは、value, textまたは順番の値を 渡すことで選択できる
  48. 48. 48 4.12 Form Control Shortcuts <select name="genres" multiple> <option value="1">Alt folk</option> <option value="2">Chiptunes</option> <option value="3">Electroclash</option> <option value="4">G-Funk</option> <option value="5">Hair metal</option> </select> $("form").genres = ["2", "3"] $("form").genres = [1, 4, 5] $("form").genres = ["Alt folk", "Hair metal"] $("form").genres = [] multiple Selectタグも同様に、value, textま たは順番の配列を渡すことで選択できる
  49. 49. 49 4.12 Form Control Shortcuts <input type="checkbox" name="pet" value="dogs" /> <input type="checkbox" name="pet" value="cats" /> $("input", type: "checkbox", name: "pet").value("dogs") $("input", type: "checkbox", name: "pet").value() == "dogs" $("input", type: "checkbox", name: "pet").value() == false if ($("input", type: "checkbox", name: "pet").value()) { //petが選択されていれば実行される } checkboxは、valueで選択することができる 未選択の場合は、falseが返ってくる
  50. 50. 50 4.12 Form Control Shortcuts <label for="site-current">Search this site</label> <input type="radio" id="site-current" name="site" value="current"> <label>Search Google <input type="radio" name="site" value="google"> </label> $("form").site = "current" //Search this site $("form").site = "Search this site" //Search this site $("form").site = "Search Google" //Search Google RadioButtonは、valueまたはlabelのtextで選択す ることができる
  51. 51. 51 4.12 Form Control Shortcuts <input name="postcode" /> ("form").postcode = "12345" $("form").postcode() << Keys.BACK_SPACE assert $("form").postcode == "1234" Text Inputは、文字列を渡すことで入力できる キーストロークもKeysクラスを使うことで入力 できる
  52. 52. 52 4.12 Form Control Shortcuts <input type="file" name="csvFile"> //絶対パスでファイルを指定する $("form").csvFile = "/path/to/my/file.csv" 絶対パスを渡すことでファイルのアップロード もできる
  53. 53. 53 サンプルコード Per12_InteractingWithContentTest.groovy HTML Yahoo!!
  54. 54. 54 4.13.2 Using Actions WebDriver driverのActionクラスを使うこと で複雑な動作も実行することができる def actions = new Actions(driver) WebElement someItem = $('li.clicky').firstElement() def shiftDoubleClickAction = actions.keyDown(Keys.SHIFT).doubleClick(someItem). keyUp(Keys.SHIFT).build() shiftDoubleClickAction.perform()
  55. 55. 55 4.13.3 Using Interact Closures Interact Closuresを使うと、Actionよりも簡 単に実装できる interact { keyDown(Keys.SHIFT) doubleClick($('li.clicky')) keyUp(Keys.SHIFT) } interact { keyDown(Keys.CONTROL) click($('ul.multiselect li', text: 'Order 1')) click($('ul.multiselect li', text: 'Order 2')) click($('ul.multiselect li', text: 'Order 3')) keyUp(Keys.CONTROL) }
  56. 56. 56 サンプルコード Per13_InteractingWithContentTest.groovy HTML Yahoo!!

×