search

wswebcreation / protractor-image-comparison

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

Is it possible to show which difference is come from 'baseline'/'actual' image in 'diff' images? #101

Closed danielwai closed 5 years ago

danielwai commented 5 years ago

For now, the 'diff' images will show all the differences between 'baseline & 'actual' file after process found difference. But the difference show a one color only => 'purple', it is hard to verify which difference is belong to 'actual'/'baseline'. Besides that, if there is a case with lot of differences found during compare and the root cause is just caused by a breakline, it is hard to identify.

wswebcreation commented 5 years ago

Hi @danielwai,

Thanks for filling a question, but can you please stick to the template and be a little bit more clear what you wan't. I don't really understand what you are looking for

**Describe your question with as much detail as possible**
A clear and concise question that doesn't require too much conversation. Need more help? [Find me on Gitter](https://gitter.im/wswebcreation/protractor-image-comparison)

**If it's about a specific piece of code, try and include some of it to support your question.**
[...]

**Environment (please complete the following information):**
 - Node.js version: [e.g. 8.9.1]
 - NPM version: [e.g. 5.8.0]
 - Browser name and version: [e.g. Chrome 68]
 - Platform name and version: [e.g. Windows 10]
 - protractor version: [e.g. 5.1.0]
 - protractor-image-comparison version: [e.g. 2.0.0]

Which will look like this

Describe your question with as much detail as possible A clear and concise question that doesn't require too much conversation. Need more help? Find me on Gitter

If it's about a specific piece of code, try and include some of it to support your question. [...]

Environment (please complete the following information):

danielwai commented 5 years ago

For example, I have this baseline and the actual screen has extra line break before the 'Search Form' Default

After compare, difference image generated, as you can see you hard to know what is the real issue, all difference is in purple color. Default

What I looking for is it possible it draw the difference using different color? As image only contain 1 layout issue, if contain more layout issue, it is hard to get information from the difference image.

wswebcreation commented 5 years ago

@danielwai

This module doesn't have access to the DOM, only the image, in that way you can't determine which element really changed. Because this module is only a pixel-by-pixel comparison you can't determine which element really changed, meaning the result will always be like the above difference.

I'm going to close it for now because this is just how the module works, it's still open for discussion