Selenium IDEで作ったテストをselenium-side-runnerを使ってheadlessで動かしてTravisCIでビルドする

背景

10分でわかるブラウザ処理自動化！初心者向けSelenium IDE入門ガイド (2019/08版 : Selenium IDE v3.12.0)で初心者向けの入門ガイドを書きました。
更に次のステップに進むと、これだけではやりたいことはあってもそれをどのコマンドを使って実現できるのかわからないと思い、Selenium IDE コマンドリファレンス (2019/09版 : Selenium IDE v3.12.0 [全96コマンドを徹底解説])を書きました。

導入からテスト作成まで自動化するハードルが全然高くないというのはご理解いただけたのではないでしょうか。

ただこれが出来るようになると先が見えるようになり、「これを毎日定期的に実行したい！実際に開発のビルドの度に実行したい！」などという次のステップに向かうと思います。
本記事では、それを実現するためのコマンドライン実行 → TravisCI実行 → headless実行をする手順を書いていきます。

1. コマンドライン実行

コマンドラインで実行するためには、SeleniumIDEで作成したファイルをSaveして.sideファイルとして保存します。
また、コマンドラインで実行するためには、selenium-side-runner, chromedriver(chromeで動かす場合)が必要になります。
selenium-side-runner, chromedriverの入手方法については本記事でも紹介しますが、詳しくはこちらを参照してください。

Mac OSX環境

$ brew install node
$ npm install -g selenium-side-runner
$ npm install -g chromedriver
$ selenium-side-runner -c "browserName=chrome" xxxx.side 

Windows環境

https://nodejs.org/en/download/ からnodeをインストールしてください。

> npm install -g selenium-side-runner
> npm install -g chromedriver
> selenium-side-runner -c "browserName=chrome" xxxx.side 

2. CI(TravisCI)で実行

CIツールはいくつもありますが、本記事ではTravisCIでのビルド方法を紹介します。
TravisCIはリポジトリのルートに以下のような.travis.ymlを配置しておくだけで自動ビルドを行えます。
その際、https://travis-ci.org/[Githubアカウント名]/[リポジトリ名]/settings にアクセスしてビルドを有効にする必要があります。
.travis.ymlは、　コマンドライン実行 と同様で必要最低限のことしか定義していません。
ブラウザが立ち上がるため xvfb を使用しています。

.travis.yml

language: node_js
services:
  - xvfb
addons:
  chrome: stable
node_js:
  - "11"
before_script:
  - npm install -g chromedriver
  - npm install -g selenium-side-runner
script:
  - selenium-side-runner -c "browserName=chrome" xxxx.side

3. selenium-side-runnerを使ってheadlessで動かす

2019/09/09 現在、ググるとそれっぽいものは出てくるものの実際に試してみると「やっぱりブラウザが立ち上がるじゃん！」というものが多かったです。
おそらくオプションの指定が変わった？もしかしたらあるバージョンまではそれで動いていたなどかもしれません。

今回、Chrome バージョン76でヘッドレス起動できることを確認したためその方法を載せておきます。
ズバリ、実行コマンドを以下に変更するだけです。

$ selenium-side-runner -c "goog:chromeOptions.args=[--headless,--nogpu] browserName=chrome" xxxx.side

TravisCI(.travis.yml)でヘッドレス起動で動かす場合の設定は以下のようになります。
xvfbが不要になります。

.travis.yml

language: node_js
addons:
  chrome: stable
node_js:
  - "11"
before_script:
  - npm install -g chromedriver
  - npm install -g selenium-side-runner
script:
  - selenium-side-runner -c "goog:chromeOptions.args=[--headless,--nogpu] browserName=chrome" xxxx.side

ただの宣伝

Seleniumに関する記事を書いたまとめです。書いたのは結構前ですがちょこちょこアップデートしています。

• 全国のSeleniumer必読