search

wswebcreation / protractor-image-comparison

npm-module to compare images with protractor
86 stars 38 forks source link

_executeImageComparison ignores dimensions difference #50

Open linnando opened 6 years ago

linnando commented 6 years ago

Hi!

I have noticed that if two images differ in their dimensions only (one includes the other one completely, but also some other pixels), then protractor-image-comparison reports that they are exactly the same. The reason is that, if two images differ in their dimensions, ResembleJS counts data.misMatchPercentage only for the pixels that exist in both, and the size difference is reflected in data.isSameDimensions and data.dimensionDifference. At least, the version included in protractor-image-comparison does so (the upstream version attempts to normalise the images to the same size before comparing pixels). However, function _executeImageComparison takes into account data.misMatchPercentage only. That gives the result described above.

I think, it would be more correct to count the area that is only one image includes as mismatching pixels. It can be done by adding to data.misMatchPercentage the surplus (data.dimensionDifference.width / width + data.dimensionDifference.height / height - data.dimensionDifference.width data.dimensionDifference.height / width / height) 100. Total width and height (max of two images, as in the denominator of data.misMatchPercentage) should be additionally passed from resemble.js, I think.

wswebcreation commented 6 years ago

Hi @linnando

Tnx for the issue and detailed description. Do you have 2 images in where this happens? Then I can fix this in and add a test for it

linnando commented 6 years ago

@wswebcreation Sorry, I forgot about your question:-(. Here is a sample repository based on Angular default app: https://github.com/linnando/protractor-image-comparison-test. The images that differ but considered equal by the test are located in directories e2e/reference-images/actual and e2e/reference-images/baseline. Steps to reproduce the bug (assuming Angular CLI and protractor are installed globally):

https://github.com/linnando/protractor-image-comparison-test cd protractor-image-comparison-test npm install ng s (in a separate terminal) cd e2e protractor

Although the images differ, the test is passed. Probably, it can be done in a simpler way without Angular.

However, I see that the bug does not exist any more if protractor-image-comparison 2.0.0 is used. Therefore, I manually preserved version 1.7.2 in my test project. However, it still may make sense to create a test case from my example.