TestCafeの導入方法 E2Eテスト

公開:2020/10/11
更新:2020/11/14
1 min読了の目安(約1600字TECH技術記事

概要

現在仕事でフロント部分のテストをしています。
その時に使用しているのが
TestCafeというテストツールです。

今回はTestCafeの導入方法を紹介していきます。

公式ドキュメントは英語だらけで嫌だ!日本語しか読めない!
と言う方は是非見てください。笑

(公式ドキュメントを読むのは超大切です。全部書いてます。笑)

TestCafeとは

TestCafeは、E2E(End-to-End)でブラウザテストを自動化するためのフレームワークです。

公式ドキュメントはこちら

簡単に説明すると、
指定したURLのサイトを表示、
指定したボタンなどの要素に対して正しい動作をしてくれるか、
指定した動作をしてくれるか
自動でテストしてくれるツールです。

動作ごとにスクリーンショットを撮り画像ファイルで保存や
動作にエラーが生じた場合はエラーの原因を表示してくれたり
ChromeやSafariなど、
複数種類のブラウザで実行可能といった機能もついています。

超便利です!

そんなTestCafeを、実行させる環境の作り方から説明していきます。

#npmなら
$ npm install testcafe

#yarnなら
$ yarn add -D testcafe

上記のコマンドでtestcafeの導入できます。

TestCafe では testfixtureという関数を使うのですが、
これらはESModuleimportではなく
グローバル変数として参照することとなるため、
このままだと不正な参照としてエラー扱いされてしまいます。
そのためこれらを許可するべく下記を .eslintrc に追記します。

{
  ...
  globals: {
    test: "readonly",
    fixture: "readonly"
  },
  ...
}

こちらを記述することでエラーが出ず使用可能になります。

次に、
プロジェクトの package.json の scripts に test コマンドを追記してコマンドラインからテストを実行できるようにします。

{
  ...
  "devDependencies": {
    "testcafe": "^1.7.0"
  },
  ...
  "scripts": {
    "test": "testcafe chrome test1.ts"
  }
}

testcafe コマンドに実行環境(ブラウザ)と実行ファイルのパスを指定します。

"コマンド":"testcafe 実行環境 ファイルのパス"

こんな感じです。

これら2つのオプションは必須です。
今回は chrome を指定しています。

実際に僕がした設定は、
.eslintをそのまま修正し、

pacage.jsonは

"scripts": {
 "testcafe": "testcafe chrome app/test/test.ts"
}

こんな感じでした。
この記述でコマンドとディレクトリ を指定できたので

ターミナルで

$ yarn testcafe

を実行するとTestCafeがchrome環境で
app/test/test.tsファイルの内容をテストしてくれます。

今たくさんテストを書いているので
実装内容や、詰まったポイントなど、どんどん書いていきます!