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

# 作業ディレクトリ作成(以降、フルパスを参照するときは/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

$ 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

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

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')
  })
})

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

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