
Show HN: React Screenshot Test - fwouts
https://github.com/fwouts/react-screenshot-test
======
johnsonjo
This is really cool. I have been using Cypress recently for doing e2e tests.
Cypress also takes screen shots and videos as the tests run which could come
in handy if I ran it headless more often. It’s nice that you thought about
cross platform image storage and the docker solution seems like a good fit for
it. I also haven’t thought about committing images to git to watch for changes
in the design. That seems like a great idea! At the same time I just don’t
know enough about git large file storage at the moment.

~~~
warpech
I use Cypress with this plugin: [https://github.com/palmerhq/cypress-image-
snapshot](https://github.com/palmerhq/cypress-image-snapshot)

In my setup, it creates the PNG snapshots and compares them to the snapshots
stored in Git at each test run. In result, I get the number of different
pixels and the test fails if the nunmber is higher than 0. It also produces a
visual PNG diff file, that has 3 panes: expected, actual, diff heatmap. The
setup took just few hours.

However there are some screen resolution limitations in Cypress right now. I
could not get it to work in resolution higher than 1200x1024. More about that
problem: [https://github.com/cypress-
io/cypress/issues/2102](https://github.com/cypress-io/cypress/issues/2102)

~~~
ivanfon
Thank you so much. We use cypress-image-snapshot at work and I've been running
into this problem for two days. I thought it was a problem with the plugin,
not Cypress itself. What a coincidence that I came across this in an HN
comment :)

~~~
warpech
That's great, because I wasn't really sure why am I writing all this. Now I
know!

------
chadlavi
Pretty neat, but then you end up with a ton of PNGs checked into your scm
right?

~~~
fwouts
Indeed, that's why you'd want to use a solution like Git LFS to avoid bloating
your repo. Basically, it only stores a link to the image, which is stored
separately.

------
abcpassword
Storybook and Loki is a simpler setup. And far more useful

