CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

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

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

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

図7 Sub2Componentのリンクをクリックした状態(P004-router-link)
図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の機能で作成する方法を紹介します。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5