はじめに
はじめて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
これでバージョンが表示されれば正常にインストールされています。
テスト実行
テストコードを書いてみる
今回はログインテストをしてみます。
手順は下記のとおりです。
- ログインページに移動する
- メールアドレスとパスワードを入力する
- ログインを押下する
- マイページに遷移しているかを確認する
これを実装すると
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のリファレンスを参照してみてください。