62129

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:

<blockquote>

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

</blockquote>

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

Answer1:

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

<h3>My test setup:</h3>

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'); }); }); }); <h3>Pipeline file:</h3> image: circleci/node:8.12.0-browsers pipelines: default: - step: caches: - node script: - yarn install - yarn run lint - yarn run test <h3>Result on bitbucket and circleci:</h3>

<a href="https://i.stack.imgur.com/n3NOM.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/n3NOM.png" data-original="https://i.stack.imgur.com/n3NOM.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

<h3>Resources:</h3> <ul><li>Image to use circleci/node:8.12.0-browsers, their <a href="https://github.com/CircleCI-Public/circleci-dockerfiles/blob/master/node/images/8.12.0-jessie/browsers-legacy/Dockerfile" rel="nofollow">Dockerfile</a>.</li> <li>Also tested similar setup with dockerfile provided on <a href="https://stackoverflow.com/a/51683309/6161265" rel="nofollow">this answer</a>.</li> </ul><h3>Notes:</h3> <ul><li>CirclCI took less time to pull the images, almost 1-2 seconds on cache. Only ~13s to do whole run.</li> <li>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.</li> <li>This could be probably because the resources allocated for the free version I used for my tests.</li> </ul>

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:

<img alt="" class="b-lazy" data-src="https://i.imgur.com/EG1w1zg.png" data-original="https://i.imgur.com/EG1w1zg.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Recommend

  • Why is the order of bit fields in the bytes of structs not defined by the language itself?
  • Returning multiple values from a recursive function
  • CRC 16 -DECT with poly x^16 + x^10 + x^8 + x^7 + x^3 + 1
  • Problems uploading App to Apple's App Store using RoboVM
  • Copy content of C variable into a register (GCC)
  • How to Grab SSL Certificate in OpenSSL
  • Why am I getting a “package could not be registered” deployment error on Windows 10 UWP?
  • How to read a certificate from a USB token in C#
  • Azure PDF Sharp not using Unicode font
  • Facebook Like Button doesn't increment
  • Change Font Style (bold, Italic, bold italic) in C# [duplicate]
  • Imagemagick set interline spacing?
  • How do one only submit click event (div), when using jquery live function?
  • SSLRead() return error -9806/15958)
  • What distributed message queues support millions of queues?
  • CSS custom shape button with two colors
  • How to correctly get a WinForms Button control to draw custom text
  • Why does PHP appear to evaluate this condition incorrectly?
  • Enable Bootstrap Intellisense using Angular 4 in WebStorm
  • Messed up characters in webpages (especially social media)
  • Using HTML/CSS for UI in XNA?
  • is it possible to insert a line break in this tooltip?
  • How to discover Font Type?
  • Deleting empty Series out of Graph (with VBA)
  • Opaque reference instead of PImpl. Is it possible?
  • Python getting common name from URL using ssl.getpeercert()
  • Does CSS support inheritance [duplicate]
  • C# Excel interop - how to test if interop object is still working and performing a task?
  • Understanding RTF and edit it with vb.net
  • Why does java tzupdater add leap seconds?
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • How to change the font size of a single index for UISegmentedControl?
  • Highlight and Bold text in JTextPane
  • does jqgrid support a multiple checkbox list for editing
  • Xamarin Forms - UWP Fonts
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • Unanticipated behavior
  • -fvisibility=hidden not passed by compiler for Debug builds