はじめに

はじめてTestCafeを触ったので、その環境構築の方法と簡単なソースコードを説明していきます。
ただし私自身あまりJavaScriptには精通しておらず、とりあえず動くものを書きましたので、あしからず。

前提条件

今回使用するツールは下記の通りです。
Visual Studio Code（以下VSCode）とNode.jsについてはすでにインストール済みとします。

Tools	Version
Windows	10
VSCode	1.60.2
Node.js	12.18.2
TestCafe	1.16.1

テスト対象はHOTEL PLANISPHEREを使用します。

TestCafeとは

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

特徴

オープンソースのため、無料で使用可能
言語はJavaScriptやTypeScript
環境構築が容易
待機処理などをよしなにやってくれる

環境構築

特徴にも書いたように、TestCafeの環境構築はとても容易です。
コマンドプロンプトで下記コマンドを実行してください。

npm install -g testcafe

図のようにインストールされれば、TestCafeの環境構築は完了です。

念の為、ちゃんとインストールされたかを確認しましょう。
下記のコマンドを実行してください。

testcafe -v

これでバージョンが表示されれば正常にインストールされています。

テスト実行

テストコードを書いてみる

今回はログインテストをしてみます。
手順は下記のとおりです。

ログインページに移動する
メールアドレスとパスワードを入力する
ログインを押下する
マイページに遷移しているかを確認する

これを実装すると

test.js

import { Selector } from 'testcafe';

// サイトの指定
fixture('HOTEL PLANISPHERE')
    .page('https://hotel.testplanisphere.dev/ja/plans.html');

//テストケース1
let testcase1 = 'ログインテスト';
test(testcase1, async t => {
    //要素の取得
    const loginButton = await Selector('#login-holder');
    const email = await Selector('#email');
    const password = await Selector('#password');
    const login = await Selector('#login-button')

    //テスト開始
    await t
        //それぞれの動作
        .click(loginButton)
        .typeText(email, 'sakura@example.com')
        .typeText(password, 'pass1234')
        .click(login);
     //確認
    await t
        .expect(Selector('body > div > div:nth-child(1) > div > h2').innerText).eql('マイページ');
});

テストケースを増やしたい方はテストケース1の後ろにlet testcase2 = ~~のように続ければOKです。
テストケース

テスト実行

テスト実装ができたら、次は実行をしてみましょう。
今回はGoogle chromeで実行をしてみます。
下記のコマンドを打ってみましょう。

testcafe chrome ./test.js

コマンドを実行するとブラウザが立ち上がって、テストが実行されます。

テスト実行が終わったあとはテスト結果が表示されると思います。
下記図はPassした場合です。

テストがFailした場合は、下記のようにどこで失敗したのかがわかります。

おわりに

さらに詳しいテストコードを書きたい方はTestCafeのリファレンスを参照してみてください。