# wdio-native-app-compare-service > Visual regression testing for Native iOS and Android apps with WebdriverIO Latest version **2.1.0** (published 2022-11-02) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install wdio-native-app-compare-service pnpm add wdio-native-app-compare-service yarn add wdio-native-app-compare-service bun add wdio-native-app-compare-service ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 2.1.0 | | Published | 2022-11-02 | | First published | 2019-04-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 1.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 38 | | Author | wswebcreation.nl | | Maintainers | wswebcreation-nl | | Keywords | webdriver.io, native, screenshots, compare, image, android, ios, appium | ## Links - npm: https://www.npmjs.com/package/wdio-native-app-compare-service - Repository: https://github.com/wswebcreation/wdio-native-app-compare - Homepage: https://github.com/wswebcreation/wdio-native-app-compare#readme - Issues: https://github.com/wswebcreation/wdio-native-app-compare/issues - npm.io page: https://npm.io/package/wdio-native-app-compare-service ## Dependencies (4) - [chalk](https://npm.io/package/chalk.md) ^4.1.0 - [canvas](https://npm.io/package/canvas.md) ^2.9.3 - [fs-extra](https://npm.io/package/fs-extra.md) ^10.1.0 - [@wdio/logger](https://npm.io/package/@wdio/logger.md) ^7.19.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 2.1.0 (latest) — 2022-11-02 - 2.0.1 — 2022-10-30 - 2.0.0 — 2022-07-01 - 1.2.0 — 2020-05-03 - 1.1.2 — 2020-05-02 - 1.1.1 — 2020-04-24 - 1.1.0 — 2019-08-21 - 1.0.1 — 2019-04-24 - 1.0.0 — 2019-04-09 ## README # wdio-native-app-compare [![npm version](https://badge.fury.io/js/wdio-native-app-compare-service.svg)](https://badge.fury.io/js/wdio-native-app-compare-service) [![License](https://img.shields.io/npm/l/express.svg)](https://github.com/wswebcreation/wdio-native-app-compare/blob/main/LICENSE) [![Join the chat at https://gitter.im/wswebcreation/wdio-native-app-compare](https://badges.gitter.im/wswebcreation/wdio-native-app-compare.svg)](https://gitter.im/wswebcreation/wdio-native-app-compare?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 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](./README.md#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](https://github.com/wswebcreation/wdio-native-app-compare/blob/main/docs/METHODS.md#save-methods) and the `compare..`-methods [here](https://github.com/wswebcreation/wdio-native-app-compare/blob/main/docs/METHODS.md#compare-methods) ## Comparison The images are compared with the lovely module [ResembleJS](https://github.com/rsmbl/Resemble.js). If you want to compare images online, and thus by hand, you can check the [online tool](http://rsmbl.github.io/Resemble.js/) Examples of saved images of elements / screens and diffs can be found [here](./docs/IMAGE-OUTPUT.md). # Installation You can install wdio-native-app-compare via NPM as usual: ```sh $ npm install wdio-native-app-compare-service --save-dev ``` Instructions on how to install `WebdriverIO` can be found [here.](http://webdriver.io/guide/getstarted/install.html) ## 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 ```js // 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](./docs/OPTIONS.md) ## METHODS INCLUDING OUTPUTS See [METHODS.md](./docs/METHODS.md) ## CHANGELOG See [Releases](https://github.com/wswebcreation/wdio-native-app-compare/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 ```bash ##################################################################################### 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](http://appium.io/docs/en/drivers/android-uiautomator2/) ## 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 --- _Source: https://npm.io/package/wdio-native-app-compare-service · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._