Protractorとgit bisectでバグの原因を探す

最近Protractorが使えるようになったので、git bisectを自動実行できることに気づいた。

流れ

ある条件でボタン(スタイル付きのaタグ)が表示されなくなるバグを見つけた。

protractorでボタンが表示されてることを確認するテストを書いた。

• conf.js

'use strict';
exports.config = {
  framework: 'jasmine',
  multiCapabilities: [{
    browserName: 'phantomjs'
  }],
  specs: ['*.spec.js'],
};

• reproduce.spec.js

'use strict';
describe('Button is not displayed', function(){
  // テスト対象のURL
  var baseUrl = 'http://example.com/';

  // 対象ページに遷移
  beforeEach(function() {
    browser.get(baseUrl);
  });

  it('when some button clicked', function(){
    // バグるボタンを押す
    element(by.linkText('バグるボタン')).click();
    // 消えて欲しくないボタンが消えてないことを確認する
    expect(element(by.linkText('消えて欲しくないボタン')).isDisplayed()).toBeTruthy();
  });
});

バグっていないコミットとバグってるコミットを探す(例: branch名でも良い。bad-branchとgood-branchとする)

git bisectを始める

% git bisect start bad-branch good-branch

git bisect runにprotractorを任せる

% git bisect run protractor conf.js

バグる原因となったコミットをチェックアウトした状態で止まる。便利！