TestCafeとは

ブラウザテストを自動化するjavascriptのフレームワークになります。
async/awaitやimport機能を使いながらテストコードを書くことができます。

Seleniumとの違い

「Selenium」はjavascriptで書くブラウザテストで有名なフレームワークですが「TestCafe」との大きな違いがあります。

TestCafeでは各ブラウザのWebdriverを設定する必要がない
Node.jsをインストールしてない環境でもTestCafeでテスト結果を見ることができる。

作業環境構築

TestCafeをインストール

command

$ npm init
$ npm i testcafe -D                       // ローカルにtestcafeをインストール
$ export PATH=$PATH:./node_modules/.bin   // パスを通す
$ testcafe -v                             // versionが表示されればインストール成功

ローカル環境でテスト実行

command

$ npm i http-server -D　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// ローカルにhttp-serverをインストール

package.json

{
  "name": "testcafe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "http-server -o"　　　　　　　　　　　　　　　　　　　　　　　// npm startでブラウザ起動
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.10.0",
    "testcafe": "^0.18.2"
  }
}

command

$ npm start                　　　　　　　　　　　　　　　　　　　　　　　　　// http://127.0.0.1:8080が起動

TestCafeのテンプレート

javascript

test.js

// import 文
// 変数・定数等の宣言

fixture('テスト内容の分類やページのタイトル等')
  .page('テストするページのURL');

test('テスト項目名その1', async t => {
  // テスト記入
});

test('テスト項目名その2', async t => {
  // テスト記入
});

test('テスト項目名その3', async t => {
  // テスト記入
});

テスト実行

command

$ testcafe chrome,safari ./test.js

お問い合わせフォームのSample

入力項目「お名前」 ※必須項目
送信ボタンを押下したとき「お名前」が入力されているかチェック
入力された場合、送信する旨をダイアログで表示してthanks.htmlに遷移
入力されない場合、エラーメッセージを表示
戻るボタンを押下したとき「TOPページ」に戻る

HTML

contact.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>TestCafe お問い合わせフォーム</title>
  <style>
    .errorMessage {
      display: none;
    }
    .button {
      display: flex;
    }
  </style>
</head>
<body>
  <form>
    <div class="errorMessage"></div>
    <table>
      <tr>
        <th>お名前 <span>※</span></th>
        <td><input type="text" name="name" class="name" required /></td>
      </tr>
    </table>
    <div class="button">
      <div><input type="button" value="戻る" class="back" onclick="location.href='/demo/'" /></div>
      <div><input type="button" name="submit" value="送信" class="submit" /></div>
    </div>
  </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(function() {
    formAction.init();
  });
  /*
  名前入力が空白だったらエラーメッセージを表示
  名前入力の値をSessionStorageのnameにsetして、thanks.htmlでgetする
   */
  var formAction = {
    init: function() {
      var self = this;
      self.nameSelector = $('.name');
      self.errorMessageSelector = $('.errorMessage');
      self.submitSelector = $('.submit');
      self.errorMessageNone = self.errorMessageSelector.hide();
      self.submitAction();
    },
    submitAction: function() {
      var self = this;
      self.submitSelector.on('click', function() {
        if (self.nameSelector.val() === '') {
          self.errorMessageAction(true);
          return false;
        }
        self.errorMessageAction(false);
        self.confirmAction();
      });
    },
    errorMessageAction: function(errorMessage) {
      var self = this;
      if (errorMessage) {
        self.errorMessageSelector.show().text('必須項目にご記入ください');
      } else {
        self.errorMessageNone;
      }
    },
    confirmAction: function() {
      var self = this;
      if (confirm('この内容で送信します。')) {
        self.submitSelector.prop('disabled', true);
        sessionStorage.setItem('name', self.nameSelector.val());
        setTimeout(function() {
          document.location.href = 'thanks.html';
        }, 1000);
      } else {
        return false;
      }
    }
  }
</script>
</body>
</html>

thanks.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>TestCafe 完了画面</title>
</head>
<body>
  <p class="thanksMessage">
    <span class="name"></span>様、お問い合わせありがとうございます。
  </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(function() {
    thanksAction.init();
  });
  /*
  名前の値をSessionStorageから取得する
   */
  var thanksAction = {
    init: function() {
      var self = this;
      self.nameSelector = $('.name');
      self.nameGet = sessionStorage.getItem('name');
      self
      self.thanksDisplay();
    },
    thanksDisplay: function() {
      var self = this;
      self.nameSelector.text(self.nameGet);
    }
  }
</script>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>TestCafe</title>
</head>
<body>
  <p>TOPページ</p>
</body>
</html>

テストコード

contactTest.js

import Page from  './pageModel';
import { ClientFunction } from 'testcafe'; // 現在のページのURLを確認

const page = new Page();
const getWindowLocation = ClientFunction(() => window.location);

fixture('お問い合わせフォーム')
  .page('http://127.0.0.1:8080/demo/contact.html'); // 実行するページ

test('必須項目を入力して確認後、thanksページに遷移', async t => {
  await t
    // テスト実行速度 1が最高速 0.01が最低速
    .setTestSpeed(page.setTestSpeed)
     //　ダイアログの操作
    .setNativeDialogHandler(() => true)
    // アクション
    .typeText(page.nameSelector, '佐藤一郎')
    .click(page.submitSelector);
  // アサーション(求める結果)
  await t.expect(page.thanksMessage.innerText).eql('佐藤一郎様、お問い合わせありがとうございます。');
});

test('必須項目に入力されていないとき、errorMessageを表示', async t => {
  await t
    .setTestSpeed(page.setTestSpeed)
    .click(page.submitSelector);
  await t.expect(page.errorMessage.innerText).eql('必須項目にご記入ください');
});

test('戻るを押下したときにtopページに戻る', async t => {
  await t
    .setTestSpeed(page.setTestSpeed)
    .click(page.backSelector);
    const location = await getWindowLocation(); // ページ遷移してから現在のURLを取得
  await t.expect(location.pathname).eql('/demo/');
});

pageModel.js

import { Selector } from 'testcafe';

/*
  Page Object
 */
export default class Page {
  constructor () {
    this.nameSelector = Selector('.name');
    this.submitSelector = Selector('.submit');
    this.thanksMessage = Selector('.thanksMessage');
    this.errorMessage = Selector('.errorMessage');
    this.backSelector = Selector('.back');
    this.setTestSpeed = 0.5;
  }
}

テスト実行

command

$ testcafe chrome ./contactTest.js

Running tests in:
 - Chrome 61.0.3163 / Mac OS X 10.13.1

 お問い合わせフォーム
 ✓ 必須項目を入力して確認後、thanksページに遷移
 ✓ 必須項目に入力されていないとき、errorMessageを表示
 ✓ 戻るを押下したときにtopページに戻る


 3 passed (8s)

##　参考サイト