How to do Image comparision using Webdriver

3,733 views
Skip to first unread message

Amit

unread,
Apr 3, 2012, 12:52:26 AM4/3/12
to webdriver
I have to compare 2 images.

I searched on internet but did not get any solution for this.
If any one has done this previously please let me know the solution.

Thanks
Amit

Sasi kumar

unread,
Apr 3, 2012, 1:32:48 AM4/3/12
to webdriver
Is it comparison of two images using selenium or comparing the image
output after test in selenium.You can achieve this using java bitmap
comparison or similar.

Amit

unread,
Apr 3, 2012, 2:14:01 AM4/3/12
to webdriver
In my application, I have to verify that when user upload any image in
the profile, same image appears throughout application for him.
and I want to do this using automation.

darrell

unread,
Apr 3, 2012, 8:54:04 AM4/3/12
to webd...@googlegroups.com
I'd look at it as two tasks. Task #1: use Selenium to find the image location. Task #2: use an image comparison program to compare the original image to the image found.

It could be REALLY simple. If I upload the image and find that it is stored at http://mysite.com/images/user5/image.png then I could save the URL and check all other locations to see if they are using the same URL. I would go to the URL, using driver.get(), and sceen capture it. Then I'd manually check the screen shot to confirm the initial upload went okay.

If the URL is going to be slightly different depending on where you are looking or based on session id then I would still use Selenium to find the URL for each instance but now I'd download the image and use a separate image comparison program to  compare the original with the downloaded image. To find such software I'd just search for an image comparison program written in the language I am using or something I can run from the command line. I'd then use Run.exec() to run the comparison program.

Darrell

David

unread,
Apr 3, 2012, 2:18:48 PM4/3/12
to webdriver
Best options for image comparison for automation:

Sikuli.org

https://github.com/msanders/autopy

for commercial support see Experitest's SeeTest

all these should be integratable with WebDriver, in Java, Jython, or
Python, or other language depending on tool selected.

On Apr 3, 5:54 am, darrell <darrell.grain...@gmail.com> wrote:
> I'd look at it as two tasks. Task #1: use Selenium to find the image
> location. Task #2: use an image comparison program to compare the original
> image to the image found.
>
> It could be REALLY simple. If I upload the image and find that it is stored
> athttp://mysite.com/images/user5/image.pngthen I could save the URL and

Bill Ross

unread,
Apr 3, 2012, 5:54:51 PM4/3/12
to webd...@googlegroups.com
It should be possible to convert the images to arrays of bytes,
and these can be compared within a loop.

byte[] image1 = ...TBD...
byte[] image2 = ...
if (image1.length != image2.length)
return false;
for (int i=0; i< image1.length)
if (image1[i] != imag2[i])
return false;
return true;

Or some sort of stream reader might be used.

Bill

Amit <deshpand...@gmail.com> wrote:

> --
> You received this message because you are subscribed to the Google Groups "webdriver" group.
> To post to this group, send email to webd...@googlegroups.com.
> To unsubscribe from this group, send email to webdriver+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/webdriver?hl=en.
>

Amit

unread,
Apr 4, 2012, 12:46:01 AM4/4/12
to webdriver
Thanks for reply.

Currently I am doing by creating object of image using PixelGrabber
and then converting that object into array of pixels.
And then doing comparision of arrays.

It seems to be working fine.

Please let me know is this approach correct?

Thanks
Amit

darrell

unread,
Apr 4, 2012, 9:28:44 AM4/4/12
to webd...@googlegroups.com
Amit,

If the image must be EXACTLY the same as a baseline you should be able to get away with this. However, if there are portions of the screen which might be slightly different but 'close enough' then you want to do this differently. Most the time you will find that the new image is slightly different. In some cases areas need to be masked out or the image on one browser will be slightly different but good enough. For example, if the font is a san serif and that is all you care about one browser might select Cerbetica and another might select Helvetica. Comparing the bytes will generate a false negative because comparing images is not black and white. The only feed back you will get is that the image failed.

Two solutions, one is keep the images as image files. So when it fails you can compare the two images side by side and see if it is REALLY a failure. The other solution is use image comparison software which allows for masked areas, fuzzy logic, etc. It will be a little more forgiving and generate less false negatives.

Darrell
> > To unsubscribe from this group, send email to webdriver+unsubscribe@googlegroups.com.

Bill Ross

unread,
Apr 4, 2012, 2:05:12 PM4/4/12
to webd...@googlegroups.com
Sounds good. You could persuade yourself that it works by testing
with expected failure as well as success cases.

Bill

Reply all
Reply to author
Forward
0 new messages