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.
Top comments (5)
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.