如何使用量角器在游走的ubuntu-16.04中运行无头angular2 e2e测试？

Question

我正在使用Vagrant运行ubuntu16.04，并且需要在无gui环境中运行angular2端到端(e2e)测试，以实现持续集成。在浏览了角度文档之后，我甚至没有找到任何关于应该是一个常见用例的东西。

我发现有几个指令集使用了xvfb，但是缺乏关于这个角度的前期文档让我觉得我错过了一些显而易见的东西。

http://www.tothenew.com/blog/protractor-with-jenkins-and-headless-chrome-xvfb-setup/

谁能帮我指出正确的方向吗？

更新--我用两种不同的工作解决方案回答了下面的问题。

Answer 1

基于XVFB的解决方案：

独立硒服务器

下面是一个工作解决方案，它使用主要取自www.tothenew.com的独立selenium服务器。

安装：

#Provision Java JDK
sudo apt-get install default-jdk -y

#Provision Protractor
sudo npm install protractor -g

#Webdriver update
sudo webdriver-manager update

#Exposing chromedriver
sudo ln /usr/lib/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29 /usr/bin/chromedriver

sudo apt-get install libxpm4 libxrender1 libgtk2.0-0 libnss3 libgconf-2-4 -y

#Provision Google Chrome
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo apt-get update
sudo apt-get install google-chrome-stable -y

sudo apt-get install xvfb gtk2-engines-pixbuf -y
sudo apt-get install xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable -y
sudo apt-get install imagemagick x11-apps dbus-x11 -y

创建脚本: /etc/init.d/selenium

config.vm.provision "shell", inline: <<-SHELL
  echo -n                                             >   /etc/init.d/selenium
  echo '#!/bin/sh'                                    >>  /etc/init.d/selenium
  echo 'Xvfb -ac :99 -screen 0 1280x1024x16 &'        >>  /etc/init.d/selenium
  echo '#disown $1'                                   >>  /etc/init.d/selenium
  echo 'export DISPLAY=:99'                           >>  /etc/init.d/selenium
  echo 'webdriver-manager start /dev/null 2>&1'       >>  /etc/init.d/selenium

  sudo chmod +x /etc/init.d/selenium

SHELL

更新protactor.conf.js以使用seleniumAddress：

exports.config = {
    allScriptsTimeout: 11000,
    specs: [
        './e2e/**/*.e2e-spec.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    seleniumAddress: 'http://localhost:4444/wd/hub',
    directConnect: false,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000,
        print: function() {}
    },
    beforeLaunch: function() {
        require('ts-node').register({
            project: 'e2e/tsconfig.e2e.json'
        });
    },
    onPrepare() {
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
};

跑：

1. 运行/etc/init.d/selenium
2. 运行ng e2e

量角器启动Selenium Server

根据Sudharsan的建议，下面是另一个可行的解决方案。在这种情况下，量角器启动selenium服务器。

安装：

#Provision Java JDK
sudo apt-get install default-jdk -y

#Provision Protractor
sudo npm install protractor -g

#Webdriver update
sudo webdriver-manager update

#Exposing chromedriver
sudo ln /usr/lib/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29 /usr/bin/chromedriver

#Provision Google Chrome
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
sudo apt-get update
sudo apt-get install google-chrome-stable -y

#Provision xvfb
sudo apt-get install -y xvfb
sudo apt-get install -y  xfonts-100dpi xfonts-75dpi xfonts-cyrillic  dbus-x11

量角器配置：

exports.config = {
    specs: [
        './e2e/**/*.e2e-spec.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    directConnect: true,
    //getPageTimeout: 60000,  
    //allScriptsTimeout: 60000,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine2',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000,
        print: function() {}
    },
    beforeLaunch: function() {
        require('ts-node').register({
            project: 'e2e/tsconfig.e2e.json'
        });
    },
    onPrepare() {
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
};

跑：

xvfb-run -a -e /dev/stdout -s "-screen 0 2920x2580x24" ng e2e

运行单元对Chrome的测试也适用于

xvfb-run -a -e /dev/stdout -s "-screen 0 2920x2580x24" ng test --single-run

无头铬溶液：

Chrome现在有了一个无头的选择。不再需要xvfb。可以省略xvfb安装。

因果报应

browsers: ['ChromeCI'],
customLaunchers: {
  ChromeCI: {
    base: 'Chrome',
    flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222']
  }
},

量角器

capabilities: {
  'browserName': 'chrome',
  'chromeOptions': {
    'args': ['no-sandbox', 'headless', 'disable-gpu']
  }
},

然后，测试可以正常运行：

ng test
ng e2e

Answer 2

这很简单，只需遵循以下步骤。

Step1:安装xvfb。

在终端中输入下面的命令来安装xvfb及其依赖项，

 sudo apt-get install -y xvfb
 sudo apt-get install -y  xfonts-100dpi xfonts-75dpi xfonts-cyrillic  dbus-x11

就是这样。现在您可以使用以下命令触发量角器测试，

xvfb-run -a -e /dev/stdout -s "-screen 0 2920x2580x24" protractor config.js

Answer 3

您还可以签出docker作为轻量级解决方案：https://hub.docker.com/r/trion/ng-cli-e2e/更详细的手册：https://hub.docker.com/r/trion/ng-cli/