fix: migrate png-img -> sharp

lib/browser/commands/assert-view/index.js

@@ -56,7 +56,8 @@ module.exports = (browser) => {
             ['allowViewportOverflow', 'compositeImage', 'screenshotDelay', 'selectorToScroll']
         );
         const currImgInst = await screenShooter.capture(page, screenshoterOpts);
-        const currImg = {path: temp.path(Object.assign(tempOpts, {suffix: '.png'})), size: currImgInst.getSize()};
+        const currSize = await currImgInst.getSize();
+        const currImg = {path: temp.path(Object.assign(tempOpts, {suffix: '.png'})), size: currSize};
         await currImgInst.save(currImg.path);
 
         const test = getTestContext(session.executionContext);

lib/core/browser/camera/index.js

@@ -19,38 +19,50 @@ module.exports = class Camera {
         this._calibration = calibration;
     }
 
-    captureViewportImage(page) {
-        return this._takeScreenshot()
-            .then((base64) => this._applyCalibration(Image.fromBase64(base64)))
-            .then((image) => this._cropToViewport(image, page));
+    async captureViewportImage(page) {
+        const base64 = await this._takeScreenshot();
+        const image = Image.fromBase64(base64);
+
+        const {width, height} = await image.getSize();
+        const imageArea = {left: 0, top: 0, width, height};
+
+        const calibratedArea = this._calibrateArea(imageArea);
+        const viewportCroppedArea = this._cropAreaToViewport(calibratedArea, page);
+
+        if (viewportCroppedArea.width !== width || viewportCroppedArea.height !== height) {
+            await image.crop(viewportCroppedArea);
+        }
+
+        return image;
     }
 
-    _applyCalibration(image) {
+    _calibrateArea(imageArea) {
         if (!this._calibration) {
-            return image;
+            return imageArea;
         }
 
         const {left, top} = this._calibration;
-        const {width, height} = image.getSize();
 
-        return image.crop({left, top, width: width - left, height: height - top});
+        return {left, top, width: imageArea.width - left, height: imageArea.height - top};
     }
 
-    _cropToViewport(image, page) {
+    _cropAreaToViewport(imageArea, page) {
         if (!page) {
-            return image;
+            return imageArea;
         }
 
-        const isFullPage = utils.isFullPage(image, page, this._screenshotMode);
+        const isFullPage = utils.isFullPage(imageArea, page, this._screenshotMode);
         const cropArea = _.clone(page.viewport);
 
         if (!isFullPage) {
-            _.extend(cropArea, {
-                top: 0,
-                left: 0
-            });
+            _.extend(cropArea, {top: 0, left: 0});
         }
 
-        return image.crop(cropArea, {scaleFactor: page.pixelRatio});
+        return {
+            left: (imageArea.left + cropArea.left) * page.pixelRatio,
+            top: (imageArea.top + cropArea.top) * page.pixelRatio,
+            width: Math.min(imageArea.width - cropArea.left, cropArea.width) * page.pixelRatio,
+            height: Math.min(imageArea.height - cropArea.top, cropArea.height) * page.pixelRatio
+        };
     }
 };

lib/core/browser/camera/utils.js

@@ -1,24 +1,27 @@
 'use strict';
 
-exports.isFullPage = (image, page, screenshotMode) => {
+exports.isFullPage = (imageArea, page, screenshotMode) => {
     switch (screenshotMode) {
         case 'fullpage': return true;
         case 'viewport': return false;
-        case 'auto': return compareDimensions(image, page);
+        case 'auto': return compareDimensions(imageArea, page);
     }
 };
 
 /**
- * @param {Image} image - PngImg wrapper
+ * @param {Object} imageArea - area
+ * @param {number} imageArea.left - left offset
+ * @param {number} imageArea.top - top offset
+ * @param {number} imageArea.width - area width
+ * @param {number} imageArea.height - area height
  * @param {Object} page - capture meta information object
  * @returns {boolean}
  * @private
  */
-function compareDimensions(image, page) {
+function compareDimensions(imageArea, page) {
     const pixelRatio = page.pixelRatio;
     const documentWidth = page.documentWidth * pixelRatio;
     const documentHeight = page.documentHeight * pixelRatio;
-    const imageSize = image.getSize();
 
-    return imageSize.height >= documentHeight && imageSize.width >= documentWidth;
+    return imageArea.height >= documentHeight && imageArea.width >= documentWidth;
 }

lib/core/browser/client-scripts/index.js

@@ -66,10 +66,10 @@ function prepareScreenshotUnsafe(areas, opts) {
         return rect;
     }
 
-    var viewportHeight = document.documentElement.clientHeight,
-        viewportWidth = document.documentElement.clientWidth,
-        documentHeight = document.documentElement.scrollHeight,
+    var viewportWidth = document.documentElement.clientWidth,
+        viewportHeight = document.documentElement.clientHeight,
         documentWidth = document.documentElement.scrollWidth,
+        documentHeight = document.documentElement.scrollHeight,
         viewPort = new Rect({
             left: util.getScrollLeft(scrollElem),
             top: util.getScrollTop(scrollElem),
@@ -97,8 +97,8 @@ function prepareScreenshotUnsafe(areas, opts) {
         captureArea: rect.serialize(),
         ignoreAreas: findIgnoreAreas(opts.ignoreSelectors, scrollElem),
         viewport: {
-            top: util.getScrollTop(scrollElem),
             left: util.getScrollLeft(scrollElem),
+            top: util.getScrollTop(scrollElem),
             width: Math.round(viewportWidth),
             height: Math.round(viewportHeight)
         },

lib/core/browser/client-scripts/rect.js

@@ -45,8 +45,8 @@ Rect.prototype = {
 
     translate: function(x, y) {
         return new Rect({
-            top: this.top + y,
             left: this.left + x,
+            top: this.top + y,
             width: this.width,
             height: this.height
         });
@@ -80,8 +80,8 @@ Rect.prototype = {
 
     serialize: function() {
         return {
-            top: this.top,
             left: this.left,
+            top: this.top,
             width: this.width,
             height: this.height
         };

lib/core/calibrator/index.js

@@ -27,10 +27,10 @@ module.exports = class Calibrator {
         return Promise.resolve(browser.open('about:blank'))
             .then(() => browser.evalScript(clientScriptCalibrate))
             .then((features) => [features, browser.captureViewportImage()])
-            .spread((features, image) => {
+            .spread(async (features, image) => {
                 const {innerWidth, pixelRatio} = features;
                 const hasPixelRatio = Boolean(pixelRatio && pixelRatio > 1.0);
-                const imageFeatures = this._analyzeImage(image, {calculateColorLength: hasPixelRatio});
+                const imageFeatures = await this._analyzeImage(image, {calculateColorLength: hasPixelRatio});
 
                 if (!imageFeatures) {
                     return Promise.reject(new CoreError(
@@ -50,11 +50,11 @@ module.exports = class Calibrator {
             });
     }
 
-    _analyzeImage(image, params) {
-        const imageHeight = image.getSize().height;
+    async _analyzeImage(image, params) {
+        const imageHeight = (await image.getSize()).height;
 
         for (var y = 0; y < imageHeight; y++) {
-            var result = analyzeRow(y, image, params);
+            var result = await analyzeRow(y, image, params);
 
             if (result) {
                 return result;
@@ -65,8 +65,8 @@ module.exports = class Calibrator {
     }
 };
 
-function analyzeRow(row, image, params = {}) {
-    const markerStart = findMarkerInRow(row, image, DIRECTION.FORWARD);
+async function analyzeRow(row, image, params = {}) {
+    const markerStart = await findMarkerInRow(row, image, DIRECTION.FORWARD);
 
     if (markerStart === -1) {
         return null;
@@ -78,14 +78,14 @@ function analyzeRow(row, image, params = {}) {
         return result;
     }
 
-    const markerEnd = findMarkerInRow(row, image, DIRECTION.REVERSE);
+    const markerEnd = await findMarkerInRow(row, image, DIRECTION.REVERSE);
     const colorLength = markerEnd - markerStart + 1;
 
     return _.extend(result, {colorLength});
 }
 
-function findMarkerInRow(row, image, searchDirection) {
-    const imageWidth = image.getSize().width;
+async function findMarkerInRow(row, image, searchDirection) {
+    const imageWidth = (await image.getSize()).width;
     const searchColor = {R: 148, G: 250, B: 0};
 
     if (searchDirection === DIRECTION.REVERSE) {
@@ -94,26 +94,31 @@ function findMarkerInRow(row, image, searchDirection) {
         return searchForward_();
     }
 
-    function searchForward_() {
+    async function searchForward_() {
         for (var x = 0; x < imageWidth; x++) {
-            if (compare_(x)) {
+            var isSame = await compare_(x);
+
+            if (isSame) {
                 return x;
             }
         }
         return -1;
     }
 
-    function searchReverse_() {
+    async function searchReverse_() {
         for (var x = imageWidth - 1; x >= 0; x--) {
-            if (compare_(x)) {
+            var isSame = await compare_(x);
+
+            if (isSame) {
                 return x;
             }
         }
         return -1;
     }
 
-    function compare_(x) {
-        var color = pickRGB(image.getRGBA(x, row));
+    async function compare_(x) {
+        var pixel = await image.getRGBA(x, row);
+        var color = pickRGB(pixel);
         return looksSame.colors(color, searchColor);
     }
 }