この記事はCureApp Advent Calendar 2022の13日目です。
弊社では現在、様々な角度からテスト自動化を進めています。担当を決めて自動化を実施、その後QA全体で共有を図っています。私は社内向けのwebサービスのテスト自動化を担当、「TestCafe」を使って実装しました。今回はTestCafeで便利だった機能をいくつかご紹介します！
便利な機能その1：Role
Roleを使うとログイン処理を1箇所にまとめられます。また、管理者・一般ユーザーなど役割が違う場合のユーザー切り替えを簡単に行うことができます。
認証部分をRoleを使って共通化したところ：
import { t, Role } from 'testcafe';
const role = Role('http://example.com/login', async t => {
await t
.typeText('#login', 'username')
.typeText('#password', 'password')
.click('#sign-in');
});
export { role };
（詳細は公式ドキュメントを参照ください）
- https://testcafe.io/documentation/402845/guides/intermediate-guides/authentication
- https://testcafe.io/documentation/402836/guides/best-practices/best-practices#use-of-roles-for-login
便利な機能その2：Hooks
TestCafeには様々なレイヤーでHookが用意されています。よく使ったのは、Fixture.beforeEachです。
TestCafeにはFixureというクラスが用意されており、同じURLからスタートするTestをまとめる役割を担います。また、全てのTestは1つのFixtureに属します。このクラスが持つFixture.beforeEachメソッドでは、Fixtureに属する各Testを実行する際、共通の処理を記述できます。ここで先ほど作ったRoleを使うに書けば、各Testでログイン処理を呼び出さなくてよくなるということです。便利！ログイン処理を一度しか書かなくて良いのはやはり気持ちがいい 
import { role } from './role.js';
import { Selector, t } from 'testcafe';
fixture `example`
.beforeEach(async t => {
await t.useRole(role)
await t.navigateTo(`https://devexpress.github.io/testcafe/example/`)
})
test('H1 in header', async t => {
await t.expect(Selector(`header`).find(`h1`).innerText).eql(`Example`)
}
Hookについては、ローカル・グローバルなのか、またどのような順で呼ばれるのかしっかり理解しておくことが大切です。（Fixture.beforeEachとTest.beforeは同時には呼ばれません。どちらか片方だけ。雰囲気で書いていた箇所があり、沼にはまってしまいました 
キチンと理解してテストを書くのは大事！図は公式より拝借&追記しました。）
（詳細は公式ドキュメントを参照ください）
- https://testcafe.io/documentation/403435/guides/intermediate-guides/hooks
- https://testcafe.io/documentation/403435/guides/intermediate-guides/hooks#hook-order-and-priority
便利な機能その3：Skip
Skipは初期段階で、どのくらいの機能をテストするか、どれくらいのテストケース数になるかを把握するのに多用しました。
テスト自動化の流れを大まかに下記の挙げます：
- 最初にどれくらいテストケースが必要なのかざっくりと把握するために、まずはFixtureを確定し、枠だけを用意。その際Fixture.skipを呼び出しておく。
- その次に、各FixtureでTestを列挙。そしてやはり枠だけを用意。Fixture.skip同様、Test.skipを呼び出しておく。
- 個々のTestが自動化可能か判断。不可のものは、「
手動 」コメントをつけておく。 - 全てのFixtureに先の処理を実施すると、ざっくりとしたテストケース数を算出することができる。（実装過程で、いくつかテストを追加する必要が出てくるのはある程度想定）
- 各Test実装時に、skipを外し中身を実装していく。
簡単なテストを書いてみました。まずはFixture全体をskipする例：
import { role } from './roles.js';
import { t, Selector } from 'testcafe';
fixture.skip `ユーザー`
test('一覧', () => {});
次に、各FixtureでTestを列挙、一部をskip・「 手動 」コメントを追加した例：
import { role } from './roles.js';
import { t, Selector } from 'testcafe';
fixture `製品`
test('一覧', async t => {
//empty test ;P
});
test.skip('削除', async t => {});
test('🙏🙏🙏手動🙏🙏🙏: 手動で実施するテストだよ！', () => {});
テスト出力結果は下記：
製品
✓ 一覧
- 削除
✓ 🙏🙏🙏手動🙏🙏🙏: 手動で実施するテストだよ！
ユーザー
- 一覧
2 passed (1s)
2 skipped
下のように、それぞれが出力分けされているので、分かりやすい！出力をgrepして手動で実施するテストが何件あるかなど把握できます。また、いくつテストに成功したかも表示されるので進捗管理もできます。
- ✓：パスしたテスト
- -：skipしたテスト
- ✓：🙏🙏🙏手動🙏🙏🙏: 手動で実施のテスト
（詳細は公式ドキュメントを参照ください）
まとめ
RoleやHookを利用することで、効率的に自動化が進められます。またSkip利用で、大まかなテスト自動化の全体像が把握できました。今回FixtureやTestを詰めていく過程で、興味深かったのは、最終的に全てのテストのうち20%が手動で実施する必要があることでした。テスト自動化は便利ですが、やはり手動で残るところはどうしても出てきてしまいます。テスト時間の短縮だけでなく、どこがどれくらいのテストが自動化不可なのかということも把握できることが、テスト自動化のメリットとして挙げられるということが分かりました。