test: extend tab navigations tests

e2e/ui-tests-app/.gitignore

@@ -27,7 +27,7 @@ typings/
 
 # Visual Studio Code
 .vscode/*
-!.vscode/settings.json
+.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

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

@@ -4,10 +4,22 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Launch on iOS",
+            "type": "nativescript",
+            "request": "launch",
+            "platform": "ios",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "watch": true,
+            "tnsArgs": [
+                "--debug-brk"
+            ]
+        },
         {
             "type": "node",
             "request": "launch",
-            "name": "Mocha Tests",
+            "name": "debug-tests",
             "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
             "args": [
                 "-u",
@@ -15,9 +27,28 @@
                 "--colors",
                 "--opts",
                 "../config/mocha.opts",
-                "--grep=tab-view",
+                "--grep=button",
                 "-a",
-
+            ],
+            "internalConsoleOptions": "openOnSessionStart",
+            // "preLaunchTask": "e2e-tsc"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "run-tests",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--colors",
+                "--opts",
+                "../config/mocha.opts",
+                "--grep=bottom-navigation",
+                "android",
+                "--grep=bottom-navigation",
+                "--port",
+                "8889",
             ],
             "internalConsoleOptions": "openOnSessionStart"
         }

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

@@ -0,0 +1,12 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "e2e-tsc",
+			"command": "npm",
+			"args": ["run", "e2e-tsc"]
+        }
+    ]
+}

e2e/ui-tests-app/app/App_Resources/Android/src/main/res/drawable/baseline_motorcycle_24.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0"
+        android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17.5,10c-0.03,0 -0.05,0.01 -0.08,0.01L13.41,6L9,6v2h3.59l2,2h-8.1C4.01,10 2,12.02 2,14.5 2,16.99 4.01,19 6.5,19c2.22,0 4.06,-1.62 4.42,-3.73L13.04,14c-0.02,0.17 -0.04,0.33 -0.04,0.5 0,2.49 2.01,4.5 4.5,4.5s4.5,-2.01 4.5,-4.5 -2.01,-4.5 -4.5,-4.5zM8.84,15.26C8.52,16.27 7.58,17 6.47,17c-1.38,0 -2.5,-1.12 -2.5,-2.5S5.09,12 6.47,12c1.12,0 2.05,0.74 2.37,1.75L6,13.75v1.5l2.84,0.01zM17.47,17c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z"/>
+</vector>

e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation automationText="bottomNavigation" >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/binding-page.ts

@@ -1,12 +1,6 @@
 import * as vmModule from "./bottom-navigation-view-model";
 
-var viewModel = vmModule.bottomNavigationViewModel;
-
 export function bottomNavigaitonLoaded(args) {
-    let bottomNav = args.object;
-    bottomNav.bindingContext = viewModel;
-}
-
-export function addTabs(args) {
-    viewModel.createItems();
+    const bottomNav = args.object.page;
+    bottomNav.bindingContext = vmModule.bottomNavigationViewModel;
 }

e2e/ui-tests-app/app/bottom-navigation/binding-page.xml

@@ -1,12 +1,16 @@
-<Page class="page">
+<Page class="page" navigatingTo="navigatingTo">
 
-  <ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
+  <ActionBar title="BottomNavigation binding" icon="" class="action-bar">
   </ActionBar>
 
     <GridLayout rows="auto,*">
-        <Button row="0" text="Add Tab" tap="addTabs"/>
+    <StackLayout row="0" >
+        <Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
+        <Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
+      
+    </StackLayout>
         <GridLayout row="1">
-            <BottomNavigation loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
+            <BottomNavigation automationText="bottomNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
                 <TabStrip items="{{ tabStripItems }}">
                 </TabStrip>
             </BottomNavigation> 

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.ts

@@ -0,0 +1,19 @@
+import { View } from "tns-core-modules/ui/core/view";
+import { Page } from "tns-core-modules/ui/page";
+
+export function loaded(args) {
+    const page = <Page>(<View>args.object).page;
+    const view = page.getViewById("bottomNavigation");
+    (<any>view).textTransform = "capitalize";
+}
+
+export function applyTap(args) {
+    const page = <Page>(<View>args.object).page;
+    const css = "#bottomNavigation { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function resetTap(args) {
+    const page = <Page>(<View>args.object).page;
+    page.css = "";
+}

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.xml

@@ -0,0 +1,40 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
+  <BottomNavigation automationText="bottomNavigation" id="bottomNavigation" >
+    <TabStrip>
+      <TabStripItem title="IteM onE"></TabStripItem>
+      <TabStripItem title="IteM twO"></TabStripItem>
+      <TabStripItem title="IteM threE"></TabStripItem>
+    </TabStrip>
+
+    <TabContentItem>
+      <GridLayout>
+          <ScrollView>
+            <StackLayout>
+              <Button text="tab-text-color: green;" tap="applyTap" tag="tab-text-color: green;" style.fontSize="8"/>
+              <Button text="tab-background-color: yellow;" tap="applyTap" tag="tab-background-color: yellow;" style.fontSize="8"/>
+              <Button text="selected-tab-text-color: red;" tap="applyTap" tag="selected-tab-text-color: red;" style.fontSize="8"/>
+              <Button text="android-selected-tab-highlight-color: orange;" tap="applyTap" tag="android-selected-tab-highlight-color: orange;" style.fontSize="8"/>
+              <Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
+              <Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
+              <Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
+              <Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
+              <Button text="all" tap="applyTap" tag="tab-text-color: green; tab-background-color: yellow; selected-tab-text-color: red; android-selected-tab-highlight-color: orange; text-transform: uppercase;" style.fontSize="8"/>
+              <Button text="reset" tap="resetTap" style.fontSize="8"/>
+            </StackLayout>
+          </ScrollView>
+      </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+      <GridLayout>
+          <Label text="Item 2"/>
+      </GridLayout>
+    </TabContentItem>
+
+        <TabContentItem>
+      <GridLayout>
+       <Label text="Item 3"/>
+      </GridLayout>
+    </TabContentItem>
+  </BottomNavigation>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml

@@ -18,7 +18,7 @@
   </BottomNavigation> -->
 
   <!-- w/ TabStrip -->
-  <BottomNavigation id="bottomNav">
+  <BottomNavigation id="bottomNav"  automationText="bottomNavigation">
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>
@@ -37,37 +37,37 @@
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
+        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="Second View"/>
-        <Button tap="goToFirst" text="go to first" />
+        <Button tap="goToFirst" text="go to first" automationText="goToFirst" />
       </StackLayout>
     </TabContentItem>
     <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
         <TabContentItem>
       <StackLayout>
         <Label text="First View"/>
-        <Button tap="goToSecond" text="go to second" />
+        <Button tap="goToSecond" text="go to second" automationText="goToSecond" />
       </StackLayout>
     </TabContentItem>
   </BottomNavigation>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-view-model.ts

@@ -17,7 +17,9 @@ export class BottomNavigationViewModel extends Observable {
         this.createItems();
     }
 
-    createItems() {
+    public createItems() {
+        console.log("Create item");
+
         const _tabStripItems = new Array<TabStripItem>();
         const _tabContentItems = new Array<TabContentItem>();
 
@@ -31,6 +33,12 @@ export class BottomNavigationViewModel extends Observable {
         this.itemsCount++;
     }
 
+    public removeLastItem() {
+        console.log("Remove item");
+        this.tabStripItems.pop();
+        this.tabContentItems.pop();
+    }
+
     private createTabStripItem(index: number): TabStripItem {
         const item = new TabStripItem();
         item.title = "Item " + index;
@@ -50,4 +58,4 @@ export class BottomNavigationViewModel extends Observable {
         return contentItem;
     }
 }
-export var bottomNavigationViewModel = new BottomNavigationViewModel();
+export const bottomNavigationViewModel = new BottomNavigationViewModel();

e2e/ui-tests-app/app/bottom-navigation/color-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation color" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation style="color: green;"  automationText="bottomNavigation" >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.css

@@ -0,0 +1,47 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+Page {
+    background-color: tomato;
+}
+
+ActionBar {
+    background-color: aquamarine;
+}
+
+BottomNavigation {
+    background-color: lightgreen;
+}
+
+Button {
+    background-color: lightskyblue;
+}
+
+#lastItem {
+    color: black;
+}
+
+TabStripItem:active {
+    background-color: coral;
+}
+
+TabContentItem:active {
+    background-color: aquamarine;
+}
+
+#second-tab-content-item {
+    background-color: blueviolet;
+}
+
+#third-tab-content-item {
+    background-color: blue;
+}
+
+#fourth-tab-content-item {
+    background-color: gray;
+}
+
+#fifth-tab-content-item {
+    background-color: brown;
+}

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.ts

@@ -0,0 +1,10 @@
+import { EventData, Page } from "tns-core-modules/ui/page/page";
+import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation/bottom-navigation";
+
+export const selectTab = (args: EventData) => {
+    const page = <Page>(<any>args.object).page;
+    const bottomNav = <BottomNavigation>page.getViewById("bottomNavigation");
+
+    const index = (<any>args.object).tag;
+    bottomNav.selectedIndex = index;
+};

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml

@@ -0,0 +1,85 @@
+<Page>
+  <ActionBar title="BottomNavigation" icon="" class="action-bar">
+  </ActionBar>
+  <BottomNavigation id="bottomNavigation" automationText="bottomNavigation" class="font-awesome">
+    <TabStrip>
+      <TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
+
+      <TabStripItem >
+        <Label text="font://&#xf206;" />
+        <Label text="fa-bicycle-font-awesome" />
+      </TabStripItem>
+
+      <TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>
+
+      <TabStripItem title="Simply Long Title"></TabStripItem>
+
+      <TabStripItem iconSource="res://icon" id="lastItem" title="LAST"></TabStripItem>
+
+    </TabStrip>
+    <TabContentItem>
+      <GridLayout rows="*, *, *, 40" columns="*, *">
+        <Label text="iconSource: " row="0" col="0" />
+        <Image src="res://baseline_motorcycle_black_24" style="border-color: gray; border-width: 2px;" row="0" col="1" />
+        <Label text="text: " row="1" col="0" />
+        <Label text="motorcycle-res" row="1" col="1" />
+        <Label text="background-color: aquamarine; from selected item" style="background-color: aquamarine;" row="2" colSpan="2" />
+        <Button tap="selectTab" text="selectSecondTab" automationText="selectSecondTab" tag="1" row="3" colSpan="2" />
+      </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem id="second-tab-content-item">
+      <StackLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="font: " automationText="fa-bicycle-icon-content" />
+          <Label text="font://&#xf206;" />
+        </WrapLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="title: " />
+          <Label text="fa-bicycle-font-awesome" />
+        </WrapLayout>
+        <Label text="background-color: blueviolet;" style="background-color: blueviolet;" />
+        <Button tap="selectTab" text="selectLastTab" automationText="selectSecondTab" tag="4" row="2" colSpan="2" />
+      </StackLayout>
+    </TabContentItem>
+
+    <TabContentItem id="third-tab-content-item">
+      <StackLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="iconSource: " automationText="icon-res-content"></Label>
+          <Image src="res://up" style="border-color: gray; border-width: 2px;"></Image>
+        </WrapLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="title: " automationText="icon-res-content"></Label>
+          <Label text="ICON-RES"></Label>
+        </WrapLayout>
+        <Label text="background-color: blue;" style="background-color: blue;"></Label>
+      </StackLayout>
+    </TabContentItem>
+
+    <TabContentItem id="fourth-tab-content-item">
+      <StackLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="title: "></Label>
+          <Label text="Simply Long Title"></Label>
+        </WrapLayout>
+        <Label text="background-color: gray;" style="background-color: gray;"></Label>
+      </StackLayout>
+    </TabContentItem>
+
+    <TabContentItem id="fifth-tab-content-item">
+      <StackLayout>
+        <WrapLayout orientation="horizontal">
+          <Label text="iconSource: "></Label>
+          <Image src="res://icon" style="border-color: gray; border-width: 2px;"></Image>
+        </WrapLayout>
+           <WrapLayout orientation="horizontal">
+          <Label text="title: "></Label>
+          <Label text="LAST"></Label>
+        </WrapLayout>
+        <Label text="background-color: brown;" style="background-color: brown;">></Label>
+      </StackLayout>
+
+    </TabContentItem>
+  </BottomNavigation>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml

@@ -2,7 +2,7 @@
     <ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
     </ActionBar>
 
-    <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
+    <BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="bottomNavigation" >
         <TabStrip>
             <TabStripItem iconSource="res://icon"></TabStripItem>
             <TabStripItem iconSource="res://testlogo"></TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml

@@ -2,7 +2,7 @@
   <ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation automationText="bottomNavigation" >
     <TabStrip>
         <TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
         <TabStripItem iconSource="res://add_to_fav"></TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml

@@ -3,7 +3,7 @@
     <ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
     </ActionBar>
 
-    <BottomNavigation>
+    <BottomNavigation automationText="bottomNavigation">
         <TabStrip>
             <TabStripItem title="Tab1"></TabStripItem>
             <TabStripItem title="Tab2"></TabStripItem>

e2e/ui-tests-app/app/bottom-navigation/main-page.ts

@@ -21,6 +21,8 @@ export function loadExamples() {
     examples.set("icon-change", "bottom-navigation/icon-change-page");
     examples.set("binding", "bottom-navigation/binding-page");
     examples.set("font-icons", "bottom-navigation/font-icons-page");
-    
+    examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
+    examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
+
     return examples;
 }

e2e/ui-tests-app/app/tab-view/tab-view-android-swipe-page.xml

@@ -1,4 +1,4 @@
-<Page cssFile="~/ui-tests-app/css/test-page.css" loaded="onLoaded">
+<Page loaded="onLoaded">
   <TabView androidSwipeEnabled="false">
     <TabView.items>
 

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

@@ -57,22 +57,23 @@ export class NavigationHelper {
 
     async navigateToSample(sample: string) {
         logInfo(`Navigate to ${sample}`);
-        sample = sample.toLowerCase();
+        const sampleName = sample.toLowerCase();
+
         if (this._elemtsCacheStrategy === ElementCacheStrategy.allAtOnce) {
-            if (!this._currentSuite.children.has(sample)) {
+            if (!this._currentSuite.children.has(sampleName)) {
                 await this.cacheAllElements(this._currentSuite);
             }
-            if (!this._currentSuite.children.has(sample)) {
+            if (!this._currentSuite.children.has(sampleName)) {
                 throw new Error(`Could not find ${sample}`);
             }
-            const sampleElement = this._currentSuite.children.get(sample).rect;
+            const sampleElement = this._currentSuite.children.get(sampleName).rect;
             await this._driver.clickPoint(sampleElement.x + (sampleElement.width / 2), sampleElement.y + (sampleElement.height / 2));
-            this._currentSuite = this._currentSuite.children.get(sample);
+            this._currentSuite = this._currentSuite.children.get(sampleName);
         } else if (this._elemtsCacheStrategy === ElementCacheStrategy.onload) {
-            if (this._currentSuite.children.has(sample)) {
-                const sampleElement = this._currentSuite.children.get(sample).rect;
+            if (this._currentSuite.children.has(sampleName)) {
+                const sampleElement = this._currentSuite.children.get(sampleName).rect;
                 await this._driver.clickPoint(sampleElement.x + (sampleElement.width / 2), sampleElement.y + (sampleElement.height / 2));
-                this._currentSuite = this._currentSuite.children.get(sample);
+                this._currentSuite = this._currentSuite.children.get(sampleName);
             } else {
                 const sampleElement = await this._driver.waitForElement(sample);
                 if (!sampleElement) {
@@ -81,7 +82,7 @@ export class NavigationHelper {
                 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.children.set(sampleName, newSuite);
                 this._currentSuite = newSuite;
                 await this._driver.clickPoint(rect.x + (rect.width / 2), rect.y + (rect.height / 2));
             }

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

@@ -26,9 +26,13 @@ mkdir -p ${PWD}/e2e/resources/images
     
     # Loops over remaining args
     rm -rf .git/info/sparse-checkout || true
-    for i; do
-        echo "$app_name/$i" >> .git/info/sparse-checkout
-    done
+    if [ $1 = "all" ]; then
+        echo "$app_name" >> .git/info/sparse-checkout
+    else
+        for i; do
+            echo "$app_name/$i" >> .git/info/sparse-checkout
+        done
+    fi
     echo "scripts" >> .git/info/sparse-checkout
     cat .git/info/sparse-checkout
     git read-tree -mu HEAD

e2e/ui-tests-app/e2e/setup.ts

@@ -5,7 +5,6 @@ const testReporterContext = <ITestReporter>{};
 testReporterContext.name = "mochawesome";
 testReporterContext.reportDir = "mochawesome-report";
 testReporterContext.log = addContext;
-testReporterContext.logImageTypes = [LogImageType.screenshots];
 nsCapabilities.testReporter = testReporterContext;
 
 before("start server", async function () {

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

@@ -3,6 +3,7 @@ import { Platform } from "mobile-devices-controller";
 import { PageObjectBaseModel } from "../../../page-object-base-model";
 import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
 import { assert } from "chai";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 export class ButtonBackgroundPage extends PageObjectBaseModel {
 
     constructor(_driver: AppiumDriver) {
@@ -11,7 +12,7 @@ export class ButtonBackgroundPage extends PageObjectBaseModel {
 
     public viewGroupLocator() {
         if (this._driver.nsCapabilities.device.platform === Platform.ANDROID) {
-            return this._driver.nsCapabilities.device.releaseVersion > 5.1 ? "android.view.ViewGroup" : "android.view.View";
+            return +this._driver.nsCapabilities.device.releaseVersion > 5.1 ? "android.view.ViewGroup" : "android.view.View";
         } else {
             throw new Error("Not implemented locator");
         }
@@ -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._driver.imageHelper.compareElement(presenter, { imageName: imageName, tolerance: 0.1, timeOutSeconds: 5 });
-        assert.isTrue(this._driver.imageHelper.hasImageComparisonPassed());
+        const result = await this._driver.compareElement(presenter, imageName, 0.5, 5, ImageOptions.percent);
+        assert.isTrue(result);
     }
 }

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

@@ -1,6 +1,7 @@
 import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
 import { ButtonBackgroundPage } from "./button-background-page";
 import { assert } from "chai";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 
 const suite = "button";
 const spec = "background";
@@ -12,9 +13,11 @@ describe(`${suite}-${spec}-suite`, () => {
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        await driver.resetApp();
+        await driver.restartApp();
         backgroundPage = new ButtonBackgroundPage(driver);
         await backgroundPage.initSuite();
+        driver.imageHelper.options.keepOriginalImageSize = false;
+        driver.imageHelper.options.toleranceType = ImageOptions.percent;
     });
 
     after(async function () {
@@ -28,14 +31,14 @@ describe(`${suite}-${spec}-suite`, () => {
     afterEach(async function () {
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
-            await driver.resetApp();
+            await driver.restartApp();
             await backgroundPage.initSuite();
         }
     });
 
     it("background_11", async function () {
         const presenter = await backgroundPage.testElement();
-        await driver.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
+        await driver.compareElement(presenter, "background_11_clean", 0.1, 2);
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
     });
 
@@ -46,7 +49,7 @@ describe(`${suite}-${spec}-suite`, () => {
     it("background_13", async function () {
         await backgroundPage.tapResetBtn();
         const presenter = await backgroundPage.testElement();
-        await driver.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
+        await driver.compareElement(presenter, "background_11_clean");
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
     });
 

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

@@ -1,8 +1,11 @@
-import { AppiumDriver } from "nativescript-dev-appium";
+import { AppiumDriver, Point, IRectangle, UIElement, logInfo } from "nativescript-dev-appium";
 import { PageObjectBaseModel } from "../../../page-object-base-model";
 import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
 
 export class BottomNavigationBasePage extends PageObjectBaseModel {
+    private _bottomNavigatioinTabRect: IRectangle;
+    private _bottomNavigationItems: Array<UIElement>;
+    private _bottomNavigationItemsRects: Map<number, Point> = new Map();
 
     constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
         super(_driver, ["bottom-navigation"], elementCacheStrategy);
@@ -12,4 +15,34 @@ export class BottomNavigationBasePage extends PageObjectBaseModel {
         this._naviagtionLinks.push(subSuiteName);
         await super.initSuite();
     }
+
+    async refreshBottomNavigationTab() {
+        let bottomNavigatioinTab;
+        if (this._driver.nsCapabilities.isAndroid) {
+            bottomNavigatioinTab = await this._driver.findElementByXPath(`//android.view.ViewGroup[@content-desc="bottomNavigation"]/android.widget.LinearLayout`);
+            this._bottomNavigationItems = await this._driver.findElementsByXPath(`//android.view.ViewGroup[@content-desc="bottomNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout/*`);
+        } else {
+            bottomNavigatioinTab = await this._driver.findElementByXPath(`//XCUIElementTypeOther[@name="bottomNavigation"]/XCUIElementTypeTabBar`);
+            this._bottomNavigationItems = await this._driver.findElementsByXPath(`//XCUIElementTypeOther[@name="bottomNavigation"]/XCUIElementTypeTabBar/*`);
+        }
+
+        for (let index = 0; index < this._bottomNavigationItems.length; index++) {
+            const point = await this._bottomNavigationItems[index].getRectangle();
+            this._bottomNavigationItemsRects.set(index, new Point(point.y + point.width / 2, point.x + point.height / 2));
+        }
+
+        this._bottomNavigatioinTabRect = await bottomNavigatioinTab.getRectangle();
+
+        return this._bottomNavigatioinTabRect;
+    }
+
+    async tabOnItem(index: number) {
+        if (this._bottomNavigationItemsRects.size === 0) {
+            await this.refreshBottomNavigationTab();
+        }
+        const point = this._bottomNavigationItemsRects.get(index);
+        logInfo(`Click on TabStrip index: ${index}`);
+        await this._driver.clickPoint(point.x, point.y);
+
+    }
 }

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

@@ -0,0 +1,77 @@
+import { nsCapabilities, createDriver, AppiumDriver, Direction } from "nativescript-dev-appium";
+import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
+import { Platform } from "mobile-devices-controller";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
+import { setImageName } from "../../../helpers/image-helper";
+import { assert } from "chai";
+
+const suite = "tab-navigation";
+const spec = "bottom-navigation-css";
+
+describe(`${suite}-${spec}-suite`, async function () {
+    let driver: AppiumDriver;
+    let bottomNavigationBasePage: BottomNavigationBasePage;
+
+    const samples = [
+        { sample: "tab-text-color: green;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "tab-background-color: yellow;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "selected-tab-text-color: red;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "android-selected-tab-highlight-color: orange;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: uppercase;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: lowercase;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: capitalize;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: none;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "all", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "reset", tab1: "IteM onE", tab2: "IteM twO" },
+    ];
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        bottomNavigationBasePage = new BottomNavigationBasePage(driver, ElementCacheStrategy.none);
+        await bottomNavigationBasePage.init("css-text-transform");
+        driver.imageHelper.options.keepOriginalImageSize = false;
+        driver.imageHelper.options.donNotAppendActualSuffixOnIntialImageCapture = true;
+    });
+
+    after(async function () {
+        await bottomNavigationBasePage.endSuite();
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+            await driver.restartApp();
+            await bottomNavigationBasePage.initSuite();
+        }
+    });
+
+    for (let index = 0; index < samples.length; index++) {
+        const sample = samples[index];
+        let imageName = `${spec}-${sample.sample.replace(/[^a-z]/ig, "-").replace(/(-+)/ig, "-").replace(/(_+)/ig, "_").replace(/-$/, "")}`;
+        it(imageName, async function () {
+            if (driver.platformName === Platform.ANDROID
+                && (sample.sample.toLowerCase() === "all"
+                    || sample.sample.toLowerCase() === "reset")) {
+                await driver.scroll(Direction.down, 400, 200, 300, 200);
+            }
+            const scenarioBtn = await driver.waitForElement(sample.sample);
+            await scenarioBtn.tap();
+            imageName = setImageName(suite, spec, imageName);
+            await driver.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
+            const tabTwo = await driver.waitForElement(sample.tab2);
+            await tabTwo.click();
+            await driver.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5 });
+
+            const imageComparissonresult = driver.imageHelper.hasImageComparisonPassed();
+            assert.isTrue(imageComparissonresult);
+
+            if (imageComparissonresult) {
+                const tabOne = await driver.waitForElement(sample.tab1);
+                await tabOne.tap();
+            }
+        });
+    }
+});

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

@@ -1,8 +1,8 @@
-import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
+import { nsCapabilities, createDriver, AppiumDriver, DeviceOrientaion, logInfo } from "nativescript-dev-appium";
 import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
-import { Platform } from "mobile-devices-controller";
 import { assert } from "chai";
 import { setImageName } from "../../../helpers/image-helper";
+import { Platform } from "mobile-devices-controller";
 
 const suite = "tab-navigation";
 const spec = "bottom-navigation";
@@ -14,9 +14,10 @@ describe(`${suite}-${spec}-suite`, async function () {
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        await driver.resetApp();
+        await driver.restartApp();
         bottomNavigationBasePage = new BottomNavigationBasePage(driver);
         await bottomNavigationBasePage.initSuite();
+        driver.imageHelper.blockOutAreas = [{ x: 40, y: 0, height: 150, width: 325 }];
     });
 
     after(async function () {
@@ -26,13 +27,16 @@ describe(`${suite}-${spec}-suite`, async function () {
     beforeEach(async function () {
         driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
         driver.imageHelper.options = {
-            tolerance: 0.01,
             timeOutSeconds: 5,
-            preserveImageName: true
+            donNotAppendActualSuffixOnIntialImageCapture: true,
         };
     });
 
     afterEach(async function () {
+        const orientation = await driver.getOrientation();
+        if (orientation === DeviceOrientaion.LANDSCAPE) {
+            await driver.setOrientation(DeviceOrientaion.PORTRAIT);
+        }
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
             await driver.resetApp();
@@ -42,8 +46,75 @@ describe(`${suite}-${spec}-suite`, async function () {
 
     it(`${spec}-background-color`, async function () {
         await bottomNavigationBasePage.navigateToSample("background-color");
-
         await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    /*
+    * Bug
+    */
+    it(`${spec}-binding-add-items`, async function () {
+        await bottomNavigationBasePage.navigateToSample("binding");
+        await driver.imageHelper.compareScreen();
+
+        const addTabBtn = await driver.waitForElement("add-tab");
+        const addTabBtnRect = await addTabBtn.getActualRectangle();
+        const clickAddTab = async () => {
+            await driver.clickPoint((addTabBtnRect.y + addTabBtnRect.width) / 2, (addTabBtnRect.x + addTabBtnRect.height) / 2);
+        };
+
+        await clickAddTab();
+        await driver.imageHelper.compareScreen();
+
+        await clickAddTab();
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    /*
+    * Bug
+    */
+    it(`${spec}-binding-remove-items`, async function () {
+        await bottomNavigationBasePage.navigateToSample("binding");
+        await driver.imageHelper.compareScreen();
+
+        const removeTabBtn = await driver.waitForElement("remove-last-tab");
+        const removeTabBtnRect = await removeTabBtn.getActualRectangle();
+        const clickRemoveTab = async () => {
+            await driver.clickPoint((removeTabBtnRect.y + removeTabBtnRect.width) / 2, (removeTabBtnRect.x + removeTabBtnRect.height) / 2);
+        };
+
+        await clickRemoveTab();
+        await driver.imageHelper.compareScreen();
+
+        // Remove all items.
+        await clickRemoveTab();
+        await driver.imageHelper.compareScreen();
+
+        // add items
+        const addTabBtn = await driver.waitForElement("add-tab");
+        await addTabBtn.tap();
+        await addTabBtn.tap();
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
@@ -52,6 +123,15 @@ describe(`${suite}-${spec}-suite`, async function () {
     it(`${spec}-bottom-navigation`, async function () {
         await bottomNavigationBasePage.navigateToSample("bottom-navigation");
         await driver.imageHelper.compareScreen();
+
+        const goToSecondBtn = await driver.waitForElement("goToSecond");
+        await goToSecondBtn.tap();
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
@@ -59,14 +139,81 @@ describe(`${suite}-${spec}-suite`, async function () {
     it(`${spec}-color`, async function () {
         await bottomNavigationBasePage.navigateToSample("color");
         await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-fancy-fonts-select-tabs`, async function () {
+        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
+        await driver.imageHelper.compareScreen();
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+
+        for (let index = 1; index < 4; index++) {
+            await bottomNavigationBasePage.tabOnItem(index);
+            await driver.imageHelper.compareScreen();
+        }
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-fancy-fonts-selected-index`, async function () {
+        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
+
+        let selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
+        logInfo(`Click on "select second tab button"`);
+        await selectSecondTabFromCodeBehind.tap();
+        await driver.imageHelper.compareScreen();
+
+        await driver.backgroundApp(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
+        logInfo(`Click on "select second tab button"`);
+        await selectSecondTabFromCodeBehind.tap();
+        await driver.imageHelper.compareScreen();
+
+        await driver.backgroundApp(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(3);
+        await driver.imageHelper.compareScreen();
+
+        await driver.backgroundApp(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-fancy-fonts-change-orientation`, async function () {
+        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
+        await driver.setOrientation(DeviceOrientaion.LANDSCAPE);
+        await driver.imageHelper.compareScreen();
+
+        await driver.backgroundApp(1);
+        await driver.imageHelper.compareScreen();
+
+        await driver.setOrientation(DeviceOrientaion.PORTRAIT);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
 
     it(`${spec}-icon-change`, async function () {
-        await bottomNavigationBasePage.navigateToSample("tab-view-icon-change");
+        await bottomNavigationBasePage.navigateToSample("icon-change");
         const index = driver.nsCapabilities.device.platform === Platform.IOS
-            ? (driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
+            ? (+driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
 
         let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
         await btns[index].tap();
@@ -88,23 +235,14 @@ describe(`${suite}-${spec}-suite`, async function () {
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-issue-5470`, async function () {
+    it(`${spec}-5470-issue`, async function () {
         await bottomNavigationBasePage.navigateToSample("issue-5470");
+        await bottomNavigationBasePage.refreshBottomNavigationTab();
         await driver.imageHelper.compareScreen();
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
 
-    it(`${spec}-swipe-enabled`, async function () {
-        await bottomNavigationBasePage.navigateToSample("swipe-enabled");
+        await bottomNavigationBasePage.tabOnItem(1);
         await driver.imageHelper.compareScreen();
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await bottomNavigationBasePage.navigateBackToSuitMainPage();
-    });
 
-    it(`${spec}-tabs-position`, async function () {
-        await bottomNavigationBasePage.navigateToSample("tabs-position");
-        await driver.imageHelper.compareScreen();
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });

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

@@ -3,6 +3,7 @@ import { TabViewBasePage } from "./tab-view-base-page";
 import { Platform } from "mobile-devices-controller";
 import { setImageName } from "../../../helpers/image-helper";
 import { assert } from "chai";
+import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
 
 const suite = "tab-navigation";
 const spec = "tab-view-common";
@@ -14,9 +15,10 @@ describe(`${suite}-${spec}-suite`, async function () {
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        await driver.resetApp();
-        tabViewBasePage = new TabViewBasePage(driver);
+        await driver.restartApp();
+        tabViewBasePage = new TabViewBasePage(driver, ElementCacheStrategy.onload);
         await tabViewBasePage.initSuite();
+        driver.imageHelper.options.donNotAppendActualSuffixOnIntialImageCapture = true;
     });
 
     after(async function () {
@@ -25,10 +27,6 @@ describe(`${suite}-${spec}-suite`, async function () {
 
     beforeEach(async function () {
         driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
-        driver.imageHelper.options = {
-            tolerance: 0.01,
-            timeOutSeconds: 5
-        };
     });
 
     afterEach(async function () {
@@ -39,18 +37,85 @@ describe(`${suite}-${spec}-suite`, async function () {
         }
     });
 
-    it(`${spec}-style`, async function () {
-        await tabViewBasePage.navigateToSample("tabStyle");
+    it(`${spec}-5470-issue`, async function () {
+        await tabViewBasePage.navigateToSample("issue-5470");
+        await driver.imageHelper.compareScreen();
 
+        const tab2 = await driver.waitForElement("Tab2");
+        await tab2.click();
+        await driver.imageHelper.compareScreen();
+
+        const tab1 = await driver.waitForElement("Tab1");
+        await tab1.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-text-color`, async function () {
+        await tabViewBasePage.navigateToSample("tab-text-color");
+        await driver.imageHelper.compareScreen();
+
+        const tab2 = await driver.waitForElement("Tab 2");
+        await tab2.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-android-swipe-disabled`, async function () {
+        if (driver.isIOS) {
+            this.skip();
+        }
+        await tabViewBasePage.navigateToSample("tab-view-android-swipe");
+
+        await driver.swipe(
+            {
+                x: driver.nsCapabilities.device.viewportRect.width + driver.nsCapabilities.device.viewportRect.x - 10,
+                y: driver.nsCapabilities.device.viewportRect.height / 2
+            },
+            {
+                yOffset: 0,
+                xOffset: driver.nsCapabilities.device.viewportRect.x + 10
+            }
+            , 100);
         await driver.imageHelper.compareScreen({ timeOutSeconds: 5, tolerance: 0.01 });
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-more-items`, async function () {
-        await tabViewBasePage.navigateToSample("tabmore");
+    it(`${spec}-bottom-position`, async function () {
+        await tabViewBasePage.navigateToSample("tab-view-bottom-position");
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    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;
+
+        const tabItemLocator = driver.isAndroid ? driver.locators.image :  driver.locators.getElementByName("imagebutton");
+        let btns = await driver.findElementsByClassName(tabItemLocator, 5000);
+        await btns[index].tap();
+        await driver.imageHelper.compareScreen();
+
+        btns = await driver.findElementsByClassName(tabItemLocator, 5000);
+        await btns[index - 1].tap();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-title-placement`, async function () {
+        await tabViewBasePage.navigateToSample("tab-view-icon-title-placement");
         await driver.imageHelper.compareScreen();
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
@@ -77,7 +142,91 @@ describe(`${suite}-${spec}-suite`, async function () {
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-fonts`, async function () {
+    it(`${spec}-icons-local`, async function () {
+        await tabViewBasePage.navigateToSample("tab-view-icons-local");
+        await driver.imageHelper.compareScreen();
+
+        const rect = await (await driver.waitForElement("automatic")).getActualRectangle();
+
+        await driver.clickPoint(rect.x + 10, rect.y + 10);
+        await driver.imageHelper.compareScreen();
+
+        await driver.clickPoint(rect.x + 10, rect.y + 10);
+        await driver.imageHelper.compareScreen();
+
+        await driver.clickPoint(rect.x + 10, rect.y + 10);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-text-font-size`, async function () {
+        await tabViewBasePage.navigateToSample("tab-view-tab-text-font-size");
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-background`, async function () {
+        await tabViewBasePage.navigateToSample("tabBG");
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-color`, async function () {
+        await tabViewBasePage.navigateToSample("tabColor");
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-style`, async function () {
+        await tabViewBasePage.navigateToSample("tabStyle");
+        await driver.imageHelper.compareScreen();
+
+        const tab1 = await driver.waitForElement("First");
+        await tab1.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-tabs-background-color`, async function () {
+        await tabViewBasePage.navigateToSample("tabTabsBG");
+        await driver.imageHelper.compareScreen();
+
+        const tab2 = await driver.waitForElement("Second");
+        await tab2.click();
+        await driver.imageHelper.compareScreen();
+
+        const tab1 = await driver.waitForElement("First");
+        await tab1.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-more`, async function () {
+        await tabViewBasePage.navigateToSample("tabmore");
+        await driver.imageHelper.compareScreen();
+
+        const tab2 = await driver.waitForElement("Tab 2");
+        await tab2.click();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-text-transform`, async function () {
         await tabViewBasePage.navigateToSample("text-transform");
         await driver.imageHelper.compareScreen();
 
@@ -90,22 +239,4 @@ describe(`${suite}-${spec}-suite`, async function () {
 
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
-
-    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 driver.imageHelper.compareScreen();
-
-        btns = await driver.findElementsByClassName(driver.locators.button, 5000);
-        await btns[index - 1].tap();
-        await driver.imageHelper.compareScreen();
-
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-
-        await tabViewBasePage.navigateBackToSuitMainPage();
-    });
 });

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

@@ -14,33 +14,39 @@ describe(`${suite}-${spec}-suite`, async function () {
     let tabViewBasePage: TabViewBasePage;
 
     const samples = [
-        "tab-text-color: green;",
-        "tab-background-color: yellow;",
-        "selected-tab-text-color: red;",
-        "android-selected-tab-highlight-color: orange;",
-        "text-transform: uppercase;",
-        "text-transform: lowercase;",
-        "text-transform: none;",
-        "all",
-        "reset"];
+        { sample: "tab-text-color: green;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "tab-background-color: yellow;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "selected-tab-text-color: red;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "android-selected-tab-highlight-color: orange;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: uppercase;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: lowercase;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: capitalize;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "text-transform: none;", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "all", tab1: "IteM onE", tab2: "IteM twO" },
+        { sample: "reset", tab1: "IteM onE", tab2: "IteM twO" },
+    ];
 
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        await driver.resetApp();
-        tabViewBasePage = new TabViewBasePage(driver, ElementCacheStrategy.onload);
+        await driver.restartApp();
+        tabViewBasePage = new TabViewBasePage(driver, ElementCacheStrategy.none);
         await tabViewBasePage.init("tabViewCss");
+        driver.imageHelper.options.keepOriginalImageSize = false;
+        driver.imageHelper.options.donNotAppendActualSuffixOnIntialImageCapture = true;
     });
 
     after(async function () {
         await tabViewBasePage.endSuite();
     });
 
-    beforeEach(function () {
-        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
-    });
-
     afterEach(async function () {
+        // Fixes crashes when we try to apply some css. all -> reset
+        if (driver.isAndroid) {
+            await tabViewBasePage.navigateBackToSuitMainPage();
+            await tabViewBasePage.navigateToSample("tabViewCss");
+        }
+
         if (this.currentTest.state === "failed") {
             await driver.logTestArtifacts(this.currentTest.title);
             await driver.resetApp();
@@ -50,23 +56,27 @@ describe(`${suite}-${spec}-suite`, async function () {
 
     for (let index = 0; index < samples.length; index++) {
         const sample = samples[index];
-        const imageName = `${spec}-${sample.replace(/[^a-z]/ig, "-").replace(/(-+)/ig, "-").replace(/(_+)/ig, "_").replace(/-$/, "")}`;
+        let imageName = `${spec}-${sample.sample.replace(/[^a-z]/ig, "-").replace(/(-+)/ig, "-").replace(/(_+)/ig, "_").replace(/-$/, "")}`;
         it(imageName, async function () {
             if (driver.platformName === Platform.ANDROID
-                && (sample === "All" || sample === "reset")) {
+                && (sample.sample.toLowerCase() === "all" || sample.sample.toLowerCase() === "reset")) {
                 await driver.scroll(Direction.down, 400, 200, 300, 200);
             }
-            const scenarioBtn = await driver.waitForElement(sample);
-            await scenarioBtn.click();
-            await driver.wait(2000);
+            const scenarioBtn = await driver.waitForElement(sample.sample);
+            await scenarioBtn.tap();
+            imageName = setImageName(suite, spec, imageName);
             await driver.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
-            if (sample === "All") {
-                const tabTwo = await driver.waitForElement("twO");
-                await driver.wait(2000);
+            const tabTwo = await driver.waitForElement(sample.tab2);
+            await tabTwo.click();
+            await driver.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5 });
 
-                await driver.imageHelper.compareElement(tabTwo, { timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
+            const imageComparissonresult = driver.imageHelper.hasImageComparisonPassed();
+            assert.isTrue(imageComparissonresult);
+
+            if (imageComparissonresult) {
+                const tabOne = await driver.waitForElement(sample.tab1);
+                await tabOne.tap();
             }
-            assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         });
     }
 });

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

@@ -14,7 +14,7 @@ describe(`${suite}-${spec}-suite`, async function () {
     before(async function () {
         nsCapabilities.testReporter.context = this;
         driver = await createDriver();
-        await driver.resetApp();
+        await driver.restartApp();
         tabsViewBasePage = new TabsViewBasePage(driver);
         await tabsViewBasePage.initSuite();
     });
@@ -28,7 +28,7 @@ describe(`${suite}-${spec}-suite`, async function () {
         driver.imageHelper.options = {
             tolerance: 0.01,
             timeOutSeconds: 5,
-            preserveImageName: true
+            donNotAppendActualSuffixOnIntialImageCapture: true
         };
     });
 
@@ -44,29 +44,22 @@ describe(`${suite}-${spec}-suite`, async function () {
         await tabsViewBasePage.navigateToSample("background-color");
 
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-bottom-navigation`, async function () {
-        await tabsViewBasePage.navigateToSample("bottom-navigation");
-        await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
     it(`${spec}-color`, async function () {
         await tabsViewBasePage.navigateToSample("color");
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         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;
+            ? (+driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
 
         let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
         await btns[index].tap();
@@ -76,7 +69,7 @@ describe(`${suite}-${spec}-suite`, async function () {
         await btns[index - 1].tap();
         await driver.imageHelper.compareScreen();
 
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
@@ -84,28 +77,28 @@ describe(`${suite}-${spec}-suite`, async function () {
     it(`${spec}-icon-title-placment`, async function () {
         await tabsViewBasePage.navigateToSample("icon-title-placement");
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 
     it(`${spec}-issue-5470`, async function () {
         await tabsViewBasePage.navigateToSample("issue-5470");
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 
     it(`${spec}-swipe-enabled`, async function () {
         await tabsViewBasePage.navigateToSample("swipe-enabled");
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 
     it(`${spec}-tabs-position`, async function () {
         await tabsViewBasePage.navigateToSample("tabs-position");
         await driver.imageHelper.compareScreen();
-       assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 });

e2e/ui-tests-app/package.json

@@ -2,7 +2,7 @@
   "nativescript": {
     "id": "org.nativescript.uitestsapp",
     "tns-android": {
-      "version": "next"
+      "version": "6.0.0-2019-07-05-092721-01"
     },
     "tns-ios": {
       "version": "next"
@@ -34,11 +34,11 @@
   "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
   "readme": "NativeScript Application",
   "scripts": {
-    "test": "mocha --opts ../config/mocha.opts",
-    "test-debug": "./node_modules/.bin/ns-dev-appium --startSession",
-    "test-watch": "tsc -p e2e --watch",
+    "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",
+    "e2e-debug": "./node_modules/.bin/ns-dev-appium --startSession",
+    "e2e-watch": "tsc -p e2e --watch",
+    "e2e-tsc": "tsc -p e2e",
     "pretest": "tsc -p e2e",
-    "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"
   }