@fluentui-react-native/tester 0.51.5 → 0.53.0

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

@@ -1,19 +1,19 @@
 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 { RADIOBUTTON_A11Y_ROLE, RADIOGROUP_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
 import {
   RADIOGROUP_ACCESSIBILITY_LABEL,
   RADIOGROUP_TEST_COMPONENT_LABEL,
-  RADIOBUTTON_ACCESSIBILITY_LABEL,
-  RADIOBUTTON_TEST_COMPONENT_LABEL,
+  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_BUTTON_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();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to RadioGroup test page', () => {
@@ -25,44 +25,88 @@ describe('RadioGroup/RadioButton Testing Initialization', function () {
     NavigateAppPage.clickAndGoToRadioGroupPage();
     RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(RadioGroupPageObject.isPageLoaded()).toBeTruthy();
+    expect(RadioGroupPageObject.isPageLoaded()).toBeTruthy(RadioGroupPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
 
 describe('RadioGroup/RadioButton Accessibility Testing', () => {
-  it("Validate RadioGroup's accessibilityRole is correct", () => {
+  /* Scrolls and waits for the RadioGroup to be visible on the Test Page */
+  beforeEach(() => {
     RadioGroupPageObject.scrollToTestElement();
     RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate RadioGroup's accessibilityRole is correct", () => {
     expect(RadioGroupPageObject.getAccessibilityRole()).toEqual(RADIOGROUP_A11Y_ROLE);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it("Validate RadioButton's accessibilityRole is correct", () => {
-    RadioGroupPageObject.scrollToTestElement();
-    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
     expect(RadioGroupPageObject.getRadioButtonAccesibilityRole()).toEqual(RADIOBUTTON_A11Y_ROLE);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('RadioGroup - Set accessibilityLabel', () => {
-    RadioGroupPageObject.scrollToTestElement();
-    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
     expect(RadioGroupPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(RADIOGROUP_ACCESSIBILITY_LABEL);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 
   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);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('RadioButton - Set accessibilityLabel', () => {
-    RadioGroupPageObject.scrollToTestElement();
-    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Primary)).toEqual(RADIOBUTTON_ACCESSIBILITY_LABEL);
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.First)).toEqual(FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('RadioButton - Do not set accessibilityLabel -> Default to RadioButton label', () => {
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Second)).toEqual(SECOND_RADIO_BUTTON_LABEL);
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('RadioGroup Functional Testing', () => {
+  /* This resets the RadioGroup state by clicking/selecting the 1st RadioButton in the RadioGroup */
+  beforeEach(() => {
     RadioGroupPageObject.scrollToTestElement();
     RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Secondary)).toEqual(RADIOBUTTON_TEST_COMPONENT_LABEL);
+
+    RadioGroupPageObject.resetRadioGroupSelection();
+  });
+
+  it('Click on a RadioButton and ensure it changes state from unselected -> selected', () => {
+    /* Validate the RadioButton is not initially selected */
+    expect(RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeFalsy();
+
+    /* Click on the RadioButton to select it */
+    RadioGroupPageObject.clickRadioButton(RadioButtonSelector.Second);
+    RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Second, PAGE_TIMEOUT);
+
+    /* Validate the RadioButton is selected */
+    expect(RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeTruthy();
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Keyboard to RadioButton and check for Selection state', () => {
+    // Presses the ArrowDown key while the first (A) RadioButton is selected
+    RadioGroupPageObject.sendKey(Keys.Down_Arrow, RadioButtonSelector.First);
+    RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Second, 5000);
+
+    /* Validate the RadioButton is selected */
+    expect(RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Second)).toBeTruthy();
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it("Keyboard to DISABLED RadioButton and validate it doesn't get selected", () => {
+    // Presses the ArrowDown key while the second (B) RadioButton is selected
+    RadioGroupPageObject.sendKey(Keys.Down_Arrow, RadioButtonSelector.Second);
+    RadioGroupPageObject.waitForRadioButtonSelected(RadioButtonSelector.Fourth, 5000); // It should skip RadioButton 3 since it is disabled
+
+    /* Validate the RadioButton is selected */
+    expect(RadioGroupPageObject.isRadioButtonSelected(RadioButtonSelector.Fourth)).toBeTruthy();
+    expect(RadioGroupPageObject.didAssertPopup()).toBeFalsy(RadioGroupPageObject.ERRORMESSAGE_ASSERT);
   });
 });

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

@@ -6,7 +6,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 describe('Separator Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Separator test page', () => {
@@ -18,6 +18,7 @@ describe('Separator Testing Initialization', function () {
     NavigateAppPage.clickAndGoToSeparatorPage();
     SeparatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(SeparatorPageObject.isPageLoaded()).toBeTruthy();
+    expect(SeparatorPageObject.isPageLoaded()).toBeTruthy(SeparatorPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(SeparatorPageObject.didAssertPopup()).toBeFalsy(SeparatorPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });

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

@@ -6,7 +6,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 describe('Shimmer Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Shimmer test page', () => {
@@ -18,6 +18,7 @@ describe('Shimmer Testing Initialization', function () {
     NavigateAppPage.clickAndGoToShimmerPage();
     ShimmerPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ShimmerPageObject.isPageLoaded()).toBeTruthy();
+    expect(ShimmerPageObject.isPageLoaded()).toBeTruthy(ShimmerPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(ShimmerPageObject.didAssertPopup()).toBeFalsy(ShimmerPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });

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

@@ -6,7 +6,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 describe('Svg Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Svg test page', () => {
@@ -18,6 +18,7 @@ describe('Svg Testing Initialization', function () {
     NavigateAppPage.clickAndGoToSvgPage();
     SvgPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(SvgPageObject.isPageLoaded()).toBeTruthy();
+    expect(SvgPageObject.isPageLoaded()).toBeTruthy(SvgPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(SvgPageObject.didAssertPopup()).toBeFalsy(SvgPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });

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

@@ -1,7 +1,7 @@
 import {
   TABS_TESTPAGE,
   TABS_TEST_COMPONENT,
-  TABS_ITEM_TEST_COMPONENT,
+  FIRST_TABS_ITEM,
   HOMEPAGE_TABS_BUTTON,
 } from '../../../FluentTester/TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
@@ -37,7 +37,7 @@ class TabsPageObject extends BasePage {
   /* TabItem *
   /***********/
   get _tabItem() {
-    return By(TABS_ITEM_TEST_COMPONENT);
+    return By(FIRST_TABS_ITEM);
   }
 }
 

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

@@ -1,17 +1,80 @@
 import {
   TABS_TESTPAGE,
   TABS_TEST_COMPONENT,
-  TABS_ITEM_TEST_COMPONENT,
   HOMEPAGE_TABS_BUTTON,
+  FIRST_TABS_ITEM,
+  SECOND_TABS_ITEM,
+  THIRD_TABS_ITEM,
+  FIRST_TABS_ITEM_CONTENT,
+  SECOND_TABS_ITEM_CONTENT,
+  THIRD_TABS_ITEM_CONTENT,
 } from '../../../FluentTester/TestComponents/Tabs/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+/* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page.
+ * The spec file should import this enum and use it when wanting to interact with different elements on the page.
+ * The main Tab group we are testing has THREE tab items. The spec file will
+ * import this enum to easily write tests using these 3 tab items */
+export const enum TabItemSelector {
+  First = 0, // this._firstTabItem
+  Second, // this._secondTabItem
+  Third, // this._thirdTabItem
+}
+
 class TabsPageObject extends BasePage {
   /******************************************************************/
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
-  getTabItemAccesibilityRole(): string {
-    return this._tabItem.getAttribute('ControlType');
+  waitForTabsItemsToOpen(tabItemSelector: TabItemSelector, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.didTabItemContentLoad(tabItemSelector);
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Tab Items content did not open.',
+        interval: 1000,
+      },
+    );
+  }
+
+  getTabItemAccesibilityRole(tabItemSelector: TabItemSelector): string {
+    return this.getTabItem(tabItemSelector).getAttribute('ControlType');
+  }
+
+  clickOnTabItem(tabItemSelector: TabItemSelector): void {
+    this.getTabItem(tabItemSelector).click();
+  }
+
+  didTabItemContentLoad(tabItemSelector: TabItemSelector): boolean {
+    return this.getTabItemContent(tabItemSelector).isDisplayed();
+  }
+
+  /* Returns the correct WebDriverIO element from the TabItem Selector */
+  getTabItem(tabItemSelector: TabItemSelector): WebdriverIO.Element {
+    if (tabItemSelector == TabItemSelector.First) {
+      return this._firstTabItem;
+    } else if (tabItemSelector == TabItemSelector.Second) {
+      return this._secondTabItem;
+    } else {
+      return this._thirdTabItem;
+    }
+  }
+
+  /* Returns the correct WebDriverIO element from the TabItem Selector */
+  getTabItemContent(tabItemSelector: TabItemSelector): WebdriverIO.Element {
+    if (tabItemSelector == TabItemSelector.First) {
+      return this._firstTabItemContent;
+    } else if (tabItemSelector == TabItemSelector.Second) {
+      return this._secondTabItemContent;
+    } else {
+      return this._thirdTabItemContent;
+    }
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(key: string, tabItemSelector: TabItemSelector): void {
+    this.getTabItem(tabItemSelector).addValue(key);
   }
 
   /*****************************************/
@@ -33,11 +96,30 @@ class TabsPageObject extends BasePage {
     return By(HOMEPAGE_TABS_BUTTON);
   }
 
-  /***********/
-  /* TabItem *
-  /***********/
-  get _tabItem() {
-    return By(TABS_ITEM_TEST_COMPONENT);
+  /* The first tab group has 3 Tab item headers, all listed below */
+  get _firstTabItem() {
+    return By(FIRST_TABS_ITEM);
+  }
+
+  get _secondTabItem() {
+    return By(SECOND_TABS_ITEM);
+  }
+
+  get _thirdTabItem() {
+    return By(THIRD_TABS_ITEM);
+  }
+
+  /* Content shown when tab item is clicked */
+  get _firstTabItemContent() {
+    return By(FIRST_TABS_ITEM_CONTENT);
+  }
+
+  get _secondTabItemContent() {
+    return By(SECOND_TABS_ITEM_CONTENT);
+  }
+
+  get _thirdTabItemContent() {
+    return By(THIRD_TABS_ITEM_CONTENT);
   }
 }
 

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

@@ -1,12 +1,12 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import TabsPageObject from '../pages/TabsPageObject.win';
-import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE } from '../../common/consts';
+import TabsPageObject, { TabItemSelector } from '../pages/TabsPageObject.win';
+import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE, Keys } 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();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Tabs test page', () => {
@@ -18,20 +18,71 @@ describe('Tabs Testing Initialization', function () {
     NavigateAppPage.clickAndGoToTabsPage();
     TabsPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(TabsPageObject.isPageLoaded()).toBeTruthy();
+    expect(TabsPageObject.isPageLoaded()).toBeTruthy(TabsPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(TabsPageObject.didAssertPopup()).toBeFalsy(TabsPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
 
 describe('Tabs Accessibility Testing', () => {
-  it("Validate Tab's accessibilityRole is correct", () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
     TabsPageObject.scrollToTestElement();
     TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate Tab's accessibilityRole is correct", () => {
     expect(TabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+    expect(TabsPageObject.didAssertPopup()).toBeFalsy(TabsPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it("Validate TabItem's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getTabItemAccesibilityRole(TabItemSelector.First)).toEqual(TABITEM_A11Y_ROLE);
+    expect(TabsPageObject.didAssertPopup()).toBeFalsy(TabsPageObject.ERRORMESSAGE_ASSERT);
+  });
+});
+
+describe('Tabs Functional Tests', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
     TabsPageObject.scrollToTestElement();
     TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(TabsPageObject.getTabItemAccesibilityRole()).toEqual(TABITEM_A11Y_ROLE);
+
+    // Reset the TabGroup by putting focus on First tab item
+    TabsPageObject.clickOnTabItem(TabItemSelector.First);
+  });
+
+  it('Click on the second tab header and validate the correct TabItem content is shown', () => {
+    TabsPageObject.clickOnTabItem(TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+    expect(TabsPageObject.didAssertPopup()).toBeFalsy(TabsPageObject.ERRORMESSAGE_ASSERT);
+  });
+
+  it('Keyboarding: Arrow Navigation: Right -> Down -> Left -> Up -> Validate the correct TabItem content is shown', () => {
+    /* At First tab element, press Right Arrow to navigate to the Second tab element */
+    TabsPageObject.sendKey(Keys.Right_Arrow, TabItemSelector.First);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+    /* At Second tab element, press Down Arrow to navigate to the Third tab element */
+    TabsPageObject.sendKey(Keys.Down_Arrow, TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Third, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Third)).toBeTruthy();
+
+    /* At Third tab element, press Left Arrow to navigate to the Second tab element */
+    TabsPageObject.sendKey(Keys.Left_Arrow, TabItemSelector.Third);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+    /* At Second tab element, press Up Arrow to navigate to the First tab element */
+    TabsPageObject.sendKey(Keys.Up_Arrow, TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.First, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.First)).toBeTruthy();
+    expect(TabsPageObject.didAssertPopup()).toBeFalsy(TabsPageObject.ERRORMESSAGE_ASSERT);
   });
 });

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

@@ -0,0 +1,84 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import TabsPageObject, { TabItemSelector } from '../pages/TabsPageObject.win';
+import { TAB_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT, TABITEM_A11Y_ROLE } 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();
+  });
+});
+
+describe('Tabs Accessibility Testing', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it("Validate Tab's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+  });
+
+  it("Validate TabItem's accessibilityRole is correct", () => {
+    expect(TabsPageObject.getTabItemAccesibilityRole(TabItemSelector.First)).toEqual(TABITEM_A11Y_ROLE);
+  });
+});
+
+describe('Tabs Functional Tests', () => {
+  /* Scrolls and waits for the Tabs to be visible on the Test Page */
+  beforeEach(() => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    // Reset the TabGroup by putting focus on First tab item
+    TabsPageObject.clickOnTabItem(TabItemSelector.First);
+  });
+
+  it('Click on the second tab header and validate the correct TabItem content is shown', () => {
+    TabsPageObject.clickOnTabItem(TabItemSelector.Second);
+    TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+    expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+  });
+
+  // Keyboarding is currently not integrated for UWP tabs - Task #5758598
+  // it('Keyboarding: Arrow Navigation: Right -> Down -> Left -> Up -> Validate the correct TabItem content is shown', () => {
+  //   /* At First tab element, press Right Arrow to navigate to the Second tab element */
+  //   TabsPageObject.sendKey(Keys.Right_Arrow, TabItemSelector.First);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+  //   /* At Second tab element, press Down Arrow to navigate to the Third tab element */
+  //   TabsPageObject.sendKey(Keys.Down_Arrow, TabItemSelector.Second);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Third, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Third)).toBeTruthy();
+
+  //   /* At Third tab element, press Left Arrow to navigate to the Second tab element */
+  //   TabsPageObject.sendKey(Keys.Left_Arrow, TabItemSelector.Third);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.Second, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.Second)).toBeTruthy();
+
+  //   /* At Second tab element, press Up Arrow to navigate to the First tab element */
+  //   TabsPageObject.sendKey(Keys.Up_Arrow, TabItemSelector.Second);
+  //   TabsPageObject.waitForTabsItemsToOpen(TabItemSelector.First, PAGE_TIMEOUT);
+
+  //   expect(TabsPageObject.didTabItemContentLoad(TabItemSelector.First)).toBeTruthy();
+  // });
+});

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

@@ -6,7 +6,7 @@ import { TAB_A11Y_ROLE, TABITEM_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT } from
 describe('Experimental Tabs Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Experimental Tabs test page', () => {
@@ -18,7 +18,8 @@ describe('Experimental Tabs Testing Initialization', function () {
     NavigateAppPage.clickAndGoToExperimentalTabsPage();
     ExperimentalTabsPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ExperimentalTabsPageObject.isPageLoaded()).toBeTruthy();
+    expect(ExperimentalTabsPageObject.isPageLoaded()).toBeTruthy(ExperimentalTabsPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(ExperimentalTabsPageObject.didAssertPopup()).toBeFalsy(ExperimentalTabsPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
 
@@ -26,12 +27,16 @@ describe('Experimental Tabs Accessibility Testing', () => {
   it("Validate Experimental Tab's accessibilityRole is correct", () => {
     ExperimentalTabsPageObject.scrollToTestElement();
     ExperimentalTabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
     expect(ExperimentalTabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+    expect(ExperimentalTabsPageObject.didAssertPopup()).toBeFalsy(ExperimentalTabsPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it("Validate Experimental TabItem's accessibilityRole is correct", () => {
     ExperimentalTabsPageObject.scrollToTestElement();
     ExperimentalTabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
     expect(ExperimentalTabsPageObject.getTabItemAccesibilityRole()).toEqual(TABITEM_A11Y_ROLE);
+    expect(ExperimentalTabsPageObject.didAssertPopup()).toBeFalsy(ExperimentalTabsPageObject.ERRORMESSAGE_ASSERT);
   });
 });

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

@@ -8,7 +8,7 @@ import { TEXT_ACCESSIBILITY_LABEL, TEXT_COMPONENT_CONTENT } from '../../../Fluen
 describe('Text Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Text test page', () => {
@@ -20,7 +20,8 @@ describe('Text Testing Initialization', function () {
     NavigateAppPage.clickAndGoToTextPage();
     TextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(TextPageObject.isPageLoaded()).toBeTruthy();
+    expect(TextPageObject.isPageLoaded()).toBeTruthy(TextPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(TextPageObject.didAssertPopup()).toBeFalsy(TextPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
 
@@ -32,13 +33,16 @@ describe('Text Accessibility Testing', () => {
 
   it('Text - Validate accessibilityRole is correct', () => {
     expect(TextPageObject.getAccessibilityRole()).toEqual(TEXT_A11Y_ROLE);
+    expect(TextPageObject.didAssertPopup()).toBeFalsy(TextPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('Text - Set accessibilityLabel', () => {
     expect(TextPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(TEXT_ACCESSIBILITY_LABEL);
+    expect(TextPageObject.didAssertPopup()).toBeFalsy(TextPageObject.ERRORMESSAGE_ASSERT);
   });
 
   it('Text - Do not accessibilityLabel -> Default to content', () => {
     expect(TextPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(TEXT_COMPONENT_CONTENT);
+    expect(TextPageObject.didAssertPopup()).toBeFalsy(TextPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/TextExperimental/specs/ExperimentalText.spec.win.ts

@@ -6,7 +6,7 @@ import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/con
 describe('Experimental Text Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Experimental Text test page', () => {
@@ -18,7 +18,8 @@ describe('Experimental Text Testing Initialization', function () {
     NavigateAppPage.clickAndGoToExperimentalTextPage();
     ExperimentalTextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ExperimentalTextPageObject.isPageLoaded()).toBeTruthy();
+    expect(ExperimentalTextPageObject.isPageLoaded()).toBeTruthy(ExperimentalTextPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(ExperimentalTextPageObject.didAssertPopup()).toBeFalsy(ExperimentalTextPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });
 
@@ -26,6 +27,8 @@ describe('Experimental Text Accessibility Testing', () => {
   it('Text - Validate accessibilityRole is correct', () => {
     ExperimentalTextPageObject.scrollToTestElement();
     ExperimentalTextPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
     expect(ExperimentalTextPageObject.getAccessibilityRole()).toEqual(TEXT_A11Y_ROLE);
+    expect(ExperimentalTextPageObject.didAssertPopup()).toBeFalsy(ExperimentalTextPageObject.ERRORMESSAGE_ASSERT);
   });
 });

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

@@ -6,7 +6,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 describe('Theme Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Theme test page', () => {
@@ -18,6 +18,7 @@ describe('Theme Testing Initialization', function () {
     NavigateAppPage.clickAndGoToThemePage();
     ThemePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ThemePageObject.isPageLoaded()).toBeTruthy();
+    expect(ThemePageObject.isPageLoaded()).toBeTruthy(ThemePageObject.ERRORMESSAGE_PAGELOAD);
+    expect(ThemePageObject.didAssertPopup()).toBeFalsy(ThemePageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });

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

@@ -6,7 +6,7 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 describe('Tokens Testing Initialization', function () {
   it('Wait for app load', () => {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
   it('Click and navigate to Tokens test page', () => {
@@ -18,6 +18,7 @@ describe('Tokens Testing Initialization', function () {
     NavigateAppPage.clickAndGoToTokensPage();
     TokenPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(TokenPageObject.isPageLoaded()).toBeTruthy();
+    expect(TokenPageObject.isPageLoaded()).toBeTruthy(TokenPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(TokenPageObject.didAssertPopup()).toBeFalsy(TokenPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
   });
 });