Node.js → Mocha → WebDriver → BrowserStack → Internet Explorer でウェブサイト自動テスト

https://www.browserstack.com/ を使って Internet Explorer のテストを行います。
BrowserStack は、100分まで無料で試せます。Automate Pro プランは $99〜／月。

Mac で開発して IE で試したいとき、自前で InternetExplorerDriver の環境を用意するのは面倒。
テストスクリプト自体を書く時は、Selenium Standalone Server を使うとしても、
ウェブサイト本体の開発・運用中のテストは、BrowserStack に頼るのが簡単そう。

![browserstack.jpg](https://qiita-image-store.s3.amazonaws.com/0/12419/f7e24ffb-8bca-47b8-3657-0ae828d4fa2e.jpeg)

関連記事： [Node.js → Mocha → WebDriver → Selenium → Chrome でウェブサイト自動テスト](https://qiita.com/kawanet/items/fb7283c180da635a8c91)

----

#### (1) webdriverio をインストールする

```
npm install webdriverio wdio-mocha-framework wdio-browserstack-service 
```

-----

#### (2) BrowserStack のアカウントを作って、user・key の組を受け取る

https://www.browserstack.com/accounts/settings

-----

#### (3) wdio.conf.js を書く

```js
exports.config = {
  specs: ['./test/specs/**/*.js'],

  capabilities: [{
    'browserName': 'IE',
    'os': 'Windows',
    'os_version': '7',
    'resolution': '1024x768',
    'browserstack.debug': true
  }],

  services: ['browserstack'],
  browserstackLocal: true,

  // https://www.browserstack.com/accounts/settings
  user: 'xxxx',
  key: 'xxxx',

  mochaOpts: {
    timeout: 6000000 // 10分間
  },

  logLevel: "verbose"
};
```

----

#### (4) ./test/specs/yahoo.js テストを書く

```js
const assert = require("assert");

describe("Test", () => {
  it("Yahoo!検索", () => {
    browser.url("https://search.yahoo.co.jp/");

    assert.equal(browser.getTitle(), "Yahoo!検索");

    $("input[name=p]").setValue("webdriver.io");

    $("input[type=submit]").click();

    browser.waitForExist("h3 a", 5000);

    assert.equal($("h3 a").getText(), "WebdriverIO - WebDriver bindings for Node.js");

    assert.equal($("h3 a").getAttribute("href"), "http://webdriver.io/");
  });
});
```

※ 前回 [Google で検索したとき](https://qiita.com/kawanet/items/fb7283c180da635a8c91) は、DOM 構造の都合で execute() が必要だった。
IE だと相性が悪そうなので、Yahoo! のテストに書き換えました。

----

#### (5) テストを実行する

```sh
./node_modules/.bin/wdio wdio.conf.js
```

以下の verbose ログで処理内容を確認できる。
画面キャプチャの静止画・動画も BrowserStack で確認できる。

```
[20:26:22]  COMMAND	POST 	 "/wd/hub/session"
[20:26:22]  DATA		{"desiredCapabilities":{"javascriptEnabled":true,"locationC
ontextEnabled":true,"handlesAlerts":true,"rotatable":true,"browserName":"IE","o
s":"Windows","os_version":"7","resolution":"1024x768","loggingPrefs":{"browser"
:"ALL","driver":"ALL"},"requestOrigins":{"url":"http://webdriver.io","version":
"4.9.11","name":"webdriverio"}}}
[20:26:26]  INFO	SET SESSION ID xxxx
[20:26:26]  RESULT		{"browserAttachTimeout":0,"enablePersistentHover":false,"
ie.forceCreateProcessApi":false,"pageLoadStrategy":"normal","ie.usePerProcessPr
oxy":false,"ignoreZoomSetting":false,"handlesAlerts":true,"version":"10","platf
orm":"WINDOWS","nativeEvents":false,"ie.ensureCleanSession":false,"elementScrol
lBehavior":0,"ie.browserCommandLineSwitches":"","webdriver.remote.sessionid":"x
xxx","requireWindowFocus":false,"browserName":"internet explorer","initialBrows
erUrl":"about:blank","takesScreenshot":true,"javascriptEnabled":true,"ignorePro
tectedModeSettings":false,"enableElementCacheCleanup":true,"cssSelectorsEnabled
":true,"unexpectedAlertBehaviour":"dismiss"}
[Browserstack] Windows 7 IE session: https://www.browserstack.com/automate/buil
ds/xxxx/sessions/xxxx
[20:26:27]  COMMAND	POST 	 "/wd/hub/session/xxxx/url"
[20:26:27]  DATA		{"url":"https://search.yahoo.co.jp/"}
[20:26:39]  COMMAND	GET 	 "/wd/hub/session/xxxx/title"
[20:26:39]  DATA		{}
[20:26:39]  RESULT		"Yahoo!検索"
[20:26:39]  COMMAND	POST 	 "/wd/hub/session/xxxx/element"
[20:26:39]  DATA		{"using":"css selector","value":"input[name=p]"}
[20:26:40]  RESULT		{"ELEMENT":"0"}
[20:26:40]  COMMAND	POST 	 "/wd/hub/session/xxxx/element/0/clear"
[20:26:40]  DATA		{}
[20:26:40]  COMMAND	POST 	 "/wd/hub/session/xxxx/element/0/value"
[20:26:40]  DATA		{"value":["w","e","b","d","r","i","v","e","r",".","(2 more items)"],"text":"webdriver.io"}
[20:26:41]  COMMAND	POST 	 "/wd/hub/session/xxxx/element"
[20:26:41]  DATA		{"using":"css selector","value":"input[type=submit]"}
[20:26:41]  RESULT		{"ELEMENT":"1"}
[20:26:41]  COMMAND	POST 	 "/wd/hub/session/xxxx/element/1/click"
[20:26:41]  DATA		{}
[20:26:46]  COMMAND	POST 	 "/wd/hub/session/xxxx/elements"
[20:26:46]  DATA		{"using":"css selector","value":"h3 a"}
[20:26:47]  RESULT		[{"ELEMENT":"2"},{"ELEMENT":"3"},{"ELEMENT":"4"},{"ELEMENT":"5"},{"ELEMENT":"6"},{"ELEMENT":"7"},{"ELEMENT":"8"},{"ELEMENT":"9"},{"ELEMENT":"10"},{"ELEMENT":"11"}]
[20:26:47]  COMMAND	POST 	 "/wd/hub/session/xxxx/element"
[20:26:47]  DATA		{"using":"css selector","value":"h3 a"}
[20:26:47]  RESULT		{"ELEMENT":"2"}
[20:26:47]  COMMAND	GET 	 "/wd/hub/session/xxxx/element/2/text"
[20:26:47]  DATA		{}
[20:26:48]  RESULT		"WebdriverIO - WebDriver bindings for Node.js"
[20:26:48]  COMMAND	POST 	 "/wd/hub/session/xxxx/element"
[20:26:48]  DATA		{"using":"css selector","value":"h3 a"}
[20:26:48]  RESULT		{"ELEMENT":"2"}
[20:26:48]  COMMAND	GET 	 "/wd/hub/session/xxxx/element/2/attribute/href"
[20:26:48]  DATA		{}
[20:26:48]  RESULT		"http://webdriver.io/"
[20:26:49]  COMMAND	DELETE 	 "/wd/hub/session/xxxx"
[20:26:49]  DATA		{}

1 passing (37.10s)
```