🥓 👩 🕘 Gebを使用してブラウザーでテストする 👨🏽‍✈️ 📿 👲🏿

実際のゲブ

たとえば、ロボットがすべての仕事をしてくれるのが大好きです。したがって、あらゆる種類のスクリプト、検査、スペルチェッカー、そしてもちろん自動テストが必要だと考えています。ところで、このテストはどのように好きですか：

Browser.drive(driver: new InternetExplorerDriver()) { go "http://www.google.com" $('form', action:endsWith('/search')).q = '   geb  spock' $('button', value:'').click() waitFor { $('#search') } assert $('#search').size() == 1 assert $('#search').find('li.g a.l').size() > 0 println " : " + $('#res').find('li.g a.l', 0).text() }.quit()

このようなテストは非常に読みやすいと思われます-どの言語であっても問題ありません。このような例を使用して、Geb、Groovy、およびそれがどのように機能するのかまったくまったくわからない類似のテストを作成できます。しかし、完全に理解するために、基本をさらに深く掘り下げましょう。

GebとSeleniumについて

最近セレンのことを聞いたことがないのは誰ですか？おそらく、火薬を消したことがなく、すべてのブラウザが同じであるとまだ考えている人。私はそれについて長い間話さないでしょう、ただ知っている：

Seleniumを使用すると、自動化されたテストをブラウザーで直接実行して、あらゆる種類の不具合や機能を再現できます。
通常のユーザーが行うことすべて、つまり、テキストの入力、スクロール、マウスの移動などを行うことができます。同時に、ブラウザでページの動作を注意深く観察します。

なぜこれがすべて関連性が高いのですか？最新のWebアプリケーションでは、信じられないほどの量のJavaScriptコード、特殊効果、アニメーション、AJAX、およびその他の設備。一般に、 ブラウザなしで品質を管理するための通常のツールはありません。

実際、Seleniumはできるだけ現実に近い条件でテストするための完全なロボットです。（歴史的には、Rational Robotを思い出すこともできます。RationalRobotはInternet Explorerによって研ぎ澄まされ、ページとのやり取りの可能性がわずかにありました。）

Selenium自体には、テストを記述するためのいくつかのオプションがあります。

JavaScriptを使用します。テストはブラウザで直接実行され、ロードされたWebページに直接アクセスできるため、操作を実行できます。
管理サーバー経由。別のプロセスで、任意の言語のテストコードが起動されます。このコードは、ブラウザにコマンドを送信し、ページのステータスを制御できる特別なプログラムであるWebDriverを呼び出します。

誰もがJavaScriptでテストを書くことを好むわけではないため、2番目の方法-WebDriver-が一般的になりつつあります。任意の言語のテストの開発に適していますが、別のマシンでテストを実行できるため便利です。

したがって、 GebはWebDriverを使用し、Groovyに基づいた別のテストライターです。以下の魔法の言葉を使って、Groovyスクリプト内でGebを使用できます。

 @Grab(group='org.codehaus.geb', module='geb-core', version='0.6.2') @Grab(group='org.seleniumhq.selenium', module='selenium-api', version='2.14.0') @Grab(group='org.seleniumhq.selenium', module='selenium-firefox-driver', version='2.19.0') @Grab(group='org.seleniumhq.selenium', module='selenium-ie-driver', version='2.19.0') import geb.Browser import org.openqa.selenium.firefox.FirefoxDriver ...

Geb言語

Groovy（およびすべての動的言語）の機能の1つは、あらゆるニーズに応じて、完全に認識できない別の言語に簡単に変換できることです。

私たちの場合、Gebはブラウザー制御言語を提供します。人間のユーザーができることはすべて実行できます。

URLをフォロー
フォームに記入する
マウスを動かす
リンクをクリックしてください
あらゆる種類のポップアップウィンドウやフレームを操作します。

例：

 Browser.drive { go "http://www.gramant.ru" $('.block .caption', text: 'Grails') .closest('.block') .find('a', text: startsWith('')) .click() assert $('title', text:'Grails | Gramant').size() == 1 }

ご覧のとおり、GebではjQueryに似た構文を使用できます（完全には一致しません）。これは、ページ内の必要な要素を見つけるのに便利です。 click（）メソッドを使用すると、DOM要素をクリックしたり、操作<< -テキストをブラウザに送信したりすることができます。

ナビゲーションにはこれで十分です。確かに、人はまだページ上の情報を読む方法を知っています。これを行うには、彼が現在どのページにいるのかを最初に理解しておくとよいでしょう。まず、テスト中のページが何であるかを考えてみましょう。

ページとモジュール

私たちは命じました

 go 'http://www.gramant.com'

そしてgramant.comに行きました。これで、このページを「読む」ことができます。エラーを分析して見つけます。だから？そうでもない。ブラウザがページにヒットすると、次のことが発生する可能性があります。

HTTPリダイレクト
いくつかの不可解なjavascriptコードが機能し、別のページにリダイレクトされます。

私たちはあるページにいると思いますが、別のページに行き着きました。これ以上のテストは間違った方向に進みます。したがって、どの論理ページにいるのかを理解することは非常に重要です。

Gebは、論理ページ（ページ）といわゆるモジュール（モジュール）の使用を提案しています。次の例でこれを説明してみましょう。

なぜページのような抽象化が必要なのですか？現在のURLを見るだけで、誰もが知っているように思えます。たとえば、次のように：

 class SearchResultsPage extends Page { static url = "/yandsearch" }

しかし、同じ論理ページに多くの異なるURLと状態が含まれることがあり、URLによってページを決定することは常に正しいとは限りません（予測不能に変更される可能性があります）。これは、たとえばタイトルで行うことができます。

 class SearchResultsPage extends Page { static at = { $('title').text() ==~ '.*:  .* ' } }

現在のページを決定する他のオプションがあります。ご覧のとおり、これらはすべてアプリケーションに大きく依存しています。多くの場合、多くの異なるURLが同じページに対応しています。内部コンテキストによっては、同じURLに複数の異なるページが表示される場合があります。一般的な場合、の擬似プロパティには、ブラウザが現在このページにあるかどうかを判断するロジックが含まれています。

モジュールに関するいくつかの言葉。この図は、 モジュールがページ（ブロック）の一部であり、いくつかのページに存在するモジュールがあることを示しています。たとえば、Yandexの検索文字列は、ポータルページと検索結果の両方で使用できます。モジュールの意味は、テストコードを再利用することです。

モジュールは、たとえば次のように定義できます。

 class LoginModule extends Module { static content = { username {} password {} loginButton { $("input", type: "submit") } } }

そして、それらを次のように使用します。

 class HomePage extends Page { static content = { login { module LoginModule } } } Browser.drive { to HomePage login.username << 'user' login.password << 'password' login.loginButton.click() }

もちろん、ページ内のモジュールの多くのインスタンスを定義する機能があります-これはあらゆる種類のリストに当てはまります。たとえば、検索結果-各結果はモジュールによって宣言できます。これはmoduleListコンストラクトを使用して行われますが、これについては詳しく説明しません。

AJAXおよびすべて、すべて、すべて

現代では、ブラウザ内で多くの驚くべきことが起こります：

AJAXリクエスト
アニメーション
ドラッグアンドドロップ
さまざまなポップアップウィンドウ

このようなことを自動的にテストするには、ブラウザー内テストを使用する必要があります。 Gebはいくつかのツールを提供します：

JavaScript変数にアクセスする

jsオブジェクトを介して、 グローバル JavaScript変数の値にアクセスできます。

 Browser.drive { assert js.myGlobalVar == 1 }

グローバル関数も使用できます。

 Browser.drive { js.globalCall() assert js.globalFunc() == 1 js."document.write"("go geb!") js.exec("return document.location.href") == 'http://www.gramant.ru' }

このメカニズムを少し使用したので、GebはすべてのJavaScriptデータ型（ここで説明）をGroovy型に正しく変換しようとすると思いますが、歯を見せません。

jQueryを使用してマウスイベントをエミュレートすると便利です。 Gebは、この種の呼び出しに特別なjQueryプロパティを提供します。

 Browser.drive { $("div#a").jquery.mouseover() }

この行は、テスト済みのページにjQueryバージョン1.4以降がロードされている場合にのみ機能します。実際、このようなコードはjs.exec（）に変換されます。

待機状態

何かを待つことができます。何らかの種類のJavaScript変数を設定するか、 waitForコンストラクトを使用してページに特定の情報を表示します。

 Browser.driver { go 'http://www.youtube.com/watch?v=8d1hp8n1stA' $('button#watch-share').click() waitFor { $('#watch-actions-share').displayed } $('#watch-actions-share').find('button.share-panel-embed').click() waitFor { $('textarea.share-embed-code').displayed } println "Embed code   : " + $('textarea.share-embed-code').value() }

このスクリプトは、いくつかのボタンを押してアニメーションが完了するのを待つことで、YouTubeビデオの埋め込みコードを取得します。

もちろん、waitForメソッドは永遠に待機せず、特定のタイムアウトに達するとクラッシュし、テストを中断します。デフォルトは5秒です。

WebElementとアクションの使用

ドラッグアンドドロップについて説明しました。現在（バージョン0.6.2）Gebには、このような操作のための便利な抽象化がありません。ただし、WebDriverインスタンスにアクセスすることで（browser.driverを介して）Seleniumを直接使用することは常に可能です。

 WebElement underlyingElement = $('#myElement').getElement(0) Action action = new Actions(browser.driver) .clickAndHold(underlyingElement) .moveByOffset(15,15) .release() .build() action.perform()

Actionsクラスは、perform（）メソッドによって順次実行されるために、ブラウザーアクションのシーケンスを作成する低レベルの方法です。 Actionsの機能は、JavaScriptコードの呼び出しよりも強力であり、すべてのユーザーアクションはJavaScriptを介してシミュレートできるという事実に注目してください。ブラウザ側でのアクションの実装は、使用されているドライバーに大きく依存し、移植性がありません。タッチスクリーンを搭載したタブレットでタップイベントを生成するためのほとんどのオプションは、アクションの使用のみです。いくつかの制限があります-アクションでは、ページ上のFlashコンポーネントを操作できません。これはJavaScriptを使用するExternalInterfaceを介してのみ可能ですが、これははるかに複雑です。

Grails内のGeb

GrailsでGebを使用するには、 Spockプラグインを使用すると便利です。私はSpock Frameworkについて長い間広めません。それについては十分な情報があります。 Spockは、主にメタ仕様言語で（Groovyに基づいて）テストを作成できるため、標準のJUnitよりも便利です。これは、より短く、より表現力豊かであることがわかりました。

Grails 1.3.x用のGebのセットアップに関するいくつかの言葉。このようなプロジェクトの例は、こちらから入手できます。 BuildConfig.groovyの目的のセクションは次のようになります。

 dependencies { test("org.seleniumhq.selenium:selenium-htmlunitdriver:$seleniumVersion") { exclude "xml-apis" } test("org.seleniumhq.selenium:selenium-chrome-driver:$seleniumVersion") test("org.seleniumhq.selenium:selenium-firefox-driver:$seleniumVersion") test "org.codehaus.geb:geb-spock:$gebVersion" } plugins { test ":tomcat:$grailsVersion" test ":hibernate:$grailsVersion" test ":geb:$gebVersion" test ":spock:0.5-groovy-1.7" }

現在のgebVersionは0.6.2で、必要なものを置き換えます。

Grailsには、テスト/ユニットとテスト/統合の2種類のテストがあることがわかっています。 Spockは、テスト/機能-「機能」テストも追加します。

機能テスト（Spock仕様）内のGebは通常のテストと似ていますが、ブラウザーを起動してテスト内でドライバーを構成する必要はありません。すべては既に行われています。単純な仕様の例（HomePage、LoginPageクラスについてはすでに説明していると想定しています）：

 @Stepwise class CoreSpec extends GebReportingSpec { def "unauthorized user goes to login page"() { when: to HomePage then: at LoginPage } }

仕様内の各メソッドは個別のテストです。最初は、このテストはメインページに移動しようとしますが、ユーザーはログインしていないため、LoginPageで終了する必要があります。

もちろん、以下を定義するGeb構成ファイルもあります。

使用するブラウザーとドライバー
さまざまなGeb設定（タイムアウトなど）。

デモにはサンプルのGebConfig.groovyファイルがあります。

それで十分のようです。入力する：

 grails -Dgeb.env=firefox test-app :spock

ロボットがそこで何かをテストしようとしている方法を確認します。

ChromeとIEではテストが機能しないことがすぐにわかりました。その理由は、ゼロから、手元の手段なしで、HtmlUnit（テストには役に立たない）またはFirefoxを実行できるからです。 Firefox用の新しいプロファイルが自動的に作成され、FirefoxDriverを介した後続の管理のためにブラウザーを「拡張」します。はい、Selenium / GebはFirefoxでうまく動作します。元々開発されたのはFirefoxであったためです。

IEとChromeに関しては、すべてが少し複雑です。一般的な状況は、タブレットから理解できます。

ブラウザ	必要なもの	制限事項
Firefox	-	一部のOSでは、 TCPポートが不足する問題が影響を受けます。
クロム	プラットフォーム固有のサービス（ChromeDriverService）をダウンロードしてインストールする必要があります。	`Actions` のサポートはありません。
オペラ	-	バージョン11.5以上で、一度に1つのブラウザインスタンスのみ。
インターネットエクスプローラー	別のサービスの起動が必要です。ブラウザの事前設定が必要です（保護モード）。	バージョン6、7、8、9。 1つのブラウザインスタンスのみをサポートします。

ご覧のとおり、Chromeドライバーはアクションをサポートしていません！これはかなり不快です。

Selenium（およびGeb）を公式にサポートしているものは何ですか？

iPhoneブラウザ
Androidブラウザ

ブラウザテストを作成しますか？

ブラウザーテストの美しさは、特定のブラウザーで保証された動作です。

ただし、ブラウザは次をテストします。

動作が遅い（単体テストよりもはるかに遅い）-単にブラウザの反応速度が制限されているという事実のため
複雑なJavaScript / AJAX-fillingsをテストする場合-書くのが難しい。
サポートが必要です。 CSSクラスとページ階層を変更すると、テストが中断される可能性があります。さらに、原則として、このような小さな視覚的な変更の数は、データベーススキーマやビジネスロジックなどの変更の数よりもはるかに多くなります。

自動化されたテストを記述する必要性を説明する最も単純な公式は、次のようになります。

公式は美しいですが、サポートの複雑さと、反復の手動テストのコストを事前に見積もることが非常に難しいため、意味がありません。しかし、反復回数が増えると、テストを自動化するという考え方がますます頭に浮かぶことは明らかです。ブラウザテストの実行速度が遅いことにあまり注意を払うことはできません。これは、手動テストを実行するよりも高速です。確かに、式はすべての手動作業を自動化できるわけではないという事実を考慮していません。たとえば、「レイアウトがなくなった」ことをロボットに説明してみてください。

ブラウザのテストにも微妙な点があります。たとえば、Seleniumは、ブラウザがアクセスしたWebサイトにアクセスできるかどうかを常に個別に判断できるとは限りません。確かに、たとえば、インターネットを切断した場合、ブラウザは何かを表示しているようです。ただし、これは予想されるページではなく、「インターネット設定を確認してください」というスタイルのブラウザ内メッセージです。これらすべての状況は、テストパッケージに決定して含める必要があります。さらに、アプリケーションを自動テストに適合させなければならない場合があり、妥協が必要になります。

一般的に、これは異常に聞こえるかもしれませんが、自動テストはプログラムです。したがって、その開発とサポートはプログラマーに任せることができます。このアプローチにより、プログラマとテスターの間の厳密な分業が排除されます。アセンブリとテストの確立されたシステムの枠組み内で、「テストを自分で、自分で、修理して」という原則を適用する人もいます。つまり、大まかに言って、誰がテストを書いたのかは問題ではありません。作成された瞬間から共通のプロパティになり、テスターとプログラマーの両方がテストを担当します。

また、いわゆる記録-ブラウザでアクションを記録し、それらに基づいてテストを作成する機能についても言及する必要があります。この機能は、FirefoxのSelenium IDEによって提供されます。これは素晴らしいように聞こえますが、この方法で作成されたテストは通常安定性が低く、つまり、何らかのページ変更で破損する可能性が非常に高くなります。これは、記録が対話するページブロックを正しく処理する方法を認識していないために発生します。CSSクラス、＃id、またはその他の方法を使用する必要がありますか。さらに、あなたのためのSeleniumテストのロジック（スタッフィング）はまだ思い付くことができません。

要約すると、Gebは使いやすく、非常に機能する製品です（SeleniumはGebの安定性を提供するため、バージョン番号にはあまり注意を払っていません）。Grailsアプリケーションのブラウザーテストの作成に非常に適しています。彼と二人きりにする： http : //gebish.org

Gebを使用してブラウザーでテストする