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
is replaced by a similar icon with a checkmark on it.
Pasted image at 2017_06_15 01_35 PM.png
(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 ?
You do not have the required permissions to view the files attached to this post.

jma
Posts: 107
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