OSS版Drone.io, SauceLabs, Protractor を連携させて、E2Eテストを走らせる

e2e browser

柿の種を食べています。きたけーです。

社内で OSS版Drone.io が使われており(refs: OSS版 Drone.io を社内で使い始めてる話 - Qiita )、SauceLabs 、Protractorと連携させてE2Eテストを走らせてみました。

これによりPullReqがでたタイミングで、各種OS、ブラウザでE2Eテストを走らせて、「あ！あのブラウザで動かない」と気づくことができるようになります。

大体の手順は TravisCI、SauceLabs、Protractorで始める簡単E2Eテスト入門 | チャットワーククリエーターズブログ と同じで、左の記事ではCIサービスにTravisCIを使っているのを、OSS版Drone.ioに置き換えたような形になります。

おこなう手順

  • SauceLabsの各種トークンを環境変数として設定する
  • sauce-connectの用意
  • Protractorの設定
  • Drone.ioの設定

SauceLabsの各種トークンを環境変数で設定する

SauceLabsのアカウントを作成したら、Drone.ioの対象のリポジトリの設定画面で以下のように各種トークンを環境変数として設定します。

f:id:kitak:20150131111116p:plain

sauce-connectの用意

テスト対象のHTMLやJavaScriptを配信するウェブサーバーが外部から閉じたネットワークに存在する場合、(当たり前ですが)SauceLabsのブラウザからアクセスすることができません。

この問題を解決するためにsauce-connectというツールが用意されています。 sauce-connectは、ウェブサーバーの存在する環境とSauceLabsのクライアントの環境でセキュアなコネクションを張り、そのコネクションを通して、テストを実行することができます( refs: Sauce Connect · Sauce Labs Docs )。

CIのビルドを実行するたびにsauce-connectをダウンロードするのは時間がもったいないので、事前にダウンロード済みのDocker imageを用意しておきます。

imageを作成するDockerfileは以下のような内容です。

FROM bradrydzewski/node:0.10

MAINTAINER Keisuke KITA

USER ubuntu
RUN wget https://saucelabs.com/downloads/sc-4.3.6-linux.tar.gz
RUN tar xvf sc-4.3.6-linux.tar.gz
RUN rm sc-4.3.6-linux.tar.gz

Drone.ioの設定

Drone.ioの設定ファイル(.drone.yml)のscriptプロパティの記述は以下のようになります。

事前にnpm, bower, bundlerで必要なパッケージを取得して、ウェブサーバーをコンテナ内で起動します(npm run serve), その後、scコマンド(sauce-connect)でコンテナとSauceLabsとの間にコネクションを張ります。

-iオプションは複数のビルドを実行しているとき、ビルドごとにコネクションを識別するための値を指定します。ここではDrone.ioの用意しているコミットidが取得できる環境変数を利用しました。 コネクションの準備ができたら --readyfileオプションで指定したファイルが作成されるので、作成されるまで待ちます。

準備ができたら、E2Eテストを走らせるタスクを実行します(npm run test:e2e)。

script:
  - npm install
  - bower install
  - bundle install --path vendor/bundle
  - npm run serve &
  - ~/sc-4.3.6-linux/bin/sc -u $SAUCE_USER -k $SAUCE_ACCESS_KEY -i $DRONE_COMMIT --readyfile ${HOME}/sc_ready --pidfile /tmp/sc.pid &
  - while [ ! -e ~/sc_ready ]; do sleep 1; done
  - npm run test:e2e
  - kill `cat /tmp/sc.pid`
Protractorの設定

Protractorの設定は以下の内容になります。

SauceLabsと連携する場合には設定ファイルに、sauceUser、sauceKeyというプロパティを指定してあげればOKです。

capabilitiesプロパティではテストを実行する環境(OS, ブラウザ)を指定できますが、今回はOSの指定は特にせず、ブラウザのみ「chrome」を選択しています。 name, buildプロパティはSauceLabsの画面で実行したテストを識別するために設定しておくとよいでしょう。

tunnel-identifierには、コネクションを指定するために、さきほどscコマンドを実行したときにiオプションで指定した値を渡します。

exports.config = {
  capabilities: {
    'browserName': 'chrome',
    'name': 'alpha tests',
    'build': process.env.DRONE_COMMIT,
    'tunnel-identifier': process.env.DRONE_COMMIT,
  },
  sauceUser: process.env.SAUCE_USER,
  sauceKey: process.env.SAUCE_ACCESS_KEY,
  specs: ['*-spec.js'],
  baseUrl: 'http://localhost:9000/'
}