LoginSignup
66

More than 3 years have passed since last update.

mocha+testling-ciでブラウザテストを自動化する

Last updated at Posted at 2013-02-01

結果的にはこの様なバッジが出来ます、githubにpushする度更新されるので便利。
ブラウザとの相性

環境を整える

コマンドラインからもcoffeeやmochaは実行したいのでこの二つはグローバルに入れる。詳細は前の投稿で。

$ git init
$ npm init

$ npm install coffee-scirpt -g
$ npm install mocha -g
$ npm install chai --save-dev

package.jsonにtestling設定を追加。

欲張りすると無駄に重なるので注意。

package.json
{
  "testling": {
    "browsers": {
      "ie": [ 6, 7, 8, 9, 10 ],
      "ff": [ 12, 13, 14, 15, 16, 17 ],
      "chrome": [ 20, 21, 22, 23 ],
      "opera": [ 10, 11, 12 ],
      "safari": [ 5.1 ]
    },
    "harness" : "mocha",
    "files": "test/*.coffee"
  },
  "devDependencies": {
    "chai": "*",
    "mocha": "*",
    "coffee-script": "*"
  }
}

githubのプロジェクトページでwebhookを設定

プロジェクトページ > settingボタンをクリック > サイドバーからservice hooks > WebHook URLに

http://git.testling.com

と入力。

詳細はgithubの公式ドキュメント参照。

完成

これでgithubにpushする度以下のURLで結果が見れます、テスト待ちに少々時間がかかります。

http://ci.testling.com/ユーザー名/プロジェクト名

README.mdにはこう書きますとテスト結果が画像で表示されます。

README.md
[![browser support](http://ci.testling.com/USER/PROJECT.png)](http://ci.testling.com/USER/PROJECT)

詳細は公式ドキュメントを参照。

作者はbrowserifyなどを作ったbrowserling

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
66