🎃

TestCafeの導入方法　E2Eテスト

2020/10/11に公開

JavaScript

概要

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

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

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

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

TestCafeとは

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

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

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

超便利です！

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

#npmなら
$ npm install testcafe

#yarnなら
$ yarn add -D testcafe

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

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

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

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

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

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

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

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

こんな感じです。

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

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

pacage.jsonは

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

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

ターミナルで

$ yarn testcafe

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

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

概要

TestCafeとは

Discussion