Protractor+Travis CI+Sauce Labsでクラウド上でのE2Eテスト

前回の記事で、

実際のテストコードの例や、導入時にはまった点などは、また別の記事で

と言ってから、だいぶたってしまいましたが…。

この記事では、Protractor+Travis CI+Sauce Labsでクラウド上でE2E(End-to-End)テストをするにあたり、設定ファイルまわりの記述について紹介しようと思います。

Protractor+Travis CI+Sauce Labsの連携

まずはTravis CIとSauce Labsのアカウントを取得しておきます。

連携は、こちらを参考にしながら、以下の手順で進めます。

1.Travis CIのsettingsで環境変数にSauce Labsの設定を登録しておく

Sauce Labsのユーザ名、アクセスキーを、それぞれ

SAUCE_USERNAME ユーザ名

SAUCE_ACCESS_KEY アクセスキー

という名前で、Travis CIの設定画面から環境変数に登録しておきます。

Travis 設定画面

2.travis.ymlにsauce_connect: trueを追加

language: node_js
branches:
only:
- master
cache:
directories:
- node_modules
node_js:
- "4.3.1"
addons:
sauce_connect: true # Sauce Labsとの連携
before_script:
- npm install -g protractor@3.1.1
- npm install
- npm run build # アプリケーションをbuild
- node travis-server.js & # buildしたアプリケーションを起動
script:
- protractor e2e/protractor.conf.travis.js # テストを実行

実行しているスクリプトの具体的な中身は割愛しますが、やっていることは、buildしたアプリケーションを起動(※続けてテストのコマンドを実行するため、バックグラウンドで起動しています)し、それに対してテストを実行しています。

3.protractorのconfig

実行するprotractorの設定ファイルです。(上記のtravis.ymlでいうと、protractor.conf.travis.js)

exports.config = {
sauceUser: process.env.SAUCE_USERNAME, // 1.で設定した値が参照できる
sauceKey: process.env.SAUCE_ACCESS_KEY,
  multiCapabilities: [
{
'browserName': 'internet explorer',
'version': '11',
'name': 'coiney-web E2E Tests via TRAVIS on ie in WINDOWS',
'selenium-version': '2.53.0',
'nativeEvents': false, //※1
'tunnel-identifier' : process.env.TRAVIS_JOB_NUMBER,
'build': process.env.TRAVIS_BUILD_NUMBER,
'shardTestFiles': true, //※2 テストの分割
'maxInstances': 6 //※2 このブラウザをいくつ並行実行するか
},
// 他のブラウザ設定も必要に応じてここに記述する
  ],
  maxSessions: 6, //※2 テスト全体で並行実行するブラウザの数
  specs: [
// 実行するtestのファイルを記述
'spec/**/*.js'
],
  // Up the timeouts for the slower browsers (IE, Safari).
allScriptsTimeout: 60000, //※3
getPageTimeout: 60000, //※3
  // Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 60000 //※3
},
};

※1) windows IE webdriverでのクリック問題の回避

IEのweb driverで、テストコードの中で click() を走らせても、クリックされた挙動にならない場合があります。

これに対しては、上記のURLにあるように、capabilityの設定で

nativeEvents: false

を指定することで回避できます。

ちなみに、protractorの3.2〜3.3では、その設定が効かなくなってしまったのですが、issue報告したところ、4.0.0では修正されたようです。

※2) インスタンスを分割して並行実行する

Sauce Labsのプランに応じて、ブラウザのインスタンスを増やして、テストを並行実行することができます。

弊社では、Sauce Labs上のCONCURRENCY LIMIT を6にしたので、

maxSessions: 6

を設定しており、

かつ環境ごとのCapability設定で

'shardTestFiles': true, //※2 テストの分割
'maxInstances': 6 //※2 このブラウザを最大いくつ並行実行するか

の設定を入れることで、複数のインスタンスにテストを分割して実行します。

shardTestFilesがfalseだと、すべてのspecsが1つのインスタンスで実行されるので、テストが増えてくると、実行時間がどんどんかさんでいき、後半にタイムアウトやフリーズすることもあったので、trueにしておく方が無難だと思います。

※3) タイムアウト対策

タイムアウトするとテストが失敗してしまうので、設定ファイルのタイムアウト時間は長めに取りました。

// Up the timeouts for the slower browsers (IE, Safari).
allScriptsTimeout: 60000, //※3
getPageTimeout: 60000, //※3
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 60000 //※3
},

タイムアウト関連の問題はこちらに詳しく載っています↓

その他

超過料金に注意

Sauce Labsのプランで実行できるテスト時間をいつのまにか超えてしまうと、超過料金を払う羽目になりますので、

・テストを走らせるタイミングを見直す(Travisの設定でブランチを絞る、トリガーを絞るなど)

・ちょっとした修正で立て続けにテストが走ってしまった時は、古い方をキャンセルする

など地味に節約したり、毎月超過するようならプランを見直すなどしましょう。

自動化を頑張りすぎない

たまに、ローカルのwebdriverでの実行では問題がなくても、リモートのwebdriverだとなぜか時々失敗したりフリーズしたり不安定な結果になるテストコードもあります。

例えば、「新しいウィンドウを開き、そちらにフォーカスを移し、その中の要素を検証する」などがそうでしたが、ここはもう諦めて「新規ウィンドウで開く」ことはテスト対象から外し、開くはずだったページを直接開いての要素検証にとどめるようにしました。

不安定な動作や自動化が面倒なところは、深追いしすぎず思い切って諦めるのも大事かなと思います。むきになって検証しまくっていると、超過料金まっしぐらです。😇💸

まとめ

E2Eテストを活用することで、複数ブラウザの動作確認などを効率化することができます。

自動化できるところは上手く使い、手動のテストも併用しながら、今後もプロダクトの質を担保していきたいと思っています。

Like what you read? Give miyuki a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.