AngularのE2EテストフレームワークProtractorでwindow.alertをテストする、PhantomJS編

  • 投稿日:
  • by

ProtractorでAngularアプリのE2Eテストやってみた、PhantomJS編に引き続き、 Protractorでwindow.alertをテストする方法を調べたので書いておきます。

E2Eテストを書くときに、alertの文字列を調べたいことがあると思います。 また、confirmでOKしたりCancelしたりする場合の挙動もテストできるとよいでしょう。

ちゃんとできるようです。Protractorというよりその内部のWebDriverがすごいということですね。

http://stackoverflow.com/questions/19879631/protractor-get-text-of-an-alert

に載っていました。

https://github.com/angular/protractor/commit/196c83a9d728e40fecd7a9f206bb985533550fde

が分かりやすいです。ちなみに、現時点でのHEADではnavigation_spec.jsに載っています。これによると、

var alertDialog = browser.switchTo().alert();
expect(alertDialog.getText()).toEqual('Hello');
alertDialog.accept();

と書けばいいとのことです。confirmの場合も同様です。 confirmの場合でcancelするときは、accept()の代わりにdismiss()を使えばよいようです。

ところが、PhantomJSではこれは現時点では使えないことが分かりました。PhantomJSではGhostDriverという別のWebDriverを使っているようです。

https://github.com/detro/ghostdriver/issues/20

これが問題のIssueです。皆さんから切望されていますが、まだ実装されていないようです。しかし、workaroundが記載されていました。埋め込みJavaScriptでなんとかすることができるようです。サンプルを参考に自分でもやってみましたが、うまく行きました。

コードを貼り付けておきます。

describe('alert test spec', function() {
  var ALERT_HANDLER = '(function () { var lastAlert = null; window.alert = function (message) { lastAlert = message; }; window.confirm = function(message) { lastAlert = message; return true; }; window.getLastAlert = function () { var result = lastAlert; lastAlert = null; return result; }; }());';
  var ALERT_GETTER = 'return window.getLastAlert && window.getLastAlert();';

  it('should get register page', function() {
    browser.get('alerttest.html');
    browser.executeScript(ALERT_HANDLER);
    element(by.id('thebutton')).click();
  expect(browser.executeScript(ALERT_GETTER)).toContain('Hello');
  });
});

dismiss()相当を実現するのはちょっと工夫すればできそうです。accept()/dismiss()でタイミング制御をすることは難しそうです。