Niffy: Perceptual Diffing to Catch Invisible Bugs | Hacker News Reader

Niffy: Perceptual Diffing to Catch Invisible Bugs

segment.com

84 pointsjack_hanford21 comments

Here's a poor-man's perceptual diff: Cross your eyes.

I'm serious. Try opening this image: https://assets.contents.io/asset_rIfFTtwp.png

You see two images side by side. Now slowly cross your eyes, so that the two images merge into three images. Once they align, the new middle image will have information from both your left and right eyes, and your brain's perceptual system will automatically try to reconcile any differences.

You'll see the differences as shimmering portions of the image, that tend to be shifted forward or backward in 3D space. In this example, the text at the bottom is shifted rightward in the right image, which your brain interprets as "closer to the eye". Differences jump out!

You can use this trick any time you want to diff two screens, pieces of text, whatever! You don't need a diff program -- your brain's perceptual system already has one built-in.

This didn't work on my phone. Perhaps the screen is too small.

Didn't work for me on my 34" screen. Perhaps the screen is too big.

It worked for me on my laptop! The screen was juuust right!

Worked fine for me on the phone...

I can attest to this, it's how I've been solving "spot the difference" puzzles for ages. It works great!

So have I - fun trick to play at a bar or wherever they have the (now defunct?) MegaTouch games. Although, when you ran into a dim or out of focus screen (the old ones used a CRT) it didn't always work that well. And you'd also find the bugs in the game where certain images didn't have the differences correctly marked!

I can't believe I've never used this trick on those stupid games! I've known about it for ages (good trick for visually diffing a bunch of hex on screen) but it never occurred to me to use it for those silly, silly games.

I can't do that for such large images. I can do it for ones maybe a third of that width.... Do you have any tips for me?

Zoom out?

Simpler, perhaps, is to print the two images (or documents, or whatever), each one on a separate piece of paper. Put the two pieces of paper on top of each other, hold them up to the or a bright light, and look at them. The differences should be easily discernable.

A colleague of mine used to do this, great little hack.

This "crossing eyes" thing is something I could never pull off. How do you learn how to do it?

You could try to bring your finger close to your nose and focus on it, then abruptly move your finger down out of your field of view. Your eyes are now crossed.

Put a single finger up a foot in front of your face and focus on it. Bring it slowly right up to your nose and keep focus on it, and your eyes will cross.

I think practicing this is how I learned to do it on demand as a kid.

I like to quickly flip between overlaid images, so I can notice movement where things are different.

Slightly off but you can also use this technique to perceive 2D images as 3D[1]. Just google "cross eyed 3d"

[1] - https://i0.wp.com/digital-photography-school.com/wp-content/...

We are using Percy [1] for this and are extremely happy with this. Almost zero effort to set up, just some time to get random data out of our tests to have stable visual output.

[1]: https://percy.io

Site does not work on my Android browser. Shows up but when I touch everything, the page goes white except for the top menu.

It's amazing when a GUI program is repeatable enough that works.

I think this class of app really depends on a good workflow for updating the expected results so people don't fall out of the habit of testing because most of the changes are intentional.

use screen coordinates for clicks as that also simulate user muscle memory.

Reply on news.ycombinator.com