如何使 Protractor 跑 Headless Chrome?

使用 Headless Chrome 取代 PhantomJS

Angular CLI 的 Protractor 預設是跑 Chrome，但在 Chrome 59 之後提供了 Headless Chrome，讓我們以類似 PhantomJS 方式跑 E2E 測試。

Version

Angular CLI 1.1.2
Angular 4.2.3
Protractor 5.1.2

修改 protractor.conf.js

protractor.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: [ "--headless", "--disable-gpu", "--window-size=1920, 1080" ]
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

13 行

1
2
3
chromeOptions: {
      args: [ "--headless", "--disable-gpu", "--window-size=1920, 1080" ]
}

新增 chromeOptions。

  • —headless : 以 headless 模式跑 Chrome。
  • —disable-gpu : 官網 沒做進一步解釋，但提到將來會拿掉此選項。
  • —window-size : 決定 Chrome 視窗大小，對於 RWD 測試有幫助。

Conclusion

  • Headless Chrome 執行速度比 Chrome 快。
  • 若要在 Jenkins 或 VSTS 跑 E2E 測試，則 Headless Chrome 是必須的。

Reference

Carl Vuorinen, Running Angular tests in headless Chrome
Eric Bidelman, Getting Started with Headless Chrome

2017-06-29
▲