pix-diff - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

CHANGELOG.md

 Changelog
 =========
-v1.0.12 - Added baseline option for auto saving not found images #21 (01/09/2016
+v1.0.13 - Added auto resize option (13/09/2016)
 
+v1.0.12 - Added baseline option for auto saving not found images #21 (01/09/2016)
+
 v1.0.11 - Merged PR #19 to add cucumber support (credit to wswebcreation)
@@ -6,0 +8,0 @@

index.js

@@ -19,2 +19,3 @@ 'use strict';
  * @param {string} options.height Height of browser
+ * @param {boolean} options.autoResize Automatically resize the browser
  * @param {string} options.formatImageOptions Custom variables for Image Name
@@ -24,5 +25,6 @@ * @param {string} options.formatImageName Custom format image name
  * @property {string} basePath
- * @property {bool} baseline
+ * @property {boolean} baseline
  * @property {int} width
  * @property {int} height
+ * @property {boolean} autoResize
  * @property {string} formatOptions
@@ -42,3 +44,3 @@ * @property {string} formatString
 
-    this.baseline = options.baseline || false;
+    this.baseline = options.baseline === true || false;
 
@@ -48,2 +50,4 @@ this.width = options.width || 1280;
 
+    this.autoResize = options.autoResize === false || true;
+
     this.formatOptions = options.formatImageOptions || {};
@@ -56,22 +60,31 @@ this.formatString = options.formatImageName || '{tag}-{browserName}-{width}x{height}';
 
-    // init
-    browser.driver.manage().window().setSize(this.width, this.height)
-        .then(function () {
-            return browser.getProcessedConfig();
-        })
-        .then(function (data) {
-            this.capabilities = data.capabilities;
-            assert.ok(this.capabilities.browserName, 'Browser name is undefined.');
-            this.browserName = this.capabilities.browserName.toLowerCase();
+    // initialize
+    browser.getProcessedConfig().then(function (_) {
+        assert.ok(_.capabilities.browserName, 'Browser name is undefined.');
+
+        this.browserName = camelCase(_.capabilities.browserName);
+        this.platformName = _.capabilities.platformName ? camelCase(_.capabilities.platformName) : '';
+        this.deviceName = _.capabilities.deviceName ? camelCase(_.capabilities.deviceName) : '';
+
+        if (_.framework !== 'custom') {
             // Require PixDiff matchers for jasmine(2)/mocha
-            if (data.framework !== 'custom') {
-                require(path.resolve(__dirname, 'framework', data.framework));
-            }
-            if (!this.isFirefox()) {
-                return this.getPixelDeviceRatio();
-            }
-        }.bind(this))
-        .then(function (ratio) {
-            this.devicePixelRatio = ratio;
-        }.bind(this));
+            require(path.resolve(__dirname, 'framework', _.framework));
+        }
+
+        return this.getPixelDeviceRatio();
+
+    }.bind(this)).then(function (ratio) {
+        this.devicePixelRatio = ratio;
+
+        return this.getBrowserDimensions();
+
+    }.bind(this)).then(function (dimensions) {
+        if (this.platformName) {
+            this.height = dimensions.height;
+            this.width = dimensions.width;
+        }
+        else if (this.autoResize) {
+            browser.driver.manage().window().setSize(this.width, this.height);
+        }
+    }.bind(this));
 }
@@ -114,2 +127,4 @@
             'browserName': this.browserName,
+            'deviceName': this.deviceName,
+            'dpr': this.devicePixelRatio,
             'width': this.width,
@@ -150,3 +165,3 @@ 'height': this.height
     /**
-     * Return the device pixel ratio
+     * Return the device pixel ratio (firefox always equals 1)
      *
@@ -158,6 +173,9 @@ * @method getPixelDeviceRatio
     getPixelDeviceRatio: function () {
+        var ratio;
+
         return this.flow.execute(function () {
             return browser.executeScript('return window.devicePixelRatio;')
                 .then(function (devicePixelRatio) {
-                    return Math.floor(devicePixelRatio);
+                    ratio = Math.floor(devicePixelRatio);
+                    return (ratio > 1 && !this.isFirefox()) ? ratio : this.devicePixelRatio;
                 }.bind(this));
@@ -220,2 +238,13 @@ }.bind(this));
     /**
+     * Get the height and width of the browser
+     *
+     * @method getDeviceDimensions
+     * @returns {promise}
+     * @private
+     */
+    getBrowserDimensions: function () {
+        return browser.executeScript('return { height: window.screen.height, width: window.screen.width};');
+    },
+
+    /**
      * Checks if image exists as baseline
@@ -231,6 +260,6 @@ *
 
-        fs.access(path.join(this.basePath, this.format(this.formatString, tag)), fs.F_OK, function (err) {
-            if (err) {
+        fs.access(path.join(this.basePath, this.format(this.formatString, tag)), fs.F_OK, function (e) {
+            if (e) {
                 if (!this.baseline) {
-                    deferred.reject(new Error(err.message));
+                    deferred.reject(new Error(e.message));
                 }
@@ -327,13 +356,12 @@ else {
             return this.checkImageExists(tag)
-                .catch(function (err) {
-                    if (this.baseline) {
-                        this.saveScreen(tag);
-                    }
-                    else {
-                        throw err;
-                    }
-                }.bind(this))
                 .then(function () {
                     return browser.takeScreenshot();
-                })
+                }, function (e) {
+                        if (this.baseline) {
+                            return this.saveScreen(tag).then(function () {
+                                throw e;
+                            });
+                        }
+                        throw e;
+                    }.bind(this))
                 .then(function (image) {
@@ -375,13 +403,12 @@ tag = this.format(this.formatString, tag);
             return this.checkImageExists(tag)
-                .catch(function (err) {
+                .then(function () {
+                    return element.getSize();
+                }, function (e) {
                     if (this.baseline) {
-                        this.saveRegion(element, tag);
+                        return this.saveRegion(element, tag).then(function () {
+                            throw e;
+                        });
                     }
-                    else {
-                        throw err;
-                    }
+                    throw e;
                 }.bind(this))
-                .then(function () {
-                    return element.getSize();
-                })
                 .then(function (elementSize) {
@@ -388,0 +415,0 @@ size = elementSize;

package.json

 {
   "name": "pix-diff",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Protractor plugin for image comparison",
@@ -24,3 +24,3 @@ "main": "index.js",
     "mocha": "^2.4.5",
-    "protractor": "^3.2.2",
+    "protractor": "^4.0.5",
     "protractor-cucumber-framework": "^0.6.0"
@@ -27,0 +27,0 @@ },

README.md

@@ -67,7 +67,7 @@ Pix-Diff
     it("should match the title", function () {
-        expect(browser.pixDiff.checkRegion(element(By.id('title')), 'example page title')).toMatchScreen();
+        expect(browser.pixDiff.checkRegion(element(By.id('title')), 'examplePageTitle')).toMatchScreen();
     });
 
     it("should match the title", function () {
-        expect(browser.pixDiff.checkRegion(element(By.id('title')), 'example page title', {
+        expect(browser.pixDiff.checkRegion(element(By.id('title')), 'examplePageTitle', {
             blockOut: [{x: 10, y: 132, width: 100, height: 50}]})).toMatchScreen();
@@ -80,8 +80,4 @@ });
 ```javascript
-var chai = require('chai'),
-    chaiAsPromised = require('chai-as-promised');
+var expect = require('chai').expect;
 
-chai.use(chaiAsPromised);
-var expect = chai.expect;
-
 function CucumberSteps() {
@@ -108,3 +104,3 @@ this.Given(/^I load the url$/, function () {
     this.Then(/^Pix\-Diff should match the title$/, function () {
-        return browser.pixDiff.checkRegion(element(By.id('title')), 'example page title')
+        return browser.pixDiff.checkRegion(element(By.id('title')), 'examplePageTitle')
             .then(function (result) {
@@ -116,3 +112,3 @@ return expect(result.differences).to.equal(0);
     this.Then(/^Pix\-Diff should match the title with blockout$/, function () {
-        return browser.pixDiff.checkRegion(element(By.id('title')), 'example page title', {
+        return browser.pixDiff.checkRegion(element(By.id('title')), 'examplePageTitle', {
             blockOut: [{x: 10, y: 132, width: 100, height: 50}]})
@@ -134,2 +130,3 @@ .then(function (result) {
 * ```height``` Browser height (default: 1024)
+* ```autoResize``` Auto (re)size the browser (default: true)
 * ```formatImageName``` Naming format for images (default: ```"{tag}-{browserName}-{width}x{height}"```)
@@ -182,2 +179,5 @@
 ```
+The following variables can be passed to format the string
+* ```browserName``` The browser name property from the capabilities
+* ```dpr``` The device pixel ratio
 
@@ -216,3 +216,2 @@ Images specified via name in the spec method will be selected according to the browsers current resolution. That is to say that multiple images can share the same name differentated by resolution.
 * [chai](https://github.com/chaijs/chai)
-* [chai-as-promised](https://github.com/domenic/chai-as-promised)
 * [cucumber](https://github.com/cucumber/cucumber-js)
@@ -219,0 +218,0 @@ * [protractor-cucumber-framework](https://github.com/mattfritz/protractor-cucumber-framework)

test/cucumber.steps.js

 'use strict';
 
-var BlinkDiff = require('blink-diff'),
-    chai = require('chai'),
-    chaiAsPromised = require('chai-as-promised'),
+var expect = require('chai').expect,
+    BlinkDiff = require('blink-diff'),
     fs = require('fs'),
-    PixDiff = require('../index');
+    PixDiff = require('../');
 
-chai.use(chaiAsPromised);
-var expect = chai.expect;
-
 function CucumberSteps() {
 
+    var headerElement = element(by.css('div h1'));
+
     this.Given(/^I set up the matchers environment$/, function () {
@@ -48,3 +46,3 @@ browser.get(browser.baseUrl);
 
-        return browser.pixDiff.saveRegion(element(by.css('div h1')), tagName)
+        return browser.pixDiff.saveRegion(headerElement, tagName)
             .then(function () {
@@ -70,26 +68,10 @@ return expect(fs.statSync(__dirname + '/screenshots/' + tagName + '-chrome-800x600.png').isFile()).to.equal(true);
     this.Then(/^Pix\-Diff should not crash with image not found$/, function () {
-        var errorThrown = false;
-
-        return browser.pixDiff.checkScreen('imageNotExist', {threshold: 1})
-            .then(function () {
-                fail('must not do a comparison.');
-            })
-            .catch(function () {
-                errorThrown = true;
-            })
-            .then(function () {
-                return expect(errorThrown).to.equal(true);
-            });
+        return browser.pixDiff.checkScreen('imageNotExist', {threshold: 1}).then(function () {
+            fail('should not be called');
+        }, function (error) {
+            expect(error.message).to.contain('no such file or directory');
+        });
     });
-
-    this.Then(/^Pix\-Diff should save screen with formatted basename$/, function () {
-        var tagName = 'customName';
-
-        return browser.pixDiff.saveScreen(tagName)
-            .then(function () {
-                return expect(fs.statSync(__dirname + '/screenshots/TEST_' + tagName + '_chrome_800-600.png').isFile()).to.equal(true);
-            });
-    });
 }
 
 module.exports = CucumberSteps;

test/jasmine.spec.js

@@ -9,3 +9,4 @@ 'use strict';
 
-    var browserName = browser.browserName;
+    var browserName = browser.browserName,
+        headerElement = element(by.css('div h1'));
 
@@ -26,2 +27,6 @@ beforeEach(function () {
 
+        it('should get a device pixel ratio', function () {
+            expect(browser.pixDiff.devicePixelRatio).not.toBeUndefined();
+        });
+
         it('should save the screen', function () {
@@ -38,3 +43,3 @@ var tagName = 'examplePage';
 
-            browser.pixDiff.saveRegion(element(by.css('div h1')), tagName).then(function () {
+            browser.pixDiff.saveRegion(headerElement, tagName).then(function () {
                 expect(fs.existsSync(__dirname + '/screenshots/' + tagName + '-' + browserName + '-800x600.png')).toBe(true);
@@ -55,3 +60,3 @@ });
         it('should not match the page', function () {
-            browser.pixDiff.checkScreen('example-fail', {threshold: 1}).then(function (result) {
+            browser.pixDiff.checkScreen('exampleFail', {threshold: 1}).then(function (result) {
                 expect(result.code).toEqual(BlinkDiff.RESULT_DIFFERENT);
@@ -66,9 +71,6 @@ });
         it('should not crash with image not found', function () {
-            var errorThrown = false;
             browser.pixDiff.checkScreen('imageNotExist', {threshold: 1}).then(function () {
-                fail('must not do a comparison.');
-            }).catch(function () {
-                errorThrown = true;
-            }).then(function () {
-                expect(errorThrown).toBe(true);
+                fail('should not be called');
+            }, function (error) {
+                expect(error.message).toContain('no such file or directory');
             });
@@ -91,3 +93,3 @@ });
         it('should save screen with formatted basename', function () {
-            var tagName = 'customName';
+            var tagName = 'customImageName';
 
@@ -101,2 +103,3 @@ browser.pixDiff.saveScreen(tagName).then(function () {
     describe('scroll into view', function () {
+
         beforeEach(function () {
@@ -108,22 +111,16 @@ browser.pixDiff = new PixDiff({
             });
+
+            browser.scrolledPage = browser.executeScript('arguments[0].scrollIntoView();', headerElement.getWebElement());
         });
 
         it('should save a scrolled screen', function () {
-            var tagName = 'scrolledPage',
-                headerElement = element(by.css('div h1'));
-
-            browser.executeScript('arguments[0].scrollIntoView();', headerElement.getWebElement())
-                .then(function () {
-                    browser.pixDiff.saveScreen(tagName);
-                });
+            browser.scrolledPage.then(function () {
+                browser.pixDiff.saveScreen('scrolledPage');
+            });
         });
 
         it('should save a scrolled screen region', function () {
-            var tagName = 'scrolledPageRegion',
-                headerElement = element(by.css('div h1'));
-
-            browser.executeScript('arguments[0].scrollIntoView();', headerElement.getWebElement())
-                .then(function () {
-                    browser.pixDiff.saveRegion(element(by.css('div h1')), tagName);
-                });
+            browser.scrolledPage.then(function () {
+                browser.pixDiff.saveRegion(headerElement, 'scrolledPageRegion');
+            });
         });
@@ -133,2 +130,3 @@ });
     describe('baseline', function () {
+
         beforeEach(function () {
@@ -144,4 +142,6 @@ browser.pixDiff = new PixDiff({
         it('should save a screen when baseline image not found', function () {
-            browser.pixDiff.checkScreen('baselineScreen').catch(function (err) {
-                expect(err.message).toContain('Image not found');
+            browser.pixDiff.checkScreen('baselineScreen').then(function () {
+                fail('should not be called');
+            }, function (error) {
+                expect(error.message).toContain('Image not found');
             });
@@ -155,6 +155,6 @@ });
         it('should save a screen region when baseline image not found', function () {
-            var headerElement = element(by.css('div h1'));
-
-            browser.pixDiff.checkRegion(headerElement, 'baselineRegion').catch(function (err) {
-                expect(err.message).toContain('Image not found');
+            browser.pixDiff.checkRegion(headerElement, 'baselineRegion').then(function () {
+                fail('should not be called');
+            }, function (error) {
+                expect(error.message).toContain('Image not found');
             });
@@ -164,4 +164,2 @@ });
         it('should use existing baseline image', function () {
-            var headerElement = element(by.css('div h1'));
-
             expect(browser.pixDiff.checkRegion(headerElement, 'baselineRegion')).toMatchScreen();
@@ -168,0 +166,0 @@ });

test/mocha.spec.js

@@ -10,2 +10,4 @@ 'use strict';
 
+    var headerElement = element(by.css('div h1'));
+
     beforeEach(function () {
@@ -36,3 +38,3 @@ browser.get(browser.baseUrl);
 
-            browser.pixDiff.saveRegion(element(by.css('div h1')), tagName).then(function () {
+            browser.pixDiff.saveRegion(headerElement, tagName).then(function () {
                 expect(fs.existsSync(__dirname + '/screenshots/' + tagName + '-chrome-800x600.png')).to.be.true;
@@ -43,3 +45,3 @@ });
         it('should match the page', function () {
-            browser.pixDiff.checkScreen('example-page-mocha').then(function (result) {
+            browser.pixDiff.checkScreen('examplePageMocha').then(function (result) {
                 expect(result.code).to.equal(blinkDiff.RESULT_IDENTICAL);
@@ -50,3 +52,3 @@ });
         it('should match the page with custom matcher', function () {
-            expect(browser.pixDiff.checkScreen('example-page-mocha')).to.matchScreen();
+            expect(browser.pixDiff.checkScreen('examplePageMocha')).to.matchScreen();
         });
@@ -61,37 +63,13 @@
         it('should not match the page with custom matcher', function () {
-            expect(browser.pixDiff.checkScreen('example-fail', {threshold: 1})).not.to.matchScreen();
+            expect(browser.pixDiff.checkScreen('exampleFail', {threshold: 1})).not.to.matchScreen();
         });
 
         it('should not crash with image not found', function () {
-            var errorThrown = false;
             browser.pixDiff.checkScreen('imageNotExist', {threshold: 1}).then(function () {
-                expect.fail();
-            }).catch(function () {
-                errorThrown = true;
-            }).then(function () {
-                expect(errorThrown).to.be.true;
+                fail('should not be called');
+            }, function (error) {
+                expect(error.message).to.contain('no such file or directory');
             });
         });
     });
-
-    describe('format image name', function() {
-
-        beforeEach(function () {
-            browser.pixDiff = new PixDiff({
-                basePath: 'test/screenshots',
-                width: 800,
-                height: 600,
-                formatImageOptions: {'env': 'TEST'},
-                formatImageName: '{env}_{tag}_{browserName}_{width}-{height}'
-            });
-        });
-
-        it('should save screen with formatted basename', function () {
-            var tagName = 'customName';
-
-            browser.pixDiff.saveScreen(tagName).then(function () {
-                expect(fs.existsSync(__dirname + '/screenshots/TEST_' + tagName + '_chrome_800-600.png')).to.be.true;
-            });
-        });
-    });
 });

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

46759

decreased by-0.99%

Lines of code

806

decreased by-2.18%

Number of lines in readme file

218

decreased by-0.46%

No dependency changes