feat(image-comparison): implement for elements and rectangles

Author: vchimev

lib/appium-driver.d.ts

@@ -5,6 +5,7 @@ import { UIElement } from "./ui-element";
 import { Direction } from "./direction";
 import { Locator } from "./locators";
 import { INsCapabilities } from "./interfaces/ns-capabilities";
+import { IRectangle } from "./interfaces/rectangle";
 import { Point } from "./point";
 import { ImageHelper } from "./image-helper";
 export declare class AppiumDriver {
@@ -121,6 +122,8 @@ export declare class AppiumDriver {
     swipe(y: number, x: number, yOffset: number, inertia?: number, xOffset?: number): Promise<void>;
     source(): Promise<any>;
     sessionId(): Promise<any>;
+    compareElement(element: UIElement, imageName: string): Promise<boolean>;
+    compareRectangle(rect: IRectangle, imageName: string, timeOutSeconds?: number, tollerance?: number): Promise<boolean>;
     compareScreen(imageName: string, timeOutSeconds?: number, tollerance?: number): Promise<boolean>;
     takeScreenshot(fileName: string): Promise<string>;
     logScreenshot(fileName: string): Promise<string>;

lib/appium-driver.ts

@@ -22,6 +22,7 @@ import {
     scroll
 } from "./utils";
 import { INsCapabilities } from "./interfaces/ns-capabilities";
+import { IRectangle } from "./interfaces/rectangle";
 import { Point } from "./point";
 import { ImageHelper } from "./image-helper";
 import { ImageOptions } from "./image-options"
@@ -268,6 +269,77 @@ export class AppiumDriver {
         return await this.driver.getSessionId();
     }
 
+    public async compareElement(element: UIElement, imageName: string, ) {
+        return this.compareRectangle(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);
+        }
+
+        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.compareRectangle(rect, 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.compareRectangle(rect, actualImage, expectedImage, diffImage, tollerance);
+                counter++;
+            }
+        } else {
+            if (fileExists(diffImage)) {
+                unlinkSync(diffImage);
+            }
+            if (fileExists(actualImage)) {
+                unlinkSync(actualImage);
+            }
+        }
+
+        return result;
+    }
+
     public async compareScreen(imageName: string, timeOutSeconds: number = 3, tollerance: number = 0.01) {
         if (!imageName.endsWith(AppiumDriver.pngFileExt)) {
             imageName = imageName.concat(AppiumDriver.pngFileExt);
@@ -281,14 +353,14 @@ export class AppiumDriver {
         if (!fileExists(expectedImage)) {
             if (!this._storageByPlatform) {
                 this._storageByPlatform = getStorageByPlatform(this._args);
-            }  
-            expectedImage = resolve(this._storageByPlatform, imageName);  
+            }
+            expectedImage = resolve(this._storageByPlatform, imageName);
         }
-        
+
         if (!fileExists(expectedImage)) {
             expectedImage = resolve(this._storageByDeviceName, imageName);
         }
-    
+
         if (!this._logPath) {
             this._logPath = getReportPath(this._args);
         }

lib/image-helper.d.ts

@@ -19,5 +19,6 @@ export declare class ImageHelper {
         y: any;
     };
     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>;
 }

lib/image-helper.ts

@@ -76,6 +76,25 @@ 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({
+
+            imageAPath: actual,
+            imageBPath: expected,
+            imageOutputPath: output,
+            imageOutputLimit: this.imageOutputLimit(),
+            thresholdType: typeThreshold,
+            threshold: valueThreshold,
+            delta: this.delta(),
+
+            cropImageA: rect,
+            verbose: this._args.verbose,
+        });
+
+        const result = this.runDiff(diff, output);
+        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({

lib/ui-element.d.ts

@@ -18,7 +18,7 @@ export declare class UIElement {
      */
     tap(): Promise<any>;
     /**
-     * double tap
+     * Double tap on element
      */
     doubleTap(): Promise<any>;
     /**
@@ -29,6 +29,9 @@ export declare class UIElement {
      * Get size of element
      */
     size(): Promise<Point>;
+    /**
+     * Get text of element
+     */
     text(): Promise<any>;
     /**
      * Get web driver element
@@ -52,7 +55,20 @@ export declare class UIElement {
      * @param wait
      */
     waitForExist(wait?: number): Promise<any>;
+    /**
+     * Get attribute of element
+     * @param attr
+     */
     getAttribute(attr: any): Promise<any>;
+    /**
+     * Get rectangle of element
+     */
+    getRectangle(): Promise<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
     /**
      * Scroll with offset from elemnt with minimum inertia
      * @param direction

lib/ui-element.ts

@@ -1,10 +1,10 @@
 import { Point } from "./point";
 import { Direction } from "./direction";
+import { IRectangle } from "./interfaces/rectangle";
 import { calculateOffset } from "./utils";
 
 export class UIElement {
-    constructor(private _element: any, private _driver: any, private _wd: any, private _webio: any, private _searchMethod: string, private _searchParams: string, private _index?: number) {
-    }
+    constructor(private _element: any, private _driver: any, private _wd: any, private _webio: any, private _searchMethod: string, private _searchParams: string, private _index?: number) { }
 
     /**
      * Click on element
@@ -21,7 +21,7 @@ export class UIElement {
     }
 
     /**
-     * double tap
+     * Double tap on element
      */
     public async doubleTap() {
         return await this._driver.execute('mobile: doubleTap', { element: (await this.element()).value.ELEMENT });
@@ -46,6 +46,9 @@ export class UIElement {
         return point;
     }
 
+    /**
+     * Get text of element
+     */
     public async text() {
         return await (await this.element()).text();
     }
@@ -89,10 +92,24 @@ export class UIElement {
         return this._webio.waitForExist(this._searchParams, wait, false);
     }
 
+    /**
+     * Get attribute of element
+     * @param attr
+     */
     public async getAttribute(attr) {
         return await (await this.element()).getAttribute(attr);
     }
 
+    /**
+     * Get rectangle of element
+     */
+    public async getRectangle() {
+        const location = await this.location();
+        const size = await this.size();
+        const rect = { x: location.x, y: location.y, width: size.y, height: size.x };
+        return rect;
+    }
+
     /**
      * Scroll with offset from elemnt with minimum inertia
      * @param direction
@@ -112,7 +129,7 @@ export class UIElement {
 
         if (direction === Direction.down) {
             y = (location.y + size.y) - 15;
-            
+
             if (!this._webio.isIOS) {
                 if (yOffset === 0) {
                     yOffset = location.y + size.y - 15;
@@ -197,7 +214,7 @@ export class UIElement {
     public async hold() {
         let action = new this._wd.TouchAction(this._driver);
         action
-            .longPress({el: await this.element()})
+            .longPress({ el: await this.element() })
             .release();
         await action.perform();
         await this._driver.sleep(150);