はじめに

前回はselenium + nodejsでChromeを動かしましたが、今回はWebdriverIOで動かしていきます。本稿ではwebdiverioでChromeを動かすのがメインになるので、細かいことは省略して最低限動かすだけに必要なことだけを記載します。

環境

VSCode : 1.20.1
- 拡張機能
  - npm commands for vscode : 3.3.0
macOS : 10.13.2

npmでインストールするもの

"chai": "^4.1.2",
"chromedriver": "^2.37.0",
"mocha": "^5.0.5",
"wdio-chromedriver-service": "^0.1.2",
"wdio-mocha-framework": "^0.5.13",
"webdriverio": "^4.12.0"

下準備

まずはnpmでwebdriverioをインストールします。

webdriverio

$ npm install --dev-save webdriverio

次に以下のパッケージをインストールします。
※自分はVSCodeの npm commands for vscodeのnpm: install and save dev.dependencyというコマンドでインストールしていますが、以下はターミナルで叩くことを想定して記載しています。

chrmedriver

$ npm install --dev-save chromedriver

mocha

$ npm install --dev-save mocha

chai

$ npm install --dev-save chai

あと少し。
以下のwebdriverに対応するためのパッケージをインストールします。

wdio-chromedriver-service

$ npm install --dev-save wdio-chromedriver-service

wdio-mocha-framework

$ npm install --dev-save wdio-mocha-framework

実際に動かすその前に

全パッケージのインストールがうまく行ったら wdio.conf.js というコンフィグファイルを設定していきます。
当該ファイルのcapabilitiesの中身と services port path を追記すればChromeが起動できます。

wdio.conf.js

exports.config = {
    capabilities: [{
        browserName: 'chrome',
        chromeOptions: {deviceName: 'Nexus 5X'}
    }],

    services: ['chromedriver'],
    port: '9515',
    path: '/'
}

Chromeを実際に動かす！

とうとうChromeを動かします！
以下のコードを記述したjsファイルを./tests/specs/においてwdioコマンドを実行します。

yahoo.js

const chai = require('chai');

describe("Yahoo Test", function(){
    it("Yahoo Search", function(){
        browser.url('https://www.yahoo.co.jp/');
        browser.element('input[name="p"]').addValue('Qiitaとは');
        browser.element('input[type="submit"]').click();
        browser.waitForExist('body',3000);
        
        chai.expect(browser.elements('span[class="smrArt"').getText()).to.include('Qiita');
    })
})

すると、Chromeがエミュレート状態で起動し、Yahooを開いた後キーワード検索を自動で行います。
検索結果の中に Qiita の文字があるかどうかを検証して終わります。

あとは、webdriveioのサイトでAPI Documentを見つつ、色々と動かしていきないと思います。