今日から考える、webアプリケーションの自動テスト

開発

2014/1/29

今日から考える、webアプリケーションの自動テスト

yahata

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

▲テスト専用（にしたい）RasPi

皆さんは、webアプリケーションの自動テストにどんなツールを利用しているでしょうか？それとも、まだ全部手動でテストをしていますか？
お隣の佐藤さん（仮）も、お向かいの田中さん（仮）も、みーんなテストを自動化しています。乗り遅れてはいけません！

自動テスト？

webアプリケーションに限った話ではありませんが、テストには自動化しやすいものと、しにくいものがあります。自動化しやすいテストは繰り返し処理や条件網羅など、手動でやるにはどうも面倒なものばかりです。

自動テストスクリプトを用意しておくということは、手動テストの面倒を減らすだけにとどまらず、様々なメリットがあります。今回は、僕が実際に使っているwebアプリケーションのテスト環境をご紹介したいと思います。

ツール

テストランナー: Karma
ユニットテスト: Mocha
end-to-endテスト: CasperJS+Mocha
アサーションライブラリ: expect.js
テストスパイ: Sinon.js

ユニットテストとend-to-endテストでシンタックスを統一するために、共通でMochaを利用しています。初期はJasmineを使っていましたが、非同期処理が書きづらかったため移行しました。。
ちなみに、webアプリケーションを作る際のフレームワークとしてはBackbone.jsやAngularJSを利用しています。それもあって、ディレクトリ構成や設定ファイルの書き方等はyeomanのテンプレートやAngularJS tutorialからかなり影響を受けています。

さて

webアプリケーションを作るプロジェクトにおいては、テスト仕様書やテスト項目一覧が既にある場合が多いかと思います。そんな時、テスト項目をうまくテストスクリプトに落としておくと、定期的に自動テストを回して、いつでも安心なweb開発ができるようになるわけですね。うん、すばらしい！

こんな感じで書けます

例えばend-to-endテストなら、CasperJS+Mochaで以下のように記述することができます。

// 指定したURLにアクセスできることをチェック
it("GET / should return 200", function() {
    casper.start(createURL("/"), function(res) {
        expect(res.status).to.equal(200);
    });
});

// 指定した要素が可視状態であることをチェック
it("should have #purpose visible", function() {
    casper.then(function() {
        expect(this.visible("#purpose")).to.be.true;
    });
});

今までなんとなく手動でやっていたテストが、少し手間をかけるだけで自動でできるようになるのです。これはやるしかありませんね。