@fluentui-react-native/tester 0.47.2 → 0.49.0

package/src/E2E/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts

@@ -0,0 +1,36 @@
+import {
+  FOCUSTRAPZONE_TESTPAGE,
+  FOCUSTRAPZONE_TEST_COMPONENT,
+  HOMEPAGE_FOCUSTRAPZONE_BUTTON,
+} from '../../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class FocusTrapZonePageObject extends BasePage {
+  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusTrapZone does not have any UI to it, it's simply
+  // a wrapper that adds keyboard focus functionality
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    const errorMsg = 'The FocusTrapZone UI Element did not load correctly. Please see logs.';
+    this.waitForCondition(() => this._primaryComponent.isExisting(), errorMsg, timeout);
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(FOCUSTRAPZONE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return FOCUSTRAPZONE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(FOCUSTRAPZONE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
+  }
+}
+
+export default new FocusTrapZonePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import FocusTrapZonePageObject from '../pages/FocusTrapZonePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('FocusTrapZone Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to FocusTrapZone test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    FocusTrapZonePageObject.scrollToComponentButton();
+    FocusTrapZonePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToFocusTrapZonePage();
+    FocusTrapZonePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(FocusTrapZonePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/FocusZone/pages/FocusZonePageObject.win.ts

@@ -0,0 +1,36 @@
+import {
+  FOCUSZONE_TESTPAGE,
+  FOCUSZONE_TEST_COMPONENT,
+  HOMEPAGE_FOCUSZONE_BUTTON,
+} from '../../../FluentTester/TestComponents/FocusZone/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class FocusZonePageObject extends BasePage {
+  // OVERRIDE: We use isExisting() here instead of isDisplayed() because FocusZone does not have any UI to it, it's simply
+  // a wrapper that adds keyboard focus functionality
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    const errorMsg = 'The FocusZone UI Element did not load correctly. Please see logs.';
+    this.waitForCondition(() => this._primaryComponent.isExisting(), errorMsg, timeout);
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(FOCUSZONE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return FOCUSZONE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(FOCUSZONE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_FOCUSZONE_BUTTON);
+  }
+}
+
+export default new FocusZonePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import FocusZonePageObject from '../pages/FocusZonePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('FocusZone Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to FocusZone test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    FocusZonePageObject.scrollToComponentButton();
+    FocusZonePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToFocusZonePage();
+    FocusZonePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(FocusZonePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Icon/pages/IconPageObject.win.ts

@@ -0,0 +1,34 @@
+import {
+  ICON_TESTPAGE,
+  ICON_TEST_COMPONENT,
+  HOMEPAGE_ICON_BUTTON,
+  ICON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/Icon/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class IconPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(ICON_TESTPAGE);
+  }
+
+  get _pageName() {
+    return ICON_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(ICON_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(ICON_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_ICON_BUTTON);
+  }
+}
+
+export default new IconPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import IconPageObject from '../pages/IconPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Icon Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Icon test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    IconPageObject.scrollToComponentButton();
+    IconPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToIconPage();
+    IconPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(IconPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Link/pages/LinkPageObject.ts

@@ -0,0 +1,34 @@
+import {
+  LINK_TESTPAGE,
+  LINK_TEST_COMPONENT,
+  HOMEPAGE_LINK_BUTTON,
+  LINK_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/Link/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class LinkPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(LINK_TESTPAGE);
+  }
+
+  get _pageName() {
+    return LINK_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(LINK_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(LINK_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_LINK_BUTTON);
+  }
+}
+
+export default new LinkPageObject();

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

@@ -0,0 +1,42 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import LinkPageObject from '../pages/LinkPageObject';
+import { ComponentSelector } from '../../common/BasePage';
+import { LINK_ACCESSIBILITY_LABEL } from '../../../FluentTester/TestComponents/Link/consts';
+import { LINK_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Link Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Link test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    LinkPageObject.scrollToComponentButton();
+    LinkPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToLinkPage();
+    LinkPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(LinkPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Link Accessibility Testing', () => {
+  it('Link - Validate accessibilityRole is correct', () => {
+    LinkPageObject.scrollToTestElement();
+    LinkPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(LinkPageObject.getAccessibilityRole()).toEqual(LINK_A11Y_ROLE);
+  });
+
+  it('Link - Set accessibilityLabel', () => {
+    LinkPageObject.scrollToTestElement();
+    LinkPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(LinkPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(LINK_ACCESSIBILITY_LABEL);
+  });
+
+  // No need to test not setting a11y label. The content prop gets passed down to the child Text component. This equates to not setting the a11y label
+  // on a Text component which we have testing for in our Text component spec
+});

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

@@ -0,0 +1,34 @@
+import {
+  MENU_BUTTON_TESTPAGE,
+  MENU_BUTTON_TEST_COMPONENT,
+  HOMEPAGE_MENU_BUTTON,
+  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/MenuButton/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class MenuButtonPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(MENU_BUTTON_TESTPAGE);
+  }
+
+  get _pageName() {
+    return MENU_BUTTON_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(MENU_BUTTON_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(MENU_BUTTON_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+}
+
+export default new MenuButtonPageObject();

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

@@ -0,0 +1,46 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import MenuButtonPageObject from '../pages/MenuButtonPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, MENUBUTTON_A11Y_ROLE } from '../../common/consts';
+import { MENU_BUTTON_ACCESSIBILITY_LABEL, MENU_BUTTON_TEST_COMPONENT_LABEL } from '../../../FluentTester/TestComponents/MenuButton/consts';
+import { ComponentSelector } from '../../common/BasePage';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('MenuButton Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to MenuButton test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    MenuButtonPageObject.scrollToComponentButton();
+    MenuButtonPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToMenuButtonPage();
+    MenuButtonPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(MenuButtonPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+/* 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', () => {
+    MenuButtonPageObject.scrollToTestElement();
+    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    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', () => {
+    MenuButtonPageObject.scrollToTestElement();
+    MenuButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(MenuButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(MENU_BUTTON_TEST_COMPONENT_LABEL);
+  });
+});

package/src/E2E/Persona/pages/PersonaPageObject.win.ts

@@ -0,0 +1,25 @@
+import { PERSONA_TESTPAGE, PERSONA_TEST_COMPONENT, HOMEPAGE_PERSONA_BUTTON } from '../../../FluentTester/TestComponents/Persona/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PersonaPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PERSONA_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PERSONA_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PERSONA_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PERSONA_BUTTON);
+  }
+}
+
+export default new PersonaPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PersonaPageObject from '../pages/PersonaPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Persona Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Persona test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PersonaPageObject.scrollToComponentButton();
+    PersonaPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPersonaPage();
+    PersonaPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PersonaPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/PersonaCoin/pages/PersonaCoinPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  PERSONACOIN_TESTPAGE,
+  PERSONACOIN_TEST_COMPONENT,
+  HOMEPAGE_PERSONACOIN_BUTTON,
+} from '../../../FluentTester/TestComponents/PersonaCoin/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PersonaCoinPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PERSONACOIN_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PERSONACOIN_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PERSONACOIN_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PERSONACOIN_BUTTON);
+  }
+}
+
+export default new PersonaCoinPageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PersonaCoinPageObject from '../pages/PersonaCoinPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('PersonaCoin Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to PersonaCoin test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PersonaCoinPageObject.scrollToComponentButton();
+    PersonaCoinPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPersonaCoinPage();
+    PersonaCoinPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PersonaCoinPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Pressable/pages/PressablePageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  PRESSABLE_TESTPAGE,
+  PRESSABLE_TEST_COMPONENT,
+  HOMEPAGE_PRESSABLE_BUTTON,
+} from '../../../FluentTester/TestComponents/Pressable/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class PressablePageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(PRESSABLE_TESTPAGE);
+  }
+
+  get _pageName() {
+    return PRESSABLE_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(PRESSABLE_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_PRESSABLE_BUTTON);
+  }
+}
+
+export default new PressablePageObject();

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

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import PressablePageObject from '../pages/PressablePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Pressable Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Pressable test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    PressablePageObject.scrollToComponentButton();
+    PressablePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToPressablePage();
+    PressablePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(PressablePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/README.md

@@ -48,7 +48,23 @@ _Note: It could take up to a minute to load the test app with WebDriverIO, don't
 
 # Authoring E2E Test
 
-## Create a new Page Object
+Testing is split-up on a **per-component** basis. Each component's testing story is made up of two parts - a **Page Object** and a **Spec Document**.
+
+Example File Structure:
+
+-> Checkbox Folder
+
+----> CheckboxPageObject.ts
+
+----> CheckboxSpec.ts
+
+Now, what are Page Objects and Spec Documents?
+
+## Page Objects
+
+A page object is an object-oriented class. The purpose of this class is to act as an interface for you to interact with a page of your testing app. In layman's terms, **it selects UI elements and performs some functions on them to obtain the scenario you want.**
+
+For each component/scenario you want to test, you will have a page object class for it.
 
 Page Object is a design pattern which has become popular in test automation for enhancing test maintenance and reducing code duplication. A [page object](https://webdriver.io/docs/pageobjects.html) is an object-oriented class that serves as an interface to a page of you testing app. The tests then use the methods of this Page Object whenever they need to interact with the UI of that page.
 The benefit is that if the UI changes for the test page, the tests themselves don’t need to change, only the code within the page object needs to change.
@@ -56,21 +72,28 @@ The benefit is that if the UI changes for the test page, the tests themselves do
 Page Objects should be put in apps/fluent-tester/src/E2E/_ *ComponentToBeTested* _/pages/.
 
 ```
-// CheckboxTestPage.win.ts
-class CheckboxTestPage extends BasePage {
-
+// CheckboxPageObject.win.ts
+class CheckboxPageObject extends BasePage {
+  // This function clicks on the Checkbox component you selected below
   toggleCheckbox() {
     this._testPage.click();
   }
 
-  get _testPage() {
+  // This function selects a UI element with the prop `testID = CHECKBOX_TESTPAGE`
+  get _checkboxComponent() {
     return By(CHECKBOX_TESTPAGE);
   }
 }
 
-export default new CheckboxTestPage();
+export default new CheckboxPageObject();
 ```
 
+### More on Page Objects (Technical Information)
+
+Each page object should extend BasePage.ts. The BasePage class contains a baseline set of methods/variables that all page objects should have. This allows us to write the most efficient code possible.
+
+For example, a common task we want to perform is selecting a UI element and getting its accessibilityRole attribute. Instead of doing this in all 20 page objects for each component, we write it once in the BasePage, and have the 20 page objects extend it. Enables code-reuse and allows for easy comprehension.
+
 ### **Selectors**
 
 - In order for a Page Object to access a component from the test page, you must use [selectors](https://webdriver.io/docs/selectors.html). The WebDriver Protocol provides several selector strategies to query an element.
@@ -90,8 +113,8 @@ Spec documents should be put in apps/fluent-tester/src/E2E/\_ _ComponentToBeTest
 ```
 describe('Click on each test page and check if it renders', function() {
   it('Checkbox Test Page', () => {
-    BootTestPage.clickAndGoToCheckboxPage();
-    expect(CheckboxTestPage.isPageLoaded()).toBeTruthy();
+    NavigateAppPage.clickAndGoToCheckboxPage();
+    expect(CheckboxPageObject.isPageLoaded()).toBeTruthy();
   });
 });
 ```

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

@@ -0,0 +1,70 @@
+import {
+  RADIOGROUP_TESTPAGE,
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOBUTTON_TEST_COMPONENT,
+  HOMEPAGE_RADIOGROUP_BUTTON,
+  RADIOBUTTON_NO_A11Y_LABEL_COMPONENT,
+} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+export const enum RadioButtonSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+class RadioGroupPage extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  // Get RadioButton's accessibilityLabel
+  getRBAccessibilityLabel(radioButtonSelector: RadioButtonSelector): string {
+    switch (radioButtonSelector) {
+      case RadioButtonSelector.Primary:
+        return this._radioButton.getAttribute('Name');
+
+      case RadioButtonSelector.Secondary:
+        return this._secondRadioButton.getAttribute('Name');
+    }
+  }
+
+  getRadioButtonAccesibilityRole(): string {
+    return this._radioButton.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(RADIOGROUP_TESTPAGE);
+  }
+
+  get _pageName() {
+    return RADIOGROUP_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(RADIOGROUP_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(RADIOGROUP_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  /***************/
+  /* RadioButton *
+  /**************/
+  get _radioButton() {
+    return By(RADIOBUTTON_TEST_COMPONENT);
+  }
+
+  get _secondRadioButton() {
+    return By(RADIOBUTTON_NO_A11Y_LABEL_COMPONENT);
+  }
+}
+
+export default new RadioGroupPage();