Protractor+CoffeeScriptでAngularJSをE2Eテスト


若干ハマるポイントがあったので、記事にしておく。たぶん最もシンプルな設定だと思う。

node_modules

以下のモジュールが必要。

📄Gruntfile.js
$ npm install --save-dev coffee-script
$ npm install --save-dev protractor
$ npm install --save-dev grunt-protractor-runner
$ npm install --save-dev protractor-coffee-preprocessor

coffee-scriptはyo angular --coffeeしてる人には不要。すでにインスコ済みのはずなので。他のモジュールたちはその名の通りの機能を提供するパッケージ。

パッケージを導入したら、seleniumドライバをインスコするために、以下のコマンドをぶっ叩く。

$ node_modules/protractor/bin/webdriver-manager update

設定ファイル

続いて、Gruntjileにprotractorのタスクを追記する。

...
    protractor: {
      options: {
        configFile: "node_modules/protractor/referenceConf.js", // Default config file
        keepAlive: true, // If false, the grunt process stops when the test fails.
        noColor: false, // If true, protractor will not use colors in its output.
        args: {
          // Arguments passed to the command
        }
      },
      e2e: {  // Grunt requires at least one target to run so you can simply put 'all: {}' here too.
        options: {
          configFile: "test/protractor.conf.js", // Target-specific config file
          args: {} // Target-specific arguments
        }
      },
    },
...

ほとんど公式サイトのまま。e2eというのが任意のターゲット名となる。ここではtest/protractor.conf.jsを設定ファイルと指定している。

さっそくそのファイルを作成しよう。

📄test/protractor.conf.js
exports.config = {
  specs: ["e2e/*.coffee"],
  baseUrl: "http://localhost:9000",
  plugins: [
    "protractor-coffee-preprocessor"
  ]
};

specsで指定するパスは、この設定ファイル(本例ではproctractor.conf.js)からの相対パスで指定する点に注意。私はそれ知らずに結構ハマってしまった・・・。baseUrlにはgrunt serverで起動しているサーバのURL、pluginsに先程インスコしたプリプロセッサを指定すると、テスト実行時にCoffeeScriptを自動的にコンパイルしてくれる。

E2Eテスト

それでは最初のテストを作成してみよう。yoemanで雛形を作った場合のトップページをテストしてみる。

📄index_test.coffee
describe 'Setting up protractor', ->
  beforeEach ->
    @prot = protractor.getInstance()

  it 'works', ->
    browser.get '/#/'
    h1 = @prot.findElement(By.tagName('h1'))
    expect(h1.getText()).toBe("'Allo, 'Allo!")

さっそく実行してみよう。事前にサーバを起動しておくのを忘れずに。

$ grunt server
(別コンソールで)
$ grunt protractor:e2e

よし、これでバリバリE2Eテストが書けるぜ。

関連する記事


コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください