Julien LandurΓ©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. π
- Updates to follow the recommended community standards from the GitHub community profile
- Gitmoji for commit messages where I have contributed in the past π
- All Contributors to thanks everyone who contributes to the project
- Inspiration from readme-md-generator made by my friend Franck Abgrall
- Inspiration from this cheatsheet on "How to promote your open-source project?"
- Renovate for dependency updates
- Many reads on dev.to to know what web developers are doing with Chrome and Puppeteer
π 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-playwrightversion with Playwright to reuse the installed headless Chromium (PR in draft) -
with-denoversion with Deno to create a useful and fun things to do with deno -
with-lighthouseversion 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".
