angular-cli(Protractor)でMicrosoft Edgeのe2eテストをする

初心者向け
あんまり分かっていないけど、とにかくEdgeでもe2eテストしたい方向けです。

テスト環境
@angular/cli@1.0.0-rc.0

1. 事前準備

今回はEdgeでテストしたいので下記からEdgeのWebDriverをダウンロードし、
ダウンロードしたパスを覚えておく。後で使います。
https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
※右下 Downloads の Release 14393 をクリックするとダウンロード出来る。

2. protractorの設定

以下の“ここ追加！”の部分を追加、“ここコメントアウト！”はコメントアウトしていく。

protractor.conf.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const {
  SpecReporter
} = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  seleniumAddress: 'http://localhost:4444/wd/hub', // ここ追加！
  capabilities: {
    // browserName: 'chrome', // ここコメントアウト！
    browserName: 'MicrosoftEdge', // ここ追加！
    platform: 'windows', // ここ追加！
  },
  // directConnect: true, // ここコメントアウト！
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () {}
  },
  beforeLaunch: function () {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  },
  onPrepare() {
    jasmine.getEnv().addReporter(new SpecReporter({
      spec: {
        displayStacktrace: true
      }
    }));
  }
};

3. e2eテスト実行

3.1 seleniumサーバを立てる

下記のコマンドをプロジェクトフォルダ内で実行する。

$ webdriver-manager start --edge "事前準備で落としたEdgeのWebDriverのフルパス"

※パスを入力の際に""は2つ書いてあるか確認する。　
例: "C:\\Program Files (x86)\\Microsoft Web Driver\\MicrosoftWebDriver.exe"

実行すると下記のようになりseleniumサーバが起動する

[10:35:14] I/start - java -Dwebdriver.edge.driver=C:\\Program Files (x86)\\Microsoft Web Driver\\MicrosoftWebDriver.exe -Dwebdriver.chrome.driver=C:\Users\ユーザ名\Desktop\VT_Log\project\vtlog-analizer\node_modules\webdriver-manager\selenium\chromedriver_2.27.exe -Dwebdriver.ie.driver=C:\Users\ユーザ名\Desktop\VT_Log\project\vtlog-analizer\node_modules\webdriver-manager\selenium\IEDriverServer3.2.0.exe -Dwebdriver.gecko.driver=C:\Users\ユーザ名\Desktop\VT_Log\project\vtlog-analizer\node_modules\webdriver-manager\selenium\geckodriver-v0.14.0.exe -jar C:\Users\ユーザ名\Desktop\VT_Log\project\vtlog-analizer\node_modules\webdriver-manager\selenium\selenium-server-standalone-3.1.0.jar -port 4444
[10:35:14] I/start - seleniumProcess.pid: 39804
10:35:15.015 INFO - Selenium build info: version: '3.1.0', revision: '86a5d70'
10:35:15.017 INFO - Launching a standalone Selenium Server
2017-03-01 10:35:15.032:INFO::main: Logging initialized @266ms
10:35:15.080 INFO - Driver class not found: com.opera.core.systems.OperaDriver
10:35:15.081 INFO - Driver provider com.opera.core.systems.OperaDriver registration is skipped:
Unable to create new instances on this machine.
10:35:15.081 INFO - Driver class not found: com.opera.core.systems.OperaDriver
10:35:15.081 INFO - Driver provider com.opera.core.systems.OperaDriver is not registered
10:35:15.089 INFO - Driver provider org.openqa.selenium.safari.SafariDriver registration is skipped:
 registration capabilities Capabilities [{browserName=safari, version=, platform=MAC}] does not match the current platform WIN10
2017-03-01 10:35:15.125:INFO:osjs.Server:main: jetty-9.2.15.v20160210
2017-03-01 10:35:15.157:INFO:osjsh.ContextHandler:main: Started o.s.j.s.ServletContextHandler@68be2bc2{/,null,AVAILABLE}2017-03-01 10:35:15.249:INFO:osjs.ServerConnector:main: Started ServerConnector@517a5950{HTTP/1.1}{0.0.0.0:4444}
2017-03-01 10:35:15.250:INFO:osjs.Server:main: Started @484ms
10:35:15.250 INFO - Selenium Server is up and running

3.2 protractorの実行

今まで通りに下記のコマンドでEdgeが立ち上がりテストが始まる。

$ ng e2e

番外変

@angular/cli@1.0.0-rc.0 をyarnを使ってインストールした場合はng e2eを実行すると、
webdriver-managerのupdateで下記のエラーが起きる。

Cannot find module 'protractor/node_modules/webdriver-manager/built/lib/cmds/update' from 'C:\Users\ユーザ名\Desktop\VT_Log\project\vtlog-analizer'

その場合はアップデートを手動で行いテスト実行時は以下のオプションを付けてアップデートを
無効にして実行するとテストが出来るようになる。
$ ng e2e --no-webdriver-update

手動アップデート方法
$ webdriver-manager update