Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

protractor-image-comparison

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

protractor-image-comparison - npm Package Compare versions

Comparing version 2.0.1 to 3.0.1

.editorconfig

6

.github/ISSUE_TEMPLATE/--bug-report.md

@@ -7,2 +7,4 @@ ---

> **NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from [`webdriver-image-comparison`](https://github.com/wswebcreation/webdriver-image-comparison). So please check if this is an issue with this plugin or with `webdriver-image-comparison`.**
**Environment (please complete the following information):**

@@ -14,6 +16,6 @@ - Node.js version: [e.g. 8.9.1]

- protractor version: [e.g. 5.1.0]
- protractor-image-comparison version: [e.g. 2.0.0]
- protractor-image-comparison version: [e.g. 3.0.0]
**Config of protractor + protractor-image-comparison**
An example of how you configured the reporter in your webdriver.io config
An example of how you configured the protractor-image-comparison

@@ -20,0 +22,0 @@ **Describe the bug**

@@ -7,2 +7,4 @@ ---

> **NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from [`webdriver-image-comparison`](https://github.com/wswebcreation/webdriver-image-comparison). So please check if this is a feature request for this plugin or for `webdriver-image-comparison`.**
**Is your feature request related to a problem? Please describe.**

@@ -9,0 +11,0 @@ A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

{
"name": "protractor-image-comparison",
"version": "2.0.1",
"description": "npm-module to compare images with protractor",
"main": "index.js",
"scripts": {
"changelog": "node ./test/changelog.js",
"commitmsg": "validate-commit-msg",
"docs": "jsdoc2md ./index.js > ./docs/index.md",
"test": "node ./test/cli image-comparison",
"test.android.adb": "node ./test/cli image-comparison -r -e android.adb",
"test.android.chromedriver": "node ./test/cli image-comparison -r -e android.chromedriver",
"test.ci": "node ./test/cli image-comparison -r -e saucelabs",
"test.ios.simulator": "node ./test/cli image-comparison -r -e ios.simulator",
"test.local": "node ./test/cli image-comparison -r -e local",
"test.init": "node ./test/cli image-comparison -r -e init",
"test.perfecto": "node ./test/cli image-comparison -r -e perfecto",
"test.saucelabs": "node ./test/cli image-comparison -r -e saucelabs",
"unit.test": "JASMINE_CONFIG_PATH=test/unit/jasmine.json jasmine",
"unit.test.coverage": "JASMINE_CONFIG_PATH=test/unit/jasmine.json istanbul cover jasmine",
"wd-update": "node_modules/.bin/webdriver-manager update"
},
"repository": {
"type": "git",
"url": "https://github.com/wswebcreation/protractor-image-comparison.git"
},
"keywords": [
"image-diff",
"image-comparison",
"protractor",
"comparison",
"pix",
"resemblejs",
"image",
"diff",
"difference",
"compare"
],
"author": "Wim Selles - wswebcreation",
"license": "ISC",
"dependencies": {
"assert": "1.4.1",
"camel-case": "3.0.0",
"canvas-prebuilt": "^1.6.5-prerelease.1",
"fs-extra": "1.0.0",
"png-image": "1.1.1",
"pngjs-image": "0.11.7"
},
"devDependencies": {
"chalk": "1.1.3",
"commander": "2.9.0",
"conventional-changelog": "1.1.0",
"husky": "^0.13.1",
"istanbul": "0.4.5",
"jasmine-spec-reporter": "3.2.0",
"jsdoc-to-markdown": "2.0.1",
"protractor": "^5.1.0",
"validate-commit-msg": "^2.11.1"
},
"engines": {
"npm": ">=3.0.0",
"node": ">=4.6.0"
}
"name": "protractor-image-comparison",
"version": "3.0.1",
"description": "npm-module to compare images with protractor",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"scripts": {
"test.init": "./node_modules/.bin/protractor ./test/conf/protractor.local.init.conf.js",
"test.local.android": "./node_modules/.bin/protractor ./test/conf/protractor.local.android.conf.js",
"test.local.desktop": "./node_modules/.bin/protractor ./test/conf/protractor.local.desktop.conf.js",
"test.local.ios": "./node_modules/.bin/protractor ./test/conf/protractor.local.ios.conf.js",
"test.saucelabs": "./node_modules/.bin/protractor ./test/conf/protractor.saucelabs.conf.js",
"precompile": "npm run clean",
"prepublish": "npm run compile",
"compile": "tsc",
"lint": "tslint -p tsconfig.json",
"clean": "rimraf coverage build tmp",
"watch": "npm run compile -- -w"
},
"repository": {
"type": "git",
"url": "https://github.com/wswebcreation/protractor-image-comparison.git"
},
"keywords": [
"image-diff",
"image-comparison",
"protractor",
"comparison",
"pix",
"resemblejs",
"image",
"diff",
"difference",
"compare",
"plugin"
],
"author": "Wim Selles - wswebcreation",
"license": "ISC",
"dependencies": {
"webdriver-image-comparison": "^0.3.0"
},
"devDependencies": {
"@types/fs-extra": "^5.0.5",
"@types/jasmine": "^3.3.10",
"@types/node": "^10.14.1",
"awesome-typescript-loader": "^5.2.1",
"fs-extra": "^7.0.1",
"husky": "^1.3.1",
"jasmine": "^3.3.1",
"jasmine-spec-reporter": "^4.2.1",
"jasmine-ts": "^0.3.0",
"protractor": "^5.4.2",
"rimraf": "^2.6.3",
"source-map-loader": "^0.2.4",
"ts-node": "^7.0.1",
"tslint": "^5.12.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-jasmine-rules": "^1.5.1",
"typescript": "^3.3.3333",
"validate-commit-msg": "^2.14.0",
"vrsource-tslint-rules": "^6.0.0"
}
}

@@ -10,35 +10,31 @@ protractor-image-comparison

> **NOTE:** V3 is out, please read the [releases](https://github.com/wswebcreation/protractor-image-comparison/releases) for all the (breaking)changes
## What can it do?
*protractor-image-comparison* is a lightweight *protractor* plugin for browsers / mobile browsers / hybrid apps to do image comparison on screens or elements.
*protractor-image-comparison* is a lightweight *protractor* plugin for browsers / mobile browsers / hybrid apps to do image comparison on screens, elements or full page screens.
You can:
- save or compare screens / elements against a baseline
- save or compare a fullpage screenshot against a baseline (**desktop AND mobile are now supported**)
- save or compare screens / elements / full page screens against a baseline
- automatically create a baseline when no baseline is there
- disable css animations by default
- ignore anti-aliasing differences
- compare images by ignoring their colors (do a grayscale comparison)
- blockout custom regions during comparison (all)
- ignore regions by making them transparent in the base image (all) thanks to [tharders](https://github.com/tharders)
- parameter to hide / show scrollbars [pnad](https://github.com/pnad)
- increase the element dimenisions screenshots (all)
- provide custom iOS and Android offsets for status-/address-/toolbar (mobile only)
- automatically exclude a statusbar during screencomparison (mobile only)
- taking a screenshot directly from canvas, tnx to [tuomas2](https://github.com/tuomas2), see [here](https://github.com/wswebcreation/protractor-image-comparison/blob/master/docs/index.md#saveelementelement-tag-options--promise). **!!This isn't supported in IE11 and Safari 9!!**
- use a tolerance property called `saveAboveTolerance` that prevents saving result image to diff folder, tnx to [IgorSasovets](https://github.com/IgorSasovets )**
- **NEW**, more accurate comparison with 2 new methods called `ignoreLess` and `ignoreNothing`. These 2 methods compare with different `red, green, blue, alpha, minBrightness and maxBrightness`
- **NEW**, more accurate percentage. In previous releases the mismatch was with max with 2 digits. With `rawMisMatchPercentage:true`, you can have a result like `0.69803221`
- blockout custom regions and even automatically exclude a status and or tool bars (mobile only) during a comparison
- increase the element dimensions screenshots
- use different comparison methods
- and much more, see the [options here](./docs/OPTIONS.md)
Comparison is based on [ResembleJS](https://github.com/Huddle/Resemble.js). If you want to compare images online you can check the [online tool](https://huddleeng.github.io/Resemble.js/)
The module is now based on the power of the new [`webdriver-image-comparison`](https://github.com/wswebcreation/webdriver-image-comparison) module. This is a lightweight module to retrieve the needed data and screenshots for all browsers / devices.
The comparison power comes from [ResembleJS](https://github.com/Huddle/Resemble.js). If you want to compare images online you can check the [online tool](https://huddleeng.github.io/Resemble.js/)
## Installation
Install this module locally with the following command:
```shell
npm install protractor-image-comparison
```
It can be used for:
Save to dependencies or dev-dependencies:
- desktop browsers (Chrome / Firefox / Safari / Internet Explorer 11 / Microsoft Edge)
- mobile / tablet browsers (Chrome / Safari on emulators / real devices) via Appium
- Hybrid apps via Appium
> NOTE: See the browser-matrix at the [top](./README.md#protractor-image-comparison) of this readme to see all the supported browser/OS-versions.
## Installation
Install this module locally with the following command to be used as a (dev-)dependency:
```shell

@@ -50,65 +46,126 @@ npm install --save protractor-image-comparison

## Usage
*protractor-image-comparison* can be used for:
> ***protractor-image-comparison* supports NodeJS 8 or higher**
- desktop browsers (Chrome / Firefox / Safari / Internet Explorer 11 / Microsoft Edge)
- mobile / tablet browsers (Chrome / Safari on emulators / real devices) via Appium
- Hybrid apps via Appium
### Configuration
In comparison to **versions < 3** *protractor-image-comparison* can now be used as a plugin with the following code:
For more information about mobile testing see the [Appium](./docs/appium.md) documentation.
### Load from the configuration file of *protractor*
You can load `protractor-image-comparison` form the config like below
```js
```typescript
// protractor.conf.js
const { join } = require('path');
exports.config = {
// your config here ...
onPrepare: function() {
const protractorImageComparison = require('protractor-image-comparison');
browser.protractorImageComparison = new protractorImageComparison(
{
baselineFolder: 'path/to/baseline/',
screenshotPath: 'path/to/save/actual/screenshots/'
}
);
},
}
// ... the rest of your config
plugins: [
{
// The module name
package: 'protractor-image-comparison',
// Some options, see the docs for more
options: {
baselineFolder: join(process.cwd(), './baseline/'),
formatImageName: `{tag}-{logName}-{width}x{height}`,
screenshotPath: join(process.cwd(), '.tmp/'),
savePerInstance: true,
// ... more options
},
},
],
};
```
The full list of options can be found [here](./docs/index.md#new-protractorimagecomparisonoptions)
More plugin options can be found [here](./docs/OPTIONS.md#plugin-options).
> **NOTE: You don't need to run AND `saveElement|saveScreen|saveFullPageScreens` if you want to run `checkElement|checkScreen|checkFullPageScreen`**
### Writing tests
*protractor-image-comparison* is framework agnostic, meaning that you can use it with all the frameworks Protractor supports like `Jasmine|Mocha|CucumberJS`.
You can use it like this:
If you run for the first time without having a baseline the `check`-methods will reject the promise with the following warning:
```typescript
import {$, browser} from 'protractor';
`Image not found, saving current image as new baseline.`
describe('protractor-image-comparison desktop', () => {
beforeEach(async () => {
await browser.get(browser.baseUrl);
});
it('should save some screenshots', async() => {
// Save a screen
await browser.imageComparison.saveScreen('examplePaged', { /* some options*/ });
// Save an element
await browser.imageComparison.saveElement($('.uk-button:nth-child(1)'), 'firstButtonElement', { /* some options*/ });
// Save a full page screens
await browser.imageComparison.saveFullPageScreen('fullPage', { /* some options*/ });
});
it('should compare successful with a baseline', async() => {
// Check a screen
expect(await browser.imageComparison.checkScreen('examplePaged', { /* some options*/ })).toEqual(0);
// Check an element
expect(await browser.imageComparison.checkElement($('.uk-button:nth-child(1)'), 'firstButtonElement', { /* some options*/ })).toEqual(0);
// Check a full page screens
expect(await browser.imageComparison.checkFullPageScreen('fullPage', { /* some options*/ })).toEqual(0);
});
});
```
This means that the current screenshot is saved in the actual folder and you **manually need to copy it to your baseline**.
If you instantiate `protractor-image-comparsion` with `autoSaveBaseline: true`, see [docs](./docs/index.md#new-protractorimagecomparisonoptions),
the image will automatically be saved into the baselinefolder.
**If you run for the first time without having a baseline the `check`-methods will reject the promise with the following warning:**
```shell
#####################################################################################
Baseline image not found, save the actual image manually to the baseline.
The image can be found here:
/Users/wswebcreation/Git/protractor-image-comparison/.tmp/actual/desktop_chrome/examplePage-chrome-latest-1366x768.png
If you want the module to auto save a non existing image to the baseline you
can provide 'autoSaveBaseline: true' to the options.
#####################################################################################
*protractor-image-comparison* provides:
```
- two comparison methods `checkScreen` and `checkElement`.
- two helper methods `saveScreen` and `saveElement` for saving images.
- **NEW** a helper `saveFullPageScreens` and a comparison method `checkFullPageScreen` for saving and comparing a fullpage screenshot.
This means that the current screenshot is saved in the actual folder and you **manually need to copy it to your baseline**.
If you instantiate `protractor-image-comparsion` with `autoSaveBaseline: true` the image will automatically be saved into the baseline folder.
The comparison methods return a result in percentages like `0` or `3.94`, or when `rawMisMatchPercentage:true` it can return a percentage like `0.00244322` .
### Test result outputs
The `save(Screen/Element/FullPageScreen)` methods will provide the following information after the method has been executed:
*protractor-image-comparison* can work with Jasmine, Mocha and Cucumber.js. See [Examples](./docs/examples.md) for or a Jasmine implementation.
```js
const saveResult = {
// The device pixel ratio of the instance that has run
devicePixelRatio: 1,
// The formatted filename, this depends on the options `formatImageName`
fileName: 'examplePage-chrome-latest-1366x768.png',
// The path where the actual screenshot file can be found
path: '/Users/wswebcreation/Git/protractor-image-comparison/.tmp/actual/desktop_chrome',
};
```
More information about the **methods** can be found [here](./docs/methods.md).
See the [Check output on failure](./docs/OUTPUT.md#check-output-on-failure) section in the [output](./docs/OUTPUT.md) docs for the images.
## Ouput
To see example of the output please check [here](./docs/output.md)
By default the `check(Screen/Element/FullPageScreen)` methods will only provide a mismatch percentage like `1.23`, but when the plugin has the options `returnAllCompareData: true` the following information is provided after the method has been executed:
## Conventions
See [conventions.md](./docs/conventions.md).
```js
const checkResult = {
// The formatted filename, this depends on the options `formatImageName`
fileName: 'examplePage-chrome-headless-latest-1366x768.png',
folders: {
// The actual folder and the file name
actual: '/Users/wswebcreation/Git/protractor-image-comparison/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
// The baseline folder and the file name
baseline: '/Users/wswebcreation/Git/protractor-image-comparison/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
// This following folder is optional and only if there is a mismatch
// The folder that holds the diffs and the file name
diff: '/Users/wswebcreation/Git/protractor-image-comparison/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
},
// The mismatch percentage
misMatchPercentage: 2.34
};
```
## Contribution
See [CONTRIBUTING.md](./docs/CONTRIBUTING.md).
See the [Save output](./docs/OUTPUT.md#save-output) section in the [output](./docs/OUTPUT.md) docs for the images.
## FAQ
### Do I need to use a `save(Screen/Element/FullPageScreen)` methods when I want to run `check(Screen/Element/FullPageScreen)`?
No, you don't need to do this. The `check(Screen/Element/FullPageScreen)` will do this automatically for you
### Width and height cannot be negative

@@ -120,7 +177,7 @@ It could be that the error `Width and height cannot be negative` is thrown. 9 out of 10 times this is related to creating an image of an element that is not in the view. Please be sure you always make sure the element in is in the view before you try to make an image of the element.

## Credits
- Comparison core of `./lib/resemble.js` [ResembleJS](https://github.com/Huddle/Resemble.js)
## Contribution
See [CONTRIBUTING.md](./docs/CONTRIBUTING.md).
## TODO
* Update documentation for Mobile
* New (mobile friendly) testpage
## TODO:
- [ ] iOS Safari on iPads can have multiple tabs, so the address bar is bigger making the cutout go wrong
- [ ] create a new website
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc