feat(image-comparison): first time capture of element/rectangle

vchimev · vchimev · commit d11765545289 · 2017-11-29T14:17:23.000+02:00
diff --git a/lib/appium-driver.d.ts b/lib/appium-driver.d.ts
@@ -123,8 +123,10 @@ export declare class AppiumDriver {
     source(): Promise<any>;
     sessionId(): Promise<any>;
     compareElement(element: UIElement, imageName: string): Promise<boolean>;
-    compareRectangle(rect: IRectangle, imageName: string, timeOutSeconds?: number, tollerance?: number): Promise<boolean>;
+    compareRectangles(rect: IRectangle, imageName: string, timeOutSeconds?: number, tollerance?: number): Promise<boolean>;
     compareScreen(imageName: string, timeOutSeconds?: number, tollerance?: number): Promise<boolean>;
+    compare(imageName: string, timeOutSeconds?: number, tollerance?: number, rect?: IRectangle): Promise<boolean>;
+    prepareImageToCompare(filePath: string, rect: IRectangle): Promise<void>;
     takeScreenshot(fileName: string): Promise<string>;
     logScreenshot(fileName: string): Promise<string>;
     logPageSource(fileName: string): Promise<void>;
@@ -134,4 +136,5 @@ export declare class AppiumDriver {
     quit(): Promise<void>;
     private convertArrayToUIElements(array, searchM, args);
     private static configureLogging(driver, verbose);
+    private getExpectedImagePath(imageName);
 }
diff --git a/lib/appium-driver.ts b/lib/appium-driver.ts
@@ -11,6 +11,7 @@ import { UIElement } from "./ui-element";
 import { Direction } from "./direction";
 import { Locator } from "./locators";
 import {
+    addExt,
     log,
     getStorageByPlatform,
     getStorageByDeviceName,
@@ -19,7 +20,7 @@ import {
     getAppPath,
     getReportPath,
     calculateOffset,
-    scroll
+    scroll,
 } from "./utils";
 import { INsCapabilities } from "./interfaces/ns-capabilities";
 import { IRectangle } from "./interfaces/rectangle";
@@ -270,141 +271,81 @@ export class AppiumDriver {
     }
 
     public async compareElement(element: UIElement, imageName: string, ) {
-        return this.compareRectangle(await element.getRectangle(), imageName);
+        return this.compareRectangles(await element.getRectangle(), imageName);
     }
 
-    public async compareRectangle(rect: IRectangle, imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01) {
-        if (!imageName.endsWith(AppiumDriver.pngFileExt)) {
-            imageName = imageName.concat(AppiumDriver.pngFileExt);
-        }
-
-        if (!this._storageByDeviceName) {
-            this._storageByDeviceName = getStorageByDeviceName(this._args);
-        }
+    public async compareRectangles(rect: IRectangle, imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01) {
+        return this.compare(imageName, timeOutSeconds, tollerance, rect);
+    }
 
-        let expectedImage = resolve(this._storageByDeviceName, imageName);
-        if (!fileExists(expectedImage)) {
-            if (!this._storageByPlatform) {
-                this._storageByPlatform = getStorageByPlatform(this._args);
-            }
-            expectedImage = resolve(this._storageByPlatform, imageName);
-        }
+    public async compareScreen(imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01) {
+        return this.compare(imageName, timeOutSeconds, tollerance);
+    }
 
-        if (!fileExists(expectedImage)) {
-            expectedImage = resolve(this._storageByDeviceName, imageName);
-        }
+    public async compare(imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01, rect?: IRectangle) {
 
         if (!this._logPath) {
             this._logPath = getReportPath(this._args);
         }
 
-        expectedImage = resolve(this._storageByDeviceName, imageName);
+        imageName = addExt(imageName, AppiumDriver.pngFileExt);
 
-        // Firts capture of screen when the expected image is not available
-        if (!fileExists(expectedImage)) {
-            await this.takeScreenshot(resolve(this._storageByDeviceName, imageName.replace(".", "_actual.")));
-            console.log("Remove the 'actual' suffix to continue using the image as expected one ", expectedImage);
-            let eventStartTime = Date.now().valueOf();
-            let counter = 1;
-            timeOutSeconds *= 1000;
+        const pathExpectedImage = this.getExpectedImagePath(imageName);
 
-            while ((Date.now().valueOf() - eventStartTime) <= timeOutSeconds) {
-                let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual" + "_" + counter + ".")));
-                counter++;
+        // First time capture
+        if (!fileExists(pathExpectedImage)) {
+            const pathActualImage = resolve(this._storageByDeviceName, imageName.replace(".", "_actual."));
+            await this.takeScreenshot(pathActualImage);
+
+            if (rect) {
+                await this._imageHelper.clipRectangleImage(rect, pathActualImage);
             }
 
-            // return false;
+            console.log("Remove the 'actual' suffix to continue using the image as expected one ", pathExpectedImage);
+            return false;
         }
 
-        let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual.")));
-        let diffImage = actualImage.replace("actual", "diff");
-        let result = await this._imageHelper.compareRectangle(rect, actualImage, expectedImage, diffImage, tollerance);
+        // Compare
+        let pathActualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual.")));
+        const pathDiffImage = pathActualImage.replace("actual", "diff");
+
+        await this.prepareImageToCompare(pathActualImage, rect);
+        let result = await this._imageHelper.compareImages(pathActualImage, pathExpectedImage, pathDiffImage, tollerance);
+
+        // Iterate
         if (!result) {
-            let eventStartTime = Date.now().valueOf();
+            const eventStartTime = Date.now().valueOf();
             let counter = 1;
             timeOutSeconds *= 1000;
             while ((Date.now().valueOf() - eventStartTime) <= timeOutSeconds && !result) {
-                let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual" + "_" + counter + ".")));
-                result = await this._imageHelper.compareRectangle(rect, actualImage, expectedImage, diffImage, tollerance);
+                const pathActualImageConter = resolve(this._logPath, imageName.replace(".", "_actual_" + counter + "."));
+                pathActualImage = await this.takeScreenshot(pathActualImageConter);
+
+                await this.prepareImageToCompare(pathActualImage, rect);
+                result = await this._imageHelper.compareImages(pathActualImage, pathExpectedImage, pathDiffImage, tollerance);
                 counter++;
             }
         } else {
-            if (fileExists(diffImage)) {
-                unlinkSync(diffImage);
+            if (fileExists(pathDiffImage)) {
+                unlinkSync(pathDiffImage);
             }
-            if (fileExists(actualImage)) {
-                unlinkSync(actualImage);
+            if (fileExists(pathActualImage)) {
+                unlinkSync(pathActualImage);
             }
         }
 
+        this._imageHelper.imageCropRect = undefined;
         return result;
     }
 
-    public async compareScreen(imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01) {
-        if (!imageName.endsWith(AppiumDriver.pngFileExt)) {
-            imageName = imageName.concat(AppiumDriver.pngFileExt);
-        }
-
-        if (!this._storageByDeviceName) {
-            this._storageByDeviceName = getStorageByDeviceName(this._args);
-        }
-
-        let expectedImage = resolve(this._storageByDeviceName, imageName);
-        if (!fileExists(expectedImage)) {
-            if (!this._storageByPlatform) {
-                this._storageByPlatform = getStorageByPlatform(this._args);
-            }
-            expectedImage = resolve(this._storageByPlatform, imageName);
-        }
-
-        if (!fileExists(expectedImage)) {
-            expectedImage = resolve(this._storageByDeviceName, imageName);
-        }
-
-        if (!this._logPath) {
-            this._logPath = getReportPath(this._args);
-        }
-
-        expectedImage = resolve(this._storageByDeviceName, imageName);
-
-        // Firts capture of screen when the expected image is not available
-        if (!fileExists(expectedImage)) {
-            await this.takeScreenshot(resolve(this._storageByDeviceName, imageName.replace(".", "_actual.")));
-            console.log("Remove the 'actual' suffix to continue using the image as expected one ", expectedImage);
-            let eventStartTime = Date.now().valueOf();
-            let counter = 1;
-            timeOutSeconds *= 1000;
-
-            while ((Date.now().valueOf() - eventStartTime) <= timeOutSeconds) {
-                let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual" + "_" + counter + ".")));
-                counter++;
-            }
-
-            return false;
-        }
-
-        let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual.")));
-        let diffImage = actualImage.replace("actual", "diff");
-        let result = await this._imageHelper.compareImages(actualImage, expectedImage, diffImage, tollerance);
-        if (!result) {
-            let eventStartTime = Date.now().valueOf();
-            let counter = 1;
-            timeOutSeconds *= 1000;
-            while ((Date.now().valueOf() - eventStartTime) <= timeOutSeconds && !result) {
-                let actualImage = await this.takeScreenshot(resolve(this._logPath, imageName.replace(".", "_actual" + "_" + counter + ".")));
-                result = await this._imageHelper.compareImages(actualImage, expectedImage, diffImage, tollerance);
-                counter++;
-            }
+    public async prepareImageToCompare(filePath: string, rect: IRectangle) {
+        if (rect) {
+            await this._imageHelper.clipRectangleImage(rect, filePath);
+            const rectToCrop = { x: 0, y: 0, width: undefined, height: undefined };
+            this._imageHelper.imageCropRect = rectToCrop;
         } else {
-            if (fileExists(diffImage)) {
-                unlinkSync(diffImage);
-            }
-            if (fileExists(actualImage)) {
-                unlinkSync(actualImage);
-            }
+            this._imageHelper.imageCropRect = ImageHelper.cropImageDefault(this._args);
         }
-
-        return result;
     }
 
     public takeScreenshot(fileName: string) {
@@ -529,4 +470,26 @@ export class AppiumDriver {
             log(" > " + meth.magenta + path + " " + (data || "").grey, verbose);
         });
     };
+
+    private getExpectedImagePath(imageName: string) {
+
+        if (!this._storageByDeviceName) {
+            this._storageByDeviceName = getStorageByDeviceName(this._args);
+        }
+
+        let pathExpectedImage = resolve(this._storageByDeviceName, imageName);
+
+        if (!fileExists(pathExpectedImage)) {
+            if (!this._storageByPlatform) {
+                this._storageByPlatform = getStorageByPlatform(this._args);
+            }
+            pathExpectedImage = resolve(this._storageByPlatform, imageName);
+        }
+
+        if (!fileExists(pathExpectedImage)) {
+            pathExpectedImage = resolve(this._storageByDeviceName, imageName);
+        }
+
+        return pathExpectedImage;
+    }
 }
diff --git a/lib/image-helper.d.ts b/lib/image-helper.d.ts
@@ -6,19 +6,21 @@ export declare class ImageHelper {
     private _cropImageRect;
     private _blockOutAreas;
     constructor(_args: INsCapabilities);
-    readonly cropImageRect: IRectangle;
-    cropImageRec: IRectangle;
+    imageCropRect: IRectangle;
     blockOutAreas: IRectangle[];
     imageOutputLimit(): ImageOptions;
     thresholdType(): ImageOptions;
     threshold(): number;
     delta(): number;
-    private static getOffsetPixels(args);
-    static cropImageDefaultParams(_args: INsCapabilities): {
+    static cropImageDefault(_args: INsCapabilities): {
         x: number;
         y: any;
+        width: any;
+        height: any;
     };
+    private static getOffsetPixels(args);
     private runDiff(diffOptions, diffImage);
-    compareRectangle(rect: IRectangle, actual: string, expected: string, output: string, valueThreshold?: number, typeThreshold?: any): Promise<boolean>;
     compareImages(actual: string, expected: string, output: string, valueThreshold?: number, typeThreshold?: any): Promise<boolean>;
+    clipRectangleImage(rect: IRectangle, path: string): Promise<{}>;
+    readImage(path: string): Promise<any>;
 }
diff --git a/lib/image-helper.ts b/lib/image-helper.ts
@@ -1,7 +1,9 @@
-import * as blinkDiff from "blink-diff";
+import * as BlinkDiff from "blink-diff";
+import * as PngJsImage from "pngjs-image";
 import { ImageOptions } from "./image-options";
 import { INsCapabilities } from "./interfaces/ns-capabilities";
 import { IRectangle } from "./interfaces/rectangle";
+import { Point } from "./point";
 
 export class ImageHelper {
 
@@ -11,11 +13,11 @@ export class ImageHelper {
     constructor(private _args: INsCapabilities) {
     }
 
-    get cropImageRect() {
+    get imageCropRect(): IRectangle {
         return this._cropImageRect;
     }
 
-    set cropImageRec(rect: IRectangle) {
+    set imageCropRect(rect: IRectangle) {
         this._cropImageRect = rect;
     }
 
@@ -43,15 +45,15 @@ export class ImageHelper {
         return 20;
     }
 
-    private static getOffsetPixels(args: INsCapabilities) {
-        return args.device.config ? args.device.config.offsetPixels : 0
+    public static cropImageDefault(_args: INsCapabilities) {
+        return { x: 0, y: ImageHelper.getOffsetPixels(_args), width: undefined, height: undefined };
     }
 
-    public static cropImageDefaultParams(_args: INsCapabilities) {
-        return { x: 0, y: ImageHelper.getOffsetPixels(_args) };
+    private static getOffsetPixels(args: INsCapabilities) {
+        return args.device.config ? args.device.config.offsetPixels : 0
     }
 
-    private runDiff(diffOptions: blinkDiff, diffImage: string) {
+    private runDiff(diffOptions: BlinkDiff, diffImage: string) {
         return new Promise<boolean>((resolve, reject) => {
             diffOptions.run(function (error, result) {
                 if (error) {
@@ -76,8 +78,8 @@ export class ImageHelper {
         });
     }
 
-    public compareRectangle(rect: IRectangle, actual: string, expected: string, output: string, valueThreshold: number = this.threshold(), typeThreshold: any = ImageOptions.pixel) {
-        let diff = new blinkDiff({
+    public compareImages(actual: string, expected: string, output: string, valueThreshold: number = this.threshold(), typeThreshold: any = ImageOptions.pixel) {
+        const diff = new BlinkDiff({
 
             imageAPath: actual,
             imageBPath: expected,
@@ -87,34 +89,40 @@ export class ImageHelper {
             threshold: valueThreshold,
             delta: this.delta(),
 
-            cropImageA: rect,
+            cropImageA: this._cropImageRect,
+            cropImageB: this._cropImageRect,
+            blockOut: this._blockOutAreas,
             verbose: this._args.verbose,
         });
 
         const result = this.runDiff(diff, output);
+        this._blockOutAreas = undefined;
         return result;
     }
 
-    public compareImages(actual: string, expected: string, output: string, valueThreshold: number = this.threshold(), typeThreshold: any = ImageOptions.pixel) {
-        const rectToCrop = this._cropImageRect || ImageHelper.cropImageDefaultParams(this._args);
-        let diff = new blinkDiff({
-
-            imageAPath: actual,
-            imageBPath: expected,
-            imageOutputPath: output,
-            imageOutputLimit: this.imageOutputLimit(),
-            thresholdType: typeThreshold,
-            threshold: valueThreshold,
-            delta: this.delta(),
+    public async clipRectangleImage(rect: IRectangle, path: string) {
+        let imageToClip: PngJsImage;
+        imageToClip = await this.readImage(path);
+        imageToClip.clip(rect.x, rect.y, rect.width, rect.height);
+        return new Promise((resolve, reject) => {
+            imageToClip.writeImage(path, (err) => {
+                if (err) {
+                    return reject(err);
+                }
+                return resolve();
+            });
 
-            cropImageA: rectToCrop,
-            cropImageB: rectToCrop,
-            blockOut: this._blockOutAreas,
-            verbose: this._args.verbose,
-        });
+        })
+    }
 
-        const result = this.runDiff(diff, output);
-        this._blockOutAreas = undefined;
-        return result;
+    public readImage(path: string): Promise<any> {
+        return new Promise((resolve, reject) => {
+            PngJsImage.readImage(path, (err, image) => {
+                if (err) {
+                    return reject(err);
+                }
+                return resolve(image);
+            });
+        })
     }
 }
diff --git a/lib/utils.d.ts b/lib/utils.d.ts
@@ -33,3 +33,4 @@ export declare function calculateOffset(direction: any, y: number, yOffset: numb
  * @param xOffset
  */
 export declare function scroll(wd: any, driver: any, direction: Direction, isIOS: boolean, y: number, x: number, yOffset: number, xOffset: number, verbose: any): Promise<void>;
+export declare const addExt: (fileName: string, ext: string) => string;
diff --git a/lib/utils.ts b/lib/utils.ts
