UDN-企业互联网技术人气社区

板块导航

浏览  : 1072
回复  : 1

[技术交流] UI自动化测试之Headless browser容器化

[复制链接]
开花包的头像 楼主
发表于 2016-8-3 20:13:16 | 显示全部楼层 |阅读模式
  目的

  E2E测试执行过程中不依赖UI界面

  可在*nix系统中运行

  为什么不用PhantomJS,Protractor官方不推荐使用PhantomJS来测试

  
  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

  安装


  下载系统所需要的安装包,下载地址: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

  
  1. Docker pull webnicer/protractor-headless
复制代码


  E2E之Protractor

  可视化运行E2E测试


  安装Protractor

  
  1. npm install -g protractor
复制代码


  更新webdriver-manager

  
  1. webdriver-manager update
复制代码


  创建conf.js配制文件

  1.   // conf.js

  2.   exports.config = {

  3.   framework: 'jasmine',

  4.   seleniumAddress: 'http://127.0.0.1:4444/wd/hub',

  5.   specs: ['**/**.js'],

  6.   capabilities: {

  7.   browserName: 'chrome'

  8.   },

  9.   jasmineNodeOpts: {

  10.   showColors: true,

  11.   }

  12.   };
复制代码


  创建test-spec.js测试脚本

  1.   describe('angularjs homepage todo list', function() {

  2.   it('should add a todo', function() {

  3.   browser.get('https://angularjs.org');

  4.   element(by.model('todoList.todoText')).sendKeys('write first protractor test');

  5.   element(by.css('[value="add"]')).click();

  6.   var todoList = element.all(by.repeater('todo in todoList.todos'));

  7.   expect(todoList.count()).toEqual(3);

  8.   expect(todoList.get(2).getText()).toEqual('write first protractor test');

  9.   // You wrote your first test, cross it off the list

  10.   todoList.get(2).element(by.css('input')).click();

  11.   var completedAmount = element.all(by.css('.done-true'));

  12.   expect(completedAmount.count()).toEqual(2);

  13.   });

  14.   });
复制代码


  运行E2E测试: protractor conf.js,会启动chrome浏览器,并在控制台显示对应的执行结果

 
  1.  ➜ protractorHeadless git:(master) ✗ protractor conf.js

  2.   [17:23:41] I/hosted - Using the selenium server at http://127.0.0.1:4444/wd/hub

  3.   [17:23:41] I/launcher - Running 1 instances of WebDriver

  4.   Started

  5.   .

  6.   1 spec, 0 failures

  7.   Finished in 19.912 seconds

  8.   [17:24:01] I/launcher - 0 instance(s) of WebDriver still running

  9.   [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.   // conf.js

  2.   exports.config = {

  3.   framework: 'jasmine',

  4.   // seleniumAddress: 'http://127.0.0.1:4444/wd/hub',

  5.   specs: ['**/**.js'],

  6.   capabilities: {

  7.   browserName: 'chrome'

  8.   },

  9.   jasmineNodeOpts: {

  10.   showColors: true,

  11.   }

  12.   };
复制代码


  进入protractor的脚本根目录,执行protractor.sh conf.js,不会启动chrome浏览器,且在控制台显示对应的执行结果

  1.   ➜ protractorHeadless git:(master) ✗ protractor.sh conf.js

  2.   [09:31:08] I/local - Starting selenium standalone server...

  3.   [09:31:08] I/launcher - Running 1 instances of WebDriver

  4.   [09:31:09] I/local - Selenium standalone server started at http://192.168.65.2:37226/wd/hub

  5.   Started

  6.   .

  7.   1 spec, 0 failures

  8.   Finished in 11.403 seconds

  9.   [09:31:23] I/local - Shutting down selenium standalone server.

  10.   [09:31:23] I/launcher - 0 instance(s) of WebDriver still running

  11.   [09:31:23] I/launcher - chrome #01 passed
复制代码


  E2E的Headless测试完成

  详解

  Dockerfile文件


 
  1.  FROM node:slim

  2.   MAINTAINER Yuanjie

  3.   WORKDIR /tmp

  4.   RUN npm install -g protractor mocha jasmine && \

  5.   webdriver-manager update && \

  6.   apt-get update && \

  7.   apt-get install -y xvfb wget openjdk-7-jre && \

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

  9.   dpkg --unpack google-chrome-stable_current_amd64.deb && \

  10.   apt-get install -f -y && \

  11.   apt-get clean && \

  12.   rm google-chrome-stable_current_amd64.deb && \

  13.   mkdir /protractor

  14.   ADD protractor.sh /protractor.sh

  15.   # Fix for the issue with Selenium, as described here:

  16.   # https://github.com/SeleniumHQ/Docker-selenium/issues/87

  17.   ENV DBUS_SESSION_BUS_ADDRESS=/dev/null

  18.   WORKDIR /protractor

  19.   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. #!/bin/bash

  2.   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

原文作者:巴索罗米杰  来源:开发者头条

相关帖子

发表于 2016-8-4 10:34:25 | 显示全部楼层
UI自动化测试之Headless browser容器化安装教程,很好用
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部