search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.67k stars 605 forks source link

Interesting diff algorithm to handle layout movements #1085

Open gregorybesson opened 4 years ago

gregorybesson commented 4 years ago

Hello Garris and nice to meet you.

I use heavily backstopJS which is such a cool tool. While reading some issues in your repo, I've stumbled upon this one where you speak about an algorithm you're working on to compare visuals that detect and handles layout movement.

I wonder if you could share the code : I'd like to use it in my tests.

Thanks a lot, Greg

Great -- It would be very cool to integrate this! I personally don't care about resembleOutputOptions -- but we could see if the pixelmatch guys would accept a PR (looks trivial). If we do still keep this functionality, it should be remapped to diffOptions.

Also, I have developed an experimental image diffing algorithm which detects and handles layout movement changes. See below -- Note the change was to add a line of text in the second card. Pixelmatch (second from the right) behaves as you expect. The new diff (last on the right) aims to only flag the changed pixels...

screen shot 2018-08-07 at 9 50 12 am

If you have some interest to also add this after working on pixelmatch integration it would be great. But it's totally optional.

Cheers!

Originally posted by @garris in https://github.com/garris/BackstopJS/issues/850#issuecomment-420440035

gregorybesson commented 4 years ago

So Sorry @garris, you have already published your dev here : https://github.com/garris/diverged

Now it's time to try to integrate it into backstop !

TY Greg

gregorybesson commented 4 years ago

And... https://github.com/garris/BackstopJS/issues/974 ...