AngularJS + CoffeeScript + Protractor + GruntでE2Eテスト環境構築

前提

Yeoman + AngularJS Generatorを使って構築し、Gruntfile.jsをGruntfile.coffeeへ書き換えた環境を前提としています。

yo anguar --coffee

Gruntfile.coffeeに関してはこちらをどうぞ
http://qiita.com/rneuo/items/c7d449a7361fe9cea236#2-3

概要

インストールモジュール説明

AngularJS + CoffeeScript + Protractor + Gruntでテスト環境を構築するにあたって、下記のnodeモジュールを使って構築してみたいと思います。

• Protractor本体

  • https://github.com/angular/protractor

• CoffeeScriptでspecを記述するProtractorプラグイン

  • https://github.com/lebek/protractor-coffee-preprocessor

• Protractorを実行させるGruntプラグイン

  • https://github.com/teerapap/grunt-protractor-runner

• ProtractorにバンドルされているSelenium WebdriverをstartさせるGruntプラグイン

  • https://github.com/seckardt/grunt-protractor-webdriver

テスト実行環境

下記のようにSeleniumサーバーとProtractor内のBrower Driversによってテストスクリプトを実行します。

 [Test Scripts] < -- > [Selenium Server] < -- > [Browser Drivers]
    protractor             port:4444                 port:9001
        ↓                                       chrome browserのdriver
     jasmine
    

• Test Scripts
  • e2e用のspecファイル
  • protractorを使用してspecファイルを記述
• Selenium Server
  • protractorにバンドルされているSelenium Webdriverサーバーを使用する
• Browser Drivers
  • protractorにバンドルされているChrome Driverを使用する

インストール

npm install protractor --save-dev
npm install protractor-coffee-preprocessor --save-dev
npm install grunt-protractor-runner --save-dev
npm install grunt-protractor-webdriver --save-dev

node_modules/protractor/bin/webdriver-manager update

package.jsonの末尾のscriptsの項目を下記のように書き換える。次回からnpm installで更新できるようにする

  "scripts": {
    "test": "grunt test",
    "install": "node_modules/protractor/bin/webdriver-manager update"
  }

その他の設定

yo angular --coffeeし、Gruntfile.coffeeへ変換した後の差分はこちらをどうぞ

連絡

いろんなやり方があると思いますが、よく見るやり方で色々はまってしまいました、、
上記のやり方ですんなりいったのですが、もっといい方法があれば是非コメントよろしくお願いします！