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 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)

jrc86 profile image

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.