TestCafeを触ってみる

4923 ワード
JavaScript testcafe テスト自動化 JavaScript テキストリンク

概要

E2EテストフレームワークのTestCafeを簡単に触ってみます。
※ごく簡単な説明しかしてないです。

TestCafeの特徴

  • TestCafeはE2Eテストを行うためのフレームワークです。
  • JSでテストコードを書くことができます。
  • 導入も簡単で、Seleniumの様なDriverを用意する必要はありません。

導入

npmでインストールします。

$ npm install -g testcafe

testcafeコマンドが通ればOKです。

$ testcafe -v
1.18.1

テストを書く

テスト対象はテスト自動化練習サイトのHOTEL PLANISPHEREを利用します。
ここでは、宿泊プランの予約画面でプラン名が正しく表示されているかを確認するテストを作ります。

「お得な特典付きプラン」の「このプランを予約」ボタンを押して遷移した画面で「お得な特典付きプラン」の表記が存在を確認するテストです。これをTestCafeのテストスクリプトにすると下記のようになります。

test.js
import {Selector} from 'testcafe';

fixture `宿泊プラン`
  .page`https://hotel.testplanisphere.dev/ja/plans.html`;

test('お得な特典付きプランを選択後、遷移先を確認', async t => {
  const selectButton = await Selector('body > div > div:nth-child(2) > div > div > div.card-body > a');
  await t
    .click(selectButton)
    .expect(Selector('#plan-name').innerText).eql('お得な特典付きプラン');
});

TestCafeのテストスクリプトは主にfixtureとtestによって構成されます。fixture1つに対していくつかのtestが連なるように書きます。

実行

testcafeコマンドで実行したいテストを指定します。また、TestCafeでは各種ブラウザに対応していて、testcafeコマンドの後にブラウザ名を指定すると、そのブラウザでテストが実行されます。

$ testcafe chrome test.js

すると、ブラウザが起動して読み込みを開始します。

テストが実行された後、コンソールに1 passedと表示されれば、テスト成功です。

1 passed (4s)

おわりに

TestCafeではとても簡単にブラウザでの自動テスト環境構築ができました。各種ブラウザ対応というのも嬉しいですね。
ただ、対応言語がJS（TS）しか対応していないので、JSを扱いなれていない人にとっては少しハードルが高いかもしれません。

参考