TestCaféでE2Eテストを行う準備
今回は、E2Eテストを自動化できるライブラリ、TestCaféに関する内容です。
特に、テスト実行前に必要な設定周りについて、ざっくりと紹介していこうと思います！
細かいメソッドについてのお話はしませんので、ご了承ください。
TestCaféを導入する
まず初めに、プロジェクトにTestCaféを導入します。
npm install -g testcafe
設定をしていく
次に、設定ファイルを作成していきます。
これがあると、コマンドラインからテストを実行する際に、このファイルを読みに行ってくれるので、引数から省略することができます。
.testcaferc.json作成
.testcaferc.jsonという名称の設定ファイルを作成します。
テストの実行に関する設定を行なっていくファイルです。
例えば、以下のような設定をしていきます。
{
// テスト実行時に使用するブラウザに関する設定
"browsers": "chrome",
// スクリーンショットに関する設定
"screenshots": {
// 保存先
"path": "./tests/screenshots",
// テストが失敗してもスクリーンショットを撮るかどうか
"takeOnFails": true,
// スクリーンショットの保存先パスと名前(テストコード内で指定することも可能)
"pathPattern": "${DATE}_${TIME}/${FIXTURE}.png",
// ページ全体を撮影するかどうか
"fullPage": true
},
// JavaScriptのエラーを無視するかどうか
"skipJsErrors": true,
// 同時に起動するブラウザの数
"concurrency": 1,
// TypeScriptのコンパイルに関する設定
"compilerOptions": {
"typescript": {
// tsconfigのパスを指定(TestCafé用に作成したものを利用)
"configPath": "testcafe_tsconfig.json"
}
}
}
上記以外にも、様々な設定を行うことができます。
多すぎてまとめきれないので、その他については、公式ドキュメントを参照してみてください！
TestCafé用に、tsconfig.json作成
TypeScriptを使用している場合は、TestCafé用にtsconfig.jsonを作成します。
{
"compilerOptions": {
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
テストコード作成
テストコードは以下のような感じで作成します。
今回は、sampleTest.tsという名前で、ファイルを作成します。
利用したページは、TestCafé公式ドキュメントでも紹介されている、こちらのサンプルページです。
以下のコードでは、ページ上部のh1要素(Example)の文字列が、「Exampleになっているかどうか」をテストしています。
/*
fixtureとpageのURLは、それぞれバッククウォートで囲みます。
シングルウォート等で囲むと認識できずエラーになります。
*/
fixture `sample test`.page `https://devexpress.github.io/testcafe/example/`;
// テストコード作成
test('test_1', async (t: TestController) => {
const header = Selector('.main-content').child('header');
const h1 = header.child('h1').innerText;
await t.expect(h1).eql('Example');
});
テスト実行
それでは、テストを実行してみます。
テストを実行するコマンドは以下のようにします。
testcafe テストコードのファイル名
今回の場合だと、以下のようになります。
testcafe sampleTest.ts
コマンドを実行すると、自動でブラウザが立ち上がり、テストされます！
感想
今回は、TestCaféの設定や実行についてご紹介いたしました。
TestCaféを使う機会に、参考になれば嬉しいです。
お読み下さり、ありがとうございました！
Discussion