前の記事では、Ngの単体テストについて話しました。今日は、E2E（エンドツーエンド）テストについてお話します。
特定のモジュールの単一の機能ポイントをテストするとき、単体テストが最も適しています。ただし、ユーザーが複数のページと対話するときにバグが発生すると、単体テストは機能しません。この時点で、E2Eを使用してユーザー操作をシミュレートし、問題サイトを復元する必要があります。もちろん、E2Eテストを使用すると、プログラムの堅牢性もテストできます。 E2Eテストでは、単体テストを行うことはできません。
以前は、NGはAngularシナリオランナーを使用してE2Eテストを実行していましたが、現在ではE2Eを実行するためにプロトラクターに置き換えられています。
分度器
プロトラクターは、AngularJSでE2Eをテストするために使用されるフレームワークです。それ自体はNPMモジュールであり、WebDriverjs上に構築されています。プロトラクターは、テストケースがブラウザで実行され、ユーザーの実際の動作を完全にシミュレートできるようにすることができます。
リソースアドレスの一部は次のとおりです。
1。分担者が提供するAPIをテストします
2。分度器の単純な使用例
3。WebDriverjsガイド、これはプロトラクター依存の中核であり、NPMモジュールはSelenium-Webdriverと呼ばれます
長期操作原理
分度器は、E2Eテストを実行するために次のことに依存しています。
1。上記のWebDriverjsであるWebDriver APIは、Seleniumからフロントエンドテストに提供されるJS APIに関連しています。
2.バックエンドJARパッケージであるSelenium Serverは、ブラウザドライバーと通信するために使用されます
3。WebDriverブラウザードライバーは、実際のWebサイトコンテンツを表示し、Selenium Serverと通信するために使用されます。これは、実際のブラウザ操作を渡す場所です。
操作プロセス全体が次のとおりです
これらのコンポーネントの以前のやり取りについて詳しく知りたい場合は、ここをクリックしてください
NGシードプロジェクトを使用して、E2Eを説明します
NGが提供するシードプロジェクトを使用して、実際のE2Eの例を説明します。まず、次のコマンドを使用してシードプロジェクトを取得します
コードコピーは次のとおりです。
git clone https://github.com/angular/angular-seed.git
その後、実行します
コードコピーは次のとおりです。
NPMインストール
に関連するすべての依存関係をインストールします
ここでは、最初にE2Eテストを実行するために必要な構成ファイルについて説明します。 Test/protractor-conf.jsファイルが関連する機能の構成に使用されることがわかります。いくつかの属性に焦点を当てましょう
1.Specsは実行するテストファイルのパスを表し、ここに書かれたものはe2e/*。
2.Baseurlは、テストファイルのブラウザ間のページのルートアドレスを表します
3.機能は、Chromeを使用するなど、テストケースを実行するために使用するブラウザを表して、このように設定できます
コードコピーは次のとおりです。
機能：{
「Browsername」：「Chrome」
}
フレームワークは、使用するテストフレームワークを表します。ここにジャスミンがあります
この構成ファイルについて詳しく知りたい場合は、ここをクリックして表示してください。
構成ファイルについて話した後、テストケースを書く方法を見て、最初に公式Webサイトに例を投稿しましょう。
コードコピーは次のとおりです。
「Strictを使用」;
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
説明（ 'my app'、function（）{
browser.get（ 'index.html'）;
それ（ '位置ハッシュ /フラグメントが空であるときに /view1に自動的にリダイレクトする必要があります'、function（）{
expect（browser.getLocationAbsurl（））。
}）;
説明（ 'View1'、function（）{
前に（function（）{
browser.get（ 'index.html＃/view1'）;
}）;
IT（ 'ユーザーが /view1'にナビゲートするときにview1をレンダリングする必要があります '、function（）{
expect（element.all（by.css（ '[ng-view] p'））。first（）。getText（））。
Tomatch（/View 1/）;
}）;
}）;
説明（ 'View2'、function（）{
前に（function（）{
browser.get（ 'index.html＃/view2'）;
}）;
IT（ 'ユーザーが /view2'にナビゲートするときにview2をレンダリングする必要があります（）{
expect（element.all（by.css（ '[ng-view] p'））。first（）。getText（））。
Tomatch（/View 2/）;
}）;
}）;
}）;
まず第一に、上記の構文は、ジャスミンフレームワークでサポートされているライティング方法です。その使用法がわからない場合は、ここをクリックできます
ここでは、上記の例で分度器が提供するいくつかの一般的な方法と特性についてのみ説明します
1.グローバルオブジェクトであるBrowserは、現在のブラウザのインスタンスを表します。一般的に使用されるGETメソッドは、ブラウザのアドレスの変更を実装するために使用されます。
2。要素であるグローバルオブジェクトは、ドキュメント要素を見つけることを担当するjQueryなどの関数を提供し、オブジェクトが共同で使用するときに使用されることがよくあります。
3.グローバルオブジェクトは、セレクタータイプを提供します。たとえば、CSS、モデル、バインド、その他の機能を介して要素を見つけることができます。
要素の方法とそれによって、上記の分度器APIドキュメントを参照してください
多くのことを言って、上記のテストケースを実行する時が来ました、コマンドは比較的簡単です
コードコピーは次のとおりです。
NPM Run Update-Webdriver
これは、関連するブラウザードライバーとセレンサーバーローカルJARパッケージをダウンロードする責任があります。通常、両方のリソースがGoogleサーバー上にあるため、これは失敗するため、ブラウザを使用して壁を閲覧して個別にダウンロードできます。アドレスは次のとおりです。
1。Chromeドライバーアドレス、通常、Chromedriver_2.9.zipファイルをダウンロードします。
2。セレンサーバーのローカルジャーパッケージをダウンロードし、通常、セレンサーバー - スタンダローン-2.40.0.jarファイルをダウンロードします。
次に、Selenium-ServerをProtractorパッケージのSeleniumフォルダーにコピーします。上記のコマンドがタイムアウトした場合、ファイルはここに表示されますが、空になり、直接交換してください。また、Chromedriver_2.9.zipの減圧後にファイルをここにコピーする必要があります。
最後に、次のコマンドを実行してテスト結果を確認します
コードコピーは次のとおりです。
NPMは分度器を実行します
NGシードプロジェクトのコマンドラインについて詳しく知りたい場合は、ここをクリックして表示してください
要約します
NG E2Eテストは、ユニットテストの構成よりもはるかに複雑ですが、多くのことを行うことができます。あなたがそれだけの価値があるなら、あなたもそれを試すことができます。ご質問がある場合は、コメントに返信できます。