@fluentui-react-native/tester 0.51.3 → 0.52.1

package/src/E2E/ContextualMenu/pages/ContextualMenuPageObject.win.ts

@@ -2,10 +2,55 @@ import {
   CONTEXTUALMENU_TESTPAGE,
   CONTEXTUALMENU_TEST_COMPONENT,
   HOMEPAGE_CONTEXTUALMENU_BUTTON,
+  CONTEXTUALMENUITEM_TEST_COMPONENT,
 } from '../../../FluentTester/TestComponents/ContextualMenu/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. */
+export const enum ContextualMenuSelector {
+  ContextualMenu = 0, //this._primaryComponent
+  ContextualMenuItem, //this._contextualMenuItem
+}
+
 class ContextualMenuPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  waitForContextualMenuItemsToOpen(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.contextualMenuItemDisplayed();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Contextual Menu Items did not open.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Whether the contextual menu item is displayed or not. It should be displayed after clicking on the MenuButton */
+  contextualMenuItemDisplayed(): boolean {
+    return this._contextualMenuItem.isDisplayed();
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(contextualMenuSelector: ContextualMenuSelector, key: string): void {
+    this.getContextualMenuSelector(contextualMenuSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the ContextualMenuSelector string */
+  getContextualMenuSelector(contextualMenuSelector?: ContextualMenuSelector): WebdriverIO.Element {
+    if (contextualMenuSelector == ContextualMenuSelector.ContextualMenu) {
+      return this._primaryComponent;
+    } else if (contextualMenuSelector == ContextualMenuSelector.ContextualMenuItem) {
+      return this._contextualMenuItem;
+    } else {
+      return this._primaryComponent;
+    }
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -24,6 +69,10 @@ class ContextualMenuPageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
   }
+
+  get _contextualMenuItem() {
+    return By(CONTEXTUALMENUITEM_TEST_COMPONENT);
+  }
 }
 
 export default new ContextualMenuPageObject();

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

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import ContextualMenuPageObjectObject from '../pages/ContextualMenuPageObject.win';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import ContextualMenuPageObjectObject, { ContextualMenuSelector } from '../pages/ContextualMenuPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, Keys } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('ContextualMenu Testing Initialization', function () {
@@ -8,9 +8,7 @@ describe('ContextualMenu Testing Initialization', function () {
     NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
     expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
   });
-});
 
-describe('ContextualMenu Functional Tests', () => {
   it('Click and navigate to ContextualMenu test page', () => {
     /* Scroll to component test page button in scrollview if not already visible*/
     ContextualMenuPageObjectObject.scrollToComponentButton();
@@ -23,3 +21,34 @@ describe('ContextualMenu Functional Tests', () => {
     expect(ContextualMenuPageObjectObject.isPageLoaded()).toBeTruthy();
   });
 });
+
+describe('ContextualMenu Functional Tests', () => {
+  /* Scrolls and waits for the ContextualMenu to be visible on the Test Page */
+  beforeEach(() => {
+    ContextualMenuPageObjectObject.scrollToTestElement();
+    ContextualMenuPageObjectObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    ContextualMenuPageObjectObject.sendKey(ContextualMenuSelector.ContextualMenu, Keys.Escape); // Reset ContextualMenu state for next test
+  });
+
+  it('Click on ContextualMenu Button and validate that the list of ContextualMenu Items open', () => {
+    /* Click on the ContextualMenu */
+    ContextualMenuPageObjectObject.clickComponent();
+    ContextualMenuPageObjectObject.waitForContextualMenuItemsToOpen(PAGE_TIMEOUT);
+
+    expect(ContextualMenuPageObjectObject.contextualMenuItemDisplayed()).toBeTruthy();
+  });
+
+  it('Type "SpaceBar" to select the ContextualMenu and validate that the list of ContextualMenu Items open', () => {
+    /* Type a space on the ContextualMenu */
+    ContextualMenuPageObjectObject.sendKey(ContextualMenuSelector.ContextualMenu, Keys.Spacebar);
+    ContextualMenuPageObjectObject.waitForContextualMenuItemsToOpen(PAGE_TIMEOUT);
+
+    expect(ContextualMenuPageObjectObject.contextualMenuItemDisplayed()).toBeTruthy();
+  });
+
+  /* Runs after all tests. This ensures the ContextualMenu closes. If it stays open, the test driver won't be able to close the test app */
+  afterAll(() => {
+    ContextualMenuPageObjectObject.sendKey(ContextualMenuSelector.ContextualMenu, Keys.Escape); // Reset ContextualMenu state for next test
+  });
+});

package/src/E2E/MenuButton/pages/MenuButtonPageObject.win.ts

@@ -3,10 +3,52 @@ import {
   MENU_BUTTON_TEST_COMPONENT,
   HOMEPAGE_MENU_BUTTON,
   MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  MENU_ITEM_1_COMPONENT,
 } from '../../../FluentTester/TestComponents/MenuButton/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+export const enum MenuButtonSelector {
+  MenuButton = 0, // this._primarySelector
+  MenuItem1, // this._menuItem
+}
+
 class MenuButtonPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  waitForMenuItemsToOpen(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.menuItemDisplayed();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'The Menu Items did not open.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Whether the menu item is displayed or not. It should be displayed after clicking on the MenuButton */
+  menuItemDisplayed(): boolean {
+    return this._menuItem.isDisplayed();
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(selector: MenuButtonSelector, key: string): void {
+    this.getMenuButtonSelector(selector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the MenuButton Selector */
+  getMenuButtonSelector(selector?: MenuButtonSelector): WebdriverIO.Element {
+    if (selector == MenuButtonSelector.MenuButton) {
+      return this._primaryComponent;
+    } else if (selector == MenuButtonSelector.MenuItem1) {
+      return this._menuItem;
+    }
+    return this._primaryComponent;
+  }
+
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -29,6 +71,10 @@ class MenuButtonPageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_MENU_BUTTON);
   }
+
+  get _menuItem() {
+    return By(MENU_ITEM_1_COMPONENT);
+  }
 }
 
 export default new MenuButtonPageObject();

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

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
-import MenuButtonPageObject from '../pages/MenuButtonPageObject.win';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE } from '../../common/consts';
+import MenuButtonPageObject, { MenuButtonSelector } from '../pages/MenuButtonPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE, Keys } from '../../common/consts';
 import { MENU_BUTTON_ACCESSIBILITY_LABEL, MENU_BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/MenuButton/consts';
 import { ComponentSelector } from '../../common/BasePage.win';
 
@@ -26,21 +26,52 @@ describe('MenuButton Testing Initialization', function () {
 
 /* This will be re-enabled with a MenuButton Bug is fixed. Currently in PR - "Integrating accessibilityLabel functionality for MenuButton #1117" */
 describe('MenuButton Accessibility Testing', () => {
-  it('MenuButton - Validate accessibilityRole is correct', () => {
+  /* Scrolls and waits for the MenuButton to be visible on the Test Page */
+  beforeEach(() => {
     MenuButtonPageObject.scrollToTestElement();
     MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+
+  it('MenuButton - Validate accessibilityRole is correct', () => {
     expect(MenuButtonPageObject.getAccessibilityRole()).toEqual(MENUBUTTON_A11Y_ROLE);
   });
 
   it('MenuButton - Set accessibilityLabel', () => {
-    MenuButtonPageObject.scrollToTestElement();
-    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
     expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(MENU_BUTTON_ACCESSIBILITY_LABEL);
   });
 
   it('Do not set accessibilityLabel -> Default to MenuButton label', () => {
+    expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(MENU_BUTTON_TEST_COMPONENT_LABEL);
+  });
+});
+
+describe('MenuButton Functional Testing', () => {
+  /* Scrolls and waits for the MenuButton to be visible on the Test Page */
+  beforeEach(() => {
     MenuButtonPageObject.scrollToTestElement();
     MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
-    expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(MENU_BUTTON_TEST_COMPONENT_LABEL);
+
+    MenuButtonPageObject.sendKey(MenuButtonSelector.MenuButton, Keys.Escape); // Reset MenuButton state for next test
+  });
+
+  it('Click on MenuButton and validate that the list of Menu Items open', () => {
+    /* Click on the MenuButton */
+    MenuButtonPageObject.clickComponent();
+    MenuButtonPageObject.waitForMenuItemsToOpen(PAGE_TIMEOUT);
+
+    expect(MenuButtonPageObject.menuItemDisplayed()).toBeTruthy();
+  });
+
+  it('Type "SpaceBar" to select the MenuButton and validate that the list of Menu Items open', () => {
+    /* Type a space on the MenuButton */
+    MenuButtonPageObject.sendKey(MenuButtonSelector.MenuButton, Keys.Spacebar);
+    MenuButtonPageObject.waitForMenuItemsToOpen(PAGE_TIMEOUT);
+
+    expect(MenuButtonPageObject.menuItemDisplayed()).toBeTruthy();
+  });
+
+  /* Runs after all tests. This ensures the MenuButton closes. If it stays open, the test driver won't be able to close the test app */
+  afterAll(() => {
+    MenuButtonPageObject.sendKey(MenuButtonSelector.MenuButton, Keys.Escape);
   });
 });

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

@@ -2,9 +2,9 @@ import {
   RADIOGROUP_TESTPAGE,
   RADIOGROUP_TEST_COMPONENT,
   RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  RADIOBUTTON_TEST_COMPONENT,
   HOMEPAGE_RADIOGROUP_BUTTON,
-  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
 } from '../../../FluentTester/TestComponents/RadioGroup/consts';
 import { BasePage, By } from '../../common/BasePage.macos';
 
@@ -59,11 +59,11 @@ class RadioGroupPage extends BasePage {
   /* RadioButton *
   /**************/
   get _radioButton() {
-    return By(RADIOBUTTON_TEST_COMPONENT);
+    return By(FIRST_RADIO_BUTTON);
   }
 
   get _secondRadioButton() {
-    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+    return By(SECOND_RADIO_BUTTON);
   }
 }
 

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

@@ -2,15 +2,22 @@ import {
   RADIOGROUP_TESTPAGE,
   RADIOGROUP_TEST_COMPONENT,
   RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
-  RADIOBUTTON_TEST_COMPONENT,
   HOMEPAGE_RADIOGROUP_BUTTON,
-  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
 } from '../../../FluentTester/TestComponents/RadioGroup/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 main RadioGroup we are testing has FOUR RadioButtons. The spec file will
+ * import this enum to easily write tests using these 4 radio buttons. */
 export const enum RadioButtonSelector {
-  Primary = 0, // this._primaryComponent
-  Secondary, // this._secondaryComponent
+  First = 0, // this._firstRadioButton
+  Second, // this._secondRadioButton
+  Third, // this._thirdRadioButton
+  Fourth, // this._fourthRadioButton
 }
 
 class RadioGroupPage extends BasePage {
@@ -19,17 +26,56 @@ class RadioGroupPage extends BasePage {
   /******************************************************************/
   // Get RadioButton's accessibilityLabel
   getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): string {
-    switch (radioButtonSelector) {
-      case RadioButtonSelector.Primary:
-        return this._radioButton.getAttribute('Name');
+    return this.getRadioButton(radioButtonSelector).getAttribute('Name');
+  }
 
-      case RadioButtonSelector.Secondary:
-        return this._secondRadioButton.getAttribute('Name');
-    }
+  /* This resets the RadioGroup selection by clicking/selecting the 1st RadioButton in the RadioGroup.
+   * Useful in beforeEach() hooks to reset the RadioGroup before additional tests */
+  resetRadioGroupSelection(): void {
+    this._firstRadioButton.click();
   }
 
   getRadioButtonAccesibilityRole(): string {
-    return this._radioButton.getAttribute('ControlType');
+    return this._firstRadioButton.getAttribute('ControlType');
+  }
+
+  isRadioButtonSelected(radioButtonSelector: RadioButtonSelector): boolean {
+    return this.getRadioButton(radioButtonSelector).isSelected();
+  }
+
+  clickRadioButton(radioButtonSelector: RadioButtonSelector): void {
+    this.getRadioButton(radioButtonSelector).click();
+  }
+
+  waitForRadioButtonSelected(radioButtonSelector: RadioButtonSelector, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isRadioButtonSelected(radioButtonSelector);
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'RadioButton was not selected correctly.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Sends a Keyboarding command on a specific UI element */
+  sendKey(key: string, radioButtonSelector: RadioButtonSelector): void {
+    this.getRadioButton(radioButtonSelector).addValue(key);
+  }
+
+  /* Returns the correct WebDriverIO element from the RadioButton Selector */
+  getRadioButton(radioButtonSelector: RadioButtonSelector): WebdriverIO.Element {
+    if (radioButtonSelector == RadioButtonSelector.First) {
+      return this._firstRadioButton;
+    } else if (radioButtonSelector == RadioButtonSelector.Second) {
+      return this._secondRadioButton;
+    } else if (radioButtonSelector == RadioButtonSelector.Third) {
+      return this._thirdRadioButton;
+    } else {
+      return this._fourthRadioButton;
+    }
   }
 
   /*****************************************/
@@ -58,12 +104,22 @@ class RadioGroupPage extends BasePage {
   /***************/
   /* RadioButton *
   /**************/
-  get _radioButton() {
-    return By(RADIOBUTTON_TEST_COMPONENT);
+
+  /* The first RadioGroup has 4 radio buttons, all listed below */
+  get _firstRadioButton() {
+    return By(FIRST_RADIO_BUTTON);
   }
 
   get _secondRadioButton() {
-    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+    return By(SECOND_RADIO_BUTTON);
+  }
+
+  get _thirdRadioButton() {
+    return By(THIRD_RADIO_BUTTON);
+  }
+
+  get _fourthRadioButton() {
+    return By(FOURTH_RADIO_BUTTON);
   }
 }
 

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

@@ -1,12 +1,12 @@
 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
@@ -30,39 +30,73 @@ describe('RadioGroup/RadioButton Testing Initialization', function () {
 });
 
 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);
   });
 
   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);
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.First)).toEqual(FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL);
   });
 
   it('RadioButton - Do not set accessibilityLabel -> Default to RadioButton label', () => {
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Second)).toEqual(SECOND_RADIO_BUTTON_LABEL);
+  });
+});
+
+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();
+  });
+
+  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();
+  });
+
+  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();
   });
 });

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);
   }
 }