先日、JavaScript用E2EテストツールWebdriverIOの新バージョンがリリースされました！

webdriver.io

WebdriverIO

E2Eテスト用WebDriverのラッパーです
僕は↓の記事で知りました

motemen.hatenablog.com

Protractorとかと比べて比較的シンプルだった印象だが今回は……？？？

新機能

今回のバージョンの目玉機能はこちら

• テストランナー wdio
• yieldでテストが書ける

テストランナー wdio

WebDriverIO の略ですね
karmaと同じく、wdiio.conf.jsでブラウザ、フレームワーク等を指定する感じです

wdio.conf.jsにSauce Labs, Browserstackのアクセスキーを書くことでこれらのサービスを簡単に使えるみたいです
あとmochaのオプションも埋め込める（mocha.optsに書いてたやつ）

プラグインとかまだ書けなそうだし、karmaと役割かぶるかも？

yieldでテスト書く

generatorをつかって同期的テストを書けるようになりました
従来はメソッドチェーンで処理をつなげて書いていく必要がありましたが、これで解放される！？？！！！！？？！

試しにWebdriverIOのトップページにあるテスト動かしてみよう

wdio.conf.js

まず設定ファイル作る。

$ wdio config すると色々質問されるので、適当に答えると wdio.conf.js ができてる

selenium起動

テスト前にselenium起動する必要がある。webdriver-manager使うと便利

github.com

$ $(npm bin)/webdriver-manager update
$ $(npm bin)/webdriver-manager start

テストファイル

次にテストファイル書く

test/yield.js

var webdriverio = require('webdriverio');
var assert      = require('assert');

describe('top page', function () {
  var client;

  before(function *() {
    client = webdriverio.remote({ desiredCapabilities: {browserName: 'chrome'} });
    yield client.init();
  });

  describe('my feature', function() {
    it('should do something', function *() {
      yield client
          .url('https://duckduckgo.com/')
          .setValue('#search_form_input_homepage', 'WebdriverIO')
          .click('#search_button_homepage');

      var title = yield browser.getTitle();
      console.log(title); // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
    });
  });

  after(function () {
    client.end();
  });
});

実行

yieldで書いたテストは、 wdio コマンドで走らせる必要があります

実行！

$ $(npm bin)/wdio wdio.conf.js

やったー

seleniumの起動とか全部自動でやりたい

wdio.conf.jsのフック使うとできるよ
↓やってみた↓ github.com

npm test でseleniumのインストール、起動、テスト実行までぜんぶ動くはず！

他ツールとの比較

• testiumは謎の技術で同期的にテスト書ける
• WDもyieldで書けるっぽい

プラグインは書けたい気がするな―