Yeti はYahoo.comがメインで開発してるNode製のTest Runner的なCLIです。

Yeti自体はテストの構文とかは持っていなくて、Test Frameworksに書かれているようにQUnitやJasmine、MochaやYUI Testなどで書かれたテストを動かすツールになっています。

雰囲気的にはTestemに似ていて、上のTest Frameworksで書いたhtmlページを用意して、

キャプチャー用のURLを作って、そこにテストしたいブラウザをキャプチャーして、テストを書いたhtmlを指定して実行させるという感じです。
(意味的にあんまり変わらないですが、先にテスト用htmlを指定して、ブラウザにアクセスさせるという逆の手順もできます)

Yeti自体は数年前からあって、Bunyipとかでもインスパイアされてたりします。

動かしてみる

QUnitやJasmine、Mocha等好きなものが使えますが、今回はMochaのテストを動かしてみます。

Mochaのテストのセットアップは、YeomanのMocha generatorを使うと簡単にできるので今回はこれを使用します。

Yetiのチュートリアルを元に進めるので読んでおくと理解しやすいです。

• Yeti v0.2.24 – Quick Start

作成したサンプルは以下に置いてあります

• azu/yeti-setup

インストール

Node環境は各自作っておいて下さい。

必要なものをnpm経由でインストールします。

# Yoemanをインストール
npm install -g yo grunt-cli bower
# Mochaのテンプレートを作るGeneratorをインストール
npm install -g generator-mocha
# Yetiをインストール
npm install -g yeti

これで必要なものは揃いました。

テストのセットアップ

先ほど、Mocha generatorをインストールしたので、 $yo mocha というコマンドが使えるようになっています。

yo mocha

これを実行すると、現在のディレクトリに以下のようにmochaのテストのテンプレートを作ってくれます。

現在のディレクトリ
└── test
    ├── index.html
    ├── lib
    │   ├── chai.js
    │   ├── expect.js
    │   └── mocha
    │       ├── mocha.css
    │       └── mocha.js
    └── spec
        └── test.js

試しに、 test/index.html にアクセスするとmochaのテストが動くことがわかります。

Yetiでテストの実行

一番、単純なオプションなしの yeti コマンドを使ってみます。

yeti test/*.html

のように、実行したいテスト用のHTMLを指定します。(globが利用できます、また設定ファイルに分けることもできます。)

Creating a Hub. Open `yeti --server` in another Terminal to reuse browsers for future batches.

Waiting for agents to connect at http://192.168.1.3:9000
...also available locally at http://localhost:9000

テストを動かしたいブラウザで、 http://localhost:9000 にアクセスするとキャプチャされます。

When ready, press Enter to begin testing.
  Agent connected: Chrome (28.0.1500.71) / Mac OS from 127.0.0.1

キャプチャされた状態で Enter を押すとテストが実行され結果が出力されます。

✓ Testing started on Chrome (28.0.1500.71) / Mac OS
✓ Agent completed: Chrome (28.0.1500.71) / Mac OS
✓ 1 tests passed! (0.29 seconds)

yeti –server

yeti --server を使うと、先にブラウザをキャプチャしておいて、 yeti コマンドを実行した段階で、テストが実行されて結果が表示されます。

Buster.JS 等の方式と同じです。

yeti test/*.html
  Agent connected: Chrome (28.0.1500.71) / Mac OS from 127.0.0.1
✓ Testing started on Chrome (28.0.1500.71) / Mac OS
✓ Agent completed: Chrome (28.0.1500.71) / Mac OS
✓ 1 tests passed! (0.21 seconds)

.yeti.json

毎回、実行するテスト用HTMLを指定するのは面倒なので、
.yeti.json という設定ファイルを作ってそこに書いておくことができます。

以下の内容の .yeti.json を作成して、プロジェクトのrootにおいておきます。

{
    "basedir": ".",
    "glob": "**/test/*.html"
}

rootに .yeti.json ある場合は、自動で読み取ってくれるので、

$ yeti test/*.html

の代わりに

$ yeti

を実行するだけで、上記の事と同様の結果が得られます。

Sauce Labs連携で色んなブラウザで実行させる

Sauce Labs と連携する事で、iOS等のモバイルも含めた色々なブラウザでテストをCLIから動かすことができます。(実行はSauce Labs側でされるのでローカルには該当ブラウザはいらない)

詳しくは以下を読むといいかと思います。

• Testing JavaScript with Yeti and Sauce Labs WebDriver — Ryuichi Okumura

Sauce Connect のインストール

Sauce Labs連携をするにはSauce Connectを使う必要があります。

Testing JavaScript with Yeti and Sauce Labs WebDriver — Ryuichi Okumura に書かれているように、 Sauce-Connect.jar を使えばできますが、

今回は、Sauce-Connect.jarのラッパーである、saucelauncherを使って行います。

saucelauncher は以下のようにしてインストール出来ます。

npm install -g saucelauncher

Sauce Labs にアカウントを作ってログインすると、左下にAPI Keyを取得する所があるのでそれをコピーします。

$ saucelauncher というコマンドが使えるようになっているので、 saucelauncher --user [user:api_key] tunnel という感じで、毎回API Keyを指定して使うのもいいですが、
.saucelabs.json というファイルをホームディレクトリに作成しておくことでここから読み込んでくれるようになります。

.saucelabs.jsonは以下の様な形式です。

{
    "username":"user名",
    "api_key":"APIKEY"
} 

このファイルを作成した状態で、Sauce Labs連携を行います。

Sauce Labsでテストを動かす

簡単にまとめると以下の様な手順でテストを実行します。

1. Sauce ConnectでSauce Labsに接続します。
2. yeti --server --wd-url で Sauce LabsとYetiを接続します。
3. yeti コマンドでブラウザを指定してテストを実行します。

実際には以下の様なコマンドを叩きます。

# Sauce Connect
saucelauncher tunnel
# Saunce Labs + Yeti
yeti --server --wd-url http://[username]:[apikey]@ondemand.saucelabs.com:80
# yetiでテストを実行
yeti --browser "iphone/6/mac 10.8"

(yeti –server –wd-url にAPIKeyとか含めるのが少しだるい…)

yeti --browser ブラウザ名/バージョン/OS でブラウザを指定してテストを実行できます。

上記の例では、Mac OS 10.8のiPhoneのiOS6上でテストを実行した結果が得られます。

yeti --browser "iphone/6/mac 10.8"
Found 1 file to test.
  Agent connected: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10A403 from 192.168.1.3
✓ Testing started on Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10A403
✓ Agent completed: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10A403
✓ 1 tests passed! (38 seconds)
  Agent disconnected: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10A403 from 192.168.1.3

ブラウザの指定方法は以下に詳しく書かれています。

• Browser launching
• Yeti 0.2.21 Released – YUI Blog

おわり

Yeti は比較的シンプルな感じで、Testem と似てる部分はありますが、よりシンプルな感じです。

• Yeti
• azu/yeti-setup
• How to run Yeti with QUnit testing — Ryuichi Okumura