WebdriverIOの雰囲気をつかむ

[WebdriverIO](http://webdriver.io/)は、[Node.js](https://nodejs.org/ja/)上で[Selenium WebDriver](http://www.seleniumhq.org/)を操作できるnpm packageです。Node.js上で、ウェブブラウザを自動で操作できます。この記事では、サンプルコードと、動作する様子のスクリーンキャプチャをとおして、雰囲気をつかむことを目的にします。

# 対象読者
- Node.jsを使ったことがある人
- ウェブブラウザを自動で操作して、スクレイピング or E2Eテストを行いたい人

# サンプルコード

次の２つのリポジトリにサンプルコードを置きました。README.mdの"How To Setup"と"How To Run"のとおりにセットアップと実行をすれば、GIFのように動作します。GIFでは小さいですが、クリックするとYouTubeに飛びますので、そこで停止や拡大をすれば、様子がよく分かると思います。

- [webdriverio-standalone-experiment][webdriverio-standalone-experiment]
[![Screen Capture](https://j.gifs.com/gL6RpD.gif)](https://youtu.be/JJnRd4AC_zI)

- [webdriverio-wdio-experiment][webdriverio-wdio-experiment]
[![Screen Capture](https://j.gifs.com/G5g1Vy.gif)](https://youtu.be/NVN43SuR3R4)

# ２つの動作モード
上２つのGIFで、実際にウェブブラウザを自動的に操作する様子が分かります。操作内容は、[webdriverio-standalone-experiment][webdriverio-standalone-experiment]の場合は[`src/main.js`][src/main.js]に、[webdriverio-wdio-experiment][webdriverio-wdio-experiment]の場合は[`test/specs/test.js`][test/specs/test.js]に記述されています。
ですが、なぜ２つなのでしょうか？その理由は、WebdriverIOには２つのモードがあるからです。

| Mode | 用途 | 
|:----------:|:-------------:|
| Standalone | スクレイピング（または、WebdriverIOを内蔵したライブラリの作成） |
| WDIO | E2Eテスト | 

## Standalone mode
Standalone modeの場合は、[`src/main.js`][src/main.js]の記述は、単にブラウザを操作するだけです。GIFでも、単にウェブブラウザを操作しているだけなのがわかると思います。

```javascript:src/main.js
const webdriverio = require('webdriverio');
const options = { desiredCapabilities: { browserName: 'chrome' } };
const client = webdriverio.remote(options);

client
    .init()
    .url('https://duckduckgo.com/')
    .setValue('#search_form_input_homepage', 'WebdriverIO')
    .click('#search_button_homepage')
    .getTitle().then(function(title) {
        console.log('Title is: ' + title);
        // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
    })
    .end();
```

## WDIO mode

WDIO modeの場合は、[`test/specs/test.js`][test/specs/test.js]ではテストを記述しています。GIFでも、ウェブブラウザを操作した後に、コンソールにテスト結果の`1 passing`が出力されていることが分かります。

```javascript:test/specs/test.js
const assert = require('assert');

describe('Google', function() {
  it('should display the title', function() {
      browser.url('https://www.google.co.jp/');
      assert(browser.getTitle() === 'Google');
  });  
});

```

WDIO modeの場合は、内蔵するtest runnerを使ってテストを行います。test runnerはいくつか選択肢があるのですが、今回のケースでは[Mocha](https://mochajs.org/)を使いました。

詳細は公式サイトの[WebdriverIO - How to use WebdriverIO](http://webdriver.io/guide/getstarted/modes.html)に書かれているので、一読すると良いと思います。

# 設定
サンプルコードではGoogle Chromeが動作しています。他にもFirefoxなどの他のブラウザを使うこともできます。その他、様々な設定があり、公式サイトの[WebdriverIO - Configuration](http://webdriver.io/guide/getstarted/configuration.html)に記載されています。Standalone modeの場合は[`src/main.js`][src/main.js]の`options`オブジェクト、WDIO modeの場合は[`wdio.conf.js`][wdio.conf.js]に記述されたものが使われます。

# ウェブブラウザでどんな操作ができるの？
公式サイトに[API Document](http://webdriver.io/api.html)があります。大抵のことはできるのではないでしょうか・・・。

# 終わりに
WebdriverIOを使う際の雰囲気は分かってもらえたかと思います。まだまだ他にも知っておくべき項目がありますので、参考文献に挙げたサイトを読むと良いと思います。

# 参考文献

- [WebdriverIO - Developer Guide](http://webdriver.io/guide.html)
- [WebdriverIOでE2Eテストを行おう - freee Developers Blog](http://developers.freee.co.jp/entry/lets-get-started-e2e-test-with-webdriver-io)
- [WebdriverIOを使ってみました : アシアルブログ](http://blog.asial.co.jp/1484)



[webdriverio-standalone-experiment]:https://github.com/TomoyukiAota/webdriverio-standalone-experiment
[src/main.js]:https://github.com/TomoyukiAota/webdriverio-standalone-experiment/blob/master/src/main.js

[webdriverio-wdio-experiment]:https://github.com/TomoyukiAota/webdriverio-wdio-experiment
[test/specs/test.js]:https://github.com/TomoyukiAota/webdriverio-wdio-experiment/blob/master/test/specs/test.js
[wdio.conf.js]:https://github.com/TomoyukiAota/webdriverio-wdio-experiment/blob/master/wdio.conf.js