対象読者

ブラウザでの自動テストの導入の糸口として、参考にしてみたい人
ブラウザの回帰テストが面倒な人。つまり俺

概要

Testcafeとは

node.jsのライブラリの一つ。 node.js内でブラウザを呼び出し、ブラウザの操作をシミュレートすることで、自動テストを可能にする。

詳しくは以下公式を参考。 https://github.com/DevExpress/testcafe

動きとしては、まずnode.jsでサーバーを立て、そのサーバーがクライアントのブラウザ本体を呼び出し、操作に介入するという動きを取っている。

Seleniumとの違い

SeleniumはWebDriverを利用してブラウザに介入するが、TestcafeはWebDriverを利用せずにブラウザを直で使い、動きをシミュレートしている。

つまりWebDriver不要。その分テスト対象のブラウザをインストールする必要があるが、WebDriverを組み合わせて設定してごちゃごちゃやるよりは遥かに労力が低い。

独断と偏見が入り混じったメリット

Easy Start。導入からテスト実施までが本当に早い。
WebDriverに依存しないため、最新ブラウザの挙動だろうがなんだろうが構わず介入してくれる。
ES6だろうがESNextだろうが勝手にtestcafe内でテストコードをバベってくれる。神。
呼び出し時の変数で、介入先となるブラウザを決定できる。GOD。

独断と偏見が入り混じったデメリット

ESNextの嵐。というかasync awaitを多用する。js初心者が下手にコードを書こうとすると死ぬ。
一部の挙動が微妙。ダブルクリックがGoogle Chrome以外で効いていない気がする……。おそらくクリックの感覚が長すぎて、ダブルクリックとして判定されていない。

ぶっちゃけ今のところこれだけなので、JavaScriptに自信マンの人は積極的に使って損はないと思う。

実プロジェクトでの利用

フォルダ構成

# 実プロジェクトとはちょっと違うけど大体こんな感じ
│  .gitignore
│  .jshintrc
│  ConfigValidation.js
│  package.json
│  readme.md
│
├─config
│      default.json
│      TestConfig.js
│
├─TestComponents
│  ├─Guest
│  └─User
│      ├─LoginPage
│      │      LoginTest.js
│      │
│      └─MainPage
│              LogoutTest.js
│
└─UIDrivers
   ├─LoginPage
   │      DomId.js
   │      Selector.js
   │
   └─MainPage
           DomId.js
           Selector.js

config: node-configのデフォルトをそのまま使用。テスト実施時に環境を切り替えるために使う。 TestComponents: テストコードを格納するフォルダ。 UIDriver: テスト時に取得するDOM要素等を持ってきてくれるAdapterクラス諸々。htmlはしばしばDOMツリーが変わるので必須。 ConfigValidation.js: configファイルの書き洩らし等が無いかを検証してくれる。テストのためのテスト。あとはnode.js書く時のお約束みたいなファイル諸々。

UIDriverは、FriendlyにおけるApplication Driver Patternを参考に作成。（http://www.codeer.co.jp/AutoTest/acceptance-test-design-consideration） Action相当となるクラスがないが、そう長いテストケースもないので、テストに直書きで対応。

npm script

global installしたくなかったので、npm scriptからtestcafeを呼び出す構成にしてある。

package.json

{
  "author": "俺",
  "name": "auto_test",
  "version": "1.0.0",
  "scripts": {
    "validate": "node ConfigValidation.js",
    "edge": "testcafe edge TestComponents/",
    "chrome": "testcafe chrome TestComponents/",
    "ie": "testcafe ie TestComponents/",
    "firefox": "testcafe firefox TestComponents/"
  },
  "description": "大体こんな感じ。nodeは6系で動作確認済み",
  "dependencies": {
    "config": "^1.25.1",
    "testcafe": "^0.13.0"
  },
  "devDependencies": {
    "colors": "^1.1.2",
    "date-utils": "^1.2.21"
  },
  "private": true
}

テストコードのルートフォルダを指定しておけば、再帰的にテストコードを見つけ出して実行してくれる。

npm run edgeとかで呼び出せば、Testcafeが勝手にブラウザを立ち上げて操作し、テスト結果を出力してくれる。

効果のほどは？

劇的にテスト速度が向上したというわけでもないが、回帰テストが楽になったのは確か。開発者が実装段階で実装失敗に気づきやすくなり、早め早めのバグ対策が打てるようになると思われる。

テストコード意味わからないんだけど

公式ドキュメンテーションが一番充実した内容が乗っている。 ActionsとSelectorあたりを見ながら進めるだけでも十分理解可能。 http://devexpress.github.io/testcafe/documentation/

親愛なるジョンからの手紙

雑記です。ゲームとか漫画とかプログラミングとか。

ブラウザの自動テストをTestcafeで回してみたら神がかっていたという話