为什么要构建 Headless 的 E2E 测试

1
A headless browser is a great tool for automated testing and server environments where you don't need a visible UI shell. For example, you may want to run some tests against a real web page, create a PDF of it, or just inspect how the browser renders an URL.

结合上面的原因,我们还可以

  • Headless结合 E2E 测试,可以让E2E 测试在非 GUI 的操作系统中运行
  • 可以集成至 CI 环境中。让版本得到快速验证

Chrome Headless 的选取

  • Mac/Linux 的Chrome从59版本后,已经支持 Healess 模式的运行。Windows 的从60版本开始支持
  • 所以选择一个你想要的 Chrome 版本,便可以进行 Headless 的测试
1
2
3
4
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed if running on Windows.
https://www.chromestatus.com # URL to open. Defaults to about:blank.

编写 E2E 测试 - BDD-Gauge

BDD

  • home.spec
1
2
3
4
Search
----------------

* Search with 123
  • home.cpt
1
2
3
4
# Search with 123
* Open Baidu homepage
* Search 123
* Check searching result

编写测试实现

使用 Selenium 完成测试用例的实现过程。核心实现

1
2
3
4
5
System.setProperty("webdriver.chrome.driver", "Path/chromedriver");
ChromeOptions options = new ChromeOptions();
options.addArguments("--headless");
options.addArguments("--disable-gpu");
return new ChromeDriver(options);

执行测试

./gradlew clean gauge

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
:clean
:compileJava UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:compileTestJava
:processTestResources UP-TO-DATE
:testClasses
:gauge
Feb 28, 2018 10:48:01 PM org.openqa.selenium.remote.DesiredCapabilities chrome
INFO: Using `new ChromeOptions()` is preferred to `DesiredCapabilities.chrome()`
Starting ChromeDriver 2.35.528157 (4429ca2590d6988c0745c24c8858745aaaec01ef) on port 26606
Only local connections are allowed.
Feb 28, 2018 10:48:02 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
# Baidu HomePage
## Search ✔ ✔ ✔auge

Successfully generated html-report to => /Users/yjshi/Documents/GaugeChromeHeadless/reports/html-report/index.html
Specifications: 1 executed 1 passed 0 failed 0 skipped
Scenarios: 1 executed 1 passed 0 failed 0 skipped

Total time taken: 3.097s

BUILD SUCCESSFUL

Total time: 7.313 secs

挂接 CI

由于现在主流的 CI 在执行 Job 时,都是在 Agent 中执行。因此在跑 Gauge 时,需要在 Agent 中做好准备工作。

准备工作 - Agent

  • 安装 Gauge 及 Java 插件
  • 安装 Chrome
  • 替换BrowserDriver目录中的 driver 为匹配的版本

跑起来

  • 将代码通过 Job 拉取到本地
  • 执行./gradlew clean gauge

注意事项

  • CI执行 Job 的用户不能用 root用户

完整代码

GaugeChromeHeadless

参考