Option to keep checking image differences until it stabilizes

[xrecoba]

Is your feature request related to a problem? Please describe. I'm working on a web page with big slow images. The comparison tool sometimes returns me false negatives because the image has not been completely loaded whenever the comparison is made.

Describe the solution you'd like I can think of two possible solutions:

1. Webdriver-image-comparison waits for the image to be completely loaded (don't know if that's even possible)
2. Less elegant, is to wait some time after a negative comparison and then compare the image again. If the result of both comparisons is the same, we could assume that the image has not changed and hence fail the comparison. If the result is different, then the first image and the second one are different and we can assume the image is still loading. In that case, I would continue with the algorithm until the image matches or stabilizes.

Note this second option can be implemented from the npm package consumer, I did a very quick and dirty approach to see if it worked (and it works on my machine). The problems with my bold implenetation are:

• Nobody else can benefit from the feature
• It leaves images for intermediate failed comparisons in the output folder that should not be left there in an ideal solution

The function, in case it helps:

async StabilizeAndCompareImage(attempt = 0)
    {
        console.log("Attempt "+ attempt);

        var initialComparisonResult = await browser.imageComparison.checkScreen('login', { autoSaveBaseline: true });
        if(initialComparisonResult === 0)
        {
            console.log("Attempt "+ attempt + ". Image as expected.");
            return initialComparisonResult;
        }
        else{
            await browser.sleep(100);
            var newComparisonResult = await browser.imageComparison.checkScreen('login', { autoSaveBaseline: true });
            if(newComparisonResult == initialComparisonResult)
            {
                console.log("Attempt "+ attempt + ". Image not as expected, but has not changed.");
                return newComparisonResult;
            }
            else{
                console.log("Attempt "+ attempt + ". Image not as expected and it's changing, so trying again.");
                return this.StabilizeAndCompareImage(attempt + 1);
            }
        }
    }

Describe alternatives you've considered I found this problem with protractor-image-comparison package. First headed there to see if the solution is feasible and then decided that it's a best fit for webdriver-image-comparison.

Additional context Nothing to add.

[xrecoba]

@wswebcreation, if this is feature makes sense and fits in the project, I wouldn't mind trying to implement it. Please let me know your thoughts. Thanks!

[wswebcreation]

Hi @xrecoba

Sorry for my late response. I like the idea, but I don't think it should be the responsibility of this module.

In my opinion the framework / tool that is using a module should set the system under test in a state that should allow the module to do it's job.

This means that in your case you need to be sure that the page is ready, before you hand it over to the image compare library. There are some ways to check if images are done loading, maybe Google might help you with that.

For now I'm going to close this feature request, but it is still open for discussion

[xrecoba]

Hi @wswebcreation, Thanks for pointing me in what seems to be the right direction :). Google + SO gave me a possible solution to my problem, I wil try it whenever I have time. If it works I will just create a helper method so everytime we call checkScreen we also ensure that the image has been completely loaded already.