Show HN: React Screenshot Test | Hacker News Reader

Show HN: React Screenshot Test

github.com

46 pointsfwouts10 comments

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.

Thanks!

I'd encourage you to try Git LFS, it's a very simple extension to Git. It only takes a couple of minutes to set up if you use GitHub, and I suspect other platforms are similar :)

If you use husky (as many front-end developers do for pre-commit hooks), setting it up together with git-lfs might get... adventurous.

That's interesting, I didn't know about this issue.

There are a couple of solutions in this GitHub issue FYI: https://github.com/typicode/husky/issues/108

I use Cypress with this plugin: 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

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 :)

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

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

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.

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

Reply on news.ycombinator.com