Screenshot pipeline

A screenshot pipeline with Visual Regression Test made with Puppeteer and Jest with Jest Image Snapshot

Key Features • Motivation • How To Use • Credits • License

Key Features

• Everytime you make a push on the repo, the GitHub Action will run a pipeline CI workflow
• This pipeline will take a deploy preview made by Vercel
• It will make a screenshot of this deployed preview website
• If not pass in the visual regression test, generates an artifact with the differences
• If pass, the pipeline will commit the new snapshot and update the image in README.md

Motivation

I know how make a CI/CD integration is important for real-life projects and how is also important a E2E tests. To learn how things like that work, I made this project. This work helped me to understand the concepts of a CI/CD pipeline, using GitHub actions, tests with Jest and Puppeteer.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/evans-costa/screenshot-pipeline.git

# Go into the repository
$ cd screenshot-pipeline

📌 Note:
This project uses a simple create-next-app to demonstrate the use of puppeteer with jest-image-snapshot for visual regression tests. If you like to use for other projects, some changes are necessary.

# Install dependencies
$ npm install

# Run the tests
$ npm run test

When running the tests for the first time, it will generate a first snapshot, which will serve as a base for the following tests

If you deliberately made changes on your page, you might want update the snapshot, to do this, run the following:

# Run the update test
$ npm run test:update

Once you commit your changes, the workflow, perfomed by GitHub Actions, will run the tests.

Credits

This project uses the following open source packages:

• Node.js
• GitHub Actions
• Puppeteer
• Jest powered by
• Jest Image Snapshot with
• Jest-Puppeteer preset

Some useful links and Actions I used in my GitHub Actions pipeline:

• Running Puppeteer on WSL2
• Git Auto Commit Action
• Upload Artifacts
• Await for Vercel deployment Action

License

The MIT License (MIT) 2023 - Evandro Costa. Please have a look at the LICENSE for more details.

---

GitHub @evans-costa  ·  LinkedIn @evandro-souzac