Are there solutions for any kind of pixel perfect automation?

Question

Layout

Good day.
Recently, while fiddling with one of the pixel perfect browser plugins and shifting the image pixel by pixel, I thought it would be great to have a tool that would do some of this on its own. For example, I would compare the fed screenshot of the layout and the rendered layout, and at the output would give a list of classes that differ from the image in this place (i.e., logo - shifted 3 pixels to the right and 1 pixel down). And the developer would only have to make the indicated changes, and run the script again until there is 100% accuracy. And so that the script does not react to the text, you can specify a list of classes \ tags that will not be considered.
This could be provided, for example, by a plugin for Phantom JS.
Does anyone know similar, or any solution on the topic?

Answer 1

2gis.github.io/makeup

Answer 2

I made a fairly simple solution:
- I threw the layout page in PS, reduced the layers, inverted and made the transparency 50%.
- Converted the result to PNG with alpha transparency.
- I hung two buttons on the page, with JS logic that displays an inverted source image over the layout (and, when necessary, a non-inverted source image with the same 50% transparency).

Answer 3

https://www.youtube.com/watch?v=68_U3eUDtxY