目的

1
We recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.

Docker

安装

1
docker pull webnicer/protractor-headless

E2E之Protractor

可视化运行E2E测试

  • 安装Protractor
1
npm install -g protractor
  • 更新webdriver-manager
1
webdriver-manager update
  • 创建conf.js配制文件
1
2
3
4
5
6
7
8
9
10
11
12
// conf.js
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
specs: ['**/**.js'],
capabilities: {
browserName: 'chrome'
},
jasmineNodeOpts: {
showColors: true,
}
};
  • 创建test-spec.js测试脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');

element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[value="add"]')).click();

var todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write first protractor test');

// You wrote your first test, cross it off the list
todoList.get(2).element(by.css('input')).click();
var completedAmount = element.all(by.css('.done-true'));
expect(completedAmount.count()).toEqual(2);
});
});
  • 运行E2E测试: protractor conf.js,会启动chrome浏览器,并在控制台显示对应的执行结果
1
2
3
4
5
6
7
8
9
10
11
protractorHeadless git:(master)protractor conf.js
[17:23:41] I/hosted - Using the selenium server at http://127.0.0.1:4444/wd/hub
[17:23:41] I/launcher - Running 1 instances of WebDriver
Started
.


1 spec, 0 failures
Finished in 19.912 seconds
[17:24:01] I/launcher - 0 instance(s) of WebDriver still running
[17:24:01] I/launcher - chrome #01 passed
  • E2E的可视化测试完成

Headless运行E2E测试

  • 将下面内容保存为可执行程序,shell文件(unix)或bat文件(windows)
1
#!/bin/bashdocker run -it --privileged --rm --net=host -v /dev/shm:/dev/shm -v $(pwd):/protractor webnicer/protractor-headless $@
  • 进入控制台,输入protractor.sh --version,查看版本号,以确定配制成功。务必要启动docker服务

  • 修改conf.js文件内容,启用docker镜像内部的selenium server

1
2
3
4
5
6
7
8
9
10
11
12
// conf.js
exports.config = {
framework: 'jasmine',
// seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
specs: ['**/**.js'],
capabilities: {
browserName: 'chrome'
},
jasmineNodeOpts: {
showColors: true,
}
};
  • 进入protractor的脚本根目录,执行protractor.sh conf.js,不会启动chrome浏览器,且在控制台显示对应的执行结果
1
2
3
4
5
6
7
8
9
10
11
12
13
➜  protractorHeadless git:(master) ✗ protractor.sh conf.js
[09:31:08] I/local - Starting selenium standalone server...
[09:31:08] I/launcher - Running 1 instances of WebDriver
[09:31:09] I/local - Selenium standalone server started at http://192.168.65.2:37226/wd/hub
Started
.


1 spec, 0 failures
Finished in 11.403 seconds
[09:31:23] I/local - Shutting down selenium standalone server.
[09:31:23] I/launcher - 0 instance(s) of WebDriver still running
[09:31:23] I/launcher - chrome #01 passed
  • E2E的Headless测试完成

详解

Dockerfile文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
FROM node:slim
MAINTAINER Yuanjie
WORKDIR /tmp
RUN npm install -g protractor mocha jasmine && \
webdriver-manager update && \
apt-get update && \
apt-get install -y xvfb wget openjdk-7-jre && \
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb && \
dpkg --unpack google-chrome-stable_current_amd64.deb && \
apt-get install -f -y && \
apt-get clean && \
rm google-chrome-stable_current_amd64.deb && \
mkdir /protractor
ADD protractor.sh /protractor.sh
# Fix for the issue with Selenium, as described here:
# https://github.com/SeleniumHQ/docker-selenium/issues/87
ENV DBUS_SESSION_BUS_ADDRESS=/dev/null
WORKDIR /protractor
ENTRYPOINT ["/protractor.sh"]

镜像主要配制说明

  • 获取基准镜像: node:slim
  • 安装protractor,mocha,jasmine: E2E测试执行所需
  • 更新driver: webdriver-manager update
  • 安装Xvfb:apt-get install -y xvfb,headless的核心,使用虚拟内存,来模拟UI显示
  • 安装wget,jdk
  • 使用wget下载chrome的deb版本
1
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
  • 使用dpkg安装chrome
  • 添加Xvfb的运行参数: ADD protractor.sh /protractor.sh,protractor.sh文件内容
1
2
#!/bin/bash
xvfb-run --server-args='-screen 0 1280x1024x24' protractor $@

源代码地址:https://github.com/aimer1124/protractor-headless

参考


本文首发于简书: E2E测试之Headless browser容器化