Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Image-diff – Create an image differential between two images

github.com

Post reply on HN
Print view View original

11–20 of 27 posts

Re: Image-diff – Create an image differential between two images

#11

Post by deckar01 »

adzicg wrote: post #10
prydonius wrote: post #5

Earlier quoted context omitted.

BBC News' wraith[1] is a pretty great tool for this, although it doesn't really support a more complex web app flow (e.g. logging in) very well. [1] https://github.com/BBC-News/wraith .

If you need workflows, there's also VisualReview [1] with some basic workflow for approval testing, and Applitools [2], a commercial tool with integration with Selenium, Appium and Protractor that can do screenshot and video comparisons. I wrote about them as part of the 'Automated testing: back to the future' tools review [3]. In the article, I also mentioned DomReactor, but that seems to be discontinued now. [1] ht…

I have been researching visual review processes for a project[0] and never ran across VisualReview. I have mainly focused on the screenshot diffing algorithm, but planned on creating a nice notification/approval UX. It might be time for a little collaboration.

[0] https://github.com/deckar01/narcis

Re: Image-diff – Create an image differential between two images

#13

Post by 0xmohit »

Not sure what was the intent behind creating this.

Once upon a time (several years back), I worked on one. The intent therein was two compare images produced by different versions of a product. As such, one of the major features was motion detection [0] (apart from computing deltas between the images). We made use of OpenCV [1].

[0] https://en.wikipedia.org/wiki/Motion_detection

[1] https://en.wikipedia.org/wiki/OpenCV

Re: Image-diff – Create an image differential between two images

#14

Post by davidjnelson »

adzicg wrote: post #10
prydonius wrote: post #5

Earlier quoted context omitted.

BBC News' wraith[1] is a pretty great tool for this, although it doesn't really support a more complex web app flow (e.g. logging in) very well. [1] https://github.com/BBC-News/wraith .

If you need workflows, there's also VisualReview [1] with some basic workflow for approval testing, and Applitools [2], a commercial tool with integration with Selenium, Appium and Protractor that can do screenshot and video comparisons. I wrote about them as part of the 'Automated testing: back to the future' tools review [3]. In the article, I also mentioned DomReactor, but that seems to be discontinued now. [1] ht…

I wrote a tool that compares images using Applitools for Automattic during the React Wordpress admin rewrite a while back. The idea is you'd have a style guide with examples of all your ui components and render and compare them in various states with various test data. https://github.com/davidjnelson/css-visual-test

Re: Image-diff – Create an image differential between two images

#15

Post by ComodoHacker »

f- wrote: post #2

Not sure I follow - especially if it already depends on IM, how is it different from 'convert -compose difference' or a similar operator? http://www.imagemagick.org/Usage/compose/#difference

ImageMagick is not so cool without a bit of JS.

Re: Image-diff – Create an image differential between two images

#16

Post by philjohn »

chris_va wrote: post #3

This sort of thing + headless browser makes for nice regression testing.

Yep, I used to work somewhere that offered a multi-tenant SaaS app that customers could style themselves. We needed to make sure changes we made for a new release wouldn't cause issues with their custom styles. Threw together something that use IM and WebDriver to capture images and compare them.

Re: Image-diff – Create an image differential between two images

#17

Post by liviu- »

dahart wrote: post #9

This is cool, and a good idea. I will try it out, but I can highly recommend the existing pdiff utility for your image regression testing. http://pdiff.sourceforge.net Pdiff allows you to specify perceptual thresholds of visibility, so diffs that are not pixel perfect can still pass if they're 'good enough'. Semi-critical if you render the input images using different browsers or at different resolutions, or if your…

>It doesn't depend on ImageMagick (a bonus in my book)

Why is it a bonus besides lowering the number of dependencies?

Re: Image-diff – Create an image differential between two images

#19

Post by SlashmanX »

spatulan wrote: post #18

Or you can import the two images into graphics software like gimp. Invert the colours in the top image, then knock transparency for that layer down to 50%. If the images are identical, you'll just see grey. Any differences will instantly become visible.

Now automate it for 200 screenshots

Re: Image-diff – Create an image differential between two images

#20

Post by yyhhsj0521 »

SlashmanX wrote: post #19
spatulan wrote: post #18

Or you can import the two images into graphics software like gimp. Invert the colours in the top image, then knock transparency for that layer down to 50%. If the images are identical, you'll just see grey. Any differences will instantly become visible.

Now automate it for 200 screenshots

If this is indeed the underlying algorithm it should not be hard to implement
Post reply on HN