Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのバージョン6で追加された新機能を紹介しました。今回は、Webブラウザーを自動的に操作してAngularアプリの動作を確認できる、e2eテストの利用方法を説明します。

目次

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。

 Angular CLIで生成したプロジェクトでは、自動的にテストを実行する機能として、「単体テスト」と「e2e(End-to-End)テスト」が利用できます。単体テストは、コンポーネントやサービスといった部品単位でテストを行う方法で、本連載の第13回で利用方法を紹介しました。

 一方、e2eテストは、部品単位ではなく、Webページ全体が正しく動作することを確認します。Angularのe2eテストでは、ブラウザーに表示させたWebページに対して、テキストの入力やボタンの押下といった操作を自動的に行わせて、結果が正しいかを確認します。

 本記事では、Angularでe2eテストを行う方法について説明していきます。

対象読者

  • Angularでより品質の高いWebページを作りたい方
  • Webブラウザーのテスト操作を自動化したい方
  • 単体テストとe2eテストの使い分けをしたい方

必要な環境

 Angularの開発ではTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 6.0.4
    • Angular CLI 6.0.7
    • Node.js v8.11.2 64bit版
    • Microsoft Edge 42.17134.1.0(Webページ表示用)
    • Google Chrome 67.0.3396.79(e2eテスト実行用)

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。--aotは、実行前にスクリプトの変換処理をまとめて行うオプション、--openは、ブラウザーを自動的に起動するオプションです。また、e2eテストを実行するには「ng e2e」コマンドを実行します。

デフォルトで生成されるe2eテスト

 Angular CLIでプロジェクトを生成すると、図1のように、e2eテストのファイルがe2eフォルダーに生成されます。このファイルをもとに、テスト内容を記述していきます。

図1 Angular CLIが生成したe2eテストのファイル(P001-init)
図1 Angular CLIが生成したe2eテストのファイル(P001-init)

 生成されたファイルの概要を、表1にまとめます。

表1 e2eテストのファイル概要
No. ファイル名 役割
1 protractor.conf.js Protractorの設定ファイル
2 tsconfig.e2e.json TypeScript設定ファイル
3 src/app.e2e-spec.ts e2eテストを記述するファイル
4 src/app.po.ts Webページに対応するPageObjectファイル

 No.1は、Angular用e2eテストツールProtractorの設定ファイル、No.2はe2eテストの実行時に利用するTypeScriptの設定ファイルです。本記事では、生成されたこれらのファイルをそのまま利用します。Protractorの設定内容は、公式のサンプルファイルも参考にしてください。

 No.3はe2eテストを記述するファイルです。単体テスト同様、Jasmineの形式で記述します。Angular CLIで生成したプロジェクトでは、e2e/src配下の「*.e2e-spec.ts」という名前のファイルを、e2eテストとして実行します。

 No.4は、PageObjectと呼ばれる、WebページをJavaScriptのクラスで表したものです。詳細は後述します。

 デフォルトで生成されるapp.e2e-spec.tsを、リスト1に示します。

[リスト1]デフォルトのe2eテストファイル(P001-init/e2e/src/app.e2e-spec.ts)
describe('workspace-project App', () => {      // ...(1)
  let page: AppPage;                           // ...(2)
  beforeEach(() => {                           // ...(3)
    page = new AppPage();                      // ...(4)
  });
  it('should display welcome message', () => { // ...(5)
    page.navigateTo();                         // ...(6)
    expect(page.getParagraphText())            // ...(7)
      .toEqual('Welcome to P001-init!');       // ...(8)
  });
});

 (1)のdescribeはテストのグループ、(3)のbeforeEachは各テストの初期化処理です。(5)のitが1つのテストを表し、(8)のexpect.toEqualメソッドで処理結果を想定値と比較します。これらは単体テストと同じ、Jasmineの記述形式です。

 このテストでは、Webページに対応したPageObjectのAppPage(2)を、beforeEachで生成して(4)、テストで利用します。(6)のnavigateToメソッドでページ遷移して、(7)のgetParagraphTextメソッドでページ内のテキストを取得、(8)で想定値と比較します。

 AppPageの実装はリスト2のようになっています。(1)のnavigateToメソッドはページ遷移、(2)のgetParagraphTextメソッドはページ内のテキストを取得する処理です。browserやelementは、Protractorが提供するブラウザー操作機能で、詳しい利用方法は後述します。

[リスト2]デフォルトのPageObjectファイル(P001-init/e2e/src/app.po.ts)
export class AppPage {
  navigateTo() {
    return browser.get('/'); // ページ遷移...(1)
  }
  getParagraphText() {
    return element(by.css('app-root h1')).getText(); // テキスト取得 ...(2)
  }
}

 このe2eテストでは、ページ上部に表示されるタイトルが「Welcome to P001-init!」となることを確認します。「ng e2e」コマンドを実行すると、Chromeブラウザーが起動して、リスト1、2のe2eテストが実行されます。

図2 Chromeブラウザーでe2eテストが実行される(P001-init)
図2 Chromeブラウザーでe2eテストが実行される(P001-init)

 結果は図3のようにコンソールに表示されます。ここでは、タイトルが「Welcome to app!」となって想定と一致しないため、テストが失敗します。

図3 e2eテストが失敗した表示(P001-init)
図3 e2eテストが失敗した表示(P001-init)

 タイトルが想定通りになるようにソースコードを修正してe2eテストを再実行すると、図4のようにテストが成功します。

図4 e2eテストが成功した表示(P001-init-fixed)
図4 e2eテストが成功した表示(P001-init-fixed)

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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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