nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to configure the CHROME_BIN in pipeline

kumarpr

Hi there,

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

<a href="http://localhost:9876/" target="_blank" rel="noopener nofollow noreferrer">+ 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 ChromeHeadless browser on your platform. Please, set "CHROME_BIN" env variable. 26 02 2019 14:01:53.882:WARN [karma]: No captured browser, open http://localhost:9876/ </a>

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

Accepted answers

Graham Gatus

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

All comments

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

Graham Gatus

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

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

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:

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)
Include `puppeteer` as a dev dependency on your `package.json` file
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_oevqkh

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.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

bitbucket

bitbucket-pipelines

npm

atl-pipelines