DEV Community

Discussion on: How do you automatize tests that need visual confirmation?

Collapse
 
theluk profile image
Lukas Klinzing

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.

Collapse
 
sublimemarch profile image
Fen Slattery

Yup, image diff tools like Percy are a great option!

Collapse
 
quii profile image
Chris James • Edited

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.

Collapse
 
protium profile image
protium • Edited

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.