如何让travis在Chrome上执行Angular测试（"请设置环境变量CHROME_BIN"）

Question

我正在处理由yeoman生成的示例Angular项目。
我可以在本地运行karma测试（我把系统变量CHROME_BIN设置为指向chromium二进制文件，但这可以用更优雅的方式完成。只是一个快速的解决方法。）

然而，当试图使用travis成功构建时，我会遇到以下错误：

ERROR [launcher]: Cannot start Chrome
    Can not find the binary google-chrome
    Please set env variable CHROME_BIN

我按照这里所描述的步骤（基本上使用generator-travis-ci）进行操作，并尝试使用这个来修复，但是出现了另一个错误：
/home/travis/build.sh: line 142: ./.travis/scripts/install_chrome.sh: Permission denied

这是一个使用Yeoman创建的标准Angular应用程序 - 理论上应该可以直接运行，但实际情况并非如此...
有没有人成功配置过呢？

---

我使用的软件版本：

user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6

我的Travis任务：https://travis-ci.org/vucalur/editor-yeoman-test

- vucalur

Answer 1

使用此解决方案以在Travis-CI VM中使用预安装的Chromium版本运行它： https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076

.travis.yml

  node_js:
  - "0.10"

script: node_modules/karma/bin/karma start test/karma.conf.js --single-run

before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

karma.conf.js

module.exports = function(config) {
  var configuration = {

    /* ... */

    // start these browsers
    browsers: ['Chrome', 'ChromeCanary'],

    customLaunchers: {
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

    /* ... */

  };

  if(process.env.TRAVIS){
    configuration.browsers = ['Chrome_travis_ci'];
  }

  config.set(configuration);
};

- Jan Paepke

---

这个答案需要提供解决方案和实现步骤，而不是一个指向答案的链接。链接可能会在未来失效。 - Splaktar

看起来由于travis-ci VMs到OpenVZ的更改，此解决方案不再起作用。 - Splaktar

Answer 2

很抱歉告诉你，你只能运行Firefox（因为它已经安装在虚拟机中）和PhantomJS（因为它是便携式和无头的）。

将以下内容添加到您的.travis.yml文件中以启动Firefox：

before_install:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"

那么你只需在配置中将Firefox作为Karma浏览器启用。

文档

- gustavohenke

---

Firefox启动器与Karma的文档：https://github.com/karma-runner/karma-firefox-launcher - ndequeker

Answer 3

基于karma-runner项目的问题(https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076)，您应该在您的.travis.yml中设置CHROME_BIN环境变量，并在您的karma文件配置中配置一个custom Launcher。

例如，您的.travis.yml文件内容应为：

language: node_js
node_js:
    - '0.10'
before_script:
    - 'export CHROME_BIN=chromium-browser'
    - 'export DISPLAY=:99.0'
    - 'sh -e /etc/init.d/xvfb start'
    - 'npm install -g bower karma grunt-cli jshint'
    - 'npm install'
    - 'bower install'

以下是你的karma.conf.js文件内容：

module.exports = function(config) {
    config.set({

        // ... your default content

        // This is the new content for your travis-ci configuration test
        //  Custom launcher for Travis-CI
        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true 
    });

    if(process.env.TRAVIS){
        config.browsers = ['Chrome_travis_ci'];
    }

};

- Wilson Mendes

Answer 4

选项1: APT插件

您可以使用APT插件安装google-chrome-stable软件包，并使用Xvfb无头模式运行它，以便让Travis在Chrome中执行Angular测试。

# Set language
language: node_js

# Set version of node
node_js:
  - node

# Set DISPLAY for Xvfb
env:
  - DISPLAY=:99.0

# Use APT Addon to install Chrome
addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

# Start Xvfb so you can run headless Chrome
before_install:
  - sh -e /etc/init.d/xvfb start

# Install packages
install:
  - npm install

# Run tests in continuous integration mode
script:
  - ng test --single-run

选项2：Chrome扩展程序

或者，如果你的虚拟化环境是Linux Trusty或OS X，你可以在无头模式下使用Chrome扩展程序。

# Use a trusty version of linux
dist: trusty

# Set language
language: node_js

# Set version of node
node_js:
  - node

# Install Chrome addon
addons:
  - chrome: stable

# Install packages
install:
  - npm install

# Run tests in continuous integration mode with headless chrome
script:
  - karma start --single-run  --browsers ChromeHeadless

为了运行端到端测试，请更新 protractor.conf.js 文件以指定无头浏览器 Chrome。

capabilities: {
  browserName: 'chrome',

  chromeOptions: {
     args: [ '--headless', '--disable-gpu' ]
   }
}

- Courtney Pattison