髭伸ばしてみました。@kyo_agoです。この記事はE2EテストAdventCalendar -3日目です。
さて、みなさま前回の記事でE2Eテスト入門できたでしょうか？
この記事は前回の状態を踏まえて説明しているため、未読の方は是非一度ご覧の上以下の内容をお試しになることをお勧めいたします。
前回の記事では以下の状態になることが目的でした。
- ブラウザ上でE2Eテストが走ること
- PR毎にテストが走ること
- マージ前にテストが成功したかどうかがわかること
ただ、これには以下のような問題があります。
- PRの内容でテストが成功するかわからない（テスト対象がインターネット上のURLになるため）
この記事ではこの点に関して解決していきたいと思います。
以下の様な手順で進めます。
- travis上でhttpdを立ち上げる
- tunnel-identifierを指定する
- テスト用のhtmlを設置する
- テストの対象を変更する
まず、travis上にhttpdを立ち上げます。
これはなんでも構いませんが、今回はpythonのSimpleHTTPServerを使用しました。
前回の.travis.ymlを以下のように修正してください。
-before_install: npm install -g protractor
+before_install:
+ - python -m SimpleHTTPServer 8000 &
+ - npm install -g protractor
travis上で立ち上げたhttpdにSauceLabsから接続できるよう、protractor.conf.jsにtunnel-identifierを指定します。
前回のprotractor.conf.jsを以下のように修正してください。
capabilities: {
+ 'tunnel-identifier' : process.env.TRAVIS_JOB_NUMBER,
'browserName': 'chrome'
},
これでtravisとSauceLabsが接続できるようになりました。
ここからはテスト対象とテストコードの修正を行います。
テスト用のhtmlを設置します。
内容はなんでも構いませんが、今回は簡単にテストできるようにシンプルなものにしています。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#">hi!</a>
</body>
</html>
テストコードを修正します。
これまでのコードはwww.angularjs.org上のテストを記述していたため、以下の内容に変更してください。
describe('Protractor-SauceLabs-TravisCI-sample', function() {
browser.ignoreSynchronization = true;
it('should get a link', function() {
browser.get('http://localhost:8000/index.html');
var links = element.all(by.css('a'));
expect(links.count()).toEqual(1);
});
});
それではPRを行ってみましょう。
無事グリーンのマークがついたでしょうか？
今回の内容をまとめた内容を前回のリポジトリへPRしているため、うまくいかない場合参照してみてください。
注意する点は以下のとおりです。
テストコードの接続先はlocalhostを指定してください。
.travis.ymlにaddons.sauce_connect:trueと、protractor.conf.jsにtunnel-identifierが指定されている場合、SauceLabs上のlocalhostではなく、travis上のlocalhostに接続することが出来ます。
また、.travis.ymlに対して以下のように指定することで別のhost名を指定することも可能です。
addons:
hosts:
- travis.dev
- joshkalderimis.com
上記の指定を行った場合、テストコードの接続先は’http://travis.dev:8000/index.html’のように指定することが可能です。
これはtravis上の/etc/hostsに追加されたのと同じ扱いになるため、httpdの起動時等テストコード以外からも参照することが可能です。
テストコードではbrowser.ignoreSynchronization = true;を指定してください。
これまでのテスト対象はwww.angularjs.org上にあるAngularJSで書かれたコードに対するテストでしたが、今回の場合AngularJSを使用していないシンプルなhtmlに対するテストになるため、そのことをprotractorに通知する必要があります。
それでは快適なE2Eテスト生活をお過ごしください。