DEV Community

Julien Landurรฉ for Zenika

Posted on • Updated on

Crafting the perfect container to play with a Headless Chrome

Since July 30th 2017, I have been contributing to a side project: the idea from the beginning was the ability to use Chrome to make some tests in headless mode and avoid a long queue of CI builds using a tiny Docker image.

๐Ÿค” Why use a Headless Chrome

In the world of webdev, the ability to run quickly end-to-end tests are important. Popular technologies like Puppeteer enable developers to make fun things like testing, automating forms, crawling, generating screenshots, capturing timeline... And there is a secret: some of these features are directly available on Chrome! ๐Ÿ™Œ

For more information on why headless mode is a cool feature, please read a good example on what you can achieve here:

๐Ÿ’ก Crafting the perfect container

With 28 contributors, I have been working on this project to create the perfect image to run Chromium in Headless mode:

  • ๐Ÿ“ฆ Tiniest Headless Chrome (393 MB)
  • ๐Ÿณ Easy to use, ephemeral and reproducible Headless Chrome with Docker
  • ๐Ÿ“ Doc-friendly with examples for printing the DOM, generating an image with a mobile ratio or generating a PDF.
  • ๐Ÿ‘ทโ€โ™‚๏ธ Autobuild with the Docker Hub to sync the project and ship the images with confidence
  • ๐Ÿ“Œ Up-to-date with Chromium 81 (81.0.4044.138) and tags available to test different versions of Chromium
  • ๐Ÿ” Secure with the best way to use Chrome and Docker - See "3 ways to securely use Chrome Headless" section
  • ๐ŸŒ Ready for internationalisation use: support for asian characters - See "screenshot-asia.js" file
  • ๐Ÿ’„ Ready for design use: support for WebGL - See "How to use with WebGL" section
  • ๐Ÿ“„ Open Source with an Apache2 licence
  • ๐Ÿ‘ฅ Community-built with 28 contributors - See "โœจ Contributors" section
  • ๐Ÿ’š Dev-friendly with examples using NodeJS, Puppeteer, docker-compose and also a test with a X11 display - See "Run examples" section

๐Ÿ’š Open Source & Fun

Some open source & fun projects have been set up and used for this open source side project. I want to share it with you: it adds value and confidence to maintain a GitHub repository. ๐Ÿ‘Œ

๐Ÿš€ Reaching a point

Here is the most interesting insight for a tool: to be used and useful! In almost two weeks, this image will be pulled on the Docker Hub...

๐ŸŽ‰ a million times! ๐ŸŽ‰

there is currently ~922k downloads and it grows ~6k by day
On GitHub, the repository gets ~3000 views, ~1000 unique visitors every two weeks and ~464 stars.

After 3 years maintaining it, I cannot thank everyone using this container. This is the first time a side project has become so popular.

๐Ÿ—“ The Future

โœจ Here is some features in the roadmap:

  • with-playwright version with Playwright to reuse the installed headless Chromium (PR in draft)
  • with-deno version with Deno to create a useful and fun things to do with deno
  • with-lighthouse version with Lighthouse to be able to monitor your website performance in CI builds
  • Create a dedicated homepage and documentation website: the README.md begins to be complicated to navigate and update
  • Create a gallery with the name of the project or product using this container

๐Ÿ“ฃ Please test this container or play with it!
๐Ÿ’ป If you are interested to help me maintain this image, we are welcome! There is some "Good first issue" labelled issue on the repository.

Disclaimer: these terms in this post are synonyms: "Chrome" vs "Chromium" and "image" vs "container".

Top comments (2)

Collapse
 
jrc86 profile image
Jonas

Hey! Thanks. Awesome work. I'll try it out later today I hope :)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.