Build a screenshot pipeline

Set up a CI/CD workflow which will produce a screenshot of your homepage and keep it updated as you keep changing the code. This kind of always-up-to-date screenshot can be useful for your README or as the basis of marketing materials that include screenshots of your website. You can even use these images to perform visual regression testing!

• Create a webpage with any technology you want (a simple create-*-app can suffice) or use a webpage you already have or an open source project you can easily fork
• Create a script that takes a screenshot of the webpage.
• Set up a trigger to take a new screenshot every time you commit to the main branch of the repo
• Note that the screenshot should be taken by code running in the CI/CD environment, not on your own machine; you want the screenshot to look just like production
• Include that screenshot in your README to show off.
• From now on, your README should always display an up-to-date screenshot of your webpage without any other manual intervention other than pushing to the main branch

For an extra challenge

• Use the same system to implement visual regression testing on that screenshot.
• Perform some image manipulation on the screenshot before inserting it in the README. A good example is collaging the screenshot on an image of a laptop to simulate viewing the webpage on a physical device.

This challenge is technology-agnostic. However, one particularly easy stack to do this with would be to have:

• a React.js website
• hosted on GitHub
• with a Node.js test suite
• facilitated by Jest
• which performs screenshotting, and optionally snapshotting and visual regression testing, thanks to jest-image-snapshot
• when triggered by git push, which can be easily set up with GitHub Actions

You have a lot of options at every level here, you will need:
A repo

• GitHub
• GitLab
• BitBucket

A CI/CD system

• Buddy
• GitHub Actions

A Screenshotting library or tool

• jest-image-snapshot
• jsdom-screenshot
• Selenium
• PhantomJS
• Puppeteer
• CasperJS
• Playwright

• Automated visual regression testing with Jest
• Getting started with Buddy

Project was created by: