2014.11.05

TravisCI、SauceLabs、Protractorで始める簡単E2Eテスト入門

自転車通勤始めました。@kyo_agoです。この記事はE2EテストAdventCalendar -26日目です。

今日はGithub上でTravisCI、SauceLabs、Protractorを使って簡単に始められる継続的E2Eテストの方法を紹介したいと思います。

ゴールはGithubにPRする毎にTravisCIがProtractorを使ってSauceLabs上で検証した結果を教えてくれるところです。

登場するユーザ名（kyo-ago）、リポジトリ名（Protractor-SauceLabs-TravisCI-sample）は実際のものに置き換えて読んでください。

SauceLabsの登録

まず最初にSauceLabsのアカウントを作成します。

この時点ではGithubのリポジトリも何らかの設定ファイルも必要ありません。

「Getting Started」を押してください。

ダイアログが開くので、「try it out」を押してください。

ページ遷移しますが、気にせずに「JS」のリンクを押します。

画面の下の方にアカウント名とトークンが表示されるのでコピーしてください。

ここで表示されているテスト用コマンドはそのまま実行できるようになっているのでコンソールから実行してみましょう。
（実行しなくてもそのまま進めることも出来ます）

$ curl -X POST https://saucelabs.com/rest/v1/kyo-ago/js-tests -u [表示されているユーザ名]:[表示されているトークン] -d platforms='[["Windows 8", "internet explorer", "10"], ["OS X 10.8", "safari", "6"]]' -d url="https://saucelabs.com/test_helpers/front_tests/index.html" -d framework=jasmine -d name=sauce-sample-test

コンソールからコマンドを実行するとブラウザ上の以下の部分がグレイアウトから赤に変わるので成功したことがわかります。

これでSauceLabs上でテストをする準備が整いました。

Protractorの設定

ここからは手元の環境を整備します。

Protractorをインストールしてください。

$ npm install -g protractor

設定ファイル（protractor.conf.js）を作成します。

exports.config = {
  capabilities: {
    'browserName': 'chrome'
  },
  sauceUser: '[SauceLabsのユーザ名]',
  sauceKey: '[SauceLabsのトークン]',
  specs: ['spec.js']
};

sauceUser、sauceKeyは後で未公開領域に移動させますが、最初はテストのために設定ファイルに直接記述します。

テストファイル（spec.js）を作成します。

describe('angularjs homepage todo list', function() {
 it('should add a todo', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('todoText')).sendKeys('write a protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todos'));
    expect(todoList.count()).toEqual(6);
    expect(todoList.get(2).getText()).toEqual('write');
  });
});

ちなみに、上記はProtractor本家に載っているテストのサンプルをベースにしていますが、そのままだとSauceLabs上では失敗したため一部改変しています。

そのため、ローカル環境だとProtractorに載っているテストサンプルコードが成功しますが、上記のコードは失敗するので注意してください。

試しに実行してみましょう。

$ protractor protractor.conf.js

以下の結果になれば成功です。

protractor protractor.conf.js
Using SauceLabs selenium server at http://ondemand.saucelabs.com:80/wd/hub
.

Finished in 14.925 seconds
1 test, 2 assertions, 0 failures

SauceLabs results available at http://saucelabs.com/jobs/[乱数]

最後に表示されている http://saucelabs.com/jobs/[乱数] から実際にブラウザを動かした録画を見ることも出来ます。

TravisCIの登録

ここからはGithubとTravisCIの連携を行います。

まずはTravisCIの設定ファイル（.travis.yml）を作成します。

設定ファイル（.travis.yml）は連携させたいGithub上のリポジトリのトップに作成してください。

language: node_js

node_js:
  - "0.10"

addons:
  sauce_connect: true

before_install: npm install -g protractor

script:
  - protractor protractor.conf.js

環境によっては「.」から始まるファイルを作成できない場合もありますが、その場合コンソールやGithubのWebページ上から作成することも可能です。

次にTravisCIのアカウントを作成し、ログインしてください。

「+」から連携させるリポジトリを選択します。

表示されているリポジトリの一覧から、連携させたいリポジトリのスイッチを「ON」にしてください。
（一覧に連携させたいリポジトリが表示されていない場合、リポジトリ一覧の上にある「Sync now」を押してみてください）

「ON」に変化したら設定画面を開いてください。

設定画面から「Environment Variables」を選択します。

ここでSauceLabsで登録された[SauceLabsのユーザ名]と[SauceLabsのトークン]を登録します。

それぞれSAUCE_USERNAME、SAUCE_ACCESS_KEYの名前で登録してください。

両方登録すると以下のようになります。

これでTravisCI上の登録は一旦終了です。

SauceLabsの設定情報をTravisCIの環境変数へ移行したのでProtractor設定ファイル（protractor.conf.js）もそちらを参照するように修正しましょう。

exports.config = {
  capabilities: {
    'browserName': 'chrome'
  },
  sauceUser: process.env.SAUCE_USERNAME,
  sauceKey: process.env.SAUCE_ACCESS_KEY,
  specs: ['spec.js']
};

このリポジトリにブランチを作成し、修正した設定ファイル（protractor.conf.js）をコミットしてPull Requestを作成してみてください。

普段のPR画面の下に以下の様な部分が追加されていると思います。

ここに表示されている「Details」のリンクをクリックすると、連携しているTravisCIの画面へ飛ぶことも出来ます。

TravisCIの画面上には実行結果のログも表示されており、下までスクロールするとコンソールから実行した場合と同じように http://saucelabs.com/jobs/[乱数] のURLも表示されるためSauceLabsの録画も確認することが出来ます。

これでTravisCI、SauceLabs、Protractorを使用した簡単なPR駆動E2Eテスト環境が出来ました。

最後に以下の様なGithub上に載せるTravisCIのビルド結果バッチの場所も紹介します。