E2Eテストの始め方 TestCafe① -導入編-
E2Eテストの始め方 TestCafe② -セレクタについて-
[E2Eテストの始め方 TestCafe③ -スクリーンショット編-]
(https://qiita.com/natsu_mikan/items/60b51a0d87dcc98e7e9b)
[E2Eテストの始め方 TestCafe④ -formテストについて-]
(https://qiita.com/natsu_mikan/items/b9b5a2f504af1ee1c4f1)

これまでの記事でスクリーンショットの撮り方やCVテストの方法を書いてきましたが、
fullPage: trueなど同じ設定をテストケース一つ一つに書いており、コード量が増えるしよろしくないので共通設定は.testcaferc.jsonにまとめることにしました！

#.testcaferc.json
設定を色々書いておけるファイルです。
ファイルを作成したら、Testcafeを実行するディレクトリに置いてあげます。(通常はプロジェクトのルートディレクトリ)
コマンドラインやインターフェイスから実行する際に指定した設定は、.testcaferc.jsonの設定を上書きして実行されます。

例えば、

.testcaferc.json

{
    "browsers": "chrome"
}

.package.json

{
    "testForm": "testcafe chrome e2e/test.js"
}

.testcaferc.jsonではブラウザを「chrome」と指定し、package.jsonで「safari」と指定した場合、package.jsonで設定した「safari」が実行されます。

このファイルには様々な設定を書くことができます。

##browsers
テストを実行するブラウザを1つ or 複数設定することができます(指定できるのはPCにインストールされているブラウザです)

複数の場合、

.testcaferc.json

{
    "browsers": ["ie", "firefox"]
}

インストールされている全てのブラウザでテストを行うには、allを指定してあげます。

ブラウザのエイリアスにpostfixを追加して、ヘッドレスモードでテストを実行したり、Chromeのデバイスエミュレーションやユーザープロファイルを使用したりすることもできます。

.testcaferc.json

{
    "browsers": ["firefox:headless", "chrome:emulation:device=iphone X"]
}

その他、リモートデバイス上のブラウザでテストを実行するには、remoteを指定します。
(※これを実行するにはリモートブラウザ接続を作成する必要があるので設定したい方は公式ドキュメントをご確認ください)
スマホや別マシンでテストをしたい場合、remoteって書けばいけるかと思ったんですが、他に調整が必要なようなので私はpacakge.jsonに書くことにしました(時間があれば調べて理解したい)

##src
テストを実行するファイルまたはディレクトリを指定します。

.testcaferc.json

{
    "src": "e2e/test.js"
}

もちろん複数指定することもできます

.testcaferc.json

{
    "src": ["e2e/test.js", "e2e/test2.js"]
}

##reporter
テストレポートを生成します。

レポートをファイルに保存するには、nameプロパティにレポーター名、outputプロパティにファイルへのパスを指定するオブジェクトを渡します。

.testcaferc.json

{
    "reporter": {
        "name": "json",
        "output": "reports/report.json"
    }
}

生成されたレポートの中身はこんな感じ

report.json

{
  "startTime": "2020-08-27T07:39:24.564Z",
  "endTime": "2020-08-27T07:39:57.315Z",
  "userAgents": [
    "Chrome 84.0.4147.135 / macOS 10.14.6"
  ],
  "passed": 1,
  "total": 1,
  "skipped": 0,
  "fixtures": [
    {
      "name": "formテスト",
      "path": "/Users/【username】/【プロジェクト】/e2e/test.js",
      "meta": {},
      "tests": [
        {
          "name": "項目を入力し送信",
          "meta": {},
          "errs": [],
          "durationMs": 32737,
          "screenshotPath": null,
          "skipped": false
        }
      ]
    }
  ],
  "warnings": []
}

##screenshots
スクリーンショットに関するオプションを指定します。

###screenshots.path
スクリーンショットが保存されるベースディレクトリを指定します。

.testcaferc.json

{
    "screenshots": {
        "path": "./screenshots/"
    }
}

###screenshots.takeOnFails
テストが失敗したときにスクリーンショットを撮影するかどうかを指定します。

.testcaferc.json

{
    "screenshots": {
        "takeOnFails": true
    }
}

###screenshots.pathPattern
スクリーンショットファイルの相対パスと名前を合成するカスタムパターンを指定します。

.testcaferc.json

{
    "screenshots": {
        "pathPattern": "${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png"
    }
}

###screenshots.fullPage
ページ全体をキャプチャすることを指定します。

.testcaferc.json

{
    "screenshots": {
         "fullPage": true
    }
}

##debugMode
デバッグモードでテストを実行します。

.testcaferc.json

{
    "debugMode": true
}

##debugOnFail
テストが失敗したときに自動的にデバッグモードに入るかどうかを指定します。
このオプションを有効にすると、テストが失敗したときにテストを一時停止します。これにより、テストされたページを確認し、失敗の原因を特定することができます。
完了したら、フッターの「完了」ボタンをクリックし、テストを終了します。

.testcaferc.json

{
    "debugOnFail": true
}

##skipJsErrors
WebページのJavaScriptエラーを無視します。
テストされたWebページでJavaScriptのエラーが発生すると、テストの実行を停止し、エラーメッセージとスタックトレースをレポートに投稿します。

.testcaferc.json

{
    "skipJsErrors": true
}

##skipUncaughtErrors
テストコード内の捕捉されていないエラーや処理されていないpromiseの拒否を無視します。
テスト実行中にサーバー上で捕捉不能エラーまたは未処理のpromiseがrejectされると、テストを停止し、エラーメッセージをレポートに投稿します。

.testcaferc.json

{
    "skipUncaughtErrors": true
}

##pageLoadTimeout
DOMContentLoadedイベントの後に経過した時間(ミリ秒単位)を指定し、その時間内にwindow.loadイベントの発生を待ちます。
タイムアウトが経過した後、またはwindow.loadイベントが発生した後(どちらか早い方)、テストを開始します。
速度が個々のアクションにも指定されている場合、アクションの速度設定が優先されます。

デフォルト：3000

.testcaferc.json

{
    "pageLoadTimeout": 1000
}

##speed
テストの実行速度を指定します。
デフォルトでは、テストは最高速度(1)で実行されます。このオプションを使用することで実行速度を遅くすることができます。
1（最も速い）から 0.01（最も遅い）の間の数値を指定。

デフォルト：１

.testcaferc.json

{
    "speed": 0.1
}

##stopOnFirstFail
テストが失敗した場合、テストの実行を停止します。

.testcaferc.json

{
    "stopOnFirstFail": true
}

##other

今回は省きましたが、これ以外にもまだまだあります。

disableScreenshots ：スクリーンショットを撮らないようにする
videoPath：テスト実行のビデオを録画&ビデオを保存するベースディレクトリを指定
videoOptions：テスト実行のビデオを記録する方法を定義するオプションを指定
videoEncodingOptions：ビデオエンコーディングのオプションを指定
quarantineMode：失敗したテストの隔離モードを有効にする
filter：実行するテストやフィクスチャを指定
- test：指定した名前でテストを実行
- testGrep：指定されたgrepパターンと名前が一致するテストを実行
- fixture：指定した名前のフィクスチャを実行
- fixtureGrep：指定されたgrepパターンと名前が一致するテストを実行
- testMeta：メタデータが指定されたキーと値のペアに一致するテストを実行
- fixtureMeta：フィクスチャのメタデータが指定されたキーと値のペアにマッチするテストを実行
appCommand：テストが開始される前に指定されたシェルコマンドを実行
appInitDelay：appCommandオプションを使用して起動したアプリケーションが初期化されるまでの時間(ミリ秒単位)を指定
concurrency：テストを同時に実行するブラウザインスタンスの数を指定
selectorTimeout：セレクタが返すノードを取得しようとする時間（ミリ秒単位）を指定
assertionTimeout：セレクタ・プロパティまたはクライアント関数が実際の値として渡された場合に、TestCafeがアサーションの正常な実行を試みる時間(ミリ秒単位)を指定する
clientScripts：テスト中に訪問したページにスクリプトを注入する。クライアント側のモック関数やヘルパースクリプトを導入します
port1, port2：TestCafeがテストの実行に使用するカスタムポート番号を指定
hostname：PCのホスト名を指定します。リモートブラウザでテストを実行するときに使用する
proxy：インターネットにアクセスするためにローカルネットワークで使用するプロキシサーバーを指定
proxyBypass：指定されたリソースにアクセスするために、TestCafeがプロキシサーバーをバイパスする
ssl：クライアントブラウザとTestCafeサーバ間でHTTPS接続を確立するためのオプションを提供する
developmentMode：エラーを記録して診断するメカニズムを有効にする
qrCode：コンソールからTestCafeを起動した場合、リモートブラウザの接続に使用されるURLを表すQRコードを出力する
tsConfigPath：TestCafeがカスタムTypeScript設定ファイルを使用できるようにし、その場所を指定する
disablePageCaching：ブラウザがページのコンテンツをキャッシュしないようにする
color：コマンドラインで色を有効にする
noColor：コマンドラインの色を無効にする

詳しくは公式をご覧ください

以上、今回は.testcaferc.jsonについて書いてみました。
また一つ勉強になったのでガシガシ実装進めていくぞ〜！