Setting Up Visual Regression Tests
#
InstallationPaperclip integrates with Percy to allow you test for CSS bugs in your Paperclip UI files. To get started, install the NPM module:
Next, grab your percy token, then run the following command in the same directory as your paperclip.config.json
file:
After that, you should see something like this:
#
Setting up with GitHub actionspercy-paperclip
pairs nicely with GitHub actions, especially for PR checks. Here's a GitHub action you can use:
Be sure to change
working-directory
to point to where yourpaperclip.config.json
file is.
☝🏻 This script will run only when PC files change, so if you're working with people working on the back-end, for instance, they won't get this check (since we're assuming they won't touch PC files).
To go along with the script above, you'll need to set up a baseline for your master branch. Here's a script for that:
Again, be sure to change
working-directory
to point to where yourpaperclip.config.json
file is.
☝🏻 This script runs whenever a *.pc
file changes on master, and ensures that subsequent PRs are visually testing against the correct baseline.