AngularJSのkarmaを使ったテストでも書いたけど、そういうのをパパっと?出来るprotractorっていうのがあるらしいので使ってみた

※angular.jsを使ったページに関しては前回(上記リンク先)と同様な感じで、テキストフィールドとng-repeaterによる作用をしているだけなのを利用する

インストール

npm install protractor

でインストール出来る。で利用にはSeleniumが必要なのだけど、

./node_modules/protractor/bin/install_selenium_standalone

をする事でseleniumっていうディレクトリが出来てそこにstartっていうスクリプトがあるのでそれを実行すればSelenium Standalone Serverを起動できる

設定ファイルを作成

cp node_modules/protractor/referenceConf.js .

な感じでprotractorパッケージに入ってるやつを利用するか自分で書くか的な感じで作る

exports.config = {
  seleniumAddress: "http://localhost:4444/wd/hub",
  capabilities: {
    browserName: "chrome"
  },
  specs: ["spec.js"],
  jasmineNodeOpts: {
    showColors: true
  }
}

あとはspecsで指定したJasmine Specを書いていくだけ

spec.js

要件として「テキストボックスに1文字入力する」、「入力された文字でフィルタリングを行いng-repeaterで処理される」という感じな物なので、最終的にフィルタリングされた結果数だけをテストする的な感じで

describe("...", function() {

  var ptor;

  it("...", function() {
    ptor = protractor.getInstance();
    ptor.get("http://localhost:8000");

    ptor.findElement(protractor.By.input("name")).sendKeys("h");

    ptor.findElements(protractor.By.repeater("sample in samples"))
      .then(function(arr) {
        expect(arr.length).toEqual(3);
      });
  });
});

な感じかと。あとはSeleniumサーバー、angular.jsが動いてるサーバーを起動しておいて

protractor protractorConf.js

※protractorコマンドはnpm install -gで入れとけば良い。そうじゃない場合には./node_modules/protractor/bin/protractor

で実行する。んまぁ

Using the selenium server at http://localhost:4444/wd/hub
F

Failures:

  1) ... ...
   Message:
     Expected 2 to equal 3.


Finished in 3.482 seconds
1 test, 1 assertion, 1 failure

みたいな感じ。まぁ所々な使い方とかはAPIリファレンス見たりとかissueとか辺り見ると大体は分かるんじゃねーかと