ブラウザーを自動で操作し動作確認できる、「Angular」のe2eテスト

次世代Webアプリケーションフレームワーク「Angular」の活用 第15回

複数コンポーネントのWebページをe2eテストでまとめて確認

　e2eテストはWebページ全体に対するテストなので、1ページに含まれるコンポーネントが複数あっても、それら全体をまとめて動作確認できます。例として、3つのコンポーネントをルーターで切り替える、図6のようなページのテストを紹介します。

図6　複数コンポーネントをルーターで切り替えるWebページ（P004-router-link）

　このページは、画面上部のリンクを押下すると、MainCompoent、Sub1Component、Sub2Componentの各コンポーネントを切り替えて画面表示します。各コンポーネントには異なるメッセージが表示されます。また、Sub2ComponentにはAngularのホームページへのリンクが配置されています。ルーターの利用法は、第5回の記事も参考にしてください。

図7　Sub2Componentのリンクをクリックした状態（P004-router-link）

　まず、PageObjectはリスト6のようになります。（1）はページ表示処理で、（2）はbrowser.getCurrentUrlメソッドでWebページのURLを取得します。（3）はリンククリックの処理で、ほかのリンクについても同様の実装があります。（4）は画面のメッセージを取得する処理です。

［リスト6］図6、7のWebページのPageObject（P004-router-link/e2e/src/app.po.ts）

export class AppPage {
  // ページを表示 ...（1）
  navigateTo() {
    return browser.get('/');
  }
  // URLを取得 ...（2）
  getUrl() {
    return browser.getCurrentUrl();
  }
  // Sub1Componentリンクをクリック ...（3）
  clickSub1Link() {
    element(by.id('sub1-link')).click();
  }
（略：リンクをクリックする処理）
  // 画面に表示されたメッセージを取得 ...（4）
  getMessage() {
    return element(by.id('message')).getText();
  }
}

　ルーターによるコンポーネントの切り替え表示を確認するテストは、リスト7のように記述できます。（1）でページ表示直後の画面表示を確認後、（2）でSub1Componentのリンクをクリックして、切り替わったWebページのURLとメッセージ文言を確認します。

［リスト7］ルーターでコンポーネントを切り替え表示するテスト（P004-router-link/e2e/src/app.e2e-spec.ts）

it('ルーターのリンク', () => {
  // ページ表示後はMainComponentが表示される ...（1）
  page.navigateTo();
  expect(page.getMessage()).toEqual('これはMainComponentです。');
  // Sub1ComponentリンクをクリックしてURLと画面を確認 ...（2）
  page.clickSub1Link();
  expect(page.getUrl()).toEqual('http://localhost:4200/sub1');
  expect(page.getMessage()).toEqual('これはSub1Componentです。');
（略：Sub2Component、MainComponentのリンクをクリックする処理）
});

　Sub2Componentに配置された、Angularのホームページへのリンクをクリックするテストは、リスト8の通りになります。（1）でSub2Componentを表示させたあと、（2）でAngularのホームページへのリンクをクリックして、遷移先ページのURLを確認します。

［リスト8］外部ページに遷移するテスト（P004-router-link/e2e/src/app.e2e-spec.ts）

it('外部ページへのリンク', () => {
  // ページを表示後、Sub2Componentリンクをクリック // ...（1）
  page.navigateTo();
  page.clickSub2Link();
  // AngularのホームページへのリンクをクリックしてURLを確認 ...（2）
  page.clickAngularIOLink();
  expect(browser.getCurrentUrl()).toEqual('https://angular.io/');
});

まとめ

　本記事では、Angularのプロジェクトでe2eテストを行う方法について説明しました。e2eテストはWebページ全体を対象にして、利用者の実際の操作に近いテストが行えますが、内部の細かいロジックを検証する用途には向きません。まず、単体テストで部品単位のテストを細かく行って品質を確保してから、部品を結合した状態のテストとしてe2eテストを行うといった、使い分けが有効です。

　次回は、アプリアイコンやオフラインキャッシュなどによってネイティブアプリのような使い勝手のWebページを実現するPWA（Progressive Web Apps）を、Angularの機能で作成する方法を紹介します。

参考資料

• Angular
• Angular CLI