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.
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 :)
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 :)
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.
10 comments
[ 4.0 ms ] story [ 34.1 ms ] threadI'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 :)
There are a couple of solutions in this GitHub issue FYI: https://github.com/typicode/husky/issues/108
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