サイボウズがWebアプリ自動テストに活用しているOSSツールの紹介

2014/11 関西オープンフォーラム2014

サイボウズ株式会社

ブラウザテスト• Selenium WebDriver

• Appium

• Selenium Grid

Selenium WebDriver• Selenium RC（Selenium 1）の後継

• テストコードを記述してブラウザで実行

• FirefoxアドオンのSelenium IDEとは別物

• 各種ブラウザ用のドライバが提供されている

Selenium WebDriverJava C#

Python Ruby PHP Perl

JavaScript

Selenium WebDriver

API

Firefox Driver Internet Explorer Driver

Chrome Driver Opera Driver

テストコード ドライバ

ブラウザ

Appium

Selenium WebDriver

APIテストコード Appium

iOS, Android

エミュレータ/実機

ブラウザ/ネイティブアプリ

Selenium Grid

Selenium WebDriver

APIテストコード RemoteWebDriver

Selenium Hub

ドライバ

ブラウザ

ドライバ

ブラウザ

ドライバ

ブラウザ

Selenium Grid

サイボウズでのブラウザテスト• テストケースは約860個

• 並列数は36

• 実行時間は約30分

ブラウザテスト参考資料• 失敗からはじめるSelenium

http://developer.cybozu.co.jp/tech/?p=5499

• ハイパフォーマンスSeleniumテスト＠サイボウズhttp://www.slideshare.net/miyajan/kintone-selenium

JavaScriptユニットテスト

http://www.slideshare.net/teppeis/javascript-testwhywhathow/33

Karma• 様々なブラウザで実行可能

• プラグインが豊富でCIとの連携が容易

• karma-junit-reporter

• karma-coverage

Mocha• インタフェースを選択可能（BDD, TDDなど）

// BDD interface describe('Array', function() { before(function() { // ... }); ! describe('#indexOf()', function() { it('should return -1 when not present', function() { [1,2,3].indexOf(4).should.equal(-1); }); }); });

Expect.js• BDDスタイルでアサーションを記述可能

expect(window.r).to.be(undefined); expect([]).to.be.an('array'); expect(window).not.to.be.an(Image);

describe('test suite', function () { it('should expose a function', function () { expect(add).to.be.a('function'); }); ! it('should do math', function () { expect(add(1, 3)).to.equal(4); }); });

• MochaのBDDインタフェースとの組み合わせ

Sinon.JS• テストダブルを扱うライブラリ

// spy var spy = sinon.spy(jQuery, 'ajax'); jQuery.getJSON('/some/resource'); expect(spy.calledOnce).to.be.ok(); !// stub var stub = sinon.stub(jQuery, 'ajax'); stub.yieldsTo('success', [1, 2, 3]); jQuery.ajax({ success: function(data) { expect(data).to.have.length(3); } });

サイボウズでのJavaScriptユニットテスト

• テストケースは約2,500個

• 実行時間は約10秒

• コードカバレッジ（行）は約64%

• Jenkinsでテスト結果を表示

JavaScriptユニットテスト参考資料• kintoneのJSユニットテスト最新事情

http://developer.cybozu.co.jp/tech/?p=7089

継続的インテグレーション（CI）• Jenkins

• Build Pipeline Plugin

• GitHub Plugin

ビルドパイプライン

ビルドパイプラインの流れ1. GitHubのマスターブランチにpush

2. コンパイル

3. ユニットテスト

4. アーカイブ作成

5. テスト環境にデプロイ

6. ブラウザテスト

7. ドッグフーディング環境にデプロイ

CI参考情報• 超速で開発・リリースするための6つのこと

http://developer.cybozu.co.jp/tech/?p=2386