How to make travis execute Angular tests on Chrome

Question

I'm working on a sample Angular project generated by yeoman.
I am able to run karma tests locally (I set system variable CHROME_BIN to point to chromium binary, but this could have been done in more elegant way. Just a quick work-around.)

However, when attempting to produce a successful build with travis, I get following error:

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

I've followed the steps described here (basically using generator-travis-ci)
Then tried to fix it with this - got another error:
/home/travis/build.sh: line 142: ./.travis/scripts/install_chrome.sh: Permission denied

It's a standard angular app created with Yeoman - things should work out of the box, whereas reality is different ...
Has anybody successfully configured it?

---

Software versions I've been using:

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

my Travis job: https://travis-ci.org/vucalur/editor-yeoman-test

Answer 1

Option 1: APT Addon

You can make Travis execute Angular tests in Chrome by using the APT Addon to install the google-chrome-stable package and run it headless using Xvfb.

# 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

Option 2: Chrome Addon

Alternatively, if your virtualization environment is Linux Trusty or OS X you can use the Chrome addon in headless mode.

# 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

To run e2e tests, update protractor.conf.js to specify headless chrome.

capabilities: {
  browserName: 'chrome',

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

Answer 2

Use this solution to get it running using the preinstalled Chromium Version in Travis-CI VM: 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);
};

Answer 3

Based in karma-runner project issue (https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076) You should set CHROME_BIN environment variable in your .travis.yml and configure a customLauncher in your karma file configuration.

For example, your .travis.yml file content will be:

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'

And your karma.conf.js content:

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'];
    }

};

Answer 4

I'm afraid to say that you can only run Firefox (because it's already installed in the VM) and PhantomJS (because it's portable and headless).

Add the following into your .travis.yml file to startup Firefox:

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

Then you'll just have to enable Firefox as a Karma browser in your configs.

Documentation