@fluentui-react-native/tester 0.47.3 → 0.50.0

package/src/E2E/README.md

@@ -1,20 +1,27 @@
 # E2E Testing Overview
 
-## Prerequisites
+## Win32/UWP Prerequisites
 
 - [Node.js](https://nodejs.org/en/download/) - Version 10.19 or higher.
 - [React Native Windows Development Dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies)
   - **NOTE:** Please make sure you grab all of the items listed there and the appropriate versions.
 - [WinAppDriver](https://github.com/microsoft/WinAppDriver) - Version 1.1
 - Enable [_Developer Mode_](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) in Windows settings
-- [Java 1.8](https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html) (Optional) - Used for generating in-depth after-action reports. More information in "Debugging E2E Failures" section below.
-- [Allure Command-Line](https://www.npmjs.com/package/allure-commandline) (Optional) - Used for creating in-depth reporting.
-  - `npm install -g allure-commandline`
 
 ### UWP Additional Prerequisites
 
 - [UWP Prerequisites](https://github.com/microsoft/fluentui-react-native/blob/master/apps/windows/README.md)
 
+## MacOS Prerequisites
+
+- MacOS 10.15 or later
+- XCode 12 or later should be installed
+- XCode Helper app should be enabled for Accessibility access. The app itself is usually found at: _/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/Library/Xcode/Agents/Xcode Helper.app_.
+
+In order to enable Accessibility access, simply open the parent folder in finder:
+_open /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/Library/Xcode/Agents/_
+and drag & drop the **XCode Helper** app to **Security & Privacy -> Privacy -> Accessibility** list of your **System Preferences**. This action must only be done once.
+
 ## E2E Project Structure
 
 - E2E - The root E2E testing folder containing test components and their respective platform-specific page objects and spec documents.
@@ -46,9 +53,39 @@
 
 _Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
 
+## MacOS Steps
+
+1. Follow step #1 from "Win32 Steps" section above.
+2. POD Install
+   - C:\repo\fluentui-react-native> `cd apps\macos\src`
+   - C:\repo\fluentui-react-native\apps\macos\src> `pod install`
+3. Start the server
+   - C:\repo\fluentui-react-native> `cd apps\macos`
+   - C:\repo\fluentui-react-native\apps\macos> `yarn start`
+4. Open a new command prompt and run the E2E tests
+   - C:\repo\fluentui-react-native\apps\macos> `yarn e2etest`
+
+_Note: It could take up to a minute to load the test app with WebDriverIO, don't panic, the tests will run :)_
+
 # Authoring E2E Test
 
-## Create a new Page Object
+Testing is split-up on a **per-component** basis. Each component's testing story is made up of two parts - a **Page Object** and a **Spec Document**.
+
+Example File Structure:
+
+-> Checkbox Folder
+
+----> CheckboxPageObject.ts
+
+----> CheckboxSpec.ts
+
+Now, what are Page Objects and Spec Documents?
+
+## Page Objects
+
+A page object is an object-oriented class. The purpose of this class is to act as an interface for you to interact with a page of your testing app. In layman's terms, **it selects UI elements and performs some functions on them to obtain the scenario you want.**
+
+For each component/scenario you want to test, you will have a page object class for it.
 
 Page Object is a design pattern which has become popular in test automation for enhancing test maintenance and reducing code duplication. A [page object](https://webdriver.io/docs/pageobjects.html) is an object-oriented class that serves as an interface to a page of you testing app. The tests then use the methods of this Page Object whenever they need to interact with the UI of that page.
 The benefit is that if the UI changes for the test page, the tests themselves don’t need to change, only the code within the page object needs to change.
@@ -56,21 +93,28 @@ The benefit is that if the UI changes for the test page, the tests themselves do
 Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
 
 ```
-// CheckboxTestPage.win.ts
-class CheckboxTestPage extends BasePage {
-
+// CheckboxPageObject.win.ts
+class CheckboxPageObject extends BasePage {
+  // This function clicks on the Checkbox component you selected below
   toggleCheckbox() {
     this._testPage.click();
   }
 
-  get _testPage() {
+  // This function selects a UI element with the prop `testID = CHECKBOX_TESTPAGE`
+  get _checkboxComponent() {
     return By(CHECKBOX_TESTPAGE);
   }
 }
 
-export default new CheckboxTestPage();
+export default new CheckboxPageObject();
 ```
 
+### More on Page Objects (Technical Information)
+
+Each page object should extend BasePage.ts. The BasePage class contains a baseline set of methods/variables that all page objects should have. This allows us to write the most efficient code possible.
+
+For example, a common task we want to perform is selecting a UI element and getting its accessibilityRole attribute. Instead of doing this in all 20 page objects for each component, we write it once in the BasePage, and have the 20 page objects extend it. Enables code-reuse and allows for easy comprehension.
+
 ### **Selectors**
 
 - In order for a Page Object to access a component from the test page, you must use [selectors](https://webdriver.io/docs/selectors.html). The WebDriver Protocol provides several selector strategies to query an element.
@@ -90,8 +134,8 @@ Spec documents should be put in apps/fluent-tester/src/E2E/\_ _ComponentToBeTest
 ```
 describe('Click on each test page and check if it renders', function() {
   it('Checkbox Test Page', () => {
-    BootTestPage.clickAndGoToCheckboxPage();
-    expect(CheckboxTestPage.isPageLoaded()).toBeTruthy();
+    NavigateAppPage.clickAndGoToCheckboxPage();
+    expect(CheckboxPageObject.isPageLoaded()).toBeTruthy();
   });
 });
 ```

package/src/E2E/RadioGroup/pages/RadioGroupPageObject.macos.ts

@@ -0,0 +1,70 @@
+import {
+  RADIOGROUP_TESTPAGE,
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOBUTTON_TEST_COMPONENT,
+  HOMEPAGE_RADIOGROUP_BUTTON,
+  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+import { BasePage, By } from '../../common/BasePage.macos';
+
+export const enum RadioButtonSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+class RadioGroupPage extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  // Get RadioButton's accessibilityLabel
+  getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): string {
+    switch (radioButtonSelector) {
+      case RadioButtonSelector.Primary:
+        return this._radioButton.getAttribute('Name');
+
+      case RadioButtonSelector.Secondary:
+        return this._secondRadioButton.getAttribute('Name');
+    }
+  }
+
+  getRadioButtonAccesibilityRole(): string {
+    return this._radioButton.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(RADIOGROUP_TESTPAGE);
+  }
+
+  get _pageName() {
+    return RADIOGROUP_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(RADIOGROUP_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(RADIOGROUP_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  /***************/
+  /* RadioButton *
+  /**************/
+  get _radioButton() {
+    return By(RADIOBUTTON_TEST_COMPONENT);
+  }
+
+  get _secondRadioButton() {
+    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+  }
+}
+
+export default new RadioGroupPage();

package/src/E2E/RadioGroup/pages/RadioGroupPageObject.win.ts

@@ -0,0 +1,70 @@
+import {
+  RADIOGROUP_TESTPAGE,
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOBUTTON_TEST_COMPONENT,
+  HOMEPAGE_RADIOGROUP_BUTTON,
+  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+export const enum RadioButtonSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+class RadioGroupPage extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  // Get RadioButton's accessibilityLabel
+  getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): string {
+    switch (radioButtonSelector) {
+      case RadioButtonSelector.Primary:
+        return this._radioButton.getAttribute('Name');
+
+      case RadioButtonSelector.Secondary:
+        return this._secondRadioButton.getAttribute('Name');
+    }
+  }
+
+  getRadioButtonAccesibilityRole(): string {
+    return this._radioButton.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(RADIOGROUP_TESTPAGE);
+  }
+
+  get _pageName() {
+    return RADIOGROUP_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(RADIOGROUP_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(RADIOGROUP_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  /***************/
+  /* RadioButton *
+  /**************/
+  get _radioButton() {
+    return By(RADIOBUTTON_TEST_COMPONENT);
+  }
+
+  get _secondRadioButton() {
+    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+  }
+}
+
+export default new RadioGroupPage();

package/src/E2E/RadioGroup/specs/RadioGroup.spec.macos.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.macos';
+import RadioGroupPageObject from '../pages/RadioGroupPageObject.macos';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('RadioGroup/RadioButton Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to RadioGroup test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    RadioGroupPageObject.scrollToComponentButton();
+    RadioGroupPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToRadioGroupPage();
+    RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(RadioGroupPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/RadioGroup/specs/RadioGroup.spec.win.ts

@@ -0,0 +1,68 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import RadioGroupPageObject, { RadioButtonSelector } from '../pages/RadioGroupPageObject.win';
+import { ComponentSelector } from '../../common/BasePage.win';
+import { RADIOBUTTON_A11Y_ROLE, RADIOGROUP_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import {
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOBUTTON_ACCESSIBILITY_LABEL,
+  RADIOBUTTON_TEST_COMPONENT_LABEL,
+} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('RadioGroup/RadioButton Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to RadioGroup test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    RadioGroupPageObject.scrollToComponentButton();
+    RadioGroupPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToRadioGroupPage();
+    RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(RadioGroupPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('RadioGroup/RadioButton Accessibility Testing', () => {
+  it("Validate RadioGroup's accessibilityRole is correct", () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getAccessibilityRole()).toEqual(RADIOGROUP_A11Y_ROLE);
+  });
+
+  it("Validate RadioButton's accessibilityRole is correct", () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getRadioButtonAccesibilityRole()).toEqual(RADIOBUTTON_A11Y_ROLE);
+  });
+
+  it('RadioGroup - Set accessibilityLabel', () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(RADIOGROUP_ACCESSIBILITY_LABEL);
+  });
+
+  it('RadioGroup - Do not set accessibilityLabel -> Default to RadioGroup label', () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(RADIOGROUP_TEST_COMPONENT_LABEL);
+  });
+
+  it('RadioButton - Set accessibilityLabel', () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Primary)).toEqual(RADIOBUTTON_ACCESSIBILITY_LABEL);
+  });
+
+  it('RadioButton - Do not set accessibilityLabel -> Default to RadioButton label', () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Secondary)).toEqual(RADIOBUTTON_TEST_COMPONENT_LABEL);
+  });
+});

package/src/E2E/Separator/pages/SeparatorPageObject.macos.ts

@@ -0,0 +1,29 @@
+import {
+  SEPARATOR_TESTPAGE,
+  SEPARATOR_TEST_COMPONENT,
+  HOMEPAGE_SEPARATOR_BUTTON,
+} from '../../../FluentTester/TestComponents/Separator/consts';
+import { BasePage, By } from '../../common/BasePage.macos';
+
+class SeparatorPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SEPARATOR_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SEPARATOR_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SEPARATOR_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+}
+
+export default new SeparatorPageObject();

package/src/E2E/Separator/pages/SeparatorPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  SEPARATOR_TESTPAGE,
+  SEPARATOR_TEST_COMPONENT,
+  HOMEPAGE_SEPARATOR_BUTTON,
+} from '../../../FluentTester/TestComponents/Separator/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class SeparatorPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SEPARATOR_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SEPARATOR_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SEPARATOR_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+}
+
+export default new SeparatorPageObject();

package/src/E2E/Separator/specs/Separator.spec.macos.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.macos';
+import SeparatorPageObject from '../pages/SeparatorPageObject.macos';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Separator Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Separator test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SeparatorPageObject.scrollToComponentButton();
+    SeparatorPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSeparatorPage();
+    SeparatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SeparatorPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Separator/specs/Separator.spec.win.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import SeparatorPageObject from '../pages/SeparatorPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Separator Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Separator test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SeparatorPageObject.scrollToComponentButton();
+    SeparatorPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSeparatorPage();
+    SeparatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SeparatorPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Svg/pages/SvgPageObject.macos.ts

@@ -0,0 +1,25 @@
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { BasePage, By } from '../../common/BasePage.macos';
+
+class SvgPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SVG_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SVG_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SVG_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+}
+
+export default new SvgPageObject();

package/src/E2E/Svg/pages/SvgPageObject.win.ts

@@ -0,0 +1,25 @@
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class SvgPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SVG_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SVG_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SVG_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+}
+
+export default new SvgPageObject();

package/src/E2E/Svg/specs/Svg.spec.macos.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.macos';
+import SvgPageObject from '../pages/SvgPageObject.macos';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Svg Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Svg test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SvgPageObject.scrollToComponentButton();
+    SvgPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSvgPage();
+    SvgPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SvgPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Svg/specs/Svg.spec.win.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import SvgPageObject from '../pages/SvgPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Svg Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Svg test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SvgPageObject.scrollToComponentButton();
+    SvgPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSvgPage();
+    SvgPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SvgPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Tabs/pages/TabsPageObject.macos.ts

@@ -0,0 +1,44 @@
+import {
+  TABS_TESTPAGE,
+  TABS_TEST_COMPONENT,
+  TABS_ITEM_TEST_COMPONENT,
+  HOMEPAGE_TABS_BUTTON,
+} from '../../../FluentTester/TestComponents/Tabs/consts';
+import { BasePage, By } from '../../common/BasePage.macos';
+
+class TabsPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getTabItemAccesibilityRole(): string {
+    return this._tabItem.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(TABS_TESTPAGE);
+  }
+
+  get _pageName() {
+    return TABS_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(TABS_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  /***********/
+  /* TabItem *
+  /***********/
+  get _tabItem() {
+    return By(TABS_ITEM_TEST_COMPONENT);
+  }
+}
+
+export default new TabsPageObject();

package/src/E2E/Tabs/pages/TabsPageObject.win.ts

@@ -0,0 +1,44 @@
+import {
+  TABS_TESTPAGE,
+  TABS_TEST_COMPONENT,
+  TABS_ITEM_TEST_COMPONENT,
+  HOMEPAGE_TABS_BUTTON,
+} from '../../../FluentTester/TestComponents/Tabs/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class TabsPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getTabItemAccesibilityRole(): string {
+    return this._tabItem.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(TABS_TESTPAGE);
+  }
+
+  get _pageName() {
+    return TABS_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(TABS_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  /***********/
+  /* TabItem *
+  /***********/
+  get _tabItem() {
+    return By(TABS_ITEM_TEST_COMPONENT);
+  }
+}
+
+export default new TabsPageObject();

package/src/E2E/Tabs/specs/Tabs.spec.macos.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage.macos';
+import TabsPageObject from '../pages/TabsPageObject.macos';
+import { BOOT_APP_TIMEOUT, PAGE_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Tabs Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Tabs test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    TabsPageObject.scrollToComponentButton();
+    TabsPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToTabsPage();
+    TabsPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(TabsPageObject.isPageLoaded()).toBeTruthy();
+  });
+});