@fluentui-react-native/tester 0.51.5 → 0.52.0

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

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

@@ -1,6 +1,6 @@
 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 () {
@@ -23,15 +23,61 @@ describe('Tabs Testing Initialization', function () {
 });
 
 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);
   });
 
   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);
-    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();
+  });
+
+  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/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/common/BasePage.win.ts

@@ -56,14 +56,6 @@ export class BasePage {
     this._primaryComponent.click();
   }
 
-  /* ****TODO****: I need to better use the ComponentSelector for this. We shouldn't have the spec needing to import the constant string */
-  sendKey(componentID?: string, key?: string): void {
-    const component = By(componentID);
-    if (component.isDisplayed()) {
-      component.addValue(key); // Adding a value sends the key on that component
-    }
-  }
-
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
    * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
   scrollToComponentButton(): void {

package/src/FluentTester/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native';
-import { CONTEXTUALMENUITEM_TEST_COMPONENT } from './consts';
+import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from './consts';
 
 export const E2EContextualMenuTest: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
@@ -75,7 +75,12 @@ export const E2EContextualMenuTest: React.FunctionComponent = () => {
               <Text style={{ color: 'blue' }}>none</Text>
             )}
           </Text>
-          <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
+          <Button
+            content="Press for ContextualMenu"
+            onClick={toggleShowContextualMenu}
+            componentRef={stdBtnRef}
+            testID={CONTEXTUALMENU_TEST_COMPONENT}
+          />
         </View>
       </View>
 

package/src/FluentTester/TestComponents/MenuButton/consts.ts

@@ -1,9 +1,10 @@
-export const HOMEPAGE_MENU_BUTTON = 'Homepage_Menu_Button';
-export const MENU_BUTTON_TESTPAGE = 'Menu_Button_TestPage';
+export const HOMEPAGE_MENU_BUTTON = 'Homepage_MenuButton_Button';
+export const MENU_BUTTON_TESTPAGE = 'MenuButton_TestPage';
 
 /* E2E Testing Menu_Button 1 */
 export const MENU_BUTTON_TEST_COMPONENT = 'Menu_Button_Test_Component'; // A component on each specific test page
 export const MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Menu_Button accessibility label';
+export const MENU_ITEM_1_COMPONENT = 'Menu_Item_1_Component'; // The first menu item component
 
 /* E2E Testing Menu_Button 2 */
 export const MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Menu_Button_No_A11y_label_Component';

package/src/FluentTester/TestComponents/MenuButton/testData.ts

@@ -3,6 +3,7 @@ import { MenuButtonItemProps } from '@fluentui/react-native';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 export const testImage = require('../Button/icon_24x24.png');
 import TestSvg from '../Button/test.svg';
+import { MENU_ITEM_1_COMPONENT } from './consts';
 
 const svgProps: SvgIconProps = {
   src: TestSvg,
@@ -14,6 +15,7 @@ export const menuItems: MenuButtonItemProps[] = [
     itemKey: '1',
     text: 'MenuItem 1',
     icon: testImage,
+    testID: MENU_ITEM_1_COMPONENT,
   },
   {
     itemKey: '2',

package/src/FluentTester/TestComponents/RadioGroup/RadioGroupE2ETest.tsx

@@ -6,10 +6,12 @@ import {
   RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
   RADIOGROUP_TEST_COMPONENT_LABEL,
   RADIOGROUP_ACCESSIBILITY_LABEL,
-  RADIOBUTTON_TEST_COMPONENT,
-  RADIOBUTTON_ACCESSIBILITY_LABEL,
-  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
-  RADIOBUTTON_TEST_COMPONENT_LABEL,
+  FIRST_RADIO_BUTTON,
+  SECOND_RADIO_BUTTON,
+  THIRD_RADIO_BUTTON,
+  FOURTH_RADIO_BUTTON,
+  FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_BUTTON_LABEL,
 } from './consts';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
@@ -23,18 +25,18 @@ export const E2ERadioGroupTest: React.FunctionComponent = () => {
           accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
           testID={RADIOGROUP_TEST_COMPONENT}
         >
-          <RadioButton content="Option A" buttonKey="A" />
           <RadioButton
-            content="Option B"
-            buttonKey="B"
-            testID={RADIOBUTTON_TEST_COMPONENT}
-            accessibilityLabel={RADIOBUTTON_ACCESSIBILITY_LABEL}
+            content="Option A"
+            buttonKey="A"
+            testID={FIRST_RADIO_BUTTON}
+            accessibilityLabel={FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL}
           />
-          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} />
-          <RadioButton content="Option D" buttonKey="C" />
+          <RadioButton content={SECOND_RADIO_BUTTON_LABEL} buttonKey="B" testID={SECOND_RADIO_BUTTON} />
+          <RadioButton content="Option C (disabled)" buttonKey="C" disabled={true} testID={THIRD_RADIO_BUTTON} />
+          <RadioButton content="Option D" buttonKey="C" testID={FOURTH_RADIO_BUTTON} />
         </RadioGroup>
         <RadioGroup label={RADIOGROUP_TEST_COMPONENT_LABEL} testID={RADIOGROUP_NO_A11Y_LABEL_COMPONENT}>
-          <RadioButton content={RADIOBUTTON_TEST_COMPONENT_LABEL} buttonKey="W" testID={RADIOBUTTON_NO_A11Y_LABEL_COMPONENT} />
+          <RadioButton content="Option W" buttonKey="W" />
           <RadioButton content="Option X" buttonKey="X" />
           <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
           <RadioButton content="Option Z" buttonKey="Z" />