目的
- E2E測試執行過程中不依賴UI界面
- 可在*nix系統中運行
- 為什么不用
PhantomJS,Protractor官方不推薦使用PhantomJS來測試
We recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.
Docker
?安裝
- 下載系統所需要的安裝包，下載地址：https://www.docker.com/products/docker
- 注冊https://hub.docker.com/賬號
- 使用
pull來獲取docker 鏡像protractor-headless，此過程會比較慢，耐心等待
docker hub地址：https://hub.docker.com/r/webnicer/protractor-headless/
git hub地址：https://github.com/jciolek/docker-protractor-headless
docker pull webnicer/protractor-headless
E2E之Protractor
可視化運行E2E測試
- 安裝
Protractor
npm install -g protractor
- 更新
webdriver-manager
webdriver-manager update
- 創建
conf.js配制文件
// 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測試腳本
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瀏覽器，并在控制臺顯示對應的執行結果
? 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)
#!/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
// 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瀏覽器，且在控制臺顯示對應的執行結果
? 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文件
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版本
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
- 使用
dpkg安裝chrome - 添加
Xvfb的運行參數:ADD protractor.sh /protractor.sh,protractor.sh文件內容
#!/bin/bash
xvfb-run --server-args='-screen 0 1280x1024x24' protractor $@
源代碼地址：https://github.com/aimer1124/protractor-headless
