CircleCIでブラウザテストを走らせてみた

こんにちは。堀 悟大(@steelydylan )です。最近はブラウザでのテストの自動化に興味があります。今回はCircleCIを使ってgithubにpush時に自動でブラウザのテストコードが走るように色々環境を整備してみましたので、ご紹介します。

なぜ、今回ブラウザテストを試みたか

現在、下のようなテーブルを編集するためのJavaScriptを書いています。

ただ、機能追加のたびに、手動で正しく動作するかテストするのが大変なので、githubにpushした段階で、CIツールを動かして、自分の代わりにテストをしてもらうことにしました。そのために今回はCircleCIというツールを使ってテストを行うことにしました。

ツールの紹介

今回はCircleCI上でテストコードを走らせるために、Nightmare, mocha, power-assert という3つのツールを利用しましたので軽く紹介させてください。

Nightmare

ブラウザテストを行ってくれるためのツールです。electron製で、windows環境や、mac環境、あらゆる環境で動作します。


mocha

JavaScript のテストフレームワークです。テストの実行を行ってくれます。


power-assert

結果の真偽を判定するためのツールです。ターミナルに実行結果と理想値を比べた結果を細かく出力してくれます。


手順

では、どのような手順でCI上でテストを行えるようにしたのかを順を追って解説します。
まずはじめに、プロジェクトディレクトリの直下にpackage.jsonを設置して、以下のようにdevDependencies内に、mocha, nightmare, power-assert を記述しました。

  "devDependencies": {
    ...
    "mocha": "^3.2.0",
    "nightmare": "^2.8.1",
    "power-assert": "^1.4.2"
  }

その後、npm install でこれらのパッケージをインストールします。
つぎに、package.json内にテスト用のスクリプトを実行できるように下記のように記述しました。

"scripts": {
    "test": "mocha ./test/test.js --timeout 1000000"
}

これで、npm run testとコマンドラインで実行すれば mocha がグローバルにインストールされていなくても自動でmochaにPATHが通りローカルで実行できます。

テストコード

なお、テストコードは下のように書いています。まだ色々と書かなきゃいけません。

var Nightmare = require('nightmare')
var assert = require('assert')
var fs = require('fs')
var path = require('path')
var pkg = require('../package.json')
require.extensions['.html'] = function (module, filename) {
    module.exports = fs.readFileSync(filename, 'utf8')
}

var nightmare = Nightmare({
    webPreferences  : {
    partition : 'nopersist',
    preload:path.resolve(__dirname,'./preload.js')
  },
  show: true
});

var test_url = "file:///"+path.resolve(__dirname,"../examples/a-blogcms.html");

describe('test',function(){
  it('align-right',function(done){
    nightmare.goto(test_url)
      .mousedown('[data-cell-id="0-0"]')
      .click('[data-action-click="align(right)"]')
      .evaluate(function () {
        return document.querySelector('.test').innerText;
      })
      .then(function (result) {
        assert.equal(result,require('./test.html'));
        done();
      })
      .catch(function (error) {
        done(error);
      });
  });
});

describe, it が、mochaで定義されているテスト用の関数です。
コードを見ればわかるようにnightmareはclick(), goto() など直感的に命令を記述できて、自分はとても好きです。要素の指定もjQueryのセレクタと同じなのでとても楽です。
次に、CircleCIの登録です。CircleCIはgithubやbitbucketのアカウントからでも登録できます。


登録後は、CIしたいプロジェクトを Add Projectsより追加します。その後、Projectにcircle.yml というファイルを設置します。下のようにテストしたいNodeの環境、テスト前のコマンド、テストするためのコマンド等を設定することができます。

machine:
  node:
    version: 6.2.0
dependencies:
  override:
    - "npm install"
test:
  override:
    - "npm run test"

テストが成功すると下のようなSuccessというラベルが表示されるのがCircleCIのプロジェクトページで確認できます。


なお、CircleCIのテスト結果はステータスバッヂとしてプロジェクトのReadmeに設置することも可能です。


ステータスバッヂを追加するには、CircleCIのページから下の図のように歯車アイコンをクリックしプロジェクトの設定ページに移動します


移動後、下の図のように Notifications > Status BadgesよりReadmeに貼り付けるためのソースコードを取得できます。


まとめ

  • CircleCIを使えば、githubなどへのpush時にテストを自動で行うことができる。
  • electronベースで動くnightmareは直感的でとても便利
  • CircleCIでのテスト結果はReadmeにバッチとして表示可能

余談

なお、現在テーブルを編集するためのJSを書いています。まだ制作途中ですが、今回ご紹介した、CircleCIやmochaなどのテストコードの設定も書かれていますので興味のある方は下のリンクを覗いてみてください。



堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →