Bitbucket Pipelines & non-headless Puppeteer?

Question

I'm trying to run non-headless puppeteer for testing a chrome extension in pipelines.

When I google the topic I find quite a few people who are able to get headless puppeteer to work on pipelines but for some reason I am unable to get it to work with non-headless.

The Puppeteer troubleshooting docs say it is possible for TravisCI so it should be possible for pipelines too no?

I have tried lots of different docker images but none of them seem to work. This is my current setup:

image: node:9

pipelines:
  branches:
    staging:
      - step:
        script:
          - node -v
          - yarn -v
          - yarn install
          - apt update && apt install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
          - apt-get install -y xvfb
          - export DISPLAY=:99.0
          - Xvfb :99 -ac &
          - yarn start build.staging
          - yarn start test.unit
          - yarn start test.e2e.staging

When I attempt this:

export const loadBrowser = async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
    `--disable-extensions-except=${absDistPath}`,
    `--load-extension=${absDistPath}`,
    "--user-agent=PuppeteerAgent",
    "--no-sandbox",
    "--disable-setuid-sandbox"
  ]
});

The error I get is:

TimeoutError: Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r594312

Has anyone managed to get non-headless Puppeteer actually working on Bitbucket Pipelines?

Answer 1

The folks at circlci built a good docker image that helps with headless puppeteer. I used that to test both circlCI and bitbucket pipeline.

My test setup:

A very simple mocha/chai test file, I did not configure any puppeteer arguments for circlCI and bitbucket pipeline test.

// index.js
module.exports = {
  async getLocation(page) {
    return page.evaluate(() => window.location.href);
  },
};

// test.js
const { expect, assert } = require('chai');
const puppeteer = require('puppeteer');
const example = require('./index');

describe('Puppeteer', () => {
  before(async function () {
    this.browser = await puppeteer.launch();
    this.page = await this.browser.newPage();
  });

  after(async function () {
    await this.browser.close();
    process.exit(0);
  });

  describe('Startup', () => {
    it('should start', async function () {
      assert.equal('object', typeof this.browser);
    });
  });

  describe('In Browser', () => {
    it('url should be blank', async function () {
      const url = await example.getLocation(this.page);
      expect(url).to.include('about:blank');
    });

    it('url should have example.com', async function () {
      await this.page.goto('http://example.com');
      const url = await example.getLocation(this.page);
      expect(url).to.include('example.com');
    });
  });
});

Pipeline file:

image: circleci/node:8.12.0-browsers

pipelines:
  default:
    - step:
        caches:
          - node
        script: 
          - yarn install
          - yarn run lint
          - yarn run test

Result on bitbucket and circleci:

Resources:

• Image to use circleci/node:8.12.0-browsers, their Dockerfile.
• Also tested similar setup with dockerfile provided on this answer.

Notes:

• CirclCI took less time to pull the images, almost 1-2 seconds on cache. Only ~13s to do whole run.
• Bitbucket took more time to pull the images, first pull took 2 minutes, next time took 10~30 seconds on cache. Total ~45 second to do whole run.
• This could be probably because the resources allocated for the free version I used for my tests.

Headful mode

Fortunately Xvfb is provided on the both dockerfile I mentioned above. You just need to use them. The code also must have sandbox arguments for this to work.

Add the arguments:

this.browser = await puppeteer.launch({
      headless: false,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
      ],
})

Replace the test line with following,

xvfb-run -a --server-args="-screen 0 1024x768x24" yarn run test

Result: