angularjs_AngularJS での e2e テストの例

前の記事では、ng の 単体テスト について説明しました。今日は、e2e (エンドツーエンド) テストについて話しましょう。

モジュールの単一の機能ポイントをテストする場合は単体テストが最適ですが、ユーザーが複数のページを操作するときにバグが発生する場合、現時点ではユーザーをシミュレートするために単体テストを使用する必要があります。もちろん、e2e テストは単体テストではできないことの多くを、e2e テストで実行できます。

以前、ng は e2e テストを実行するために Angular Scenario Runner を使用していましたが、現在は e2e を実行するために Protractor に置き換えられています。

分度器

Protractor は、e2e をテストするために Angularjs で使用されるフレームワークです。それ自体は npm モジュールであり、内部的に WebDriverJS 上に構築されています。Protractor を使用すると、実際のテスト ケースを完全にシミュレートできます。ユーザーの行動。

そのリソース アドレスの一部を以下に掲載します:

1.Protractor が提供するテスト API
2.分度器簡単な使用例
3.WebDriverJs ガイド。これは Protractor が依存するコアです。npm モジュールは selenium-webdriver

と呼ばれます。

分度器の動作原理

Protractor は主に次のものに依存して e2e テストを実行します。

1.WebDriver API、つまり上記の WebDriverJ は、フロントエンド テスト用に Selenium によって提供される関連する JS API です
2. Selenium Server、ブラウザードライバー
と通信するために使用されるバックエンド jar パッケージ 3.WebDriver ブラウザ ドライバ。実際の Web サイトのコンテンツを表示し、Selenium サーバーと通信するために使用されます。ここで実際のブラウザの操作が送信されます。

全体の操作プロセスは次のとおりです

これらのコンポーネント間の以前のやり取りについて詳しく知りたい場合は、

ここをクリックしてください

NG シード プロジェクトを使用して e2e を説明します

実際の e2e の例を説明するために、ng 公式が提供するシード プロジェクトを使用します。まず、次のコマンドを使用してシード プロジェクトを取得します。

コードをコピー コードは次のとおりです:

git clone https://github.com/angular/angular-seed.git

次に

を実行します

コードをコピー コードは次のとおりです:

npm インストール

関連する依存関係ファイルをすべてインストールします

ここでは、まず e2e テストの実行に必要な構成ファイルについて説明します。test/protractor-conf.js ファイルが関連する機能の構成に使用されていることがわかります。

1.specs は実行するテスト ファイルのパスを表します。ここでは e2e/*.js です

2.baseUrlはテストファイル内のブラウザ間のジャンプページのルートアドレスを表します
3.capabilities は、テスト ケースの実行に使用するブラウザを表します。たとえば、Chrome を使用する場合は、次のように設定できます

コードをコピー コードは次のとおりです:

機能: {
'ブラウザ名': 'クロム'
}

framework はどのテスト フレームワークが使用されているかを表します。ここで使用されているのは jasmine

この設定ファイルについて詳しく知りたい場合は、

ここをクリックして表示してください

設定ファイルについて説明した後、まず、公式 Web サイトからサンプルを貼り付けて、テスト ケースの作成方法を見てみましょう。

コードをコピー コードは次のとおりです:

'厳密な使用';

/* https://github.com/angular/protractor/blob/master/docs/getting-started.md */

describe('私のアプリ', function() {

ブラウザ.get('index.html');
  it('位置ハッシュ/フラグメントが空の場合、自動的に /view1 にリダイレクトされるはずです', function() {
    Expect(browser.getLocationAbsUrl()).toMatch("/view1");
  });

  description('view1', function() {

beforeEach(function() {
      browser.get('index.html#/view1');
    });

    it('ユーザーが /view1 に移動したときに view1 をレンダリングする必要があります', function() {
      Expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/ビュー 1 の一部/);
    });

});

  description('view2', function() {

beforeEach(function() {
      browser.get('index.html#/view2');
    });

    it('ユーザーが /view2 に移動したときに view2 をレンダリングする必要があります', function() {
      Expect(element.all(by.css('[ng-view] p')).first().getText()).
        toMatch(/ビュー 2 の一部/);
    });

});
});

 
最初に上の语法は、jasmine フレームでサポートされている写法であり、理解されていない使用法の可用性点击这里

ここでは、分度器が提供するプロパティに関する一般的な方法についてのみ説明します

1.browser、全局オブジェクト、現在のブラウザの 1 つの例を表し、地名を変更するためによく使用される get メソッドです
2.要素、全局所オブジェクト、画像 jquery の機能を提供し、通常はオブジェクトと組み合わせて使用​​されます
3.by、すべての局所オブジェクト、選択ツールの種類を提供します。たとえば、css、model、bind などの特性を介して要素を実行できます

要素による方法については、前述の分度器 API 文

を参照してください。

说了これ多、跑一面上の测试用例、命令比较简单

复制代 代码如下:

npm run update-webdriver

これらのダウンロード関連のブラウザーは、Selenium-server の本体の jar パッケージに関連付けられていますが、この 2 つのソースはすべて Google サービスにあるため、一般的にはこれらは失われています。そのため、ブラウザーの翻訳を個別にダウンロードできます。地址如下:

1.Chrome ドライバー地址、一般的に下ろすchromedriver_2.9.zipこのファイル。

2.selenium-server 本地下載一 本地下載二 本地下載二 selenium-server-standalone-2.40.0.jarこのファイル。

その後、selenium-server のポートを分度器包囲の selenium ファイルを移動し、上記のようにコマンドを超過した後、このファイルも空ではなく、直接置き換えることができます。また、chromedriver_2.9.zip を取得します。解読後のファイルはここにあります

最後に次のコマンドを実行しましたが、検査結果が確認されました

复制代 代码如下:

npm 分度器を実行

ng 子リストのリストに関連するコマンド実行をもっと知っているので、ポイントをここで見ることができます

总结

ng 的 e2e 测试要比单元测试構成要繁琐的多、不过它能為的事情也很多、非常に值的你也试一试、有什么问题可评论里去。