protractor-image-comparison - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+<a name="1.3.0"></a>
+# [1.3.0](https://github.com/wswebcreation/protractor-image-comparison/compare/v1.2.5...v1.3.0) (2017-08-27)
+
+
+### Features
+
+* Ignore regions by making them transparent in the base image ([a7ec187](https://github.com/wswebcreation/protractor-image-comparison/commit/a7ec1873a5429eb077c4fa4dc82edd07f179f4f6))
+
+
+
+
 <a name="1.2.5"></a>
@@ -2,0 +13,0 @@ ## [1.2.5](https://github.com/wswebcreation/protractor-image-comparison/compare/v1.2.4...v1.2.5) (2017-05-18)

docs/index.md

@@ -84,2 +84,3 @@ ## Classes
 | options.ignoreColors | <code>boolean</code> | Even though the images are in colour, the comparison wil compare 2 black/white images |
+| options.ignoreTransparentPixel | <code>boolean</code> | Will ignore all pixels that have some transparency in one of the images |
 | options.androidOffsets | <code>object</code> | Object that will hold custom values for the statusBar, addressBar, addressBarScrolled and toolBar |
@@ -106,2 +107,3 @@ | options.iosOffsets | <code>object</code> | Object that will hold the custom values for the statusBar, addressBar, addressBarScrolled and toolBar |
 | options.ignoreColors | <code>boolean</code> | Even though the images are in colour, the comparison wil compare 2 black/white images |
+| options.ignoreTransparentPixel | <code>boolean</code> | Will ignore all pixels that have some transparency in one of the images |
 
@@ -123,2 +125,4 @@ **Example**
 browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreColors: true});
+// Ignore alpha pixel
+browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreTransparentPixel: true});
 ```
@@ -159,2 +163,4 @@ <a name="checkFullPageScreen"></a>
 browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreColors: true});
+// Ignore alpha pixel
+browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreTransparentPixel: true});
 ```
@@ -179,2 +185,3 @@ <a name="checkScreen"></a>
 | options.ignoreColors | <code>boolean</code> | Even though the images are in colour, the comparison wil compare 2 black/white images |
+| options.ignoreTransparentPixel | <code>boolean</code> | Will ignore all pixels that have some transparency in one of the images |
 
@@ -195,2 +202,4 @@ **Example**
 browser.protractorImageComparison.checkScreen('imageA', {ignoreColors: true});
+// Ignore alpha pixel
+browser.protractorImageComparison.checkScreen('imageA', {ignoreTransparentPixel: true});
 ```
@@ -197,0 +206,0 @@ <a name="saveElement"></a>

docs/methods.md

 #Methods
 
-##saveScreen or checkScreen 
+##saveScreen or checkScreen
 The methods `saveScreen` and `checkScreen` create a screenshot of the visible viewport. Be aware that there are different webdriver implementations in creating complete screenshots.
@@ -18,4 +18,4 @@ For example:
 
-##saveElement or checkElement 
-Images are cropped from the complete screenshot by using the `saveElement` or `checkElement` function. 
+##saveElement or checkElement
+Images are cropped from the complete screenshot by using the `saveElement` or `checkElement` function.
 The method will calculate the correct dimensions based upon the webdriver element selector.
@@ -25,4 +25,4 @@
 
-##NEW saveFullPageScreens or checkFullPageScreen 
-The methods `saveFullPageScreens` and `checkFullPageScreen` create a screenshot of the **complete** page. Basically it will device the complete page into multiple viewports. 
+##NEW saveFullPageScreens or checkFullPageScreen
+The methods `saveFullPageScreens` and `checkFullPageScreen` create a screenshot of the **complete** page. Basically it will device the complete page into multiple viewports.
 Then it will scroll to each viewport, waits a given timeout (default 1000 milliseconds) and takes a screenshot. When all the viewports have been captured it will compose a new complete fullpage screenshot.
@@ -44,4 +44,5 @@ These methods will also work on pages with lazyloading. By altering the `timeout` you can set it to wait for how long the lazyloading will take and then take a screenshot. It wil automatically recalculate the height of the full screen
 * `androidOffsets` An object that will hold the pixels of the `statusBar`, `addressBar` and or the `toolBar`. The values are used to calculate the position of an element on a screen (for `saveElement` or `checkElement`). They are defaulted, but can be overridden. These values can be different per Android version. Look up the docs for developing for Android to see the values. If not provided the defaults will be used.
-* `ignoreAntialiasing` Compare images an discard anti aliasing (default: false)*Remark: `ignoreColors: true` will automatically defaulted to `false` if `ignoreAntialiasing: true`*. Can also be set per testcase, see [here](./index.md) 
-* `ignoreColors` Even though the images are in colour, the comparison will compare 2 black/white images (default: false). *Remark: `ignoreColors: true` will automatically defaulted to `false` if `ignoreAntialiasing: true`*. Can also be set per testcase, see [here](./index.md) 
+* `ignoreAntialiasing` Compare images an discard anti aliasing (default: false)*Remark: `ignoreColors: true` will automatically defaulted to `false` if `ignoreAntialiasing: true`*. Can also be set per testcase, see [here](./index.md)
+* `ignoreColors` Even though the images are in colour, the comparison will compare 2 black/white images (default: false). *Remark: `ignoreColors: true` will automatically defaulted to `false` if `ignoreAntialiasing: true`*. Can also be set per testcase, see [here](./index.md)
+* `ignoreTransparentPixel` Will ignore all pixels that have some transparency in one of the images. With this flag `true` you can blockout regions by making them transparent in the base image.
 * `iosOffsets` An object that will hold the pixels of the `statusBar` and or the `addressBar`. The values are used to calculate the position of an element on a screen (for `saveElement` or `checkElement`). They are defaulted, but can be overridden. These values can be different per iOS version. Look up the docs for developing for iOS to see the values. If not provided the defaults will be used.
@@ -74,9 +75,9 @@
 ### blockOut
-Sometimes, it is necessary to block-out some specific areas in an image that should be ignored for comparisons. For example, this can be IDs or even time-labels that change with the time. Adding block-outs to images may decrease false positives and therefore stabilizes these comparisons (see the [examples](./examples.md)). 
+Sometimes, it is necessary to block-out some specific areas in an image that should be ignored for comparisons. For example, this can be IDs or even time-labels that change with the time. Adding block-outs to images may decrease false positives and therefore stabilizes these comparisons (see the [examples](./examples.md)).
 It can be used for `checkElement` and `checkScreen` and is an object or list of objects with coordinates that should be blocked before comparing. (default: none).
 
-**Keep in mind that the devicepixelratio on a browser / device influences the coordinates needed to create the blockout. Calculate the blockouts based on a screenshot (of an element) that already has been created, use for example Photoshop for this.** 
+**Keep in mind that the devicepixelratio on a browser / device influences the coordinates needed to create the blockout. Calculate the blockouts based on a screenshot (of an element) that already has been created, use for example Photoshop for this.**
 
 ### resizeDimensions
-Sometimes it is needed that the cut of an image should be bigger then the element itself. Take for example the hover state. A kind of a box / halo can be presented around the element that is not placed within but outside the element. With `resizeDimensions` the size of the cut of the element image can be made bigger. 
+Sometimes it is needed that the cut of an image should be bigger then the element itself. Take for example the hover state. A kind of a box / halo can be presented around the element that is not placed within but outside the element. With `resizeDimensions` the size of the cut of the element image can be made bigger.
 `resizeDimensions` accepts an integer and the value need to represent pixels. Calculation against the devicepixelratio will be done by `protractor-image-comparison`.
@@ -83,0 +84,0 @@ For example:

index.js

@@ -27,2 +27,3 @@ 'use strict';
  * @param {boolean} options.ignoreColors Even though the images are in colour, the comparison wil compare 2 black/white images
+ * @param {boolean} options.ignoreTransparentPixel Will ignore all pixels that have some transparency in one of the images
  * @param {object} options.androidOffsets Object that will hold custom values for the statusBar, addressBar, addressBarScrolled and toolBar
@@ -74,2 +75,3 @@ * @param {object} options.iosOffsets Object that will hold the custom values for the statusBar, addressBar, addressBarScrolled and toolBar
         this.ignoreColors = options.ignoreColors || false;
+        this.ignoreTransparentPixel = options.ignoreTransparentPixel || false;
 
@@ -341,2 +343,3 @@ // OS offsets
      * @param {boolean} compareOptions.ignoreColors Even though the images are in colour, the comparison wil compare 2 black/white images
+     * @param {boolean} compareOptions.ignoreTransparentPixel Will ignore all pixels that have some transparency in one of the images
      * @returns {Promise}
@@ -354,2 +357,3 @@ * @private
         compareOptions.ignoreRectangles = 'ignoreRectangles' in compareOptions ? compareOptions.ignoreRectangles.push(ignoreRectangles) : ignoreRectangles;
+        compareOptions.ignoreTransparentPixel = 'ignoreTransparentPixel' in compareOptions ? compareOptions.ignoreTransparentPixel : this.ignoreTransparentPixel;
 
@@ -873,2 +877,4 @@ if (this._isMobile() && ((this.nativeWebScreenshot && compareOptions.isScreen) || (this._isIOS())) && blockOutStatusBar) {
      * browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreColors: true});
+     * // Ignore alpha pixel
+     * browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreTransparentPixel: true});
      *
@@ -882,2 +888,3 @@ * @param {Promise} element The ElementFinder that is used to get the position
      * @param {boolean} options.ignoreColors Even though the images are in colour, the comparison wil compare 2 black/white images
+     * @param {boolean} options.ignoreTransparentPixel Will ignore all pixels that have some transparency in one of the images
      * @return {Promise} When the promise is resolved it will return the percentage of the difference
@@ -915,2 +922,4 @@ * @public
      * browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreColors: true});
+     * // Ignore alpha pixel
+     * browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreTransparentPixel: true});
      *
@@ -953,2 +962,5 @@ * @param {string} tag The tag that is used
      * browser.protractorImageComparison.checkScreen('imageA', {ignoreColors: true});
+     * // Ignore alpha pixel
+     * browser.protractorImageComparison.checkScreen('imageA', {ignoreTransparentPixel: true});
+
      *
@@ -962,2 +974,3 @@ * @param {string} tag The tag that is used
      * @param {boolean} options.ignoreColors Even though the images are in colour, the comparison wil compare 2 black/white images
+     * @param {boolean} options.ignoreTransparentPixel Will ignore all pixels that have some transparency in one of the images
      * @return {Promise} When the promise is resolved it will return the percentage of the difference
@@ -964,0 +977,0 @@ * @public

lib/resemble.js

@@ -20,2 +20,3 @@ /*
     var ignoreRectangles = 'ignoreRectangles' in resembleOptions ? resembleOptions.ignoreRectangles : null;
+    var ignoreTransparentPixel = 'ignoreTransparentPixel' in resembleOptions ? resembleOptions.ignoreTransparentPixel : false;
 
@@ -343,2 +344,7 @@ var tolerance = { // between 0 and 255
             /* istanbul ignore else */
+            if (ignoreTransparentPixel && (pixel1.a < 255 || pixel2.a < 255)) {
+                return;
+            }
+
+            /* istanbul ignore else */
             if (ignoreColors) {
@@ -345,0 +351,0 @@

package.json

 {
   "name": "protractor-image-comparison",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "npm-module to compare images with protractor",
@@ -13,3 +13,3 @@ "main": "index.js",
     "test.android.chromedriver": "node ./test/cli image-comparison -r -e android.chromedriver",
-    "test.ci": "node ./test/cli image-comparison -r -e saucelabs --seleniumAddress=http://localhost:4445/wd/hub",
+    "test.ci": "node ./test/cli image-comparison -r -e saucelabs",
     "test.ios.simulator": "node ./test/cli image-comparison -r -e ios.simulator",
@@ -58,3 +58,2 @@ "test.local": "node ./test/cli image-comparison -r -e local",
     "protractor": "^5.1.0",
-    "saucelabs": "^1.3.0",
     "validate-commit-msg": "^2.11.1"
@@ -61,0 +60,0 @@ },

README.md

@@ -22,2 +22,3 @@ protractor-image-comparison
 - blockout custom regions during comparison (all)
+- **NEW** ignore regions by making them transparent in the base image (all) thanks to [tharders](https://github.com/tharders)
 - increase the element dimenisions screenshots (all)
@@ -56,3 +57,3 @@ - provide custom iOS and Android offsets for status-/address-/toolbar (mobile only)
 
-This means that the current screenshot is saved and you **manually need to copy it to your baseline**. 
+This means that the current screenshot is saved and you **manually need to copy it to your baseline**.
 If you instantiate `protractor-image-comparsion` with `autoSaveBaseline: true`, see [docs](./docs/index.md), the image will automatically be saved into the baselinefolder.
@@ -59,0 +60,0 @@

test/conf/protractor.saucelabs.conf.js

 'use strict';
 
 let config = require('./protractor.shared.conf.js').config;
-let SauceLabs = require('saucelabs');
-
-const SAUCE_USERNAME = process.env.SAUCE_USERNAME ? process.env.SAUCE_USERNAME : process.env.IC_SAUCE_USERNAME;
-const SAUCE_ACCESS_KEY = process.env.SAUCE_ACCESS_KEY ? process.env.SAUCE_ACCESS_KEY : process.env.IC_SAUCE_ACCESS_KEY;
 const deskSpecs = ['../desktop.spec.js'];
 const mobileSpecs = ['../mobile.spec.js'];
 
-let JOB_ID;
 
-config.seleniumAddress = 'http://ondemand.saucelabs.com:80/wd/hub';
+config.sauceUser = process.env.SAUCE_USERNAME ? process.env.SAUCE_USERNAME : process.env.IC_SAUCE_USERNAME;
+config.sauceKey = process.env.SAUCE_ACCESS_KEY ? process.env.SAUCE_ACCESS_KEY : process.env.IC_SAUCE_ACCESS_KEY;
+config.sauceBuild = process.env.TRAVIS_JOB_NUMBER;
 
@@ -26,5 +23,2 @@ config.multiCapabilities = [
         platformVersion: '10.0',
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -44,5 +38,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         platformVersion: '10.0',
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -61,5 +52,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1400x1050",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         // passed: true,
@@ -78,5 +66,2 @@ public: "public",
         screenResolution: "1400x1050",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -94,5 +79,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1400x1050",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -110,5 +92,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1400x1050",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -126,5 +105,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1400x1050",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -143,5 +119,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1600x1200",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -159,5 +132,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
         screenResolution: "1600x1200",
-        username: SAUCE_USERNAME,
-        accessKey: SAUCE_ACCESS_KEY,
-        build: process.env.TRAVIS_JOB_NUMBER,
         public: "public",
@@ -171,24 +141,2 @@ "tunnel-identifier": process.env.TRAVIS_JOB_NUMBER,
 
-config.onComplete = function () {
-    return browser.getSession()
-        .then(session => {
-            JOB_ID = session.getId();
-        })
-};
-
-config.onCleanUp = function (exitCode) {
-    const saucelabs = new SauceLabs({
-        username: SAUCE_USERNAME,
-        password: SAUCE_ACCESS_KEY
-    });
-
-    return new Promise((resolve, reject) => {
-        saucelabs.updateJob(JOB_ID, {
-                passed: exitCode === 0,
-            },
-            () => resolve(),
-            error => reject('Error:', error));
-    });
-};
-
 exports.config = config;

test/unit/resemble.spec.js

@@ -11,2 +11,3 @@ 'use strict';
     const peopleTwoImage = path.resolve(__dirname, './example/People2.png');
+    const peopleAlphaImage = path.resolve(__dirname, './example/PeopleAlpha.png');
     const largeImage = path.resolve(__dirname, './example/LargeImage.png');
@@ -100,3 +101,3 @@ const smallImage = path.resolve(__dirname, './example/SmallImage.png');
 
-            it('should fail comparing 2 non identical images with each other with ignoreRectangles enabled', done => {
+            it('should succeed comparing 2 non identical images with each other with ignoreRectangles enabled', done => {
                 resemble(peopleImage, peopleTwoImage, {
@@ -109,9 +110,9 @@ ignoreAntialiasing: true,
                             y: 15,
-                            height: 200,
+                            height: 110,
                             width: 460
                         }, {
-                            x: 0,
-                            y: 200,
-                            height: 300,
-                            width: 460
+                            x: 21,
+                            y: 170,
+                            height: 100,
+                            width: 100
                         }
@@ -126,2 +127,32 @@ ]
         });
+
+        describe('ignoreTransparentPixel', () => {
+
+            it('should fail comparing 2 non identical images with transparent regions', done => {
+                resemble(peopleAlphaImage, peopleTwoImage)
+                    .onComplete(data => {
+                        expect(data.misMatchPercentage).toEqual('7.88');
+                        done();
+                    });
+            });
+
+
+            it('should succeed comparing 2 non identical images with ignoring transparent regions', done => {
+                resemble(peopleAlphaImage, peopleTwoImage, { ignoreTransparentPixel: true })
+                    .onComplete(data => {
+                        expect(data.misMatchPercentage).toEqual('0.00');
+                        done();
+                    });
+            });
+
+            it('should fail comparing 2 non identical images even ignoring transparent regions', done => {
+                resemble(peopleAlphaImage, peopleImage, { ignoreTransparentPixel: true })
+                    .onComplete(data => {
+                        expect(data.misMatchPercentage).toEqual('7.37');
+                        done();
+                    });
+            });
+
+        });
+
     });
@@ -128,0 +159,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18696418

increased by1.41%

Dev dependency count

9

decreased by-10%

Number of package files

170

increased by1.8%

Lines of code

3291

increased by42.59%

Number of lines in readme file

83

increased by1.22%

Number of low supply chain risk alerts

26

decreased by-21.21%

No dependency changes