Merge pull request #7550 from NativeScript/svetoslavtsenov/merge-tests-in-master

chore: merge tests in master

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=bottom-navigation",
                 "-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="tabNavigation"  >
     <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;
+import { BottomNavigationViewModel } from "./bottom-navigation-view-model";
 
 export function bottomNavigaitonLoaded(args) {
-    let bottomNav = args.object;
-    bottomNav.bindingContext = viewModel;
-}
-
-export function addTabs(args) {
-    viewModel.createItems();
+    const bottomNav = args.object.page;
+    bottomNav.bindingContext = new 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="tabNavigation"  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,35 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
+  <BottomNavigation automationText="tabNavigation"  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="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="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="tabNavigation" >
     <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

@@ -2,7 +2,6 @@
 import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
 import { Label } from "tns-core-modules/ui/label";
 import { Observable } from "tns-core-modules/data/observable";
-import { ObservableArray } from "tns-core-modules/data/observable-array";
 import { TabStripItem } from "tns-core-modules/ui/tab-navigation-base/tab-strip-item";
 import { TabContentItem } from "tns-core-modules/ui/tab-navigation-base/tab-content-item";
 
@@ -17,7 +16,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 +32,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 +57,3 @@ export class BottomNavigationViewModel extends Observable {
         return contentItem;
     }
 }
-export var 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="tabNavigation"  >
     <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,44 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+Page {
+    background-color: tomato;
+}
+
+ActionBar {
+    background-color: aquamarine;
+}
+
+Button {
+    background-color: lightskyblue;
+}
+
+BottomNavigation {
+    background-color: lightgreen;
+}
+
+#lastStripItem {
+    color: greenyellow;
+    background-color: black;
+}
+
+TabStripItem:active, #lastStripItem:active {
+    background-color:coral;
+}
+
+#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,82 @@
+<Page>
+  <ActionBar title="BottomNavigation" icon="" class="action-bar">
+  </ActionBar>
+  <BottomNavigation id="bottomNavigation" automationText="tabNavigation"  class="font-awesome">
+    <TabStrip>
+      <TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
+      <TabStripItem iconSource="font://&#xf206;" title="icon">
+      </TabStripItem>
+
+      <TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>
+
+      <TabStripItem title="Simply Long Title"></TabStripItem>
+      
+      <TabStripItem iconSource="res://icon" id="lastStripItem" 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/font-icons-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation class="font-awesome"> <!-- TODO: The font-awesome class here should be removed -->
+  <BottomNavigation class="font-awesome" automationText="tabNavigation"  > <!-- TODO: The font-awesome class here should be removed -->
     <TabStrip>
         <!-- font family + font size + color -->
         <TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>

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

@@ -1,9 +1,9 @@
 <Page class="page">
 
-  <ActionBar title="BottomNavigation color" icon="" class="action-bar">
+  <ActionBar title="BottomNavigation FONT" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

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="tabNavigation"  >
         <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="tabNavigation"  >
     <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="tabNavigation" >
         <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/bottom-navigation/text-transform-page.xml

@@ -1,9 +1,9 @@
 <Page class="page">
 
-  <ActionBar title="BottomNavigation color" icon="" class="action-bar">
+  <ActionBar title="BottomNavigation Text Transform" icon="" class="action-bar">
   </ActionBar>
 
-  <BottomNavigation>
+  <BottomNavigation automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="first" class="special"></TabStripItem>
         <TabStripItem title="second"></TabStripItem>

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/app/tabs/background-color-page.xml

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

e2e/ui-tests-app/app/tabs/color-page.css

@@ -3,7 +3,7 @@ Tabs {
 }
 
 TabContentItem.special {
-  color: olive;
+  color: green;
 }
 
 TabStrip {

e2e/ui-tests-app/app/tabs/color-page.xml

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

e2e/ui-tests-app/app/tabs/default-page.xml

@@ -18,7 +18,7 @@
   </BottomNavigation> -->
 
   <!-- w/ TabStrip -->
-  <Tabs id="tabsNav">
+  <Tabs id="tabsNav" automationText="tabNavigation"  >
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>

e2e/ui-tests-app/app/tabs/font-icons-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="Tabs font icons" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs class="font-awesome"> <!-- TODO: The font-awesome class here should be removed -->
+  <Tabs class="font-awesome" automationText="tabNavigation"  > <!-- TODO: The font-awesome class here should be removed -->
     <TabStrip>
         <!-- font family + font size + color -->
         <TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>

e2e/ui-tests-app/app/tabs/font-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="Tabs font" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs>
+  <Tabs automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="First" class="special"></TabStripItem>
         <TabStripItem title="Second"></TabStripItem>

e2e/ui-tests-app/app/tabs/highlight-color-page.xml

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

e2e/ui-tests-app/app/tabs/icon-change-page.xml

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

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

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

e2e/ui-tests-app/app/tabs/issue-5470-page.xml

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

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

@@ -21,7 +21,7 @@ export function loadExamples() {
     examples.set("highlight-color", "tabs/highlight-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("swipe-disabled", "tabs/swipe-disabled-page");
     examples.set("strip-item", "tabs/tab-strip-item-page");
     examples.set("strip-items", "tabs/tab-strip-items-page");
     examples.set("tabs-position", "tabs/tabs-position-page");

e2e/ui-tests-app/app/tabs/swipe-disabled-page.xml

@@ -1,9 +1,9 @@
 <Page>
 
-  <ActionBar title="Tabs Swipe Enabled False" icon="" class="action-bar">
+  <ActionBar title="Tabs Swipe Disabled" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs id="tabs" swipeEnabled="false">
+  <Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation"  >
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>

e2e/ui-tests-app/app/tabs/tab-strip-item-page.xml

@@ -1,5 +1,5 @@
 <Page>
-  <Tabs id="tabs">
+  <Tabs id="tabs" automationText="tabNavigation"  >
 
     <TabStrip>
 

e2e/ui-tests-app/app/tabs/tab-strip-items-page.xml

@@ -1,5 +1,5 @@
 <Page>
-  <Tabs id="tabs">
+  <Tabs id="tabs" automationText="tabNavigation"  >
 
     <TabStrip>
 

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

@@ -1,12 +1,6 @@
-import * as vmModule from "./tabs-binding-view-model";
-
-var viewModel = vmModule.tabsBindingNavigationViewModel;
+import { TabsBindingNavigationViewModel } from "./tabs-binding-view-model";
 
 export function tabsLoaded(args) {
-    let tabs = args.object;
-    tabs.bindingContext = viewModel;
-}
-
-export function addTabs(args) {
-    viewModel.createItems();
+    const page = args.object.page;
+    page.bindingContext = new TabsBindingNavigationViewModel();
 }

e2e/ui-tests-app/app/tabs/tabs-binding-page.xml

@@ -4,9 +4,12 @@
   </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">
-        <Tabs loaded="tabsLoaded" items="{{ tabContentItems }}">
+        <Tabs loaded="tabsLoaded" items="{{ tabContentItems }}" automationText="tabNavigation"  >
             <TabStrip items="{{ tabStripItems }}"></TabStrip>
         </Tabs>
     </GridLayout>

e2e/ui-tests-app/app/tabs/tabs-binding-view-model.ts

@@ -18,6 +18,8 @@ export class TabsBindingNavigationViewModel extends Observable {
     }
 
     createItems() {
+        console.log("Create item");
+
         const _tabStripItems = new Array<TabStripItem>();
         const _tabContentItems = new Array<TabContentItem>();
 
@@ -31,6 +33,12 @@ export class TabsBindingNavigationViewModel 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,3 @@ export class TabsBindingNavigationViewModel extends Observable {
         return contentItem;
     }
 }
-export var tabsBindingNavigationViewModel = new TabsBindingNavigationViewModel();

e2e/ui-tests-app/app/tabs/tabs-page.xml

@@ -18,7 +18,7 @@
   </BottomNavigation> -->
 
   <!-- w/ TabStrip -->
-  <Tabs id="tabsNav">
+  <Tabs id="tabsNav" automationText="tabNavigation"  >
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>

e2e/ui-tests-app/app/tabs/tabs-position-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="Tabs Position Bottom" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs id="tabs" tabsPosition="bottom">
+  <Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation"  >
     <TabStrip>
       <TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
       <TabStripItem>

e2e/ui-tests-app/app/tabs/text-transform-page.xml

@@ -3,7 +3,7 @@
   <ActionBar title="Tabs text-transform" icon="" class="action-bar">
   </ActionBar>
 
-  <Tabs>
+  <Tabs automationText="tabNavigation"  >
     <TabStrip>
         <TabStripItem title="first" class="special"></TabStripItem>
         <TabStripItem title="second"></TabStripItem>

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

@@ -1,4 +1,4 @@
-import { AppiumDriver, IRectangle, logInfo } from "nativescript-dev-appium";
+import { AppiumDriver, IRectangle, logInfo, logWarn, Point } from "nativescript-dev-appium";
 
 export enum ElementCacheStrategy {
     allAtOnce,
@@ -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));
             }
@@ -102,7 +103,19 @@ export class NavigationHelper {
 
     async swipeBackToSuitMainPage() {
         logInfo(`Swipe to back`);
-        throw new Error("Not implemented!");
+        const startPoint = <Point>{};
+        const endPoint = <Point>{};
+
+        if (this._driver.isIOS) {
+            startPoint.x = 5;
+            startPoint.y = this._driver.nsCapabilities.device.viewportRect.y / this._driver.nsCapabilities.device.config.density;
+            endPoint.x = (this._driver.nsCapabilities.device.viewportRect.width / this._driver.nsCapabilities.device.config.density) - 5;
+            endPoint.y = startPoint.y;
+
+            await this._driver.swipe(startPoint, endPoint);
+        } else {
+            logWarn("Swipe back is not supported from android!");
+        }
     }
 
     private async cacheAllElements(cachedElements: ICachedElement) {

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

@@ -1,5 +1,6 @@
 import { AppiumDriver, logInfo } from "nativescript-dev-appium";
 import { NavigationHelper, ElementCacheStrategy } from "./helpers/navigation-helper";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 
 export abstract class PageObjectBaseModel {
 
@@ -7,6 +8,11 @@ export abstract class PageObjectBaseModel {
 
     constructor(protected _driver: AppiumDriver, protected _naviagtionLinks: Array<string>, elementCacheStrategy: ElementCacheStrategy = ElementCacheStrategy.none) {
         this.navigationHelper = new NavigationHelper(this._driver, this._naviagtionLinks, elementCacheStrategy);
+        this._driver.imageHelper.options.overwriteActualImage = process.env["OVERWRITE_ACTUALIMAGE"] === "true";
+        this._driver.imageHelper.options.waitBeforeCreatingInitialImageCapture = +process.env["WAIT_BEFORE_CREATING_INITIAL_IMAGE_CAPTURE"] || 9000;
+        this._driver.imageHelper.options.keepOriginalImageSize = false;
+        this._driver.imageHelper.options.tolerance = 0;
+        this._driver.imageHelper.options.toleranceType = ImageOptions.pixel;
     }
 
     async initSuite() {

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,15 +3,17 @@ 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) {
         super(_driver, ["button", "background"], ElementCacheStrategy.none);
+        this._driver.imageHelper.options.toleranceType = ImageOptions.percent;
     }
 
     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");
         }
@@ -43,10 +45,10 @@ export class ButtonBackgroundPage extends PageObjectBaseModel {
         }
     }
 
-    async executeScenario(imageName: string, button: string) {
+    async executeScenario(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, undefined, 0.01, 5, ImageOptions.percent);
+        assert.isTrue(result);
     }
 }

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

@@ -1,20 +1,23 @@
 import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
 import { ButtonBackgroundPage } from "./button-background-page";
 import { assert } from "chai";
+import { setImageName } from "../../../helpers/image-helper";
 
 const suite = "button";
 const spec = "background";
+const imagePrefix = `${suite}-${spec}`;
 
-describe(`${suite}-${spec}-suite`, () => {
+describe(`${imagePrefix}-suite`, () => {
     let driver: AppiumDriver;
     let backgroundPage: ButtonBackgroundPage;
 
     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.donNotAppendActualSuffixOnIntialImageCapture = true;
     });
 
     after(async function () {
@@ -22,138 +25,137 @@ describe(`${suite}-${spec}-suite`, () => {
     });
 
     beforeEach(function () {
-        driver.imageHelper.testName = this.currentTest.title;
+        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
     });
 
     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 () {
+    it(`${imagePrefix}-init`, async function () {
         const presenter = await backgroundPage.testElement();
-        await driver.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        const result = await driver.compareElement(presenter, `${imagePrefix}-reset`);
+        assert.isTrue(result);
     });
 
-    it("background_12", async function () {
-        await await backgroundPage.executeScenario("background_12", "1");
+    it(`${imagePrefix}-1`, async function () {
+        await await backgroundPage.executeScenario("1");
     });
 
-    it("background_13", async function () {
+    it(`${imagePrefix}-reset`, async function () {
         await backgroundPage.tapResetBtn();
         const presenter = await backgroundPage.testElement();
-        await driver.imageHelper.compareElement(presenter, { imageName: "background_11_clean", tolerance: 0.1 });
-        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        const result = await driver.compareElement(presenter, `${imagePrefix}-reset`);
+        assert.isTrue(result);
     });
 
     // Border
-    it("background_21_border", async function () {
-        // await backgroundPage.navigateBackToSuitMainPage();
-        await backgroundPage.executeScenario("background_21_border", "21");
+    it(`${imagePrefix}-21-borders`, async function () {
+        await backgroundPage.executeScenario("21");
     });
 
-    it("background_22_border", async function () {
-        await backgroundPage.executeScenario("background_22_border", "22");
+    it(`${imagePrefix}-22-borders`, async function () {
+        await backgroundPage.executeScenario("22");
     });
 
-    it("background_23_border", async function () {
-        await backgroundPage.executeScenario("background_23_border", "23");
+    it(`${imagePrefix}-23-borders`, async function () {
+        await backgroundPage.executeScenario("23");
     });
 
     // Repeat
-    it("background_31_repeat", async function () {
-        await backgroundPage.executeScenario("background_31_repeat", "31");
+    it(`${imagePrefix}-31-repeat`, async function () {
+        await backgroundPage.executeScenario("31");
     });
 
-    it("background_32_repeat", async function () {
-        await backgroundPage.executeScenario("background_32_repeat", "32");
+    it(`${imagePrefix}-32-repeat`, async function () {
+        await backgroundPage.executeScenario("32");
     });
 
-    it("background_33_repeat", async function () {
-        await backgroundPage.executeScenario("background_33_repeat", "33");
+    it(`${imagePrefix}-33-repeat`, async function () {
+        await backgroundPage.executeScenario("33");
     });
 
     // Position
-    it("background_41_position", async function () {
-        await backgroundPage.executeScenario("background_41_position", "41");
+    it(`${imagePrefix}-41-position`, async function () {
+        await backgroundPage.executeScenario("41");
     });
 
-    it("background_42_position", async function () {
-        await backgroundPage.executeScenario("background_42_position", "42");
+    it(`${imagePrefix}-42-position`, async function () {
+        await backgroundPage.executeScenario("42");
     });
 
-    it("background_43_position", async function () {
-        await backgroundPage.executeScenario("background_43_position", "43");
+    it(`${imagePrefix}-43-position`, async function () {
+        await backgroundPage.executeScenario("43");
     });
 
-    it("background_44_position", async function () {
-        await backgroundPage.executeScenario("background_44_position", "44");
+    it(`${imagePrefix}-44-position`, async function () {
+        await backgroundPage.executeScenario("44");
     });
 
-    it("background_45_position", async function () {
-        await backgroundPage.executeScenario("background_45_position", "45");
+    it(`${imagePrefix}-45-position`, async function () {
+        await backgroundPage.executeScenario("45");
     });
 
-    it("background_46_position", async function () {
-        await backgroundPage.executeScenario("background_46_position", "46");
+    it(`${imagePrefix}-46-position`, async function () {
+        await backgroundPage.executeScenario("46");
     });
 
-    it("background_47_position", async function () {
-        await backgroundPage.executeScenario("background_47_position", "47");
+    it(`${imagePrefix}-47-position`, async function () {
+        await backgroundPage.executeScenario("47");
     });
 
-    it("background_48_position", async function () {
-        await backgroundPage.executeScenario("background_48_position", "48");
+    it(`${imagePrefix}-48-position`, async function () {
+        await backgroundPage.executeScenario("48");
     });
 
-    it("background_49_position", async function () {
-        await backgroundPage.executeScenario("background_49_position", "49");
+    it(`${imagePrefix}-49-position`, async function () {
+        await backgroundPage.executeScenario("49");
     });
 
-    it("background_50_position", async function () {
-        await backgroundPage.executeScenario("background_50_position", "50");
+    it(`${imagePrefix}-50-position`, async function () {
+        await backgroundPage.executeScenario("50");
     });
 
-    it("background_51_position", async function () {
-        await backgroundPage.executeScenario("background_51_position", "51");
+    it(`${imagePrefix}-51-position`, async function () {
+        await backgroundPage.executeScenario("51");
     });
 
-    it("background_52_position", async function () {
-        await backgroundPage.executeScenario("background_52_position", "52");
+    it(`${imagePrefix}-52-position`, async function () {
+        await backgroundPage.executeScenario("52");
     });
 
     // Size
-    it("background_61_size", async function () {
-        await backgroundPage.executeScenario("background_61_size", "61");
+    it(`${imagePrefix}-61-size`, async function () {
+        await backgroundPage.executeScenario("61");
     });
 
-    it("background_62_size", async function () {
-        await backgroundPage.executeScenario("background_62_size", "62");
+    it(`${imagePrefix}-62-size`, async function () {
+        await backgroundPage.executeScenario("62");
     });
 
-    it("background_63_size", async function () {
-        await backgroundPage.executeScenario("background_63_size", "63");
+    it(`${imagePrefix}-63-size`, async function () {
+        await backgroundPage.executeScenario("63");
     });
 
-    it("background_64_size", async function () {
-        await backgroundPage.executeScenario("background_64_size", "64");
+    it(`${imagePrefix}-64-size`, async function () {
+        await backgroundPage.executeScenario("64");
     });
 
     // All
-    it("background_71_all", async function () {
-        await backgroundPage.executeScenario("background_71_all", "71");
+    it(`${imagePrefix}-71-all`, async function () {
+        await backgroundPage.executeScenario("71");
     });
 
-    it("background_72_all", async function () {
-        await backgroundPage.executeScenario("background_72_all", "72");
+    it(`${imagePrefix}-72-all`, async function () {
+        await backgroundPage.executeScenario("72");
     });
 
     // Antialiasing
-    it("background_78_antialiasing", async function () {
-        await backgroundPage.executeScenario("background_78_antialiasing", "78");
+    it(`${imagePrefix}-78-antialiasing`, async function () {
+        await backgroundPage.executeScenario("78");
     });
 });

e2e/ui-tests-app/e2e/suites/tab-navigation/README.md

@@ -0,0 +1,4 @@
+Please make sure that the 
+
+<BottomNavigation automationText="tabNavigation"  >
+<Tabs automationText="tabNavigation"  >

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

@@ -1,15 +1,21 @@
 import { AppiumDriver } from "nativescript-dev-appium";
-import { PageObjectBaseModel } from "../../../page-object-base-model";
 import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
+import { TabNavigationBasePage } from "../tab-navigation-base-page";
 
-export class BottomNavigationBasePage extends PageObjectBaseModel {
-
-    constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
-        super(_driver, ["bottom-navigation"], elementCacheStrategy);
+export class BottomNavigationBasePage extends TabNavigationBasePage {
+    private readonly mainWidgetXPath: string;
+    constructor(_driver: AppiumDriver) {
+        super(_driver, ["bottom-navigation"]);
+        this.mainWidgetXPath = this._driver.isIOS ?
+        `//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeTabBar`
+        : `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout`;
+    }
+    //android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout/*
+    async getItems() {
+        return await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
     }
 
-    async init(subSuiteName: string) {
-        this._naviagtionLinks.push(subSuiteName);
-        await super.initSuite();
+    async mainWidget() {
+        return await this._driver.findElementByXPath(this.mainWidgetXPath);
     }
 }

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

@@ -0,0 +1,71 @@
+import { nsCapabilities, createDriver, AppiumDriver, Direction } from "nativescript-dev-appium";
+import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
+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";
+const imagePrefix = `${suite}-${spec}`;
+
+describe(`${imagePrefix}-suite`, async function () {
+    let driver: AppiumDriver;
+    let bottomNavigationBasePage: BottomNavigationBasePage;
+
+    const samples = [
+        { 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: "reset", tab1: "IteM onE", tab2: "IteM twO" },
+    ];
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        bottomNavigationBasePage = new BottomNavigationBasePage(driver);
+        await bottomNavigationBasePage.init("css-text-transform");
+    });
+
+    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 () {
+            this.skip();
+            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.click();
+            imageName = setImageName(suite, spec, imageName);
+            await driver.imageHelper.compareScreen({ imageName: imageName });
+            const tabTwo = await driver.waitForElement(sample.tab2);
+            await tabTwo.click();
+            await driver.imageHelper.compareScreen({ imageName: imageName });
+
+            const imageComparissonresult = driver.imageHelper.hasImageComparisonPassed();
+            assert.isTrue(imageComparissonresult);
+
+            if (imageComparissonresult) {
+                const tabOne = await driver.waitForElement(sample.tab1);
+                await tabOne.click();
+            }
+        });
+    }
+});

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

@@ -1,6 +1,5 @@
-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";
 
@@ -14,7 +13,7 @@ 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();
     });
@@ -25,14 +24,13 @@ 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
-        };
     });
 
     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 +40,74 @@ describe(`${suite}-${spec}-suite`, async function () {
 
     it(`${spec}-background-color`, async function () {
         await bottomNavigationBasePage.navigateToSample("background-color");
-
         await driver.imageHelper.compareScreen();
+
+        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.refreshTabItems();
+        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.refreshTabItems();
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
 
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
@@ -52,6 +116,14 @@ 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.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
@@ -59,21 +131,95 @@ describe(`${suite}-${spec}-suite`, async function () {
     it(`${spec}-color`, async function () {
         await bottomNavigationBasePage.navigateToSample("color");
         await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        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");
-        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();
+    it(`${spec}-fancy-fonts-select-tabs`, async function () {
+        await bottomNavigationBasePage.navigateToSample("fancy-fonts");
         await driver.imageHelper.compareScreen();
 
-        btns = await driver.findElementsByClassName(driver.locators.button, 5000);
-        await btns[index - 1].tap();
+        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");
+
+        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}-font-icons`, async function () {
+        await bottomNavigationBasePage.navigateToSample("font-icons");
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-icon-change`, async function () {
+        await bottomNavigationBasePage.navigateToSample("icon-change");
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(0);
         await driver.imageHelper.compareScreen();
 
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
@@ -88,23 +234,35 @@ 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 driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-swipe-enabled`, async function () {
-        await bottomNavigationBasePage.navigateToSample("swipe-enabled");
+    it(`${spec}-text-transform`, async function () {
+        await bottomNavigationBasePage.navigateToSample("text-transform");
         await driver.imageHelper.compareScreen();
+
+        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");
+    it(`${spec}-fonts`, async function () {
+        await bottomNavigationBasePage.navigateToSample("text-transform");
         await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });

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

@@ -0,0 +1,73 @@
+import { AppiumDriver, Point, IRectangle, UIElement, logInfo, logWarn } from "nativescript-dev-appium";
+import { PageObjectBaseModel } from "../../page-object-base-model";
+import { ElementCacheStrategy } from "../../helpers/navigation-helper";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
+
+export abstract class TabNavigationBasePage extends PageObjectBaseModel {
+    protected bottomNavigatioinTabRect: IRectangle;
+    protected bottomNavigationItems: Array<UIElement>;
+    protected bottomNavigationItemsRects: Map<number, Point> = new Map();
+
+    constructor(_driver: AppiumDriver, navigationLinks: Array<string>) {
+        super(_driver, navigationLinks, ElementCacheStrategy.none);
+    }
+
+    abstract async mainWidget();
+    abstract async getItems();
+
+    async init(subSuiteName: string) {
+        this._naviagtionLinks.push(subSuiteName);
+        await super.initSuite();
+    }
+
+    async navigateToSample(sample: string) {
+        await super.navigateToSample(sample);
+        await this.refreshTabItems();
+    }
+
+    async refreshTabItems() {
+        this.bottomNavigationItems = await this.getItems();
+
+        for (let index = 0; index < this.bottomNavigationItems.length; index++) {
+            const point = await this.bottomNavigationItems[index].getRectangle();
+            this.bottomNavigationItemsRects.set(index, new Point(point.x + point.width / 2, point.y + point.height / 2));
+        }
+    }
+
+    async refreshTabWidget() {
+        const bottomNavigatioinTab = await this.mainWidget();
+        this.bottomNavigatioinTabRect = await bottomNavigatioinTab.getRectangle();
+    }
+
+    async tabOnItem(index: number) {
+        if (this.bottomNavigationItemsRects.size === 0) {
+            await this.refreshTabItems();
+        }
+        const point = this.bottomNavigationItemsRects.get(index);
+        logInfo(`Click on TabStrip index: ${index}`);
+        await this._driver.clickPoint(point.x, point.y);
+    }
+
+    async swipeRightToLeft() {
+        const startPoint = <Point>{};
+        const endPoint = <Point>{};
+
+        if (this._driver.isIOS) {
+            startPoint.x = (this._driver.nsCapabilities.device.viewportRect.x / this._driver.nsCapabilities.device.config.density 
+                + this._driver.nsCapabilities.device.viewportRect.width / this._driver.nsCapabilities.device.config.density);
+            startPoint.y = this._driver.nsCapabilities.device.viewportRect.y / this._driver.nsCapabilities.device.config.density
+                + (this._driver.nsCapabilities.device.viewportRect.height / this._driver.nsCapabilities.device.config.density) / 2;
+            endPoint.x = this._driver.nsCapabilities.device.viewportRect.x / this._driver.nsCapabilities.device.config.density;
+            endPoint.y = startPoint.y;
+        } else {
+            startPoint.x = this._driver.nsCapabilities.device.viewportRect.width - 5;
+            startPoint.y = this._driver.nsCapabilities.device.viewportRect.y
+                + this._driver.nsCapabilities.device.viewportRect.height / 2;
+            endPoint.x = this._driver.nsCapabilities.device.viewportRect.x + 5;
+            endPoint.y = startPoint.y;
+        }
+
+        await this._driver.swipe(startPoint, endPoint);
+        logWarn("Swipe from right to left!");
+    }
+}

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

@@ -1,6 +1,7 @@
 import { AppiumDriver } from "nativescript-dev-appium";
 import { PageObjectBaseModel } from "../../../page-object-base-model";
 import { ElementCacheStrategy } from "./../../../helpers/navigation-helper";
+import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 
 export class TabViewBasePage extends PageObjectBaseModel {
 

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,8 +15,8 @@ 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();
     });
 
@@ -25,10 +26,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 +36,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
+            },
+            {
+                y: 0,
+                x: 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());
 
@@ -58,6 +122,9 @@ describe(`${suite}-${spec}-suite`, async function () {
     });
 
     it(`${spec}-icons`, async function () {
+        if (driver.isAndroid) {
+            this.skip();
+        }
         await tabViewBasePage.navigateToSample("tab-view-icons");
         await driver.imageHelper.compareScreen();
 
@@ -77,7 +144,94 @@ describe(`${suite}-${spec}-suite`, async function () {
         await tabViewBasePage.navigateBackToSuitMainPage();
     });
 
-    it(`${spec}-fonts`, async function () {
+    it(`${spec}-icons-local`, async function () {
+        if (driver.isAndroid) {
+            this.skip();
+        }
+        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 +244,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

@@ -1,4 +1,4 @@
-import { nsCapabilities, createDriver, AppiumDriver, Direction } from "nativescript-dev-appium";
+import { nsCapabilities, createDriver, AppiumDriver, Direction, logError } from "nativescript-dev-appium";
 import { TabViewBasePage } from "./tab-view-base-page";
 import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
 import { Platform } from "mobile-devices-controller";
@@ -14,21 +14,23 @@ 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");
     });
 
@@ -36,11 +38,13 @@ describe(`${suite}-${spec}-suite`, 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 +54,33 @@ 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.isIOS && imageName.includes("android")) {
+                this.skip();
+            }
             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);
+                await driver.scroll(Direction.down, 400, 200, 300, 200);
                 await driver.scroll(Direction.down, 400, 200, 300, 200);
-            }
-            const scenarioBtn = await driver.waitForElement(sample);
-            await scenarioBtn.click();
-            await driver.wait(2000);
-            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);
 
-                await driver.imageHelper.compareElement(tabTwo, { timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });
             }
-            assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+            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/tabs/tab-tests.e2e-spec.ts

@@ -1,111 +0,0 @@
-import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
-import { TabsViewBasePage } from "./tabs-view-base-page";
-import { Platform } from "mobile-devices-controller";
-import { assert } from "chai";
-import { setImageName } from "../../../helpers/image-helper";
-
-const suite = "tab-navigation";
-const spec = "tabs";
-
-describe(`${suite}-${spec}-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 () {
-        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
-        driver.imageHelper.options = {
-            tolerance: 0.01,
-            timeOutSeconds: 5,
-            preserveImageName: true
-        };
-    });
-
-    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 driver.imageHelper.compareScreen();
-       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());
-        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 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 tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-icon-title-placment`, async function () {
-        await tabsViewBasePage.navigateToSample("icon-title-placement");
-        await driver.imageHelper.compareScreen();
-       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());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-
-    it(`${spec}-swipe-enabled`, async function () {
-        await tabsViewBasePage.navigateToSample("swipe-enabled");
-        await driver.imageHelper.compareScreen();
-       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());
-        await tabsViewBasePage.navigateBackToSuitMainPage();
-    });
-});

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

@@ -0,0 +1,256 @@
+import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
+import { TabsViewBasePage } from "./tabs-view-base-page";
+import { assert } from "chai";
+import { setImageName } from "../../../helpers/image-helper";
+
+const suite = "tab-navigation";
+const spec = "tabs";
+const imagePrefix = `${suite}-${spec}`;
+
+describe(`${imagePrefix}-suite`, async function () {
+    let driver: AppiumDriver;
+    let tabsViewBasePage: TabsViewBasePage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        tabsViewBasePage = new TabsViewBasePage(driver);
+        await tabsViewBasePage.initSuite();
+    });
+
+    after(async function () {
+        await tabsViewBasePage.endSuite();
+    });
+
+    beforeEach(async function () {
+        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
+        driver.imageHelper.options = {
+            donNotAppendActualSuffixOnIntialImageCapture: true
+        };
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+            await driver.resetApp();
+            await tabsViewBasePage.initSuite();
+        }
+    });
+
+    it(`${imagePrefix}-background-color`, async function () {
+        await tabsViewBasePage.navigateToSample("background-color");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    // not all css is applied.
+    it(`${imagePrefix}-color`, async function () {
+        await tabsViewBasePage.navigateToSample("color");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-font`, async function () {
+        await tabsViewBasePage.navigateToSample("font");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(0);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-font-icons`, async function () {
+        await tabsViewBasePage.navigateToSample("font-icons");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-highlight-color`, async function () {
+        await tabsViewBasePage.navigateToSample("highlight-color");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-icon-change`, async function () {
+        await tabsViewBasePage.navigateToSample("icon-change");
+
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(0);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-icon-title-placment`, async function () {
+        await tabsViewBasePage.navigateToSample("icon-title-placement");
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-issue-5470`, async function () {
+        await tabsViewBasePage.navigateToSample("issue-5470");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-strip-item`, async function () {
+        await tabsViewBasePage.navigateToSample("strip-item");
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-android-swipe-disabled`, async function () {
+        if (driver.isIOS) {
+            this.skip();
+        }
+        await tabsViewBasePage.navigateToSample("swipe-disabled");
+
+        await tabsViewBasePage.swipeRightToLeft();
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-swipe`, async function () {
+        await tabsViewBasePage.navigateToSample("tabs");
+        await tabsViewBasePage.swipeRightToLeft();
+
+        await driver.imageHelper.compareScreen();
+        await tabsViewBasePage.swipeRightToLeft();
+
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    /*
+    * Bug
+    */
+    it(`${imagePrefix}-binding-add-items`, async function () {
+        if (driver.isIOS) {
+            this.skip();
+        }
+        await tabsViewBasePage.navigateToSample("tabs-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 tabsViewBasePage.refreshTabItems();
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    /*
+    * Bug
+    */
+    it(`${imagePrefix}-binding-remove-items`, async function () {
+        if (driver.isIOS) {
+            this.skip();
+        }
+        await tabsViewBasePage.navigateToSample("tabs-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 tabsViewBasePage.refreshTabItems();
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${imagePrefix}-text-transform`, async function () {
+        await tabsViewBasePage.navigateToSample("text-transform");
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.refreshTabItems();
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+});

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

@@ -1,15 +1,25 @@
 import { AppiumDriver } from "nativescript-dev-appium";
-import { PageObjectBaseModel } from "../../../page-object-base-model";
-import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
+import { TabNavigationBasePage } from "../tab-navigation-base-page";
 
-export class TabsViewBasePage extends PageObjectBaseModel {
-
-    constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
-        super(_driver, ["tabs"], elementCacheStrategy);
+export class TabsViewBasePage extends TabNavigationBasePage {
+    private readonly mainWidgetXPath: string;
+    constructor(_driver: AppiumDriver) {
+        super(_driver, ["tabs"]);
+        this.mainWidgetXPath = this._driver.isIOS ?
+            `//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeCollectionView`
+            : `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.HorizontalScrollView/android.widget.LinearLayout`;
     }
 
-    async init(subSuiteName: string) {
-        this._naviagtionLinks.push(subSuiteName);
-        await super.initSuite();
+    async getItems() {
+        const items = await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
+        if (this._driver.isIOS) {
+            items.shift();
+        }
+        
+        return items;
+    }
+
+    async mainWidget() {
+        return await this._driver.findElementByXPath(this.mainWidgetXPath);
     }
 }

e2e/ui-tests-app/package.json

@@ -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"
   }

e2e/ui-tests-app/webpack.config.js

@@ -6,7 +6,6 @@ const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -214,11 +213,7 @@ module.exports = env => {
                         "sass-loader"
                     ]
                 },
-                // TODO: Invetigate why do we need???
-                {
-                    test: /\.png$|.jpg$|.ttf$|.otf$|.gradle$|.storyboard$|.plist$/,
-                    use: { loader: "raw-loader" }
-                },
+
                 {
                     test: /\.ts$/,
                     use: {
@@ -242,7 +237,7 @@ module.exports = env => {
             // Define useful constants like TNS_WEBPACK
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
-                "process": undefined,
+                "process": "global.process",
             }),
             // Remove all files from the out dir.
             new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
@@ -271,9 +266,6 @@ module.exports = env => {
                 async: false,
                 useTypescriptIncrementalApi: true,
                 memoryLimit: 4096
-            }),
-            new ExtraWatchWebpackPlugin({
-                files: [`node_modules/**/*.${platform}.ts`]
             })
         ],
     };