Compare Images with DocTest.VisualTest fail when comparing elements

Libraries
1

Hi! I’m trying to compare images of an element using SeleniumLibrary to take the screenshot of the element and using DocTest.VisualTest to compare them, but because the element is small the pixel quality is very bad and despite the images look the same I keep receiving an error saying that the images are different. I believe this error is happening because of bad pixel quality.

I wacht Many Kasiriha videos on youtube but couldn’t find a solution.

Working on windows 10 with robotframework-seleniumlibrary 6.1.0 and robotframework-doctestlibrary 0.16.0

I’m doing automation in amazon web site for study reasons and comparing a printscreen of the search button with the image that is regenerated by Capture Element Screenshot with the resize_candidate=True.

Compare element
${img} Capture Element Screenshot locator=//input[contains(@type,‘submit’)]
Compare Images ./images/testing-search-element.png ${img} resize_candidate=True

image
image1270×726 83.6 KB

Thanks in advance!

2

Hi Jaqueline,

let’s try to analyze the root cause together. Then we can find some way to make the comparison “pass”, despite the small differences.

What happens if you run the Compare Images without any additional arguments?
What is the reported error from the comparison?
Is it “The compared images are different” or “The compared images have different dimensions” ?

When importing the Library you can enable some additional options to take more screenshots

*** Settings ***
Library    DocTest.VisualTest   take_screenshots=${true}    show_diff=${true}    screenshot_format=png

Do those screenshots show any additional differences?

I will see if I can do some updates to the Library to make the differences more visible…

1 Like
3

Hi again,
I reproduced your scenario and took a screenshot of the same small element using different browsers (firefox and edge).
And indeed, there is some very tiny visual different in the screenshots - most likely due to some anti-aliasing.
One possibility to pass such scenarios (even though there is a small visual difference) is by using the threshold argument.
You can use it as an argument either in the Compare Images Keyword or when importing the DocTest.VisualTest Library.
Below is an example where threshold=0.0005 is set in the Keyword. With that value, the test passed for me. Maybe you need to experiment yourself with the value.
The threshold is a value between 0.00 and 1.00.
A low value means: Very tiny visual differences are allowed.
A high value means a LOT of visual differences are allowed.

*** Settings ***
Library   SeleniumLibrary
Library  DocTest.VisualTest    show_diff=True    take_screenshots=True    screenshot_format=png 

*** Variables ***
${REFERENCE}    ${CURDIR}${/}reference

*** Test Cases ***
Check Amazon Site
    Open Browser    url=https://www.amazon.com    browser=edge
    ${img}    Capture Element Screenshot    locator=//input[contains(@type,"submit")]
    Compare Images    ${REFERENCE}/submit.png    ${img}    threshold=0.00005
1 Like
4

Hi Many! Thanks for your reply and sorry for taking so long to answer. I have tried a lot of different approaches to study and at this moment I’m receiving an error to run my tests.

OSError: [WinError 216] This version of %1 is not compatible with the version of Windows you are running. Check the computer’s system information and contact the software vendor

I probably installed something in the wrong version. As soon as I can solve it I will try your suggestions and reply here.

Thanks again!