TestCafeを触ってみた

これはWanoグループ Advent Calendar 2022、9日目の記事です。

EDOCODEサーバーサイドエンジニアの井内です。

以前からE2Eテストフレームワークの調査をしてみたいと思っていまして、Advent Calendarを書くネタとしてTestCafeを触ってみました。

インストール

下記のコマンドでインストールできます。

$ npm install -g testcafe

サンプルテスト作成

ここのサンプルコードを参考にして、簡単なテストを作成してみました。
今把握している要件では別タブを開いてそちらを操作する必要がありまして、別タブのタイトル取得をするようにしました。

test.js

import { Selector } from 'testcafe';

fixture `edocode site`
    .page `https://www.edocode.co.jp/`;

test('new tag', async t => {
    await t.click('div.hiring-banner　> a')
        .wait(20000)
        .expect().eql('Jobs at EDOCODE');
});

このテストでは別タブのタイトルが動的に書き換えられていて、waitで待って取得しています。（これについてはもしかすると他にもっと良いやり方があるかもです）

PCテスト実行

上記で作成してテストコードを実行してみます。
コマンドは下記のようにtestcafeを使って、ブラウザとテストコードを引数で指定します。

$ testcafe chrome test.js
$ testcafe firefox test.js
$ testcafe safari test.js
$ testcafe edge test.js

ヘッドレスブラウザを使うこともできます。

$ testcafe chrome:headless test.js

モバイルテスト実行

モバイルテストはテスト用のURLを生成して、そこにアクセスすることで実行できます。

$ testcafe remote test.js

オプションでQRコードを表示することもできます。

$ testcafe remote test.js --qr-code

使ってみた感想

WebDriver不要で、npm packageのインストールだけでテスト実行環境を作れるのはとても楽でした。（npm installから5分くらいでサンプルコード実行までできました）

別タブへのアクセスもできますし、主要ブラウザは一通りサポートしているようなので、大きな問題なく使うことができそうです。

EDOCODE Advent Calendarの担当枠がまだあるので、次の記事ではCI実行設定を試してみようと思います。

最後に

現在EDOCODEでは、エンジニア・デザイナー・プロダクトマネジャーを募集しています。ご興味のある方は、こちらの採用ページも是非ご覧ください！