Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evans-costa/screenshot-pipeline
Keep screenshots of your webpage up-to-date.
https://github.com/evans-costa/screenshot-pipeline
github-actions jest jest-snapshots puppeteer
Last synced: about 2 hours ago
JSON representation
Keep screenshots of your webpage up-to-date.
- Host: GitHub
- URL: https://github.com/evans-costa/screenshot-pipeline
- Owner: evans-costa
- License: mit
- Created: 2023-12-14T18:58:28.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-03T00:29:32.000Z (10 months ago)
- Last Synced: 2024-02-03T01:30:29.780Z (10 months ago)
- Topics: github-actions, jest, jest-snapshots, puppeteer
- Language: CSS
- Homepage: https://screenshot-pipeline.vercel.app
- Size: 1000 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
```bash
# 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.
```bash
# 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:
```bash
# 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](https://nodejs.org/)
- [GitHub Actions](https://docs.github.com/pt/actions)
- [Puppeteer](https://pptr.dev/)
- [Jest](https://jestjs.io/) powered by
- [Jest Image Snapshot](https://github.com/americanexpress/jest-image-snapshot) with
- [Jest-Puppeteer](https://github.com/argos-ci/jest-puppeteer) preset
Some useful links and Actions I used in my GitHub Actions pipeline:
- [Running Puppeteer on WSL2](https://log.rdl.ph/post/running-puppeteer-on-wsl2.html)
- [Git Auto Commit Action](https://github.com/marketplace/actions/git-auto-commit)
- [Upload Artifacts](https://github.com/actions/upload-artifact)
- [Await for Vercel deployment Action](https://github.com/marketplace/actions/await-for-vercel-deployment#examples)
## License
The MIT License (MIT) 2023 - Evandro Costa. Please have a look at the LICENSE for more details.
---
> GitHub [@evans-costa](https://github.com/evans-costa) ·
> LinkedIn [@evandro-souzac](https://www.linkedin.com/in/evandro-souzac/)