Image Diff

[shuhrat]

It would be great if you give to users ability to reconfigure some steps in gemini by external packages/scripts, for example

• Image comparison
• Reporters

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[SevInf]

I understand the part about custom reporters, but why do you want custom image comparsion? If you have issues do you have with looks-same (aside from non-configurable tolerance, this will be available soon).

/cc @anton-rudeshko

[shuhrat]

what if I want to use my own image differ or use resemble.js?

[SevInf]

But why do you want it instead of builtin?

[anton-rudeshko]

Coz of modularity FTW! Why not? =)

[wrench7]

I've come across a rather hard to fix issue with the looks-same module that gemini relies on. When taking grabs of components that have border-radius applied to them, Chrome will think there's sub-pixel differences around the edges of the rounded corners when perceivably (to my eyes anyway) there isn't any visual difference to speak of.

Doing a quick test with resemble and the two grabs that gemini creates suggest that resemblejs would allow more flexibility in how the images that are grabbed are then processed. Especially the anti-aliasing feature they use.

So that's my +1 for taking a look at resemblejs. I'll hopefully be doing some work on this, so will raise a PR if it's anything of interest.

[SevInf]

Ok, I understand your point and I will happily merge a PR which allows end-users to choose between Resemble and looks-same. However, we most likely won't have time for implementing it ourself in near future, so all hope is on you.

Do you have any proposals on how it might look like? I imagine it looking somthing like this:

In config file:

engine:
  module: 'gemini-resemble',
  options:
    option: value
    ...

Where module is the name of the npm module containing the plugin and options are engine specific options (for example, tolerance and strictComparsion for looks-same, ignoreAntialiasing, ignoreColors).

Engine interface itself might look like something like this (pseudocode):

class Engine {
     constructor(options);
     compare(reference, current) -> Promise<Bool equal>
}

[sipayRT]

@shuhrat @anton-rudeshko are you still need this ability?

[anton-rudeshko]

Having it still would be nice, but it's not necessary right now :)

[bruk1977]

@sipayRT @SevInf do you think this feature may help me for issue #682 . Because, resemble.js ignore antialiasing works for me. The following two images with ignore antialiasing in resemble.js passing but not in look-same.

You can try here.

[bruk1977]

@sipayRT @SevInf what do you think about my above comment?

[nicrodgers]

It looks like look-same has recently been updated to ignore anti aliasing: https://github.com/gemini-testing/looks-same/pull/19

Hopefully we'll be able to use this in gemini soon

[bruk1977]

@nicrodgers thanks for the pointer. Looks like the fix is in look-same v3.1.0 and Gemini is referencing v3.0.0. @sipayRT @SevInf when are you planning to update gemini to the latest looks-same?

[bruk1977]

I tried looks-same v3.1.0 locally, I see the code checked in with looks-same issue #19. However, two images I attached above still showed as different :(

[bruk1977]

@sipayRT @SevInf is this in your radar to be addressed? or should I find time fixing my self?

[j0tunn]

@sipayRT is on the vacation till Dec 15. When he come back we will dicuss this stuff.

[bruk1977]

@j0tunn Thanks for the info.

[bruk1977]

@sipayRT @j0tunn have you got a chance to discuss on this?

[sipayRT]

hi. I'll check your images with looks-same and resemble, but both tools uses the same formula to detect antialiasing. So your diff not because of AA

[bruk1977]

@sipayRT really appreciate if you check the images.... even if it's not because of AA, I would like to hear from you why resemblejs says they are the same with ignore AA but not look-same.

[bruk1977]

Below is my gemini config, incase if I need to add/modify anything.

{ "rootUrl": "http://dev.staginglocal.com/", "screenshotsDir": "./vDiffScreens", "browsers": { "phantomjs": { "retry": 3, "desiredCapabilities": { "browserName": "phantomjs" } } }, "httpTimeout": 25000, "sessionRequestTimeout": 120000, "tolerance": 5, "system": { "parallelLimit": 4 }, "compositeImage": true }

[bruk1977]

@sipayRT Happy New Year :-) ... any update?

[sipayRT]

hi. sorry for delay. The main difference between those tools is checking for 'alpha'-channel. looks-same checks only RGB when node-resemble-js check RGBA. But I see image difference without any tools. that's why looks-same (and pixelmatch) says that images are not equal

[bruk1977]

@sipayRT any chance looks-same also checking RGBA? I got few issues here and there because of this ... like I see test failing in edge 14 very frequently.. .when I checked on resembleJs by enabling antialiasing, image comparison passes for the same images which are failing in Gemini.

[sipayRT]

any chance looks-same also checking RGBA?

no, it's makes no sense to check Alpha channel on screenshot that was make from browser. You can try to switch off antialiasing directly in the Edge browser to avoid these diffs

[bruk1977]

@sipayRT I'm using browser stack and don't have control on Edge browser. If you don't have time to add resemblejs, I'm thinking to find sometime to add resemblejs in gemini... is that okay? Looks like that will work for me.