How to develop cross browser tests using image validation

Best practices, code snippets for common functionality, examples, and guidelines.
floolf
Posts: 12
Joined: Thu Nov 19, 2015 1:49 pm

How to develop cross browser tests using image validation

Post by floolf » Thu Jun 15, 2017 1:16 pm

Hello,

Our SUT includes responsive WebApp, AndroidApp and IOSApp.


We lately tried to write a scenario where we have to check that an icon within a button field
Easy.PNG
Easy.PNG (5 KiB) Viewed 483 times
is replaced by a similar icon with a checkmark on it.
Pasted image at 2017_06_15 01_35 PM.png
Pasted image at 2017_06_15 01_35 PM.png (6.37 KiB) Viewed 482 times
(ignore the color)

The icon does not have any id, the button has.

Depending on the environnement, size/resolution are different, so the test we wrote runs successfully in one context, but not in the others.

How should we write our comparison to be portable ?

Is it possible to getsize/resize images before comparison ?

jma
Posts: 111
Joined: Fri Jul 03, 2015 9:18 am

Re: How to develop cross browser tests using image validation

Post by jma » Fri Jun 16, 2017 11:48 am

Hello floolf,

Generally, I would recommend using image based validation only if there's no viable alternative. If you perform image based validation on remote machines, you have to make sure that color and resolution settings are the same as on the machine you made the test/recording on.

Maybe there's another way to validate the icon? It would be helpful if you could upload a Ranorex Snapshots of the corresponding element: https://www.ranorex.com/support/user-gu ... pshot.html