@fluentui-react-native/tester 0.47.2 → 0.49.0

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

@@ -0,0 +1,68 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import RadioGroupPageObject, { RadioButtonSelector } from '../pages/RadioGroupPageObject.win';
+import { ComponentSelector } from '../../common/BasePage';
+import { RADIOBUTTON_A11Y_ROLE, RADIOGROUP_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import {
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOBUTTON_ACCESSIBILITY_LABEL,
+  RADIOBUTTON_TEST_COMPONENT_LABEL,
+} from '../../../FluentTester/TestComponents/RadioGroup/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('RadioGroup/RadioButton Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to RadioGroup test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    RadioGroupPageObject.scrollToComponentButton();
+    RadioGroupPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToRadioGroupPage();
+    RadioGroupPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(RadioGroupPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('RadioGroup/RadioButton Accessibility Testing', () => {
+  it("Validate RadioGroup's accessibilityRole is correct", () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    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);
+  });
+
+  it('RadioButton - Do not set accessibilityLabel -> Default to RadioButton label', () => {
+    RadioGroupPageObject.scrollToTestElement();
+    RadioGroupPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(RadioGroupPageObject.getRBAccessibilityLabel(RadioButtonSelector.Secondary)).toEqual(RADIOBUTTON_TEST_COMPONENT_LABEL);
+  });
+});

package/src/E2E/Separator/pages/SeparatorPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  SEPARATOR_TESTPAGE,
+  SEPARATOR_TEST_COMPONENT,
+  HOMEPAGE_SEPARATOR_BUTTON,
+} from '../../../FluentTester/TestComponents/Separator/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class SeparatorPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SEPARATOR_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SEPARATOR_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SEPARATOR_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+}
+
+export default new SeparatorPageObject();

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

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

package/src/E2E/Svg/pages/SvgPageObject.win.ts

@@ -0,0 +1,25 @@
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class SvgPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SVG_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SVG_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SVG_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+}
+
+export default new SvgPageObject();

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

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

package/src/E2E/Tabs/pages/TabsPageObject.win.ts

@@ -0,0 +1,44 @@
+import {
+  TABS_TESTPAGE,
+  TABS_TEST_COMPONENT,
+  TABS_ITEM_TEST_COMPONENT,
+  HOMEPAGE_TABS_BUTTON,
+} from '../../../FluentTester/TestComponents/Tabs/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class TabsPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getTabItemAccesibilityRole(): string {
+    return this._tabItem.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(TABS_TESTPAGE);
+  }
+
+  get _pageName() {
+    return TABS_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(TABS_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  /***********/
+  /* TabItem *
+  /***********/
+  get _tabItem() {
+    return By(TABS_ITEM_TEST_COMPONENT);
+  }
+}
+
+export default new TabsPageObject();

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

@@ -0,0 +1,37 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import TabsPageObject 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', () => {
+  it("Validate Tab's accessibilityRole is correct", () => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(TabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+  });
+
+  it("Validate TabItem's accessibilityRole is correct", () => {
+    TabsPageObject.scrollToTestElement();
+    TabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(TabsPageObject.getTabItemAccesibilityRole()).toEqual(TABITEM_A11Y_ROLE);
+  });
+});

package/src/E2E/TabsExperimental/pages/ExperimentalTabsPageObject.win.ts

@@ -0,0 +1,44 @@
+import {
+  EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT,
+  EXPERIMENTAL_TABS_TESTPAGE,
+  EXPERIMENTAL_TABS_TEST_COMPONENT,
+  HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
+} from '../../../FluentTester/TestComponents/TabsExperimental/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ExperimentalTabsPageObject extends BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getTabItemAccesibilityRole(): string {
+    return this._tabItem.getAttribute('ControlType');
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(EXPERIMENTAL_TABS_TESTPAGE);
+  }
+
+  get _pageName() {
+    return EXPERIMENTAL_TABS_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(EXPERIMENTAL_TABS_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
+  }
+
+  /***********/
+  /* TabItem *
+  /***********/
+  get _tabItem() {
+    return By(EXPERIMENTAL_TABS_ITEM_TEST_COMPONENT);
+  }
+}
+
+export default new ExperimentalTabsPageObject();

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

@@ -0,0 +1,37 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ExperimentalTabsPageObject from '../pages/ExperimentalTabsPageObject.win';
+import { TAB_A11Y_ROLE, TABITEM_A11Y_ROLE, BOOT_APP_TIMEOUT, PAGE_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Experimental Tabs Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Experimental Tabs test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ExperimentalTabsPageObject.scrollToComponentButton();
+    ExperimentalTabsPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToExperimentalTabsPage();
+    ExperimentalTabsPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ExperimentalTabsPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Experimental Tabs Accessibility Testing', () => {
+  it("Validate Experimental Tab's accessibilityRole is correct", () => {
+    ExperimentalTabsPageObject.scrollToTestElement();
+    ExperimentalTabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ExperimentalTabsPageObject.getAccessibilityRole()).toEqual(TAB_A11Y_ROLE);
+  });
+
+  it("Validate Experimental TabItem's accessibilityRole is correct", () => {
+    ExperimentalTabsPageObject.scrollToTestElement();
+    ExperimentalTabsPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(ExperimentalTabsPageObject.getTabItemAccesibilityRole()).toEqual(TABITEM_A11Y_ROLE);
+  });
+});

package/src/E2E/Text/pages/TextPageObject.win.ts

@@ -0,0 +1,25 @@
+import { TEXT_TESTPAGE, TEXT_TEST_COMPONENT, HOMEPAGE_TEXT_BUTTON } from '../../../FluentTester/TestComponents/Text/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class TextPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(TEXT_TESTPAGE);
+  }
+
+  get _pageName() {
+    return TEXT_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(TEXT_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_TEXT_BUTTON);
+  }
+}
+
+export default new TextPageObject();

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

@@ -0,0 +1,31 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import TextPageObject from '../pages/TextPageObject.win';
+import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Text Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Text test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    TextPageObject.scrollToComponentButton();
+    TextPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToTextPage();
+    TextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(TextPageObject.isPageLoaded()).toBeTruthy();
+  });
+});
+
+describe('Text Accessibility Testing', () => {
+  it('Text - Validate accessibilityRole is correct', () => {
+    TextPageObject.scrollToTestElement();
+    TextPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+    expect(TextPageObject.getAccessibilityRole()).toEqual(TEXT_A11Y_ROLE);
+  });
+});

package/src/E2E/Theme/pages/ThemePageObject.win.ts

@@ -0,0 +1,25 @@
+import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../../../FluentTester/TestComponents/Theme/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ThemePageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(THEME_TESTPAGE);
+  }
+
+  get _pageName() {
+    return THEME_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(THEME_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_THEME_BUTTON);
+  }
+}
+
+export default new ThemePageObject();

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

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

package/src/E2E/common/BasePage.ts

@@ -1,20 +1,58 @@
 const DUMMY_CHAR = '';
-const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -40 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
+export const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -100 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
 
 export function By(testId: string): WebdriverIO.Element {
   return $('~' + testId);
 }
 
+/* The values in this enum map to the UI components we want to test in our app. We use this to
+make the communication from our spec document to our page object easier. Please read below to
+see why we have Primary/Secondary components. */
+export const enum ComponentSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+/****************************** IMPORTANT! PLEASE READ! **************************************************
+ * Every component's page object extends this. We can assume each test page will interact with at least
+ * two UI elements, so we'll add integration for two UI elements in this file (See *Getters* section below).
+ * Every additional UI element that a test page wants to interact with should be handled in that respective
+ * component's page object.
+ *********************************************************************************************************/
+
 export class BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getAccessibilityRole(): string {
+    return this._primaryComponent.getAttribute('ControlType');
+  }
+
+  /* Gets the accessibility label of an UI element given the selector */
+  getAccessibilityLabel(componentSelector: ComponentSelector): string {
+    switch (componentSelector) {
+      case ComponentSelector.Primary:
+        return this._primaryComponent.getAttribute('Name');
+
+      case ComponentSelector.Secondary:
+        return this._secondaryComponent.getAttribute('Name');
+    }
+  }
+
+  /* Returns true if the test page has loaded. To determine if it's loaded, each test page has a specific UI element we attempt to locate.
+   * If this UI element is located, we know the page as loaded correctly. The UI element we look for is a Text component that contains
+   * the title of the page (this._testPage returns that UI element)  */
   isPageLoaded(): boolean {
     return this._testPage.isDisplayed();
   }
 
+  /* Returns true if the test page's button is displayed (the button that navigates to each test page) */
   isButtonInView(): boolean {
     return this._pageButton.isDisplayed();
   }
 
-  // Scrolls to the component button in the list of components.
+  /* 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 {
     if (!this.isButtonInView()) {
       const scrollViewElement = $('~SCROLLVIEW_TEST_ID');
@@ -22,7 +60,7 @@ export class BasePage {
     }
   }
 
-  // Waits for page to be loaded. Timeout could differ depending on usage.
+  /* Waits for the test page to load. If the test page doesn't load before the timeout, it causes the test to fail. */
   waitForPageDisplayed(timeout?: number): void {
     browser.waitUntil(
       () => {
@@ -31,45 +69,96 @@ export class BasePage {
       timeout ?? this.waitForPageTimeout,
       this._pageName + ' did not render correctly. Please see /errorShots of the first failed test for more information.',
       1000,
-      // {
-      //   timeout: timeout ?? this.waitForPageTimeout,
-      //   timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.',
-      //   interval: 1000,
-      // },
     );
   }
 
+  /* Waits for the test page's button to be displayed. If the button doesn't load before the timeout, it causes the test to fail. */
   waitForButtonDisplayed(timeout?: number): void {
     browser.waitUntil(
       () => {
         return this.isButtonInView();
       },
       timeout ?? this.waitForPageTimeout,
-      this._pageName + ' did not render correctly. Please see /errorShots of the first failed test for more information.',
+      'The button to navigate to the ' +
+        this._pageName +
+        ' was not displayed correctly. Please see /errorShots of the first failed test for more information.',
       1000,
-      // {
-      //   timeout: timeout ?? this.waitForPageTimeout,
-      //   timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.',
-      //   interval: 1000,
-      // },
     );
   }
 
-  // Actual element on page
+  /* Waits for the primary UI test element to be displayed. If the element doesn't load before the timeout, it causes the test to fail. */
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this._primaryComponent.isDisplayed();
+      },
+      timeout ?? this.waitForPageTimeout,
+      'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
+      1000,
+    );
+  }
+
+  /* Scrolls to the primary UI test element until it is displayed. It uses the ScrollView that encapsulates each test page. */
+  scrollToTestElement(): void {
+    while (!this._primaryComponent.isDisplayed()) {
+      driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, $('~ScrollViewAreaForComponents').elementId);
+    }
+  }
+
+  /* A method that allows the caller to pass in a condition. A wrapper for waitUntil(). Once testing becomes more extensive,
+   * this will allow cleaner code within all the Page Objects. */
+  waitForCondition(condition?: () => boolean, errorMsg?: string, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return condition();
+      },
+      timeout ?? this.waitForPageTimeout,
+      errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
+      1000,
+    );
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+
+  /*  IMPORTANT:
+   *  Each PageObject class that extends this class is expected to override these values.
+   *  This is necessary because each page will have different IDs for their respective UI elements.
+   *  DUMMY_CHAR is just a placeholder.
+   */
+
+  // Returns: UI Element
+  // The Text component on each test page containing the title of that page. We can use this to determine if a test page has loaded correctly.
   get _testPage(): WebdriverIO.Element {
     return By(DUMMY_CHAR);
   }
 
-  // Title of page
-  get _pageName(): string {
-    return DUMMY_CHAR;
+  // Returns: UI Element
+  // The primary UI element used for testing on the given test page.
+  get _primaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The secondary UI element used for testing on the given test page. Often times, we'll want to set a
+  // prop on one component, and not set it on another to verify certain behaviors. This is why we have this secondary component.
+  get _secondaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
   }
 
-  // The button to select the page
+  // Returns: UI Element
+  // The button that navigates you to the component's test page.
   get _pageButton(): WebdriverIO.Element {
     return By(DUMMY_CHAR);
   }
 
+  // Returns: String
+  // Returns the name of the test page. Useful for error messages (see above).
+  get _pageName(): string {
+    return DUMMY_CHAR;
+  }
+
   // Default timeout to wait until page is displayed (10s)
-  private waitForPageTimeout: number = 15000;
+  waitForPageTimeout: number = 15000;
 }