6 ms·

An image diff is worth a thousand words

67 points by tylernappy 9y ago

nicolashahn 9y ago
Shameless plug, but another (simpler, almost trivial) option for the actual image diffing part in python using PIL I made when doing a similar task for a past company: https://github.com/nicolashahn/python-image-diff https://github.com/nicolashahn/python-image-diff
rui8 9y ago
Interesting post. While not exactly the same, but test scripts made with Sikuli and Kantu work well for us to check for unwanted UI changes.
- jasonmoo 9y ago
  I've always wanted to do more with Sikuli. I could see it working well for this.
egypturnash 9y ago
I know the main thrust of the post is building a complex visual test harness, but: .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } > In both my application code and my unit test, I’ve mistakenly written .ellipses. Unfortunately, all the unit tests pass. I kinda feel like a graceful way to handle this particular error is to acknowledge that "ellipsis" is a word that is super easy to misspell, and either declare this class to apply to both the proper word and the misspelling that's going to constantly get scattered throughout the codebase, or to pick another name entirely such as ".truncated" or, I dunno, ".elided" maybe? Naming stuff is hard.
- wodenokoto 9y ago
  Shouldn't the unit test highlight unused css properties, as well as elements linked to non-existent css properties? I feel like such a mistake ought to be caught by a unit test.
robbiemitchell 9y ago
Great to see more examples of image diffing. Segment recently wrote a post about their process, too: https://segment.com/blog/perceptual-diffing-with-niffy/ https://segment.com/blog/perceptual-diffing-with-niffy/
unabst 9y ago
To be perfectly honest, I find nothing "excellent" about the right image at the beginning of the article. Clearly there is room for two lines there. The "excellent" image would be the left image centered properly. It would be legible and without secrecy. If I didn't want to read all of it I wouldn't. But a "..." gives me no choice, nor any further information. This trend to increase font size was suppose to be for better legibility and simplicity. But instead, we are truncating text where it would naturally fit fine. We are hiding valuable information where conveying information is the only function of that space. The worst example of this is Google Drive. In grid view, only up to 15 characters of a file name are displayed. That means I cannot prefix anything. "2017-06-10 something" is already "2017-06-10 some..". Photos taken with an Android phone have names too long to fit. This in a space that could easily fit two lines, that has excessive padding and a tiny icon surrounded by an invisible circle that is then excessively padded on top of that. Why not move that icon to the top left corner of the file preview? And hide it when the file preview is just a huge version of that same icon? The fact that such redundancy is not made an issue already shows a lack of interest in maximizing interface space. A name is guaranteed to be meaningful, and we use names to help sort and organize our files. Same with titles, and same with captions of things. And the bottom line is, you're not being more concise when you truncate things! There is only one way to do that, and it's by changing our words.
- DiThi 9y ago
  I thought it was a joke showing "the home of the Colossal D".
- gcb0 9y ago
  bad designers: to whom text alignment is more important than what the text communicates.
haburka 9y ago
This is so awesome! I bet it wouldn't be too difficult to test many browsers and resolutions this way! I love the image diff idea to produce results that are very easy to check for accuracy. Of course the setup work seems pretty miserable. I don't think I'll be implementing this ever but it's certainly a great task for an intern.
hyuuu 9y ago
I would like to point out a library that does this that is an npm/yarn install away: https://github.com/gemini-testing/gemini https://github.com/gemini-testing/gemini it's quite full featured for my needs and it's backed by Yandex
Flenser 9y ago
The image-diff library the article uses[0] depends on ImageMagick. If you want a library that does it entirely in JS there is js-imagediff[1] which is used by the excellent CSSCritic[1] to do visual regression testing entirely in the browser. [0] https://github.com/uber-archive/image-diff https://github.com/uber-archive/image-diff [1] https://github.com/HumbleSoftware/js-imagediff https://github.com/HumbleSoftware/js-imagediff [2] https://github.com/cburgmer/csscritic https://github.com/cburgmer/csscritic
deedubaya 9y ago
Haven't used it yet, but https://percy.io/ https://percy.io/ does this for you. They offer a startup discount.

67 points by tylernappy 9y ago

Shameless plug, but another (simpler, almost trivial) option for the actual image diffing part in python using PIL I made when doing a similar task for a past company: https://github.com/nicolashahn/python-image-diff https://github.com/nicolashahn/python-image-diff

rui8 9y ago

Interesting post. While not exactly the same, but test scripts made with Sikuli and Kantu work well for us to check for unwanted UI changes.

jasonmoo 9y ago
I've always wanted to do more with Sikuli. I could see it working well for this.

egypturnash 9y ago

I know the main thrust of the post is building a complex visual test harness, but: .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } > In both my application code and my unit test, I’ve mistakenly written .ellipses. Unfortunately, all the unit tests pass. I kinda feel like a graceful way to handle this particular error is to acknowledge that "ellipsis" is a word that is super easy to misspell, and either declare this class to apply to both the proper word and the misspelling that's going to constantly get scattered throughout the codebase, or to pick another name entirely such as ".truncated" or, I dunno, ".elided" maybe? Naming stuff is hard.

wodenokoto 9y ago
Shouldn't the unit test highlight unused css properties, as well as elements linked to non-existent css properties? I feel like such a mistake ought to be caught by a unit test.

robbiemitchell 9y ago

Great to see more examples of image diffing. Segment recently wrote a post about their process, too: https://segment.com/blog/perceptual-diffing-with-niffy/ https://segment.com/blog/perceptual-diffing-with-niffy/

unabst 9y ago

To be perfectly honest, I find nothing "excellent" about the right image at the beginning of the article. Clearly there is room for two lines there. The "excellent" image would be the left image centered properly. It would be legible and without secrecy. If I didn't want to read all of it I wouldn't. But a "..." gives me no choice, nor any further information. This trend to increase font size was suppose to be for better legibility and simplicity. But instead, we are truncating text where it would naturally fit fine. We are hiding valuable information where conveying information is the only function of that space. The worst example of this is Google Drive. In grid view, only up to 15 characters of a file name are displayed. That means I cannot prefix anything. "2017-06-10 something" is already "2017-06-10 some..". Photos taken with an Android phone have names too long to fit. This in a space that could easily fit two lines, that has excessive padding and a tiny icon surrounded by an invisible circle that is then excessively padded on top of that. Why not move that icon to the top left corner of the file preview? And hide it when the file preview is just a huge version of that same icon? The fact that such redundancy is not made an issue already shows a lack of interest in maximizing interface space. A name is guaranteed to be meaningful, and we use names to help sort and organize our files. Same with titles, and same with captions of things. And the bottom line is, you're not being more concise when you truncate things! There is only one way to do that, and it's by changing our words.

DiThi 9y ago
I thought it was a joke showing "the home of the Colossal D".
gcb0 9y ago
bad designers: to whom text alignment is more important than what the text communicates.

haburka 9y ago

This is so awesome! I bet it wouldn't be too difficult to test many browsers and resolutions this way! I love the image diff idea to produce results that are very easy to check for accuracy. Of course the setup work seems pretty miserable. I don't think I'll be implementing this ever but it's certainly a great task for an intern.

hyuuu 9y ago

I would like to point out a library that does this that is an npm/yarn install away: https://github.com/gemini-testing/gemini https://github.com/gemini-testing/gemini it's quite full featured for my needs and it's backed by Yandex

Flenser 9y ago

The image-diff library the article uses[0] depends on ImageMagick. If you want a library that does it entirely in JS there is js-imagediff[1] which is used by the excellent CSSCritic[1] to do visual regression testing entirely in the browser. [0] https://github.com/uber-archive/image-diff https://github.com/uber-archive/image-diff [1] https://github.com/HumbleSoftware/js-imagediff https://github.com/HumbleSoftware/js-imagediff [2] https://github.com/cburgmer/csscritic https://github.com/cburgmer/csscritic

deedubaya 9y ago

Haven't used it yet, but https://percy.io/ https://percy.io/ does this for you. They offer a startup discount.