wdio-native-app-compare

Visual regression testing for Native iOS and Android apps with WebdriverIO

This service works with WebdriverIO V7 and higher.

What can it do

This service for WebdriverIO will add 4 methods that can be used to save and or check element/screen-shots of a native iOS or Android app, see Methods for all the methods and details.

When the compare methods are used a baseline image (each device + OS, and even OS version, needs to have it's own baseline image) will be compared to an actual screenshot. The output will be an object of data, check the save..-methods output here and the compare..-methods here

Comparison

The images are compared with the lovely module ResembleJS. If you want to compare images online, and thus by hand, you can check the online tool

Examples of saved images of elements / screens and diffs can be found here.

Installation

You can install wdio-native-app-compare via NPM as usual:

$ npm install wdio-native-app-compare-service --save-dev

Instructions on how to install WebdriverIO can be found here.

Configuration

wdio-native-app-compare-service is a service so it can be used as a normal service. You can set it up in your wdio.conf.js file with the following

// wdio.conf.js
exports.config = {
    // ...
    // ========================
    // Native app compare setup
    // ========================
    services: [
        [
            'native-app-compare',
            // The options
            {
                // Mandatory
                baselineFolder: 'test/image-baseline',
                screenshotPath: '.tmp/image-compare',
                // Optional
                // See Options for more options
                //..
            },
        ],
    ],
}

OPTIONS

See OPTIONS.md

METHODS INCLUDING OUTPUTS

See METHODS.md

CHANGELOG

See Releases

TODO

• [ ] Add more UT's for the index.js-file
• [ ] Add more tests for the excluded lib files in the package.json

FAQ

I get a console log when I try to save/compare an element screenshot on Android

When you are trying to save an element screenshot on Android the following log can be shown in your console

#####################################################################################
 AN ELEMENT SCREENSHOT COULD NOT BE TAKEN WITH THE NEW 'elementScreenshot()' METHOD,
 A FALLBACK HAS BEEN EXECUTED AND THE ELEMENT WILL BE SAVED.
 USE 'automationName: "UiAutomator2"' FOR ANDROID TO FULLY USE THE POWER OF APPIUM
#####################################################################################

Please make sure you are using the UiAutomator2-driver when automating with Appium, see the Appium docs here

element screenshot on an iPhone 11 are borken

There seems to be an issue with Appium and the iPhone 11 not giving back a correct element screenshot. I need to investigate this better, but a workaround would be to provide an empty resizeDimensions-object like this

driver.compareElement($('element'),'name', {resizeDimensions:{}});

This will trigger taking an element screenshot by cutting it out a large screenshot.

Credits

• Credits go out to Tele2 Netherlands. They gave me the awesome assignment to automate a React Native app and also gave me the space to investigate the tools I needed to use to automate a React Native app.
• Also the WebdriverIO team and the WebdriverIO community. The tool is really awesome and easy to use and the support is really awesome!

Licence

MIT