Managing Screenshots
ViteShot helps you generate screenshots, but that's not the entire story. To achieve visual testing, you need a way to store screenshots and easily compare them across commits.
You can choose between several approaches:
- storing screenshots in Git (or Git LFS)
- uploading them to S3 and comparing them with reg-suit
- using a third-party such as Percy
#
Option 1: Storing screenshots in GitThe simplest approach is to store screenshots in Git.
We recommend using Git LFS to store screenshots. This will help prevent your Git repository from becoming bloated over time, as each updated screenshot would otherwise increase the repository's size.
If you're unfamiliar with Git LFS, you can learn about it with this short video (2 min) and/or by going through the official tutorial.
To set up Git LFS, install the Git extension and add the following to .gitattributes
in your repository (source):
**/__screenshots__/*.* binary**/__screenshots__/*.* filter=lfs diff=lfs merge=lfs -text
#
Reviewing screenshotsWhen you store screenshots in Git, updated screenshots will appear alongside updated code in your usual pull request review interface.
#
Screenshot consistencyTo ensure that screenshots are always identical, it's recommended that you generate screenshots on CI.
You can run viteshot -p
to automatically push new commits that update screenshots once they've been updated. This will fail on main
and master
branches.
This command works out of the box with GitHub Actions, however you may need to set up Git credentials on other CI platforms.
#
Option 2: Storing screenshots in S3If you prefer to store screenshots independently from your Git repository, one of the best options is reg-suit
. Once configured, it will automatically upload generated screenshots to your own S3 bucket.
reg-suit also includes GitHub and GitLab plugins that will automatically add a comment on each pull request, pointing out any updated screenshots.
#
Option 3: Using PercyWhen you use Percy, your screenshots are generated and stored in the cloud. You also get a separate screenshot review and approval interface, which is particularly convenient when working in large teams.
If you'd like to use Percy, please refer to the browsers and viewports documentation.
screendiff
platform#
Option 4: Upcoming The author of viteshot
is designing a screenshot upload and comparison platform that gives you simplicity and peace of mind at an affordable cost.
If you'd like to participate in early trials, please get in touch at screendiff@zenc.io.