はじめに
株式会社クリエイスCTOの志村です。
うちの社員の曽宮が「Puppeteerっていうテストツールが便利なんですよー」というので、
Seleniumだって同じことできるっしょってことでPuppeteer VS Seleniumをやってみようということになりました。
この記事でやること
Seleniumの環境構築を行い、Headless-Chromeが動くのを確認するまで
テストの実施はこちら
フロントエンド・テストツール比較 Selenium #02テスト編
登場人物
Selenium班(この記事の筆者)
対するPuppeteer班
前提条件
| 使用する技術 | バージョン番号 |
|---|---|
| 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テスト編