How to configure the CHROME_BIN in pipeline

[kumarpr]

Hi there,

I am getting the below pipeline error while using ChromeHeadless browser.

+ npm run test
> my-project@1.0.0 test /opt/atlassian/pipelines/agent/build
> ng test
26 02 2019 14:01:36.700:WARN [karma]: No captured browser, open http://localhost:9876/
26 02 2019 14:01:36.711:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
26 02 2019 14:01:36.712:INFO [launcher]: Launching browser ChromeHeadlessNoSandbox with unlimited concurrency
26 02 2019 14:01:36.719:INFO [launcher]: Starting browser ChromeHeadless
26 02 2019 14:01:36.720:ERROR [launcher]: No binary for Chrom...




karma.conf.js

autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--user-data-dir=/tmp/chrome-test',
'--disable-web-security'
]
}
},
singleRun: false

[Graham Gatus · Accepted solution]

@kumarpr I've put together an example repository demonstrating Puppeteer with Chromium in pipelines - https://bitbucket.org/bitbucketpipelines/example-chromium-headless-puppeteer/src/master/. In your case, it looks like there were additional dependencies that need edto be installed into the node:8.9.4 image in order to have Puppeteer be able to launch a Chromium browser instance.

In the linked example, the bitbucket-pipelines.yml file installs these required dependencies, then uses Puppeteer to start a Chromium instance and take a screenshot, saving it as a build artifact.

[kumarpr]

Hi Graham,

Thanks for your help. It's working fine now.

Thanks a lots.

[colbyredpointe]

Trying to use the example script in your repository does not work for me. 

I get: 

E: Unable to locate package libgconf-2-4

E: Unable to locate package update

[Gonzalo Rubio]

Hey @kumarpr  I just ended up here as I was having the same problem.

Using @Graham Gatus  pipeline as inspiration and after some research I discovered that puppeteer node package installs a bundled chromium binary, so installing chromium again seems a bit redundant.

Instead, try to:

1. Install some OS package dependencies (libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev libasound2)
2. Include `puppeteer` as a dev dependency on your `package.json` file
3. Let npm know where this chrome bundled version is through the`CHROME_BIN` environment variable

Here's how my solution looks like:

```

image: node:10.16.3

pipelines:
  default:
    - step:
      name: Install dependencies and test the app
      caches:
        - node
      script:
        - apt update && apt install -yq libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev libasound2
        - npm ci
        - export CHROME_BIN="./node_modules/puppeteer/.local-chromium/linux-884014/chrome-linux/chrome"
        - npm run testci

```

Where testci is the following custom command:

```

node node_modules/@angular/cli/bin/ng test --no-progress --no-watch --reporters junit --browsers ChromeHeadlessCI

```

PS: @PhilippHabele  see if this solves your issue too :)

Hope this help someone!

Cheers!

[Daniel]

How do you know which binary version to use in CI environment? I installed the puppeteer package locally and since my computer is a Mac, it has the Mac binary.

[Gonzalo Rubio]

I guess I don't have a straight answer to that @Daniel . See which version are you using locally and if every release is done for every platform. In that case, whatever your local Mac environment is using should work for the base image of the CI container/pipeline.

[PhilippHabele]

Hi,

I also have the same issue.

Currently I made a new Angular application and try to setup the default pipeline.

karma.conf.js

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/frontenddevnet'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});

bitbucket-pipelines.yml

image: node

pipelines:
default:
- step:
name: Lint and Test
caches:
- node
script:
- npm install
- npm run lint
- npm run test

error
21 08 2019 10:58:42.349:WARN [karma]: No captured browser, open http://localhost:9876/
21 08 2019 10:58:42.399:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
21 08 2019 10:58:42.399:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
21 08 2019 10:58:42.408:INFO [launcher]: Starting browser Chrome
21 08 2019 10:58:42.409:ERROR [launcher]: No binary for Chrome browser on your platform.
Please, set "CHROME_BIN" env variable.
21 08 2019 10:58:47.381:WARN [karma]: No captured browser, open http://localhost:9876/

how to configure the Chrome browser? Any ideas?

Kind regards,

Phil

[Graham Gatus]

@kumarpr , are you able to provide your bitbucket-pipelines.yml file?

Based on the error, it sounds like you may need to install chromium browser first.

You can test this by running `which chromium-browser` in your pipeline, which should give the location of chromium.

If chromium is not present, for an Ubuntu based build image (e.g when using the default pipelines image), you can install this via:

```

apt-get update && apt-get install -y chromium-browser

```

[kumarpr]

Hi Graham,

Thanks for your reply.

bitbucket-pipelines.yml

image: node:8.9.4
options:
max-time: 20
pipelines:
default:
- step:
name: Build and test
caches:
- node
script:
- npm install
- npm run lint
- npm run test
- npm run build

I have treid to install the puppeteer as well to use the ChromeHeadless

image: node:8.9.4
options:
max-time: 20
pipelines:
default:
- step:
name: Build and test
caches:
- node
script:
- npm install
- npm install -D puppeteer
- npm run lint
- npm run test
- npm run build