Travis CI で WebdriverIO + Headless Google Chrome で E2E テストを通す

後述の参考の記事を組み合わせただけの簡単なお仕事。

.travis.yml

---
sudo: required
dist: trusty

addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

language: node_js

node_js:
  - "7"

cache:
  directories:
    - node_modules
    - "$HOME/.npm"
    - "$HOME/.cache"

before_script:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
  - "npm start &"
  - "sleep 3"

wdio.conf.js 該当部分

  capabilities: [{
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless', '--disable-gpu', '--window-size=1280,800'],
    }
  }],

実際のプロジェクト

GitHub - piglovesyou/react-server-side-rendering-with-css-modules

余談

Headless Chrome はバージョン59 から。手元の Mac でも npm test コマンドでテストを実行できてる。--headlessだけで起動して、オーバーヘッドがないぶん実行も速い、手軽すぎ。

あと.travis-ci.yml の cache を知らなかった。速くて嬉しい。

参考にした記事