Imagine the following scenario: you have a mockup or a definition about how should look some user interface (in a web application). The definition ...
For further actions, you may consider blocking this person and/or reporting abuse
How about image diffs? It's like snapshots. If none exists, a snapshot / screenshot is created. If one exists you make a snapshot / screenshot and then compare those images using a image diffing library.
But we all know, a image of a mock-up will never look like the HTML version. There will.be always slight differences.
In a previous job we used an image differ which let you set a tolerance. So it would allow a few differences before failing. Im sure some googling would be able to find it for the language of OP's choice.
My only concern with this sort of thing is, how important is it that the web page looks like the mockup really ?
You can spend a lot of time chasing this sort of thing but does the user really care if a button is aligned differently to a mockup? As I said we used it, but only as a last sanity check to make sure we hadn't totally ruined the UI.
As Chris James mentioned, it should be a tool where you set a tolerance. It's not needed that the UI look exactly like the mock-up, it's needed determine if it follows the design on the mock-up.
My question was triggered because there are many tasks in the frontend area that needs visual confirmation. I mean, someone needs to look at the frontend and tell whether if a text was placed correctly or not. How could we automatize and remove the need of visual confirmation? would it worth the time spent writing the test? Instead of an image it could be a definition file, any approach that could help to automatize and improve timings for integration and merge of a pull request for this kind of tasks.
Yup, image diff tools like Percy are a great option!
This really isn't an answer per se but, I don't really think visuals can be automated (at least at this point of time) in an effective manner. The best I think you can do is use something like selenium to open a browser and automate a user interaction and check the structure of the DOM and user interactions. This works well enough, but it is still good to have a person look at it and click around.