search

winnipegpolicecauseharm / wpch-ghost-theme

MIT License
3 stars 0 forks source link

Add visual diffs with Percy #46

Closed backspace closed 3 years ago

backspace commented 3 years ago

This adds a job to the preview workflow to generate Percy visual diffs from the preview deployment so it’s easier to see what effects CSS changes have.

I sent you an invitation to the WPCH team on BrowserStack, @FarfamaH, hopefully it worked? Things seem a bit weird since Percy was acquired by BrowserStack. It may turn out that the acquisition ruins Percy but I think the general idea of visual diffs is helpful regardless, it can catch unintentional regressions, ease review, and facilitate CSS refactoring.

I added an arbitrary donate link colour change in a1995b5 so you could see an example Percy build for a CSS change; tapping the diff shows it both as having the change highlighted in red (ironically) and as it is:

image

image

I only added snapshots of the homepage, a blog post, and a page, but it’s easy enough to add other pages if you think it would be helpful? It’s configured to take snapshots at two different viewport sizes (meant to be desktop and mobile) with both Chrome and Firefox which may be overkill, we can revisit if we end up using too many per month, as the free account is limited.

farfamahar commented 3 years ago

That's super neat. Awesome addition 👍