How do you automatize tests that need visual confirmation?

protium - Jan 7 '19 - - Dev Community

Imagine the following scenario: you have a mockup or a definition about how should look some user interface (in a web application). The definition says: the user name must be centered in big screens and placed 10% from the left side when it is displayed in a small screens. It also has definitions for font size and other stuff.

I know this could be achieved with tools like puppeteer and DOM manipulation to get the CSS and comparing values but what if I want to automatize this kind of tasks giving an image to a magical tool and tell it "this user interface should look like this image"?

I know there are already some tools that can convert images into HTML, but does some magic tool exist that can actually determine if a user interface looks like a mockup? Would it improve the timings for tests that needs visual confirmation having in mind the time that could be needed to write such tests?

I'm eager to read your thoughts.

. . . . . . . . . . . . . . . . . . . . . . . . . . . .