Skip to content
A module to compare app screenshots for native apps
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
lib
tests
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
babel.config.js
package.json

README.md

wdio-native-app-compare

npm version License Coverage Status

Visual regression testing for Native iOS and Android apps with WebdriverIO

This service works with WebdriverIO V5 and higher. To check support for WebdriverIO V4 go to the 0.7.0 branch and following the instructions

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
    nativeAppCompare: {
        // 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

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

You can’t perform that action at this time.