TestCafeでE2Eテストを自動化

概要

TestCafeにより、E2Eテストを自動化する。

手順

1. TestCafeをインストール

// インストール
$ npm install -g testcafe

// インストール確認
$ testcafe -v
Using locally installed version of TestCafe.
1.9.2

2. テストファイル(test.ts)を作成。

test.ts

import "testcafe";
import {Selector} from "testcafe";

fixture(" [テストグループ名] ")
    .page("https:[テスト対象のURL] ");

test(" [テスト名] ", async (t) => {
    // 操作するHTMLの要素 (ここでは、クラス名とname属性で要素を指定）
    const emailInputArea = Selector(".form-control").withAttribute("name", "email");
    const passwordInputArea = Selector(".form-control").withAttribute("name", "password");
    const loginButton = Selector(".loginBtn").withAttribute("name", "commit");

    // 実行するテスト（ログインし、指定した要素に田中 創さんという名前の表示があることを検証）
    await t
      .typeText(emailInputArea, " [メールアドレス] ")
      .typeText(passwordInputArea, " [パスワード] ")
      .click(loginButton)
      .expect(Selector(".header__userName").innerText).eql('田中 創さん');
});

3. package.jsonを編集し、テスト実行時のブラウザと実行ファイル(2.)を指定。

package.json

"scripts": {
        (略)
        "testcafe": "testcafe chrome ./test.ts",
        (略)
    },

4. テスト実行

$ npm run testcafe