目的

• E2E測(cè)試執(zhí)行過(guò)程中不依賴(lài)UI界面
• 可在*nix系統(tǒng)中運(yùn)行
• 為什么不用PhantomJS,Protractor官方不推薦使用PhantomJS來(lái)測(cè)試

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

Docker

?安裝

• 下載系統(tǒng)所需要的安裝包，下載地址：https://www.docker.com/products/docker
• 注冊(cè)https://hub.docker.com/賬號(hào)
• 使用pull來(lái)獲取docker 鏡像protractor-headless，此過(guò)程會(huì)比較慢，耐心等待
  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

可視化運(yùn)行E2E測(cè)試

• 安裝Protractor

npm install -g protractor

• 更新webdriver-manager

webdriver-manager update

• 創(chuàng)建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,
  }
};

• 創(chuàng)建test-spec.js測(cè)試腳本

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);
  });
});

• 運(yùn)行E2E測(cè)試: protractor conf.js，會(huì)啟動(dòng)chrome瀏覽器，并在控制臺(tái)顯示對(duì)應(yīng)的執(zhí)行結(jié)果

?  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的可視化測(cè)試完成

Headless運(yùn)行E2E測(cè)試

• 將下面內(nèi)容保存為可執(zhí)行程序，shell文件(unix)或bat文件(windows)

#!/bin/bashdocker run -it --privileged --rm --net=host -v /dev/shm:/dev/shm -v $(pwd):/protractor webnicer/protractor-headless $@

• 進(jìn)入控制臺(tái)，輸入protractor.sh --version，查看版本號(hào)，以確定配制成功。務(wù)必要啟動(dòng)docker服務(wù)

• 修改conf.js文件內(nèi)容，啟用docker鏡像內(nèi)部的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,
  }
};

• 進(jìn)入protractor的腳本根目錄，執(zhí)行protractor.sh conf.js,不會(huì)啟動(dòng)chrome瀏覽器，且在控制臺(tái)顯示對(duì)應(yīng)的執(zhí)行結(jié)果

?  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測(cè)試完成

詳解

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"]

鏡像主要配制說(shuō)明

• 獲取基準(zhǔn)鏡像: node:slim
• 安裝protractor,mocha,jasmine: E2E測(cè)試執(zhí)行所需
• 更新driver: webdriver-manager update
• 安裝Xvfb：apt-get install -y xvfb，headless的核心，使用虛擬內(nèi)存，來(lái)模擬UI顯示
• 安裝wget，jdk
• 使用wget下載chrome的deb版本

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

• 使用dpkg安裝chrome
• 添加Xvfb的運(yùn)行參數(shù): ADD protractor.sh /protractor.sh,protractor.sh文件內(nèi)容

#!/bin/bash
xvfb-run --server-args='-screen 0 1280x1024x24' protractor $@

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

參考

• Headless Browser Testing With Xvfb
• docker hub protractor-headless
• Protractor browser setting up
• XVFB