@fluentui-react-native/tester 0.50.12 → 0.50.16

package/src/E2E/common/NavigateAppPage.win.ts

@@ -1,4 +1,6 @@
+import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestComponents/ActivityIndicator/consts';
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
+import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../FluentTester/TestComponents/CheckboxExperimental/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
 import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
 import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
@@ -9,19 +11,27 @@ import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/Foc
 import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
 import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButtonExperimental/consts';
 import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
 import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
 import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
 import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SHIMMER_BUTTON } from '../../FluentTester/TestComponents/Shimmer/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
 import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from '../../FluentTester/TestComponents/TextExperimental/consts';
+import { HOMEPAGE_TOKEN_BUTTON } from '../../FluentTester/TestComponents/Tokens/consts';
 import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
 import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
 import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
 import { By, BasePage } from './BasePage.win';
 
 class NavigateAppPage extends BasePage {
+  clickAndGoToActivityIndicatorPage() {
+    this.activityIndicatorPage.click();
+  }
+
   clickAndGoToButtonPage() {
     this.buttonPage.click();
   }
@@ -34,6 +44,10 @@ class NavigateAppPage extends BasePage {
     this.checkboxPage.click();
   }
 
+  clickAndGoToCheckboxExperimentalPage() {
+    this.checkboxExperimentalPage.click();
+  }
+
   clickAndGoToContextualMenuPage() {
     this.contextualMenuPage.click();
   }
@@ -58,6 +72,10 @@ class NavigateAppPage extends BasePage {
     this.menuButtonPage.click();
   }
 
+  clickAndGoToExperimentalMenuButtonPage() {
+    this.menuButtonExperimentalPage.click();
+  }
+
   clickAndGoToPersonaPage() {
     this.personaPage.click();
   }
@@ -78,6 +96,10 @@ class NavigateAppPage extends BasePage {
     this.separatorPage.click();
   }
 
+  clickAndGoToShimmerPage() {
+    this.shimmerPage.click();
+  }
+
   clickAndGoToSvgPage() {
     this.svgPage.click();
   }
@@ -86,6 +108,10 @@ class NavigateAppPage extends BasePage {
     this.textPage.click();
   }
 
+  clickAndGoToExperimentalTextPage() {
+    this.textExperimentalPage.click();
+  }
+
   clickAndGoToTabsPage() {
     this.tabsPage.click();
   }
@@ -94,6 +120,10 @@ class NavigateAppPage extends BasePage {
     this.themePage.click();
   }
 
+  clickAndGoToTokensPage() {
+    this.tokensPage.click();
+  }
+
   clickAndGoToExperimentalButtonPage() {
     this.experimentalButtonPage.click();
   }
@@ -110,6 +140,10 @@ class NavigateAppPage extends BasePage {
     return By(BASE_TESTPAGE);
   }
 
+  private get activityIndicatorPage() {
+    return By(HOMEPAGE_ACTIVITY_INDICATOR_BUTTON);
+  }
+
   private get buttonPage() {
     return By(HOMEPAGE_BUTTON_BUTTON);
   }
@@ -122,6 +156,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_CHECKBOX_BUTTON);
   }
 
+  private get checkboxExperimentalPage() {
+    return By(HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON);
+  }
+
   private get contextualMenuPage() {
     return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
   }
@@ -146,6 +184,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_MENU_BUTTON);
   }
 
+  private get menuButtonExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_MENU_BUTTON);
+  }
+
   private get personaPage() {
     return By(HOMEPAGE_PERSONA_BUTTON);
   }
@@ -166,6 +208,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_SEPARATOR_BUTTON);
   }
 
+  private get shimmerPage() {
+    return By(HOMEPAGE_SHIMMER_BUTTON);
+  }
+
   private get svgPage() {
     return By(HOMEPAGE_SVG_BUTTON);
   }
@@ -174,6 +220,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_TEXT_BUTTON);
   }
 
+  private get textExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON);
+  }
+
   private get tabsPage() {
     return By(HOMEPAGE_TABS_BUTTON);
   }
@@ -182,6 +232,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_THEME_BUTTON);
   }
 
+  private get tokensPage() {
+    return By(HOMEPAGE_TOKEN_BUTTON);
+  }
+
   private get experimentalButtonPage() {
     return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
   }

package/src/FluentTester/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -4,7 +4,7 @@ import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { ACTIVITYINDICATOR_TESTPAGE } from './consts';
+import { ACTIVITY_INDICATOR_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
 const activityIndicatorTest: React.FunctionComponent = () => {
@@ -64,12 +64,12 @@ const basicActivityIndicator: React.FunctionComponent = () => {
 const activityIndicatorSections: TestSection[] = [
   {
     name: 'BaseActivityIndicator',
-    testID: ACTIVITYINDICATOR_TESTPAGE,
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: basicActivityIndicator,
   },
   {
     name: 'ActivityIndicator',
-    testID: ACTIVITYINDICATOR_TESTPAGE,
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: activityIndicatorTest,
   },
 ];

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

@@ -1,2 +1,5 @@
-export const HOMEPAGE_ACTIVITYINDICATOR_BUTTON = 'Homepage_ActivityIndicator_Button';
-export const ACTIVITYINDICATOR_TESTPAGE = 'ActivityIndicator_TestPage';
+export const HOMEPAGE_ACTIVITY_INDICATOR_BUTTON = 'HOMEPAGE_ACTIVITY_INDICATOR_BUTTON';
+export const ACTIVITY_INDICATOR_TESTPAGE = 'ACTIVITY_INDICATOR_TESTPAGE';
+
+/* Test ActivityIndicator 1 */
+export const ACTIVITY_INDICATOR_TEST_COMPONENT = 'Activity_Indicator_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ExperimentalCheckboxTestPageId } from './consts';
+import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
+import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
 
 function onChangeUncontrolled(isChecked: boolean) {
   console.log(isChecked);
@@ -43,9 +44,9 @@ const otherCheckbox: React.FunctionComponent = () => {
     <View>
       <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={Boolean(isCheckedControlled1)} />
       <Checkbox
-        label="Checkbox rendered with boxSide 'end' (controlled)"
+        label="Checkbox rendered with labelPosition 'before' (controlled)"
         onChange={onChangeControlled2}
-        boxSide="end"
+        labelPosition="before"
         checked={Boolean(isCheckedControlled2)}
       />
     </View>
@@ -105,7 +106,7 @@ const tokenCheckbox: React.FunctionComponent = () => {
       <BlueCheckbox
         label="Token-customized checkbox. Customizable below."
         onChange={onChangeUncontrolled}
-        boxSide="end"
+        labelPosition="before"
         defaultChecked={false}
       />
 
@@ -133,7 +134,7 @@ const tokenCheckbox: React.FunctionComponent = () => {
 const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
-    testID: ExperimentalCheckboxTestPageId,
+    testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
     component: basicCheckbox,
   },
   {
@@ -144,6 +145,10 @@ const checkboxSections: TestSection[] = [
     name: 'Token Customized Checkboxes',
     component: tokenCheckbox,
   },
+  {
+    name: 'E2E Testing for Experimental Checkbox',
+    component: E2ECheckboxExperimentalTest,
+  },
 ];
 
 export const ExperimentalCheckboxTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -0,0 +1,27 @@
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT,
+  EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+
+export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          testID={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT}
+        />
+        <Checkbox label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+      </Stack>
+    </View>
+  );
+};

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

@@ -1,2 +1,10 @@
-export const HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL = 'Homepage_Checkbox_CheckboxExperimental'; // Button on the homepage that navigates to the selected test page
-export const ExperimentalCheckboxTestPageId = 'CheckboxExperimental_TestPage'; // A component on each specific test page.
+export const HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON = 'HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON'; // Button on the homepage that navigates to the selected test page
+export const EXPERIMENTAL_CHECKBOX_TESTPAGE = 'Checkbox_Experimental_TestPage'; // A component on each specific test page.
+
+/* Test Experimental Checkbox 1 */
+export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT = 'Experimental_Checkbox_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Experimental Checkbox accessibility label';
+
+/* Test Experimental Checkbox 2 */
+export const EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Experimental Checkbox_No_A11y_label_Component';
+export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL = 'Test Experimental Checkbox2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/MenuButtonExperimental/ExperimentalMenuButtonE2ETest.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { ContextualMenuProps } from '@fluentui/react-native';
+import { Text, View } from 'react-native';
+import { menuItems } from './testData';
+import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import {
+  EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT,
+  EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2ETestExperimentalMenuButton: React.FunctionComponent = () => {
+  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
+
+  const onItemClick = React.useCallback(
+    (key) => {
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked],
+  );
+
+  const contextualMenuProps: ContextualMenuProps = {
+    accessibilityLabel: 'MenuButton',
+    shouldFocusOnMount: true,
+    shouldFocusOnContainer: false,
+  };
+
+  return (
+    <View>
+      <View style={viewWrapperStyle}>
+        <View style={columnStyle}>
+          <Text>
+            <Text>Last Menu Item Clicked: </Text>
+            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
+          </Text>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content="Standard MenuButton with Accessibility Label"
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT}
+                accessibilityLabel={EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL}
+              />
+            </View>
+          </View>
+          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
+            <View style={columnStyle}>
+              <MenuButton
+                content={EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL}
+                menuItems={menuItems}
+                onItemClick={onItemClick}
+                contextualMenu={contextualMenuProps}
+                testID={EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/MenuButtonExperimental/MenuButtonTest.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { HOMEPAGE_MENU_BUTTON_EXPERIMENTAL } from './consts';
+import { MENU_BUTTON_EXPERIMENTAL_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
+import { E2ETestExperimentalMenuButton } from './ExperimentalMenuButtonE2ETest';
 import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
 
 const menuButtonSections: TestSection[] = [
   {
     name: 'Standard MenuButton',
-    testID: HOMEPAGE_MENU_BUTTON_EXPERIMENTAL,
+    testID: MENU_BUTTON_EXPERIMENTAL_TESTPAGE,
     component: StandardMenuButton,
   },
   {
@@ -19,6 +20,10 @@ const menuButtonSections: TestSection[] = [
     name: 'MenuButton with customized UI',
     component: CustomizedMenuButton,
   },
+  {
+    name: 'E2E Testing MenuButton',
+    component: E2ETestExperimentalMenuButton,
+  },
 ];
 
 export const ExperimentalMenuButtonTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
-export const HOMEPAGE_MENU_BUTTON_EXPERIMENTAL = 'Homepage_MenuButtonExperimental';
+export const HOMEPAGE_EXPERIMENTAL_MENU_BUTTON = 'Homepage_MenuButtonExperimental';
 export const MENU_BUTTON_EXPERIMENTAL_TESTPAGE = 'MenuButtonExperimental_TestPage';
+
+/* E2E Testing Experimental Menu_Button 1 */
+export const EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT = 'Experimental_Menu_Button_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_MENU_BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Experimental_Menu_Button accessibility label';
+
+/* E2E Testing Experimental Menu_Button 2 */
+export const EXPERIMENTAL_MENU_BUTTON_NO_A11Y_LABEL_COMPONENT = 'Experimental_Menu_Button_No_A11y_label_Component';
+export const EXPERIMENTAL_MENU_BUTTON_TEST_COMPONENT_LABEL = 'Test Experimental_Menu_Button2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Shimmer/ShimmerE2ETest.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { shimmerRectsAndRect } from './ShimmerTestElementSets';
+import { SHIMMER_TEST_COMPONENT } from './consts';
+
+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 }}
+      />
+    </Stack>
+  );
+};

package/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx

@@ -5,6 +5,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
+import { E2ETestingShimmer } from './ShimmerE2ETest';
 
 const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
   return (
@@ -63,6 +64,10 @@ const shimmerSections: TestSection[] = [
     testID: SHIMMER_TESTPAGE,
     component: ShimmerBorderRadii,
   },
+  {
+    name: 'Shimmer for E2E Testing',
+    component: E2ETestingShimmer,
+  },
 ];
 
 export const ShimmerTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,5 @@
 export const HOMEPAGE_SHIMMER_BUTTON = 'Homepage_Shimmer_Button';
 export const SHIMMER_TESTPAGE = 'Shimmer_TestPage';
+
+/* Test Shimmer 1 */
+export const SHIMMER_TEST_COMPONENT = 'Shimmer_Test_Component'; // A component on each specific test page

package/src/FluentTester/TestComponents/TextExperimental/ExperimentalTextE2ETest.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_TEXT_TEST_COMPONENT,
+  EXPERIMENTAL_TEXT_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_TEXT_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_TEXT_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EExperimentalTextTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text
+          variant="captionStandard"
+          testID={EXPERIMENTAL_TEXT_TEST_COMPONENT}
+          accessibilityLabel={EXPERIMENTAL_TEXT_ACCESSIBILITY_LABEL}
+        >
+          Testing Text Component - AccessibilityLabel Set
+        </Text>
+        <Text variant="captionStandard" testID={EXPERIMENTAL_TEXT_NO_A11Y_LABEL_COMPONENT}>
+          {EXPERIMENTAL_TEXT_TEST_COMPONENT_LABEL}
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/TextExperimental/StandardUsage.tsx

@@ -3,13 +3,13 @@ import { View } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
-import { TEXT_TESTPAGE } from './consts';
+import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './consts';
 
 export const StandardUsage: React.FunctionComponent = () => {
   return (
     <View>
       <Stack style={stackStyle} gap={5}>
-        <Text variant="captionStandard" testID={TEXT_TESTPAGE}>
+        <Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
           CaptionStandard
         </Text>
         <Text variant="secondaryStandard">SecondaryStandard</Text>

package/src/FluentTester/TestComponents/TextExperimental/TextExperimentalTest.tsx

@@ -3,10 +3,13 @@ import { StandardUsage } from './StandardUsage';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PressableUsage } from './PressableUsage';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { E2EExperimentalTextTest } from './ExperimentalTextE2ETest';
+import { EXPERIMENTAL_TEXT_TESTPAGE } from './consts';
 
 const textSections: TestSection[] = [
   {
     name: 'Standard Usage',
+    testID: EXPERIMENTAL_TEXT_TESTPAGE,
     component: StandardUsage,
   },
   {
@@ -17,6 +20,10 @@ const textSections: TestSection[] = [
     name: 'Pressable Usage',
     component: PressableUsage,
   },
+  {
+    name: 'E2E Testing for Experimental Text',
+    component: E2EExperimentalTextTest,
+  },
 ];
 
 export const TextExperimentalTest: React.FunctionComponent = () => {

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

@@ -1,2 +1,10 @@
 export const HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON = 'Homepage_Text_Experimental_Button';
-export const TEXT_TESTPAGE = 'Text_Experimental_TestPage';
+export const EXPERIMENTAL_TEXT_TESTPAGE = 'Text_Experimental_TestPage';
+
+/* E2E Testing Experimental Text 1 */
+export const EXPERIMENTAL_TEXT_TEST_COMPONENT = 'Experimental_Text_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_TEXT_ACCESSIBILITY_LABEL = 'E2E testing Experimental_Text_Test_Component accessibility label';
+
+/* E2E Testing Experimental Text 2 */
+export const EXPERIMENTAL_TEXT_NO_A11Y_LABEL_COMPONENT = 'Experimental_Text_No_A11y_label_Component';
+export const EXPERIMENTAL_TEXT_TEST_COMPONENT_LABEL = 'Test Experimental_Text2 - No Accessibility Label'; // A component on each specific test page

package/src/FluentTester/TestComponents/Tokens/TokenTest.tsx

@@ -7,6 +7,7 @@ import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
 import { commonTestStyles } from '../Common/styles';
 import { Text } from '@fluentui/react-native';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { TOKENS_TEST_COMPONENT, TOKEN_TESTPAGE } from './consts';
 
 const getThemedStyles = themedStyleSheet((theme: Theme) => {
   return {
@@ -47,7 +48,7 @@ const ColorToken: React.FunctionComponent<ColorTokenProps> = (p: ColorTokenProps
   const themedStyles = getThemedStyles(useTheme());
   return (
     <View style={styles.swatchItem}>
-      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
+      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} testID={TOKENS_TEST_COMPONENT} />
       <Text>{p.name}</Text>
     </View>
   );
@@ -95,6 +96,7 @@ const AliasTokensSwatchList: React.FunctionComponent = () => {
 const themeSections: TestSection[] = [
   {
     name: 'Alias Color Tokens',
+    testID: TOKEN_TESTPAGE,
     component: () => <AliasTokensSwatchList />,
   },
 ];

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

@@ -1,2 +1,5 @@
 export const HOMEPAGE_TOKEN_BUTTON = 'Homepage_Token_Button';
 export const TOKEN_TESTPAGE = 'Token_TestPage';
+
+/* Test Tokens 1 */
+export const TOKENS_TEST_COMPONENT = 'Tokens_Test_Component'; // A component on each specific test page

package/src/FluentTester/testPages.android.ts

@@ -17,17 +17,17 @@ import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
 import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
 import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
-import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
-import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL } from './TestComponents/CheckboxExperimental';
+import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
 import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
 
 export const tests: TestDescription[] = [
   {
     name: 'ActivityIndicator Test',
     component: ActivityIndicatorTest,
-    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
   },
   {
     name: 'Avatar Test',
@@ -122,7 +122,7 @@ export const tests: TestDescription[] = [
   {
     name: 'Experimental Checkbox',
     component: ExperimentalCheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL,
+    testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
   },
   {
     name: 'Svg Test',

package/src/FluentTester/testPages.ios.ts

@@ -2,7 +2,7 @@ import { TestDescription } from './TestComponents';
 import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
-import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL } from './TestComponents/CheckboxExperimental';
+import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
 import { ExperimentalButtonTest, HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from './TestComponents/ButtonExperimental';
 import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
@@ -16,7 +16,7 @@ import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer';
 import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
 import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
 import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
-import { ActivityIndicatorTest, HOMEPAGE_ACTIVITYINDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 
@@ -24,7 +24,7 @@ export const tests: TestDescription[] = [
   {
     name: 'ActivityIndicator Test',
     component: ActivityIndicatorTest,
-    testPage: HOMEPAGE_ACTIVITYINDICATOR_BUTTON,
+    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
   },
   {
     name: 'Avatar Test',
@@ -104,7 +104,7 @@ export const tests: TestDescription[] = [
   {
     name: 'Experimental Checkbox',
     component: ExperimentalCheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_CHECKBOXEXPERIMENTAL,
+    testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
   },
   {
     name: 'Svg Test',