search

tacoss / testcafe-blink-diff

Visual regression for Testcafé
65 stars 15 forks source link

Scaling factor is not used for comparison #48

Open matzetronic opened 2 years ago

matzetronic commented 2 years ago

Hi,

I discovered an issue while running this software on our CI server (Jenkins). The problem is that when I take screenshots on my Mac, they have a scaling factor (or dpi as you write it) of 2.

But when I take screenshots on Jenkins (which is a Linux server with a virtual desktop) it has the scaling factor/dpi of 1. Which leads to the fact that the two screenshots have the same size but the content on the screenshot is half the size of the content of the other image. Therefore comparison always fails:

image

I did a first analysis: Before the comparison is done, you first create a destination image which has the max dimensions of the two screenshots.

Then you create two canvases which have the size of the destination image and if the size does not match copy the screenshot to a new image without scaling it. Which leads to a destination image like the screenshot above.

So I think the screenshot must be scaled (using dpi) to match the destination size instead of creating a new image and copying the screenshot content. One library to do that would be https://github.com/jjstiff/png-scale.

Is my analysis correct? What do you think?

Thanks 👋🏻

pateketrueke commented 2 years ago

I understand your analysys, but I need to run a few tests on my own to replicate the issue perfectly.

If you want to open a PR I can test it, I have both Mac/Linux so we can try, even I can look for a docker image with the scaling factor/dpi as 1 to confirm.

In my tests, I found that omitting the original dpi value would fill half of the blockOut areas, so using the dpi corrected them. What I am afraid, is that actually you have two different images with different dpi taken from separate environments?

Please help me to clarify this, can you upload the base/actual images to play with? Also the genererated blockOut.json would help a lot, thank you!

rawpixel-vincent commented 2 years ago

at first when reading this I thought if you compare snapshot they should be taken from the same environment.

but I can see some valid case for this, you might want to check that the render is close enough between different environment and browser.

I made a first step toward saving and applying blocked areas and dpi per snapshot in #52

Then there is some work to resize images so it works with the diff and the modal report.