@fluentui-react-native/tester 0.126.11 → 0.126.13

package/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -17,6 +17,7 @@ import {
   FOCUSZONE_DIRECTION_PICKER,
 } from '../../../../E2E/src/FocusZone/consts';
 import { focusZoneTestStyles, GridButton } from './styles';
+import { testProps } from '../Common/TestProps';
 
 export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none'];
 
@@ -28,9 +29,17 @@ export const FocusZoneListWrapper: React.FunctionComponent<FocusZoneListWrapperP
   const buttonProps: ButtonProps = { children: 'Click to Focus', style: focusZoneTestStyles.listWrapperButton };
   return (
     <>
-      <Button {...buttonProps} testID={beforeID} />
+      <Button
+        {...buttonProps}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(beforeID)}
+      />
       {children}
-      <Button {...buttonProps} testID={afterID} />
+      <Button
+        {...buttonProps}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(afterID)}
+      />
     </>
   );
 };
@@ -53,10 +62,11 @@ export const GridOfButtons: React.FunctionComponent<GridOfButtonsProps> = (props
               const gridIndex = heightIndex * props.gridWidth + widthIndex + 1;
               return (
                 <GridButton
-                  testID={props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex) : undefined}
                   key={widthIndex}
                   style={focusZoneTestStyles.focusZoneButton}
                   componentRef={gridIndex === props.tabbableIdx ? props.tabRef : undefined}
+                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                  {...testProps(props.e2etesting ? FOCUSZONE_GRID_BUTTON(gridIndex) : undefined)}
                 >
                   <Text>{gridIndex}</Text>
                 </GridButton>
@@ -81,11 +91,14 @@ export const FocusZone2D: React.FunctionComponent = () => {
   return (
     <View style={commonTestStyles.root}>
       <View style={commonTestStyles.settings}>
-        <Text variant="subheaderSemibold" testID={FOCUSZONE_TEST_COMPONENT}>
+        <Text
+          variant="subheaderSemibold"
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_TEST_COMPONENT)}
+        >
           FocusZone Direction
         </Text>
         <MenuButton
-          testID={FOCUSZONE_DIRECTION_PICKER}
           content={`Current direction: ${direction}`}
           menuItems={FocusZoneDirections.map((dir) => ({
             itemKey: dir,
@@ -93,20 +106,36 @@ export const FocusZone2D: React.FunctionComponent = () => {
             testID: FOCUSZONE_DIRECTION_ID(dir),
           }))}
           onItemClick={(dir) => setDirection(dir as FocusZoneDirection)}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DIRECTION_PICKER)}
+        />
+        <Switch
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_TWO_DIM_SWITCH)}
+          label="2D Navigation"
+          checked={is2DNav}
+          onChange={(_, checked) => set2dNav(checked)}
+        />
+        <Switch
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DISABLED_SWITCH)}
+          label="Disabled"
+          checked={isDisabled}
+          onChange={(_, checked) => setDisabled(checked)}
         />
-        <Switch testID={FOCUSZONE_TWO_DIM_SWITCH} label="2D Navigation" checked={is2DNav} onChange={(_, checked) => set2dNav(checked)} />
-        <Switch testID={FOCUSZONE_DISABLED_SWITCH} label="Disabled" checked={isDisabled} onChange={(_, checked) => setDisabled(checked)} />
         <Switch
-          testID={FOCUSZONE_CIRCLE_NAV_SWITCH}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_CIRCLE_NAV_SWITCH)}
           label="Circular Navigation"
           checked={isCircularNav}
           onChange={(_, checked) => setIsCircularNav(checked)}
         />
         <Switch
-          testID={FOCUSZONE_DEFAULT_TABBABLE_SWITCH}
           label="Use Default Tabbable Element"
           checked={useDeffaultTabbableElement}
           onChange={(_, checked) => setUseDeffaultTabbableElement(checked)}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(FOCUSZONE_DEFAULT_TABBABLE_SWITCH)}
         />
       </View>
 

package/src/TestComponents/Link/E2ELinkTest.tsx

@@ -9,6 +9,7 @@ import {
   LINK_NO_A11Y_LABEL_COMPONENT,
   LINK_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/Link/consts';
+import { testProps } from '../Common/TestProps';
 
 export const LinkE2ETest: React.FunctionComponent = () => {
   const doPress = (): void => {
@@ -20,10 +21,17 @@ export const LinkE2ETest: React.FunctionComponent = () => {
       <Link
         url="https://www.bing.com/"
         content="Link with Accessibility Label."
-        testID={LINK_TEST_COMPONENT}
         accessibilityLabel={LINK_ACCESSIBILITY_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(LINK_TEST_COMPONENT)}
+      />
+      <Link
+        url="https://www.bing.com/"
+        onPress={doPress}
+        content={LINK_TEST_COMPONENT_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(LINK_NO_A11Y_LABEL_COMPONENT)}
       />
-      <Link url="https://www.bing.com/" onPress={doPress} content={LINK_TEST_COMPONENT_LABEL} testID={LINK_NO_A11Y_LABEL_COMPONENT} />
     </Stack>
   );
 };

package/src/TestComponents/LinkExperimental/E2ELinkTest.tsx

@@ -9,6 +9,7 @@ import {
   EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/LinkExperimental/consts';
+import { testProps } from '../Common/TestProps';
 
 export const LinkE2ETest: React.FunctionComponent = () => {
   const doPress = (): void => {
@@ -19,12 +20,17 @@ export const LinkE2ETest: React.FunctionComponent = () => {
     <Stack style={stackStyle}>
       <Link
         url="https://www.bing.com/"
-        testID={EXPERIMENTAL_LINK_TEST_COMPONENT}
         accessibilityLabel={EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(EXPERIMENTAL_LINK_TEST_COMPONENT)}
       >
         Link with Accessibility Label
       </Link>
-      <Link onPress={doPress} testID={EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT}>
+      <Link
+        onPress={doPress}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT)}
+      >
         {EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL}
       </Link>
     </Stack>

package/src/TestComponents/Menu/E2EMenuTest.tsx

@@ -19,6 +19,7 @@ import {
   MENUITEM_DISABLED_COMPONENT,
   MENUITEM_CALLBACK_LABEL,
 } from '../../../../E2E/src/Menu/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2EMenuTest: React.FunctionComponent = () => {
   const [menuOpened, setMenuOpened] = React.useState(false);
@@ -42,34 +43,76 @@ export const E2EMenuTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
       <View style={{ flexDirection: 'row' }}>
-        {menuOpened ? <Text testID={MENU_ON_OPEN}>Menu opened</Text> : <Text testID={MENU_ON_CLOSE}>Menu closed</Text>}
-        <Button onClick={onResetClick} testID={MENU_CALLBACK_RESET_BUTTON}>
+        {menuOpened ? (
+          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(MENU_ON_OPEN)}>
+            Menu opened
+          </Text>
+        ) : (
+          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(MENU_ON_CLOSE)}>
+            Menu closed
+          </Text>
+        )}
+        <Button
+          onClick={onResetClick}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(
+            MENU_CALLBACK_RESET_BUTTON,
+          )}
+        >
           Reset Item Callback
         </Button>
         <Menu open={menuOpened} onOpenChange={onOpenChange}>
           <MenuTrigger>
-            <Button testID={MENUTRIGGER_TEST_COMPONENT}>Test</Button>
+            <Button
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(MENUTRIGGER_TEST_COMPONENT)}
+            >
+              Test
+            </Button>
           </MenuTrigger>
-          <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
+          <MenuPopover
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(MENUPOPOVER_TEST_COMPONENT)}
+          >
             <MenuList>
               <MenuItem
                 onClick={onItemClick}
-                testID={MENUITEM_TEST_COMPONENT}
                 accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL}
                 persistOnClick
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUITEM_TEST_COMPONENT)}
               >
                 A plain MenuItem
               </MenuItem>
-              <MenuItem onClick={onItemClick} testID={MENUITEM_DISABLED_COMPONENT} disabled persistOnClick>
+              <MenuItem
+                onClick={onItemClick}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUITEM_DISABLED_COMPONENT)}
+                disabled
+                persistOnClick
+              >
                 A second disabled plain MenuItem
               </MenuItem>
-              <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT}>{MENUITEM_TEST_LABEL}</MenuItem>
-              <MenuItem testID={MENUITEM_FOURTH_COMPONENT}>A fourth plain MenuItem</MenuItem>
+              <MenuItem
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUITEM_NO_A11Y_LABEL_COMPONENT)}
+              >
+                {MENUITEM_TEST_LABEL}
+              </MenuItem>
+              <MenuItem
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENUITEM_FOURTH_COMPONENT)}
+              >
+                A fourth plain MenuItem
+              </MenuItem>
             </MenuList>
           </MenuPopover>
         </Menu>
       </View>
-      <Text style={{ marginVertical: 4 }} testID={MENUITEM_CALLBACK_LABEL}>
+      <Text
+        style={{ marginVertical: 4 }}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(MENUITEM_CALLBACK_LABEL)}
+      >
         {`onClick fired ${numOnClickCalls} times`}
       </Text>
     </Stack>

package/src/TestComponents/MenuButton/MenuButtonE2ETest.tsx

@@ -9,6 +9,7 @@ import {
   MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
   MENU_BUTTON_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/MenuButton/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2ETestMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
@@ -41,8 +42,9 @@ export const E2ETestMenuButton: React.FunctionComponent = () => {
                 menuItems={menuItems}
                 onItemClick={onItemClick}
                 contextualMenu={contextualMenuProps}
-                testID={MENU_BUTTON_TEST_COMPONENT}
                 accessibilityLabel={MENU_BUTTON_ACCESSIBILITY_LABEL}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENU_BUTTON_TEST_COMPONENT)}
               />
             </View>
           </View>
@@ -53,7 +55,8 @@ export const E2ETestMenuButton: React.FunctionComponent = () => {
                 menuItems={menuItems}
                 onItemClick={onItemClick}
                 contextualMenu={contextualMenuProps}
-                testID={MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(MENU_BUTTON_NO_A11Y_LABEL_COMPONENT)}
               />
             </View>
           </View>

package/src/TestComponents/MenuButtonExperimental/ExperimentalMenuButtonE2ETest.tsx

@@ -10,6 +10,7 @@ import {
   EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/MenuButtonExperimental/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2ETestExperimentalMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
@@ -42,8 +43,9 @@ export const E2ETestExperimentalMenuButton: React.FunctionComponent = () => {
                 menuItems={menuItems}
                 onItemClick={onItemClick}
                 contextualMenu={contextualMenuProps}
-                testID={EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT}
                 accessibilityLabel={EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT)}
               />
             </View>
           </View>
@@ -54,7 +56,8 @@ export const E2ETestExperimentalMenuButton: React.FunctionComponent = () => {
                 menuItems={menuItems}
                 onItemClick={onItemClick}
                 contextualMenu={contextualMenuProps}
-                testID={EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+                {...testProps(EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT)}
               />
             </View>
           </View>

package/src/TestComponents/RadioGroup/RadioGroupE2ETest.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../../E2E/src/RadioGroup/consts';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
 
 export const E2ERadioGroupTest: React.FunctionComponent = () => {
   return (
@@ -23,19 +24,41 @@ export const E2ERadioGroupTest: React.FunctionComponent = () => {
         <RadioGroup
           label="RadioGroup for E2E Testing - Ally Label Set"
           accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
-          testID={RADIOGROUP_TEST_COMPONENT}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_TEST_COMPONENT)}
         >
           <RadioButton
             content="Option A"
             buttonKey="A"
-            testID={FIRST_RADIO_BUTTON}
             accessibilityLabel={FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIRST_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content={SECOND_RADIO_BUTTON_LABEL}
+            buttonKey="B"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(SECOND_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option C (disabled)"
+            buttonKey="C"
+            disabled={true}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(THIRD_RADIO_BUTTON)}
+          />
+          <RadioButton
+            content="Option D"
+            buttonKey="C"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FOURTH_RADIO_BUTTON)}
           />
-          <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}>
+        <RadioGroup
+          label={RADIOGROUP_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(RADIOGROUP_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} />

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalE2ETest.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../../E2E/src/RadioGroupExperimental/consts';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
 
 export const E2ERadioGroupExperimentalTest: React.FunctionComponent = () => {
   return (
@@ -24,15 +25,48 @@ export const E2ERadioGroupExperimentalTest: React.FunctionComponent = () => {
         <RadioGroup
           label="RadioGroup for E2E Testing - Ally Label Set"
           accessibilityLabel={EXPERIMENTAL_RADIOGROUP_ACCESSIBILITY_LABEL}
-          testID={EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT)}
         >
-          <Radio label="Option A" value="A" testID={FIRST_RADIO} accessibilityLabel={FIRST_RADIO_ACCESSIBILITY_LABEL} />
-          <Radio label={SECOND_RADIO_LABEL} value="B" testID={SECOND_RADIO} />
-          <Radio label="Option C (disabled)" value="C" disabled={true} testID={THIRD_RADIO} />
-          <Radio label="Option D" value="C" testID={FOURTH_RADIO} />
+          <Radio
+            label="Option A"
+            value="A"
+            accessibilityLabel={FIRST_RADIO_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIRST_RADIO)}
+          />
+          <Radio
+            label={SECOND_RADIO_LABEL}
+            value="B"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(SECOND_RADIO)}
+          />
+          <Radio
+            label="Option C (disabled)"
+            value="C"
+            disabled={true}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(THIRD_RADIO)}
+          />
+          <Radio
+            label="Option D"
+            value="C"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FOURTH_RADIO)}
+          />
         </RadioGroup>
-        <RadioGroup label={EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_RADIOGROUP_NO_A11Y_LABEL_COMPONENT}>
-          <Radio label="Option W" value="W" testID={FIFTH_RADIO} />
+        <RadioGroup
+          label={
+            EXPERIMENTAL_RADIOGROUP_TEST_COMPONENT_LABEL
+          } /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(EXPERIMENTAL_RADIOGROUP_NO_A11Y_LABEL_COMPONENT)}
+        >
+          <Radio
+            label="Option W"
+            value="W"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIFTH_RADIO)}
+          />
           <Radio label="Option X" value="X" />
           <Radio label="Option Y (disabled)" value="C" disabled={true} />
           <Radio label="Option Z" value="Z" />

package/src/TestComponents/Shimmer/ShimmerE2ETest.tsx

@@ -4,16 +4,18 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { shimmerRectsAndRect } from './ShimmerTestElementSets';
 import { SHIMMER_TEST_COMPONENT } from '../../../../E2E/src/Shimmer/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2ETestingShimmer: React.FunctionComponent<Record<string, never>> = () => {
   return (
     <Stack style={stackStyle}>
       <Shimmer
-        testID={SHIMMER_TEST_COMPONENT}
         elements={shimmerRectsAndRect()}
         duration={2000}
         delay={1000}
         style={{ width: 300, height: 100 }}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SHIMMER_TEST_COMPONENT)}
       />
     </Stack>
   );

package/src/TestComponents/Switch/E2ESwitchTest.tsx

@@ -11,6 +11,7 @@ import {
   SWITCH_ON_PRESS,
 } from '../../../../E2E/src/Switch/consts';
 import { Platform } from 'react-native';
+import { testProps } from '../Common/TestProps';
 
 export const E2ESwitchTest: React.FunctionComponent = () => {
   const [switchPressed, setSwitchSwitchPressed] = React.useState(false);
@@ -29,9 +30,26 @@ export const E2ESwitchTest: React.FunctionComponent = () => {
 
   return (
     <Stack style={memoizedStyles}>
-      <Switch testID={SWITCH_TEST_COMPONENT} label={'Switch Test'} onChange={onToggle} accessibilityLabel={SWITCH_ACCESSIBILITY_LABEL} />
-      {switchPressed ? <TextV1 testID={SWITCH_ON_PRESS}>Switch Toggled On</TextV1> : null}
-      <Switch label={SWITCH_TEST_COMPONENT_LABEL} testID={SWITCH_NO_A11Y_LABEL_COMPONENT} />
+      <Switch
+        label={'Switch Test'}
+        onChange={onToggle}
+        accessibilityLabel={SWITCH_ACCESSIBILITY_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SWITCH_TEST_COMPONENT)}
+      />
+      {switchPressed ? (
+        <TextV1
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(SWITCH_ON_PRESS)}
+        >
+          Switch Toggled On
+        </TextV1>
+      ) : null}
+      <Switch
+        label={SWITCH_TEST_COMPONENT_LABEL}
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SWITCH_NO_A11Y_LABEL_COMPONENT)}
+      />
     </Stack>
   );
 };

package/src/TestComponents/Tabs/TabsE2ETest.tsx

@@ -16,25 +16,66 @@ import {
   THIRD_TABS_ITEM_CONTENT,
   FIRST_TABS_ITEM_CONTENT,
 } from '../../../../E2E/src/Tabs/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2ETabsTest: React.FunctionComponent = () => {
   return (
     <View>
       <View style={stackStyle}>
-        <Tabs label="Tabs" testID={TABS_TEST_COMPONENT} accessibilityLabel={TABS_ACCESSIBILITY_LABEL}>
-          <TabsItem headerText="Home" itemKey="A" testID={FIRST_TABS_ITEM} accessibilityLabel={FIRST_TABS_ITEM_ACCESSIBILITY_LABEL}>
-            <Text testID={FIRST_TABS_ITEM_CONTENT}>Tabs #1</Text>
+        <Tabs
+          label="Tabs"
+          accessibilityLabel={TABS_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TABS_TEST_COMPONENT)}
+        >
+          <TabsItem
+            headerText="Home"
+            itemKey="A"
+            accessibilityLabel={FIRST_TABS_ITEM_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(FIRST_TABS_ITEM)}
+          >
+            <Text
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(FIRST_TABS_ITEM_CONTENT)}
+            >
+              Tabs #1
+            </Text>
           </TabsItem>
-          <TabsItem headerText="Files" itemKey="B" testID={SECOND_TABS_ITEM}>
-            <Text testID={SECOND_TABS_ITEM_CONTENT}>Tabs #2</Text>
+          <TabsItem
+            headerText="Files"
+            itemKey="B"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(SECOND_TABS_ITEM)}
+          >
+            <Text
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(SECOND_TABS_ITEM_CONTENT)}
+            >
+              Tabs #2
+            </Text>
           </TabsItem>
-          <TabsItem headerText={THIRD_TABS_ITEM_LABEL} itemKey="C" testID={THIRD_TABS_ITEM}>
-            <Text testID={THIRD_TABS_ITEM_CONTENT}>Tabs #3</Text>
+          <TabsItem
+            headerText={THIRD_TABS_ITEM_LABEL}
+            itemKey="C"
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(THIRD_TABS_ITEM)}
+          >
+            <Text
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(THIRD_TABS_ITEM_CONTENT)}
+            >
+              Tabs #3
+            </Text>
           </TabsItem>
         </Tabs>
       </View>
       <View style={stackStyle}>
-        <Tabs label={TABS_TEST_COMPONENT_LABEL} testID={TABS_NO_A11Y_LABEL_COMPONENT}>
+        <Tabs
+          label={TABS_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(TABS_NO_A11Y_LABEL_COMPONENT)}
+        >
           <TabsItem headerText="Home" itemKey="A">
             <Text>Tabs #1</Text>
           </TabsItem>

package/src/TestComponents/TabsExperimental/TabsExperimentalE2ETest.tsx

@@ -13,17 +13,24 @@ import {
   EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/TabsExperimental/consts';
+import { testProps } from '../Common/TestProps';
 
 export const E2ETestExperimentalTabs: React.FunctionComponent = () => {
   return (
     <View>
       <View style={stackStyle}>
-        <Tabs label="Tabs" testID={EXPERIMENTAL_TABS_TEST_COMPONENT} accessibilityLabel={EXPERIMENTAL_TABS_ACCESSIBILITY_LABEL}>
+        <Tabs
+          label="Tabs"
+          accessibilityLabel={EXPERIMENTAL_TABS_ACCESSIBILITY_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(EXPERIMENTAL_TABS_TEST_COMPONENT)}
+        >
           <TabsItem
             headerText="Home"
             itemKey="A"
-            testID={EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT}
             accessibilityLabel={EXPERIMENTAL_TABS_ITEM_ACCESSIBILITY_LABEL}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT)}
           >
             <Text>Tabs #1</Text>
           </TabsItem>
@@ -36,11 +43,16 @@ export const E2ETestExperimentalTabs: React.FunctionComponent = () => {
         </Tabs>
       </View>
       <View style={stackStyle}>
-        <Tabs label={EXPERIMENTAL_TABS_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_TABS_NO_A11Y_LABEL_COMPONENT}>
+        <Tabs
+          label={EXPERIMENTAL_TABS_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(EXPERIMENTAL_TABS_NO_A11Y_LABEL_COMPONENT)}
+        >
           <TabsItem
             headerText={EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT_LABEL}
             itemKey="A"
-            testID={EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT}
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(EXPERIMENTAL_TABS_ITEM_NO_A11Y_LABEL_COMPONENT)}
           >
             <Text>Tabs #1</Text>
           </TabsItem>

package/src/TestComponents/Test.tsx

@@ -7,6 +7,7 @@ import { useTheme } from '@fluentui-react-native/theme-types';
 import Svg, { G, Path, SvgProps } from 'react-native-svg';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import { Button } from '@fluentui-react-native/experimental-button';
+import { testProps } from './Common/TestProps';
 
 export type TestSection = {
   name: string;
@@ -119,7 +120,11 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
         <Text style={styles.name} variant="heroSemibold">
           {props.name}
         </Text>
-        <Button testID="Focus_Button" style={styles.e2eFocusButton}>
+        <Button
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps('Focus_Button')}
+          style={styles.e2eFocusButton}
+        >
           E2E Testing Button
         </Button>
         {props.spec && <Link url={props.spec} content="SPEC" />}
@@ -172,7 +177,12 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
         const TestComponent = section.component;
         return (
           <View key={index}>
-            <Text style={styles.section} variant="headerSemibold" testID={section.testID}>
+            <Text
+              style={styles.section}
+              variant="headerSemibold"
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(section.testID)}
+            >
               {section.name}
             </Text>
             <Separator />