フロントエンド・テストツール比較 Selenium #01環境構築編 #JavaScript

はじめに

株式会社クリエイスCTOの志村です。
うちの社員の曽宮が「Puppeteerっていうテストツールが便利なんですよー」というので、
Seleniumだって同じことできるっしょってことでPuppeteer VS Seleniumをやってみようということになりました。

この記事でやること

Seleniumの環境構築を行い、Headless-Chromeが動くのを確認するまで

テストの実施はこちら
フロントエンド・テストツール比較 Selenium #02テスト編

登場人物

Selenium班(この記事の筆者)

志村、モトキ
自分はセコセコとテストページを作成しつつ、社員のモトキはSeleniumの環境構築を進めていきます。

対するPuppeteer班

上田、曽宮
 フロントエンド・テストツール比較 Puppeteer #01環境構築編 - Qiita

前提条件

使用する技術	バージョン番号
macOS HighSierra	10.13.3
Homebrew	1.5.4
nodebrew	0.9.7
node	v8.9.4
npm	5.6.0
Google Chrome	64.0.3282.140（Official Build）

環境構築手順

# 作業ディレクトリ作成(以降、フルパスを参照するときは/path/to/seleniumと記述)
$ mkdir selenium && cd selenium

# 空ファイル作成
$ echo "{}" > package.json

# SeleniumStandaloneをインストール
$ npm install selenium-standalone --save-dev

# 以降、/path/to/selenium/node_modules/.binにPath通していたら、短く書けます
$ node_modules/.bin/selenium-standalone install

# WebDriverIOをインストール
$ npm install webdriverio --save-dev

# WebDriverIOの設定(別記1参照のこと)
$ node_modules/.bin/wdio config

# HeadlessChromeを使うように修正(別記2参照のこと)
$ vi wdio.conf.js

# TestCaseを記述
$ mkdir -p test/spec
$ vi test/specs/test.js

別記1: WebDriverIOの設定 `node_modules/.bin/wdio config`

$ node_modules/.bin/wdio config

=========================
WDIO Configuration Helper
=========================

? Where do you want to execute your tests? On my local machine
? Which framework do you want to use? mocha
? Shall I install the framework adapter for you? Yes
? Where are your test specs located? ./test/specs/*.js
? Which reporter do you want to use? # ここではdotを選択
? Do you want to add a service to your test setup? # selenium-standaloneを選択
? Level of logging verbosity error # errorを選択
? In which directory should screenshots gets saved if a command fails? ./errorShots/
 + t/s/test.js

別記2: HeadlessChromeを使う設定 `wdio.conf.js`

// 中略
    capabilities: [{
        //browserName: 'firefox'
        browserName: 'chrome',
        chromeOptions: {
          args: ['--headless', '--disable-gpu'],
        },
    }],
// 後略

テストケースのサンプルコード `test/specs/test.js`

it()がテストケースの単位になります。ここでは2件設定します。
WebdriverIOのAPIドキュメントはこちら

var assert = require('assert')

describe('webdriver.io page', function() {
  it('should be a pending test')

  it('should have the right title - the fancy generator way', function() {
    browser.url('http://webdriver.io/')
    var title = browser.getTitle()
    assert.equal(title, 'WebdriverIO - WebDriver bindings for Node.js')
  })
})

Selenium立ち上げ(別プロセスのシェルで実行)

seleniumを立ち上げます。
テストが終わった後にCtrl-Cで終了します。

$ cd /path/to/selenium
$ node_modules/.bin/selenium-standalone start

テストケースの実行

2件処理されるはずです。

$ node_modules/.bin/wdio wdio.conf.js

次回

次回はSPA(react-redux)のテストページを使って実際のテストを行っていきます。
フロントエンド・テストツール比較 Selenium #02テスト編

フロントエンド・テストツール比較 Selenium #01環境構築編