12周年記念パーティ開催！ 2024/5/10(金) 19:00
記事検索
購読 する ログイン

TestCafe入門 第1回 TestCafeとは

TestCafeはJavaScriptのEnd-to-Endテストを行うフレームワークです。ブラウザでの操作を自動化してテストを行いますが、WebDriverの個別インストールが不要で、環境構築が容易です。

カテゴリー
JavaScript >
テスト

発行

著者 藤田 智朗 フロントエンド・エンジニア
TestCafe入門 シリーズの記事一覧

はじめに

TestCafeは、E2E（End-to-End）*でブラウザテストを自動化するためのフレームワークです。この記事では、TestCafe（テストカフェ）の紹介とテストの実際について解説します。

*注：E2Eテスト

E2Eテスト（結合テスト）については、過去の記事を参考にしてください。

TestCafeの特徴

TestCafeは最初のコミットが2015年の4月、最初のリリースが2016年10月と比較的新しいE2Eテストフレームワークといえます。

そのため、async/awaitの使用を前提にAPIが設計されていたり、importするモジュールがなるべく最小限になるような工夫がされていたりと、ほかのE2Eテストフレームワークと比較すると、モダンなJavaScriptでテストが非常に書きやすい作りになっています。

また、自動待機のメカニズムによって、ページ読み込みとXHRの完了だけでなく、DOM要素の表示も待機するように作られているため、待機するための専用APIを呼び出す必要がありません。

Webアプリケーション用のE2Eテストフレームワークと聞くと、真っ先に思い浮かぶのはSeleniumではないでしょうか？ E2Eテストフレームワークの中でも有名なNightwatchやProtractorを含め、多くのE2EテストフレームワークがSelenium（WebDriver）と連携して動作します。CodeGridも過去、JavaScriptのテストをテーマにSeleniumを取り上げています。

TestCafeはそれらフレームワークと一線を画すもので、Seleniumをまったく使用しないE2Eテストフレームワークです。Seleniumを使用するフレームワークと比較すると、次のような特徴があります。

テスト環境の構築が容易

TestCafeはテスト環境を容易に構築することができます。SeleniumではWebDriverのクライアントとテストを実行する各ブラウザのWebDriverをインストールする必要があります。一方、TestCafeであればnpmを通じてTestCafeをインストールすれば、それだけでテスト環境が整ったことになります。設定ファイルも必要ありません。

また、TestCafeの開発者の1人であるIvan Nikulin氏によると、Seleniumで使用されるWebDriverは各ブラウザベンダーによって開発されており、それが互換性の問題*を引き起こすことを、Seleniumを使用しない理由の1つとして挙げています。

*注：互換性の問題

Firefoxはバージョン55（執筆時の最新バージョンは55.0.3）以降ではSelenium IDEが動作しなくなることが発表されています。

インストールされていない環境でもテストが実行可能

TestCafeだけでなくNode.jsすらインストールされていない環境であっても、テストを実行することが可能です。その場合、TestCafeが出力するURLを対象の環境のブラウザで開くだけでテストが開始されます。これはモバイル端末にも当てはまります。ただし、TestCafeがインストールされているホストと対象とするデバイスが、同一ネットワーク上に存在する必要があります。

テストコードはJavaScriptのみ

SeleniumはJavaScript以外にもJava、Ruby、Python、C#でもテストを書くことが可能ですが、TestCafe*はJavaScriptでしかテストを書くことができません。

クロスブラウザのテストサービスについて

BrowserStack、Sauce LabsといったWeb上でクロスブラウザのテストを行うサービスのためにTestCafeからプラグインが提供されています。

ただし、それでもこれらサービスを利用する際には注意が必要です。これらサービスが提供するSeleniumへのサポートが必要なケースでは、TestCafeは適さないかもしれません。 たとえば、BrowserStackにはE2Eテストの動画を自動的に撮影する機能に加え、各アクション（ページ遷移、クリックなど）時のスクリーンショットをキャプチャする機能がありますが、2017年9月現在これはSeleniumにしかサポートされていません。

*注：TestCafeのライセンスと同名有償ツールについて

ここで紹介しているTestCafeと同名の有償ツールとWebサービスが同じ企業から提供されています。コーディングすることなくテストを記録するビジュアルレコーダーと、レポートを出力する機能などを備えたWebサービスのようです。この記事で紹介するTestCafeは、JavaScriptデベロッパ向けにMITライセンスで提供されているものです。有償ツールと混同しないように注意してください。

TestCafeのインストール

TestCafeを理解するには、実際にインストールしてテストを書いて体験してみるのがよいでしょう。前述したようにTestCafeの環境構築は非常に簡単です。インストールは、次のコマンドを実行するだけです。問題なくインストールされれば、それだけでTestCafeのテスト環境が整ったことになります。

npm install -g testcafe

次のコマンドでバージョン確認をして、バージョン番号が表示されれば、正常にインストールされています。

testcafe -v
0.17.1

なお、以降の解説に関しては、macOS Sierra 10.12.6、TestCafe 0.17.1を基本に動作を確認しています。

テストの実行

それでは、実際にテストを書いて実行してみましょう。デモ用の簡単なアンケートフォームを用意したので、このフォームをテストするためのコードを用意します。

次のリンクからデモ用のフォームが確認できます。

なお、紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。

TestCafe入門 サンプルリポジトリ

サンプルはローカルサーバーを立て、ローカルでテストができるようにしてあります。詳しい使い方はリポジトリのREADME.mdを参照してください。

このアンケートフォームには次の機能が実装されています。

  • 名前が必須項目であり、入力しないと送信ボタンを押しても送信されず、エラーメッセージが表示される。
  • アンケートの送信前にブラウザの確認ダイアログが表示され、キャンセル選択すると送信されず、OKを押すと送信される。
  • 送信後、サンクスページに遷移して「（入力された名前）様、アンケートにお答えいただき、ありがとうございました。」というメッセージが表示される。

これらの動作のうち、「名前を入力して送信すると、名前が入力されたサンクスページが表示される」という動作を確認してみたいと思います。

アンケートフォームをテストするためのtest.jsという名前のファイルを作成して、次のコードを貼り付けてください。

test.js

import {Selector} from 'testcafe';

fixture('アンケートフォーム')
  .page('https://cdn.codegrid.net/2017-testcafe/demo/1.html');

test('必要項目を入力後、送信して遷移先を確認', async t => {
  const userName   = await Selector('#user-name');
  const submitButton = await Selector('#submit-button');
  await t
    .setNativeDialogHandler(() => true)
    .typeText(userName, 'ピクセルグリオ')
    .click(submitButton);
  await t.expect(Selector('#thanks-message').innerText).eql('ピクセルグリオ様、アンケートにお答えいただき、ありがとうございました。');
});

コードの文法などは、次回詳しく解説します。ここではtest.jsに書かれていることをざっと説明します。

  • アンケートフォームのページを開く
  • ユーザー名の入力欄とフォーム送信ボタンの要素の参照を取得
  • 確認ダイアログで「OK」を選択するようにあらかじめ設定する
  • ユーザー名の入力欄に"ピクセルグリオ"と入力する
  • フォーム送信ボタンをクリックする
  • サンクスページに期待されるメッセージが表示されているか確認する

【予備知識】async/awaitについて

TestCafeのコードにはasync/awaitを多用することになるため、async/awaitの挙動を理解しておくことが重要になります。このシリーズではTestCafeを解説するのが目的なので、async/awaitについては詳しく説明しません。async/awaitについては、CodeGridの次のシリーズも参考にしてください。

ファイルを作成したら、そのファイルと同じディレクトリ内でコンソールから次のコマンドを実行してください。このコマンドは、TestCafeにChromeとSafariのブラウザでtest.jsのテストの実行するように指示しています。

testcafe chrome,safari ./test.js

自動的にブラウザが立ち上がり、テストが実行されます。

テストを実行すると自動的にブラウザが立ち上がり、テストが始まる。

各要素のレンダリングを待って操作を行い、動作を確認する。

その結果がコンソール上に表示されるはずです。

% testcafe chrome,safari ./test.js
 Running tests in:
 - Chrome 59.0.3071 / Mac OS X 10.12.6
 - Safari 10.1.2 / Mac OS X 10.12.6

 アンケートフォーム
 ✓ 必要項目を入力後、送信して遷移先を確認


 1 passed (3s)

参考：原因不明のScript errorが発生する場合

筆者がChromeブラウザで確認していた際に、Chromeの拡張機能が原因で下記のようなエラーが発生するケースがありました。テストが正常に実行できない場合、拡張機能を無効にしてから再度試してみてください。

1) Error on page "https://cdn.codegrid.net/":

   Script error.

   Browser: Chrome 60.0.3112 / Mac OS X 10.12.6

それぞれのローカルで、使用可能なブラウザの種類は、コマンドに-b（または、--list-browsers）オプションを付けて実行することで確認することができます。

% testcafe -b
chrome
safari
firefox

E2Eテストはブラウザ用のドライバのインストールによる環境設定や待機用のカスタムコードの記述など、実際に実行を成功させるまでのハードルが高い傾向にありますが、TestCafeであれば導入から実行まで、比較的スムーズに作業を進めることができたのではないでしょうか。

これに加えてE2Eのテストに関するすべてのことがJavaScript（Node.js）で完結することにも、筆者は大いに魅力を感じています。

まとめ

今回はTestCafeの紹介と、簡単なテストの実行について説明しました。まだ「触ってみた」という程度ですが、環境構築には手間がかからないことがおわかりいただけたかと思います。

これまでブラウザ上でE2Eテストを実施する場合、Seleniumが必須というケースがほとんどだったと思いますが、筆者はTestCafeの登場によって選択肢が1つ増えたと捉えています。

次回は、TestCafeでテストを書くための基本的な文法などについて説明します。
X GitHub
運営会社