3 ms·

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 han

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.

fwouts 7y ago
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 :)
- azangru 7y ago
  If you use husky (as many front-end developers do for pre-commit hooks), setting it up together with git-lfs might get... adventurous.
  - fwouts 7y ago
    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 https://github.com/typicode/husky/issues/108
warpech 7y ago
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 7y ago
  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 7y ago
    That's great, because I wasn't really sure why am I writing all this. Now I know!

fwouts 7y ago

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

azangru 7y ago
If you use husky (as many front-end developers do for pre-commit hooks), setting it up together with git-lfs might get... adventurous.
- fwouts 7y ago
  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 https://github.com/typicode/husky/issues/108

warpech 7y ago

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 7y ago
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 7y ago
  That's great, because I wasn't really sure why am I writing all this. Now I know!