Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

この記事でやること

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

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

登場人物

Selenium班(この記事の筆者)

  • 志村モトキ
    自分はセコセコとテストページを作成しつつ、社員のモトキは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テスト編

creaith
渋谷近辺で活動しているITベンチャー企業です。お気軽にフォロー・コメントしてもらえると嬉しいです。技術屋さん仲良くなりましょう!
https://creaith.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした