Include scaleImagesToSameSize capability for wdio-native-app-compare

[semeguze]

---

🚀 Is your feature request related to a problem? Please describe. I'm executing my tests on cloud servers, some of them are launching the tests with different resolutions that the ones I'm using on local executions.

Sometimes it is 1080p or 1440p, which is not configurable.

Because of that the image comparison is failing, as the resolution is different between the baseline image and the screenshot:

---

🚀 Describe the solution you'd like I saw that webdriver-image-comparison project implements this option scaleImagesToSameSize under the Resemble 'scaleToSameSize` option: https://github.com/wswebcreation/webdriver-image-comparison/blob/main/docs/OPTIONS.md#scaleimagestosamesize

Would it be possible to also include it as part of this project or could you give me an idea on how to include it so I could add a new PR?

My idea, is something like:

    await browser.compareScreen(imageBaseline, {
      scaleImagesToSameSize: true
    })

---

🚀 Describe alternatives you've considered I have considered the following alternatives:

• Using Jimp to resize the Baseline image based on the current await this.driver.getWindowSize(); values.
• Using the @appium/images-plugin to re-use the already created logic for this: https://github.com/appium/appium/blob/c43acc23ee80d461747c1912cdcfb136280001a0/packages/images-plugin/lib/finder.js#L259

However I want to avoid using the OpenCV and/or Jimp library if Resemble is already using the 'Scale to same size' functionality.

---

🚀 Additional context I think that with a code like this I should be close to it working for me, however I couldn't get it to work

// File: `lib/helper.js`

function defaultCompareOptions(options) {
    return {
        blockOuts: [],
        blockOutStatusBar: options.blockOutStatusBar || false,
        blockOutNavigationBar: options.blockOutNavigationBar || false,
        blockOutIphoneHomeBar: options.blockOutIphoneHomeBar || false,
        elementBlockOuts: [],
        debug: options.debug || false,
        ignore: [],
        ignoreAlpha: options.ignoreAlpha || false,
        ignoreAntialiasing: options.ignoreAntialiasing || false,
        ignoreColors: options.ignoreColors || false,
        ignoreLess: options.ignoreLess || false,
        ignoreNothing: options.ignoreNothing || false,
        rawMisMatchPercentage: options.rawMisMatchPercentage || false,
        saveAboveTolerance: options.saveAboveTolerance || 0,
        scaleImagesToSameSize: options.scaleImagesToSameSize || false, // <-------------
        output: {
            largeImageThreshold: options.largeImageThreshold || 0,
            errorColor: {
                red: 255,
                green: 0,
                blue: 255,
            },
        },
    }
} 

// File: `lib/resemble/compareImages.js`

export function compareImages(image1, image2, options) {
    return new Promise((resolve, reject) => {
        //Resemble.js implemented in the way that scales 2nd images to the size of 1st.
        //Experimentally proven that downscaling images produces more accurate result than upscaling
        const { imageToCompare1, imageToCompare2 } =
            options.scaleToSameSize && image1.length > image2.length
            ? {
                imageToCompare1: image2,
                imageToCompare2: image1,
                }
            : { 
                imageToCompare1: image1, 
                imageToCompare2: image2 
            };
        resemble.compare(imageToCompare1, imageToCompare2, options, (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

Thanks in advance!!

[wswebcreation]

Hi @semeguze

Thanks for your suggestion. The problem with scaleToSameSize, and especially for mobile devices, is that it might still break. Those screenshots are very big and resizing might break due to the amount of pixels.

You can validate if it works here. If so then I'm happy to implement it. Some example images would also be great so I can do some digging

Thanks