tests: include parse checkout (#7410)

e2e/config/mocha.opts

@@ -1,4 +1,4 @@
---timeout 300000
+--timeout 999999
 --recursive e2e
 --reporter mochawesome 
 --reporter-options quiet=true,html=true,inline=true,autoOpen=true

e2e/ui-tests-app/.gitignore

@@ -31,3 +31,7 @@ typings/
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+# tests
+mochawesome-report
+e2e/resources/images/uitestsapp/*

e2e/ui-tests-app/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Mocha Tests",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--colors",
+                "--opts",
+                "../config/mocha.opts",
+                "--grep=bottom-navigation",
+                "-a",
+
+            ],
+            "internalConsoleOptions": "openOnSessionStart"
+        }
+    ]
+}

e2e/ui-tests-app/README.md

@@ -0,0 +1,66 @@
+***e2e tests execution***
+
+1. Local setup
+    - install appium and all requirments related to how to use `nativescript-dev-appium` plugin
+    - download images: 
+    
+        ```npm run load-images Emulator-Api23-Default```
+
+        or load multiple folders:
+
+        ``` npm run load-images Emulator-Api23-Default Emulator-Google-Api28```
+
+        This command will download https://github.com/NativeScript/functional-tests-images/tree/master/uitestsapp and sparse all passed directories [emulator-name|simulator-name] [emulator-name|simulator-name] [emulator-name|simulator-name]
+    - name your device so that it matches folder name, respectively api level and density of emulators. 
+    
+        You can also use scripts:
+    
+        `npm run update-emulators` to update your emulator density. 
+    
+        If you need to download system image and create emulator use:
+
+        `npm run update-emulators -u`
+2. Test execution
+    - Run test compilation in separate terminal and don't kill it.
+    
+        `npm run test-watch`
+    - It is highly recommended during the development to use 
+    
+        `npm run test [android|ios]` along with `tns run [android|ios]`. This command will use already installed app on the device.
+        For example: Open terminal1 and run: `tns run android` and open new terminal2 and run: `npm run test android`
+3. Debug test.
+    - Run:
+
+        `npm run test-debug [android|ios]`
+in separate console and don't kill it. This command will start appium server and driver and use the installed app on the device but it will not execute tests.
+    - Go to vs code debugging and use a config like:
+
+    ```
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug Tests",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--colors",
+                "--opts",
+                "../config/mocha.opts",
+                "--attachToDebug",
+            ],
+            "internalConsoleOptions": "openOnSessionStart"
+        }
+
+***mocha options***
+
+mocha opt file is plased in "../config/mocha.opts".
+
+       --timeout 999999
+       --recursive e2e
+       --reporter mochawesome 
+       --reporter-options quiet=true,html=true,inline=true,autoOpen=true
+       --exit
+
+
+- grep particular suites: "--grep=tabs-tab(s-\\w+)-suite"

e2e/ui-tests-app/app/tabs/main-page.ts

@@ -10,15 +10,15 @@ export function pageLoaded(args: EventData) {
 }
 
 export function loadExamples() {
-    const examples = new Map<string, string>();
-    examples.set("bottom-navigation", "tabs/default");
-    examples.set("issue-5470", "bottom-navigation/issue-5470");
-    examples.set("background-color", "bottom-navigation/background-color");
-    examples.set("color", "bottom-navigation/color");
-    examples.set("icon-title-placement", "bottom-navigation/icon-title-placement");
-    examples.set("icon-change", "bottom-navigation/icon-change");
-    examples.set("swipe-enabled", "tabs/swipe-enabled");
-    examples.set("tabs-position", "tabs/tabs-position");
+    const examples = new Map<string, string>();    
+    examples.set("default", "tabs/default-page");
+    examples.set("issue-5470", "tabs/issue-5470-page");
+    examples.set("background-color", "tabs/background-color-page");
+    examples.set("color", "tabs/color-page");
+    examples.set("icon-title-placement", "tabs/icon-title-placement-page");
+    examples.set("icon-change", "tabs/icon-change-page");
+    examples.set("swipe-enabled", "tabs/swipe-enabled-page");
+    examples.set("tabs-position", "tabs/tabs-position-page");
     
     return examples;
 }

e2e/ui-tests-app/e2e/config/appium.capabilities.json

@@ -1,122 +0,0 @@
-{
-    "android19": {
-        "platformName": "Android",
-        "platformVersion": "4.4",
-        "deviceName": "Emulator-Api19-Default",
-        "avd": "Emulator-Api19-Default",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android21": {
-        "platformName": "Android",
-        "platformVersion": "5.0",
-        "deviceName": "Emulator-Api21-Default",
-        "avd": "Emulator-Api21-Default",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android23": {
-        "platformName": "Android",
-        "platformVersion": "6.0",
-        "deviceName": "Emulator-Api23-Default",
-        "avd": "Emulator-Api23-Default",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android24": {
-        "platformName": "Android",
-        "platformVersion": "7.0",
-        "deviceName": "Emulator-Api24-Default",
-        "avd": "Emulator-Api24-Default",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android25": {
-        "platformName": "Android",
-        "platformVersion": "7.1",
-        "deviceName": "Emulator-Api25-Google",
-        "avd": "Emulator-Api25-Google",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android26": {
-        "platformName": "Android",
-        "platformVersion": "8.0",
-        "deviceName": "Emulator-Api26-Google",
-        "avd": "Emulator-Api26-Google",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android27": {
-        "platformName": "Android",
-        "platformVersion": "27",
-        "deviceName": "Emulator-Api27-Google",
-        "avd": "Emulator-Api27-Google",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "android28": {
-        "platformName": "Android",
-        "platformVersion": "28",
-        "deviceName": "Emulator-Api28-Google",
-        "avd": "Emulator-Api28-Google",
-        "lt": 60000,
-        "newCommandTimeout": 720,
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "sim.iPhone7": {
-        "platformName": "iOS",
-        "platformVersion": "/12.*/",
-        "deviceName": "iPhone 7",
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "sim.iPhone8": {
-        "platformName": "iOS",
-        "platformVersion": "/12*/",
-        "deviceName": "iPhone 8",
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "sim.iPhoneX": {
-        "platformName": "iOS",
-        "platformVersion": "/12*/",
-        "deviceName": "iPhone X",
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    },
-    "sim.iPhoneXS": {
-        "platformName": "ios",
-        "platformVersion": "/12*/",
-        "deviceName": "iPhone XS",
-        "noReset": false,
-        "fullReset": false,
-        "app": ""
-    }
-}

e2e/ui-tests-app/e2e/config/mocha.opts

@@ -1,5 +0,0 @@
---timeout 999999
---recursive e2e
---reporter mochawesome 
---reporter-options quiet=true,html=true,inline=true,autoOpen=true
---exit

e2e/ui-tests-app/e2e/helpers/image-helper.ts

@@ -2,32 +2,62 @@ import { AppiumDriver, logError, IRectangle, UIElement } from "nativescript-dev-
 import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 import { assert } from "chai";
 
+interface IImageCompareOptions {
+    imageName?: string;
+    timeOutSeconds?: number;
+    tolerance?: number;
+    toleranceType?: ImageOptions;
+    waitOnCreatingInitialSnapshot?: number;
+}
+
 export class ImageHelper {
+
     private _imagesResults = new Map<string, boolean>();
+    private _testName: string;
 
-    constructor(private _driver: AppiumDriver, waitOnCreatingInitialSnapshot: number = 1000  ) {
-        this._driver.imageHelper.waitOnCreatingInitialSnapshot = waitOnCreatingInitialSnapshot;
-     }
+    constructor(private _driver: AppiumDriver, private _imageComppareOptions?: IImageCompareOptions) {
+        this._driver.imageHelper.waitOnCreatingInitialSnapshot = (this._imageComppareOptions && this._imageComppareOptions.waitOnCreatingInitialSnapshot) || this.defualtOptions.waitOnCreatingInitialSnapshot;
+    }
 
-    public async compareScreen(imageName: string, timeOutSeconds?: number, tolerance?: number, toleranceType?: ImageOptions) {
-        imageName = this.increaseImageName(imageName);
-        const result = await this._driver.compareScreen(imageName, timeOutSeconds, tolerance, toleranceType);
+    public defualtOptions: IImageCompareOptions = {
+        timeOutSeconds: 2,
+        tolerance: 0,
+        toleranceType: ImageOptions.pixel,
+        waitOnCreatingInitialSnapshot: 2000,
+    };
+
+    get imageComppareOptions() {
+        this.extendOptions(this._imageComppareOptions);
+
+        return this._imageComppareOptions;
+    }
+
+    set imageComppareOptions(imageComppareOptions: IImageCompareOptions) {
+        this._imageComppareOptions = imageComppareOptions;
+    }
+
+    public async compareScreen(options?: IImageCompareOptions) {
+        options = this.extendOptions(options);
+        const imageName = this.increaseImageName(options.imageName || this._testName);
+        const result = await this._driver.compareScreen(imageName, options.timeOutSeconds, options.tolerance, options.toleranceType);
         this._imagesResults.set(imageName, result);
 
         return result;
     }
 
-    public async compareElement(imageName: string, element: UIElement, tolerance: number, timeOutSeconds: number, toleranceType: ImageOptions = ImageOptions.pixel) {
-        imageName = this.increaseImageName(imageName);
-        const result = await this._driver.compareElement(element, imageName, tolerance, timeOutSeconds, toleranceType);
+    public async compareElement(element: UIElement, options?: IImageCompareOptions) {
+        options = this.extendOptions(options);
+        const imageName = this.increaseImageName(options.imageName || this._testName);
+        const result = await this._driver.compareElement(element, imageName, options.tolerance, options.timeOutSeconds, options.toleranceType);
         this._imagesResults.set(imageName, result);
 
         return result;
     }
 
-    public async compareRectangle(imageName: string, element: IRectangle, tolerance: number, timeOutSeconds: number, toleranceType: ImageOptions = ImageOptions.pixel) {
-        imageName = this.increaseImageName(imageName);
-        const result = await this._driver.compareRectangle(element, imageName, timeOutSeconds, tolerance, toleranceType);
+    public async compareRectangle(element: IRectangle, options?: IImageCompareOptions) {
+        options = this.extendOptions(options);
+        const imageName = this.increaseImageName(options.imageName || this._testName);
+        const result = await this._driver.compareRectangle(element, imageName, options.timeOutSeconds, options.tolerance, options.toleranceType);
         this._imagesResults.set(imageName, result);
 
         return result;
@@ -51,11 +81,29 @@ export class ImageHelper {
         this._imagesResults.clear();
     }
 
+    public setImageName(suite: string, spec: string, testsName: string) {
+        this._testName = `${suite}-${spec}-${testsName.replace(suite, "").replace(spec, "")}`.replace(/(\-+)/ig, "-").replace(/(\_+)/ig, "_");
+
+        return this._testName;
+    }
+
     private increaseImageName(imageName: string) {
-        if (this._imagesResults && this._imagesResults.size > 0 && this._imagesResults.has(imageName)) {
-            imageName = `${imageName}_1`;
+        if (this._imagesResults.size > 1) {
+            const number = /\d+$/.test(imageName) ? +`${/\d+$/.exec(imageName)}` + 1 : `2`;
+            imageName = `${imageName}_${number}`;
         }
 
         return imageName;
     }
+
+    private extendOptions(options: IImageCompareOptions) {
+        options = options || {};
+        Object.getOwnPropertyNames(this.defualtOptions).forEach(prop => {
+            if (!options[prop]) {
+                options[prop] = this.defualtOptions[prop];
+            }
+        });
+
+        return options;
+    }
 }

e2e/ui-tests-app/e2e/helpers/navigation-helper.ts

@@ -1,26 +1,46 @@
 import { AppiumDriver, IRectangle, logInfo } from "nativescript-dev-appium";
 
+export enum ElementCacheStrategy {
+    allAtOnce,
+    onload,
+    none,
+}
+
+export interface ICachedElement {
+    name: string;
+    children: Map<string, ICachedElement>;
+    parent?: ICachedElement;
+    rect?: IRectangle;
+}
+
 export class NavigationHelper {
 
-    protected _samples: Map<string, IRectangle> = new Map();
+    private _cachedElements: ICachedElement;
+    private _currentSuite: ICachedElement;
 
-    constructor(protected _driver: AppiumDriver, protected _suitMainPage: Array<string>, private _shouldCacheElements: boolean = false) {
+    constructor(protected _driver: AppiumDriver, protected _suitMainPageNavigationLinks: Array<string>, private _elemtsCacheStrategy: ElementCacheStrategy = ElementCacheStrategy.onload) {
     }
 
     async initSuite() {
-        await this.navigateToSuitMainPage();
-        if (this._shouldCacheElements) {
-            const allSamples = await this._driver.findElementsByClassName(this._driver.locators.button);
-            for (let index = 0; index < allSamples.length; index++) {
-                const element = allSamples[index];
-                const rect = await element.getRectangle();
-                const text = (await element.text()).toLowerCase();
-                if (!this._samples.has(text)) {
-                    console.log(text);
-                    this._samples.set(text, rect);
+        if (this._elemtsCacheStrategy === ElementCacheStrategy.allAtOnce
+            || this._elemtsCacheStrategy === ElementCacheStrategy.onload) {
+            if (this._currentSuite) {
+                while (this._currentSuite.parent) {
+                    this._currentSuite = this._currentSuite.parent;
                 }
+            } else {
+                if (!this._cachedElements || this._cachedElements.children.size === 0) {
+                    this._cachedElements = { name: "initSuite", children: new Map<string, ICachedElement>() };
+                    if (this._elemtsCacheStrategy === ElementCacheStrategy.allAtOnce) {
+                        await this.cacheAllElements(this._cachedElements);
+                    }
+                }
+
+                this._currentSuite = this._cachedElements;
             }
         }
+
+        await this.navigateToSuitMainPage();
     }
 
     async endSuite() {
@@ -29,17 +49,42 @@ export class NavigationHelper {
     }
 
     async navigateToSuitMainPage() {
-        for (let index = 0; index < this._suitMainPage.length; index++) {
-            const mainPage = this._suitMainPage[index];
+        for (let index = 0; index < this._suitMainPageNavigationLinks.length; index++) {
+            const mainPage = this._suitMainPageNavigationLinks[index];
             await this.navigateToSample(mainPage);
         }
     }
 
     async navigateToSample(sample: string) {
         logInfo(`Navigate to ${sample}`);
-        if (this._samples.size > 0) {
-            const sampleElement = this._samples.get(sample.toLowerCase());
+        sample = sample.toLowerCase();
+        if (this._elemtsCacheStrategy === ElementCacheStrategy.allAtOnce) {
+            if (!this._currentSuite.children.has(sample)) {
+                await this.cacheAllElements(this._currentSuite);
+            }
+            if (!this._currentSuite.children.has(sample)) {
+                throw new Error(`Could not find ${sample}`);
+            }
+            const sampleElement = this._currentSuite.children.get(sample).rect;
             await this._driver.clickPoint(sampleElement.x + (sampleElement.width / 2), sampleElement.y + (sampleElement.height / 2));
+            this._currentSuite = this._currentSuite.children.get(sample);
+        } else if (this._elemtsCacheStrategy === ElementCacheStrategy.onload) {
+            if (this._currentSuite.children.has(sample)) {
+                const sampleElement = this._currentSuite.children.get(sample).rect;
+                await this._driver.clickPoint(sampleElement.x + (sampleElement.width / 2), sampleElement.y + (sampleElement.height / 2));
+                this._currentSuite = this._currentSuite.children.get(sample);
+            } else {
+                const sampleElement = await this._driver.waitForElement(sample);
+                if (!sampleElement) {
+                    throw new Error(`Could not find ${sample}`);
+                }
+                const rect = await sampleElement.getRectangle();
+                const text = (await sampleElement.text()).toLowerCase();
+                const newSuite: ICachedElement = { name: text, rect: rect, children: new Map(), parent: this._currentSuite };
+                this._currentSuite.children.set(sample, newSuite);
+                this._currentSuite = newSuite;
+                await this._driver.clickPoint(rect.x + (rect.width / 2), rect.y + (rect.height / 2));
+            }
         } else {
             const sampleElement = await this._driver.waitForElement(sample);
             await sampleElement.click();
@@ -48,6 +93,7 @@ export class NavigationHelper {
 
     async navigateBackToSuitMainPage() {
         logInfo(`Navigate to back`);
+        this._currentSuite = this._currentSuite.parent;
         await this._driver.navBack();
     }
 
@@ -55,4 +101,17 @@ export class NavigationHelper {
         logInfo(`Swipe to back`);
         throw new Error("Not implemented!");
     }
+
+    private async cacheAllElements(cachedElements: ICachedElement) {
+        const allSamples = await this._driver.findElementsByClassName(this._driver.locators.button);
+        for (let index = 0; index < allSamples.length; index++) {
+            const element = allSamples[index];
+            const rect = await element.getRectangle();
+            const text = (await element.text()).toLowerCase();
+            if (!cachedElements.children.has(text)) {
+                console.log(text);
+                cachedElements.children.set(text, { parent: cachedElements, name: text, rect: rect, children: new Map() });
+            }
+        }
+    }
 }

e2e/ui-tests-app/e2e/page-object-base-model.ts

@@ -1,5 +1,5 @@
 import { AppiumDriver, logInfo } from "nativescript-dev-appium";
-import { NavigationHelper } from "./helpers/navigation-helper";
+import { NavigationHelper, ElementCacheStrategy } from "./helpers/navigation-helper";
 import { ImageHelper } from "./helpers/image-helper";
 
 export abstract class PageObjectBaseModel {
@@ -7,8 +7,8 @@ export abstract class PageObjectBaseModel {
     public navigationHelper: NavigationHelper;
     public imageHelper: ImageHelper;
 
-    constructor(protected _driver: AppiumDriver, protected _naviagtionLinks: Array<string>, cashePages: boolean) {
-        this.navigationHelper = new NavigationHelper(this._driver, this._naviagtionLinks, cashePages);
+    constructor(protected _driver: AppiumDriver, protected _naviagtionLinks: Array<string>, elementCacheStrategy: ElementCacheStrategy = ElementCacheStrategy.none) {
+        this.navigationHelper = new NavigationHelper(this._driver, this._naviagtionLinks, elementCacheStrategy);
         this.imageHelper = new ImageHelper(this._driver);
     }
 
@@ -19,7 +19,6 @@ export abstract class PageObjectBaseModel {
     async endSuite() {
         const suiteName = this._naviagtionLinks.join("-");
         logInfo(`End of suit ${suiteName}  tests!`);
-        await this._driver.takeScreenshot(suiteName);
     }
 
     async navigateToSuitMainPage() {

e2e/ui-tests-app/e2e/resources/images/uitestsapp

@@ -0,0 +1 @@
+/Users/tsenov/git/nativescript/e2e/ui-tests-app/../../../functional-tests-images/uitestsapp

e2e/ui-tests-app/e2e/scripts/sparse-checkout.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+app_name="$1" r_url="$2" local_dir="$3" && shift 3
+
+echo $app_name
+cwd=${PWD}
+echo "r_url: ${r_url}"
+echo "local_dir: ${local_dir}"
+rm -rf ${PWD}/e2e/resources/*
+mkdir -p ${PWD}/e2e/resources/images
+
+(
+    if [ -d "$local_dir" ]; then
+        echo "Extend repository"
+        cd "$local_dir"
+    else
+        mkdir -p "$local_dir"
+        cd "$local_dir"
+        git init
+        git remote add origin "$r_url"
+    fi
+    
+    echo ${PWD}
+    
+    git config core.sparseCheckout true
+    
+    # Loops over remaining args
+    rm -rf .git/info/sparse-checkout || true
+    for i; do
+        echo "$app_name/$i" >> .git/info/sparse-checkout
+    done
+    echo "scripts" >> .git/info/sparse-checkout
+    cat .git/info/sparse-checkout
+    git read-tree -mu HEAD
+    git pull --depth=1 origin master -f
+)
+
+cd "${cwd}"
+ln -s "$local_dir/$app_name" "${cwd}/e2e/resources/images/" || true

e2e/ui-tests-app/e2e/suites/button/background/button-background-page.ts

@@ -2,11 +2,12 @@ import { AppiumDriver, logInfo, logError } from "nativescript-dev-appium";
 import { Platform } from "mobile-devices-controller";
 import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 import { PageObjectBaseModel } from "../../../page-object-base-model";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
 
 export class ButtonBackgroundPage extends PageObjectBaseModel {
 
     constructor(_driver: AppiumDriver) {
-        super(_driver, ["button", "background"], false);
+        super(_driver, ["button", "background"], ElementCacheStrategy.none);
     }
 
     public viewGroupLocator() {
@@ -46,7 +47,7 @@ export class ButtonBackgroundPage extends PageObjectBaseModel {
     async executeScenario(imageName: string, button: string) {
         const presenter = await this.testElement();
         await this.tapBtn(button);
-        await this.imageHelper.compareElement(imageName, presenter, 18, 5, ImageOptions.pixel);
+        await this.imageHelper.compareElement(presenter, { imageName: imageName, tolerance: 0.1, timeOutSeconds: 5 });
         this.imageHelper.assertImages();
     }
 }

e2e/ui-tests-app/e2e/suites/button/background/button-background.e2e-spec.ts

@@ -1,13 +1,17 @@
 import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
 import { ButtonBackgroundPage } from "./button-background-page";
 
-describe("button-background-suite", () => {
+const suite = "tab-navigation";
+const spec = "bottom-navigation";
+
+describe(`${suite}-${spec}-suite`, () => {
     let driver: AppiumDriver;
     let backgroundPage: ButtonBackgroundPage;
 
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
+        await driver.resetApp();
         backgroundPage = new ButtonBackgroundPage(driver);
         await backgroundPage.initSuite();
     });
@@ -16,6 +20,10 @@ describe("button-background-suite", () => {
         await backgroundPage.endSuite();
     });
 
+    beforeEach(function () {
+        backgroundPage.imageHelper.setImageName(suite, spec, this.currentTest.title);
+    });
+
     afterEach(async function () {
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
@@ -24,7 +32,7 @@ describe("button-background-suite", () => {
 
     it("background_11", async function () {
         const presenter = await backgroundPage.testElement();
-        await backgroundPage.imageHelper.compareElement("background_11_clean", presenter, 0.1, 2);
+        await backgroundPage.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
         backgroundPage.imageHelper.assertImages();
     });
 
@@ -35,7 +43,7 @@ describe("button-background-suite", () => {
     it("background_13", async function () {
         await backgroundPage.tapResetBtn();
         const presenter = await backgroundPage.testElement();
-        await backgroundPage.imageHelper.compareElement("background_11_clean", presenter, 0.1, 2);
+        await backgroundPage.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
         backgroundPage.imageHelper.assertImages();
     });
 

e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation-base-page.ts

@@ -0,0 +1,15 @@
+import { AppiumDriver } from "nativescript-dev-appium";
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
+
+export class BottomNavigationBasePage extends PageObjectBaseModel {
+
+    constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
+        super(_driver, ["bottom-navigation"], elementCacheStrategy);
+    }
+
+    async init(subSuiteName: string) {
+        this._naviagtionLinks.push(subSuiteName);
+        await super.initSuite();
+    }
+}

e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts

@@ -0,0 +1,108 @@
+import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
+import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
+import { Platform } from "mobile-devices-controller";
+
+const suite = "tab-navigation";
+const spec = "bottom-navigation";
+
+describe(`${suite}-${spec}-tests-suite`, async function () {
+    let driver: AppiumDriver;
+    let bottomNavigationBasePage: BottomNavigationBasePage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.resetApp();
+        bottomNavigationBasePage = new BottomNavigationBasePage(driver);
+        await bottomNavigationBasePage.initSuite();
+    });
+
+    after(async function () {
+        await bottomNavigationBasePage.endSuite();
+    });
+
+    beforeEach(async function () {
+        bottomNavigationBasePage.imageHelper.setImageName(suite, spec, this.currentTest.title);
+        bottomNavigationBasePage.imageHelper.defualtOptions = {
+            tolerance: 0.01,
+            timeOutSeconds: 5
+        };
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+            await driver.resetApp();
+            await bottomNavigationBasePage.initSuite();
+        }
+    });
+
+    it(`${spec}-background-color`, async function () {
+        await bottomNavigationBasePage.navigateToSample("background-color");
+
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-bottom-navigation`, async function () {
+        await bottomNavigationBasePage.navigateToSample("bottom-navigation");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-color`, async function () {
+        await bottomNavigationBasePage.navigateToSample("color");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-change`, async function () {
+        await bottomNavigationBasePage.navigateToSample("tab-view-icon-change");
+        const index = driver.nsCapabilities.device.platform === Platform.IOS
+            ? (driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
+
+        let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
+        await btns[index].tap();
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+
+        btns = await driver.findElementsByClassName(driver.locators.button, 5000);
+        await btns[index - 1].tap();
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.imageHelper.assertImages();
+
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-title-placment`, async function () {
+        await bottomNavigationBasePage.navigateToSample("icon-title-placement");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-issue-5470`, async function () {
+        await bottomNavigationBasePage.navigateToSample("issue-5470");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-swipe-enabled`, async function () {
+        await bottomNavigationBasePage.navigateToSample("swipe-enabled");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-tab-position`, async function () {
+        await bottomNavigationBasePage.navigateToSample("tab-position");
+        await bottomNavigationBasePage.imageHelper.compareScreen();
+        await bottomNavigationBasePage.imageHelper.assertImages();
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+});

e2e/ui-tests-app/e2e/suites/tab-navigation/tab-view/tab-view-base-page.ts

@@ -0,0 +1,15 @@
+import { AppiumDriver } from "nativescript-dev-appium";
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+import { ElementCacheStrategy } from "./../../../helpers/navigation-helper";
+
+export class TabViewBasePage extends PageObjectBaseModel {
+
+    constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
+        super(_driver, ["tab-view"], elementCacheStrategy);
+    }
+
+    async init(subSuiteName: string) {
+        this._naviagtionLinks.push(subSuiteName);
+        await super.initSuite();
+    }
+}

e2e/ui-tests-app/e2e/suites/tab-navigation/tab-view/tab-view-common-tests.e2e-spec.ts

@@ -2,13 +2,17 @@ import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-app
 import { TabViewBasePage } from "./tab-view-base-page";
 import { Platform } from "mobile-devices-controller";
 
-describe("tab-view-common-tests-suite", async function () {
+const suite = "tabs";
+const spec = "tab-view";
+
+describe(`${suite}-${spec}-common-tests-suite`, async function () {
     let driver: AppiumDriver;
     let tabViewBasePage: TabViewBasePage;
 
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
+        await driver.resetApp();
         tabViewBasePage = new TabViewBasePage(driver);
         await tabViewBasePage.initSuite();
     });
@@ -17,6 +21,14 @@ describe("tab-view-common-tests-suite", async function () {
         await tabViewBasePage.endSuite();
     });
 
+    beforeEach(async function () {
+        tabViewBasePage.imageHelper.setImageName(suite, spec, this.currentTest.title);
+        tabViewBasePage.imageHelper.defualtOptions = {
+            tolerance: 0.01,
+            timeOutSeconds: 5
+        };
+    });
+
     afterEach(async function () {
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
@@ -25,70 +37,70 @@ describe("tab-view-common-tests-suite", async function () {
         }
     });
 
-    it("tabView_01", async function () {
+    it(`${spec}-style`, async function () {
         await tabViewBasePage.navigateToSample("tabStyle");
 
-        await tabViewBasePage.imageHelper.compareScreen("tabView_01", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen({ timeOutSeconds: 5, tolerance: 0.01 });
         await tabViewBasePage.imageHelper.assertImages();
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it("tabView_02_more", async function () {
+    it(`${spec}-more-items`, async function () {
         await tabViewBasePage.navigateToSample("tabmore");
 
-        await tabViewBasePage.imageHelper.compareScreen("tabView_02_more", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
         await tabViewBasePage.imageHelper.assertImages();
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it("tabView_03_tabViewIcons", async function () {
+    it(`${spec}-icons`, async function () {
         await tabViewBasePage.navigateToSample("tab-view-icons");
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_tabViewIcons", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         const rect = await (await driver.waitForElement("automatic")).getActualRectangle();
 
         await driver.clickPoint(rect.x + 10, rect.y + 10);
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_tabViewIcons", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await driver.clickPoint(rect.x + 10, rect.y + 10);
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_tabViewIcons", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await driver.clickPoint(rect.x + 10, rect.y + 10);
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_tabViewIcons", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await tabViewBasePage.imageHelper.assertImages();
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it("tabView_03_font", async function () {
+    it(`${spec}-fonts`, async function () {
         await tabViewBasePage.navigateToSample("text-transform");
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_font", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await (await driver.waitForElement("apply")).tap();
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_font", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await (await driver.waitForElement("reset")).tap();
-        await tabViewBasePage.imageHelper.compareScreen("tabView_03_font", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
         await tabViewBasePage.imageHelper.assertImages();
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it("tabView_icon_change", async function () {
+    it(`${spec}-icon-change`, async function () {
         await tabViewBasePage.navigateToSample("tab-view-icon-change");
         const index = driver.nsCapabilities.device.platform === Platform.IOS
             ? (driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
 
         let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
         await btns[index].tap();
-        await tabViewBasePage.imageHelper.compareScreen("tabView_icon_change", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         btns = await driver.findElementsByClassName(driver.locators.button, 5000);
         await btns[index - 1].tap();
-        await tabViewBasePage.imageHelper.compareScreen("tabView_icon_change", 5, 0.01);
+        await tabViewBasePage.imageHelper.compareScreen();
 
         await tabViewBasePage.imageHelper.assertImages();
 

e2e/ui-tests-app/e2e/suites/tab-navigation/tab-view/tab-view-css-properties.e2e-spec.ts

@@ -2,8 +2,12 @@ import { nsCapabilities, createDriver, AppiumDriver, Direction } from "nativescr
 import { TabViewBasePage } from "./tab-view-base-page";
 import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 import { Platform } from "mobile-devices-controller";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
 
-describe("tab-view-css-suite", async function () {
+const suite = "tabs";
+const spec = "tab-view";
+
+describe(`${suite}-${spec}-css-suite`, async function () {
     let driver: AppiumDriver;
     let tabViewBasePage: TabViewBasePage;
 
@@ -21,7 +25,8 @@ describe("tab-view-css-suite", async function () {
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        tabViewBasePage = new TabViewBasePage(driver);
+        await driver.resetApp();
+        tabViewBasePage = new TabViewBasePage(driver, ElementCacheStrategy.onload);
         await tabViewBasePage.init("tabViewCss");
     });
 
@@ -29,6 +34,10 @@ describe("tab-view-css-suite", async function () {
         await tabViewBasePage.endSuite();
     });
 
+    beforeEach(function () {
+        tabViewBasePage.imageHelper.setImageName(suite, spec, this.currentTest.title);
+    });
+
     afterEach(async function () {
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
@@ -39,20 +48,21 @@ describe("tab-view-css-suite", async function () {
 
     for (let index = 0; index < samples.length; index++) {
         const sample = samples[index];
-        const imageName = `tabViewCss_${sample.replace("-", "_").replace(" ", "_").replace(":", "_").replace(";", "").replace("__", "_")}`;
+        const imageName = `${spec}-${sample.replace(/[^a-z]/ig, "-").replace(/(-+)/ig, "-").replace(/(_+)/ig, "_").replace(/-$/, "")}`;
         it(imageName, async function () {
-            if (driver.platformName === Platform.ANDROID && sample === "All") {
+            if (driver.platformName === Platform.ANDROID
+                && (sample === "All" || sample === "reset")) {
                 await driver.scroll(Direction.down, 400, 200, 300, 200);
             }
             const scenarioBtn = await driver.waitForElement(sample);
             await scenarioBtn.click();
             await driver.wait(2000);
-            await tabViewBasePage.imageHelper.compareScreen(imageName, 5, 0, ImageOptions.pixel);
+            await tabViewBasePage.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
             if (sample === "All") {
                 const tabTwo = await driver.waitForElement("twO");
                 await driver.wait(2000);
 
-                await tabViewBasePage.imageHelper.compareElement(`${imageName}_1`, tabTwo, 0, 2);
+                await tabViewBasePage.imageHelper.compareElement(tabTwo, { timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
             }
             tabViewBasePage.imageHelper.assertImages();
         });

e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tab-tests.e2e-spec.ts

@@ -0,0 +1,109 @@
+import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
+import { TabsViewBasePage } from "./tabs-view-base-page";
+import { Platform } from "mobile-devices-controller";
+
+const suite = "tabs";
+const spec = "tabs";
+
+describe(`${suite}-${spec}-tests-suite`, async function () {
+    let driver: AppiumDriver;
+    let tabsViewBasePage: TabsViewBasePage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.resetApp();
+        tabsViewBasePage = new TabsViewBasePage(driver);
+        await tabsViewBasePage.initSuite();
+    });
+
+    after(async function () {
+        await tabsViewBasePage.endSuite();
+    });
+
+    beforeEach(async function () {
+        tabsViewBasePage.imageHelper.setImageName(suite, spec, this.currentTest.title);
+        tabsViewBasePage.imageHelper.defualtOptions = {
+            imageName: this.currentTest.title,
+            tolerance: 0.01,
+            timeOutSeconds: 5
+        };
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+            await driver.resetApp();
+            await tabsViewBasePage.initSuite();
+        }
+    });
+
+    it(`${spec}-background-color`, async function () {
+        await tabsViewBasePage.navigateToSample("background-color");
+
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-bottom-navigation`, async function () {
+        await tabsViewBasePage.navigateToSample("bottom-navigation");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-color`, async function () {
+        await tabsViewBasePage.navigateToSample("color");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-change`, async function () {
+        await tabsViewBasePage.navigateToSample("tab-view-icon-change");
+        const index = driver.nsCapabilities.device.platform === Platform.IOS
+            ? (driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
+
+        let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
+        await btns[index].tap();
+        await tabsViewBasePage.imageHelper.compareScreen();
+
+        btns = await driver.findElementsByClassName(driver.locators.button, 5000);
+        await btns[index - 1].tap();
+        await tabsViewBasePage.imageHelper.compareScreen();
+
+        await tabsViewBasePage.imageHelper.assertImages();
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-title-placment`, async function () {
+        await tabsViewBasePage.navigateToSample("icon-title-placement");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-issue-5470`, async function () {
+        await tabsViewBasePage.navigateToSample("issue-5470");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-swipe-enabled`, async function () {
+        await tabsViewBasePage.navigateToSample("swipe-enabled");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-tab-position`, async function () {
+        await tabsViewBasePage.navigateToSample("tab-position");
+        await tabsViewBasePage.imageHelper.compareScreen();
+        await tabsViewBasePage.imageHelper.assertImages();
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+});

e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-view-base-page.ts

@@ -0,0 +1,15 @@
+import { AppiumDriver } from "nativescript-dev-appium";
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
+
+export class TabsViewBasePage extends PageObjectBaseModel {
+
+    constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
+        super(_driver, ["tabs"], elementCacheStrategy);
+    }
+
+    async init(subSuiteName: string) {
+        this._naviagtionLinks.push(subSuiteName);
+        await super.initSuite();
+    }
+}

e2e/ui-tests-app/e2e/suites/tab-view/tab-view-base-page.ts

@@ -1,14 +0,0 @@
-import { AppiumDriver } from "nativescript-dev-appium";
-import { PageObjectBaseModel } from "../../page-object-base-model";
-
-export class TabViewBasePage extends PageObjectBaseModel {
-
-    constructor(_driver: AppiumDriver) {
-        super(_driver, ["tab-view"], false);
-    }
-
-    async init(subSuiteName: string) {
-        this._naviagtionLinks.push(subSuiteName);
-        await super.initSuite();
-    }
-}

e2e/ui-tests-app/package.json

@@ -2,7 +2,7 @@
   "nativescript": {
     "id": "org.nativescript.uitestsapp",
     "tns-android": {
-      "version": "next"
+      "version": "6.0.0-2019-06-24-113546-01"
     },
     "tns-ios": {
       "version": "next"
@@ -34,10 +34,12 @@
   "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
   "readme": "NativeScript Application",
   "scripts": {
-    "e2e": "node ./node_modules/nativescript-dev-appium/check-dev-deps.js &&  tsc -p e2e  &&  mocha --opts ./e2e/config/mocha.opts ",
-    "e2e-watch": "tsc -p e2e --watch",
+    "test": "mocha --opts ../config/mocha.opts",
+    "test-debug": "./node_modules/.bin/ns-dev-appium --startSession",
+    "test-watch": "tsc -p e2e --watch",
     "pretest": "tsc -p e2e",
-    "test": "npx mocha --opts ./e2e/config/mocha.opts ",
-    "watch": "testdeck-watch"
+    "watch": "testdeck-watch",
+    "load-images": "./e2e/scripts/sparse-checkout.sh uitestsapp https://github.com/NativeScript/functional-tests-images.git $PWD/../../../functional-tests-images",
+    "update-emulators": "cd $PWD/../../../functional-tests-images  && . ./scripts/update-emulators.sh --appName uitestsapp"
   }
 }