@fluentui-react-native/tester 0.90.9 → 0.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.90.9",
+  "version": "0.91.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,36 +37,37 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.12.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.14.0 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.2.4",
-    "@fluentui-react-native/badge": ">=0.1.28 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.19 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.2.6",
+    "@fluentui-react-native/badge": ">=0.1.30 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.20 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.15.0 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.2.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.1 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.16.2 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.19",
-    "@fluentui-react-native/experimental-checkbox": "0.12.12",
+    "@fluentui-react-native/experimental-button": "0.16.20",
+    "@fluentui-react-native/experimental-checkbox": "0.12.13",
     "@fluentui-react-native/experimental-expander": "0.4.1",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.22 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.23 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/experimental-shadow": "0.2.14",
     "@fluentui-react-native/experimental-shimmer": "0.7.1",
-    "@fluentui-react-native/experimental-tabs": "0.5.10",
-    "@fluentui-react-native/experimental-text": ">=0.11.2 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.2.2",
+    "@fluentui-react-native/experimental-tabs": "0.5.11",
+    "@fluentui-react-native/experimental-text": ">=0.11.3 <1.0.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.2.3",
     "@fluentui-react-native/framework": ">=0.8.1 <1.0.0",
-    "@fluentui-react-native/icon": "0.13.5",
-    "@fluentui-react-native/interactive-hooks": ">=0.18.2 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.28",
-    "@fluentui-react-native/notification": "0.17.2",
-    "@fluentui-react-native/stack": ">=0.7.4 <1.0.0",
-    "@fluentui-react-native/switch": "^0.6.3",
-    "@fluentui-react-native/text": ">=0.14.1 <1.0.0",
+    "@fluentui-react-native/icon": "0.13.6",
+    "@fluentui-react-native/interactive-hooks": ">=0.18.3 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.29",
+    "@fluentui-react-native/notification": "0.17.3",
+    "@fluentui-react-native/stack": ">=0.7.5 <1.0.0",
+    "@fluentui-react-native/switch": "^0.6.4",
+    "@fluentui-react-native/text": ">=0.14.2 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
     "@fluentui-react-native/theming-utils": ">=0.15.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.21.0 <1.0.0",
-    "@fluentui/react-native": ">=0.32.11 <1.0.0",
+    "@fluentui/react-native": ">=0.32.12 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",
@@ -92,7 +93,6 @@
     "@wdio/jasmine-framework": "^7.13.0",
     "@wdio/local-runner": "^7.13.0",
     "@wdio/spec-reporter": "^7.13.0",
-    "@wdio/sync": "^7.13.0",
     "appium": "^2.0.0-beta.27",
     "appium-mac2-driver": "^1.4.0",
     "flow-bin": "^0.113.0",

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

@@ -4,21 +4,21 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Activity Indicator Testing Initialization', function () {
-  it('Wait for app load', () => {
-    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
-  it('Click and navigate to Activity Indicator test page', () => {
+  it('Click and navigate to Activity Indicator test page', async () => {
     /* Scroll to component test page button in scrollview if not already visible*/
-    ActivityIndicatorPageObject.scrollToComponentButton();
-    ActivityIndicatorPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+    await ActivityIndicatorPageObject.scrollToComponentButton();
+    await ActivityIndicatorPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToActivityIndicatorPage();
-    ActivityIndicatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+    await NavigateAppPage.clickAndGoToActivityIndicatorPage();
+    await ActivityIndicatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ActivityIndicatorPageObject.isPageLoaded()).toBeTruthy(ActivityIndicatorPageObject.ERRORMESSAGE_PAGELOAD);
-    expect(ActivityIndicatorPageObject.didAssertPopup()).toBeFalsy(ActivityIndicatorPageObject.ERRORMESSAGE_ASSERT);
+    await expect(await ActivityIndicatorPageObject.isPageLoaded()).toBeTruthy(ActivityIndicatorPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await ActivityIndicatorPageObject.didAssertPopup()).toBeFalsy(ActivityIndicatorPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/Avatar/pages/AvatarPageObject.ts

@@ -11,28 +11,30 @@ export const enum AvatarComponentSelector {
   SecondaryComponent, //this._secondaryComponent
 }
 class AvatarPageObject extends BasePage {
-  getPrimaryComponentAttribute(attribute: string): string {
-    return this._primaryComponent.getAttribute(attribute);
+  async getPrimaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._primaryComponent.getAttribute(attribute);
   }
-  getSecondaryComponentAttribute(attribute: string): string {
-    return this._secondaryComponent.getAttribute(attribute);
+
+  async getSecondaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._secondaryComponent.getAttribute(attribute);
   }
-  getAvatarAccessibilityLabel(componentSelector: AvatarComponentSelector): string {
+
+  async getAvatarAccessibilityLabel(componentSelector: AvatarComponentSelector): Promise<string> {
     return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? this._secondaryComponent.getAttribute('Name')
-      : this._primaryComponent.getAttribute('Name');
+      ? await this._secondaryComponent.getAttribute('Name')
+      : await this._primaryComponent.getAttribute('Name');
   }
 
-  getAvatarAccessibilityHint(componentSelector: AvatarComponentSelector): string {
+  async getAvatarAccessibilityHint(componentSelector: AvatarComponentSelector): Promise<string> {
     return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? this._secondaryComponent.getAttribute('HelpText')
-      : this._primaryComponent.getAttribute('HelpText');
+      ? await this._secondaryComponent.getAttribute('HelpText')
+      : await this._primaryComponent.getAttribute('HelpText');
   }
 
-  getAvatarAccessibilityRole(componentSelector: AvatarComponentSelector): string {
+  async getAvatarAccessibilityRole(componentSelector: AvatarComponentSelector): Promise<string> {
     return componentSelector == AvatarComponentSelector.SecondaryComponent
-      ? this._secondaryComponent.getAttribute('ControlType')
-      : this._primaryComponent.getAttribute('ControlType');
+      ? await this._secondaryComponent.getAttribute('ControlType')
+      : await this._primaryComponent.getAttribute('ControlType');
   }
   /*****************************************/
   /**************** Getters ****************/

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

@@ -14,48 +14,55 @@ import {
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Avatar Testing Initialization', function () {
-  it('Wait for app load', () => {
-    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
-  it('Click and navigate to Avatar test page', () => {
+  it('Click and navigate to Avatar test page', async () => {
     /* Scroll to component test page button in scrollview if not already visible*/
-    AvatarPageObject.scrollToComponentButton();
-    AvatarPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+    await AvatarPageObject.scrollToComponentButton();
+    await AvatarPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToAvatarPage();
-    AvatarPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+    await NavigateAppPage.clickAndGoToAvatarPage();
+    await AvatarPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(AvatarPageObject.isPageLoaded()).toBeTruthy(AvatarPageObject.ERRORMESSAGE_PAGELOAD);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+    await expect(await AvatarPageObject.isPageLoaded()).toBeTruthy(AvatarPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 });
 
 describe('Avatar Accessibility Testing', () => {
-  beforeEach(() => {
-    AvatarPageObject.scrollToTestElement();
-    AvatarPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  beforeEach(async () => {
+    await AvatarPageObject.scrollToTestElement();
+    await AvatarPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
   });
-  it('Validate accessibilityLabel', () => {
-    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+
+  it('Validate accessibilityLabel', async () => {
+    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL);
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
-  it('Validate accessibilityLabel from `name` prop', () => {
-    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL_BY_NAME);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+
+  it('Validate accessibilityLabel from `name` prop', async () => {
+    await expect(await AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(
+      AVATAR_ACCESSIBILITY_LABEL_BY_NAME,
+    );
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
-  it('Validate accessibilityHint', () => {
-    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(AVATAR_ACCESSIBILITY_HINT);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+
+  it('Validate accessibilityHint', async () => {
+    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(AVATAR_ACCESSIBILITY_HINT);
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
-  it('Validate accessibilityRole', () => {
-    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+
+  it('Validate accessibilityRole', async () => {
+    await expect(await AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
-  it('Validate default accessibilityRole', () => {
-    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_IMAGE);
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+
+  it('Validate default accessibilityRole', async () => {
+    await expect(await AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_IMAGE);
+    await expect(await AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/Badge/pages/BasicBadgePageObject.macos.ts

@@ -11,11 +11,12 @@ export const enum BadgeComponentSelector {
   SecondaryComponent, //this._secondaryComponent
 }
 class BasicBadgePageObject extends BasePage {
-  getPrimaryComponentAttribute(attribute: string): string {
-    return this._primaryComponent.getAttribute(attribute);
+  async getPrimaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._primaryComponent.getAttribute(attribute);
   }
-  getSecondaryComponentAttribute(attribute: string): string {
-    return this._secondaryComponent.getAttribute(attribute);
+
+  async getSecondaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._secondaryComponent.getAttribute(attribute);
   }
   /*****************************************/
   /**************** Getters ****************/

package/src/E2E/Badge/pages/BasicBadgePageObject.ts

@@ -12,12 +12,12 @@ export const enum BadgeComponentSelector {
 }
 
 class BasicBadgePageObject extends BasePage {
-  getPrimaryComponentAttribute(attribute: string): string {
-    return this._primaryComponent.getAttribute(attribute);
+  async getPrimaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._primaryComponent.getAttribute(attribute);
   }
 
-  getSecondaryComponentAttribute(attribute: string): string {
-    return this._secondaryComponent.getAttribute(attribute);
+  async getSecondaryComponentAttribute(attribute: string): Promise<string> {
+    return await this._secondaryComponent.getAttribute(attribute);
   }
 
   /*****************************************/

package/src/E2E/Badge/specs/Badge.spec.macos.ts

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

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

@@ -4,21 +4,21 @@ import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Badge Testing Initialization', function () {
-  it('Wait for app load', () => {
-    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
-  it('Click and navigate to Badge test page', () => {
+  it('Click and navigate to Badge test page', async () => {
     /* Scroll to component test page button in scrollview if not already visible*/
-    BasicBadgePageObject.scrollToComponentButton();
-    BasicBadgePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+    await BasicBadgePageObject.scrollToComponentButton();
+    await BasicBadgePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToBadgePage();
-    BasicBadgePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+    await NavigateAppPage.clickAndGoToBadgePage();
+    await BasicBadgePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(BasicBadgePageObject.isPageLoaded()).toBeTruthy(BasicBadgePageObject.ERRORMESSAGE_PAGELOAD);
-    expect(BasicBadgePageObject.didAssertPopup()).toBeFalsy(BasicBadgePageObject.ERRORMESSAGE_ASSERT);
+    await expect(await BasicBadgePageObject.isPageLoaded()).toBeTruthy(BasicBadgePageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await BasicBadgePageObject.didAssertPopup()).toBeFalsy(BasicBadgePageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/Button/pages/ButtonPageObject.ts

@@ -17,33 +17,28 @@ class ButtonPageObject extends BasePage {
   /******************************************************************/
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
-  didOnClickCallbackFire(): boolean {
-    const callbackText = By(BUTTON_ON_PRESS_DEPRECATED);
-    browser.waitUntil(
-      () => {
-        return callbackText.isDisplayed();
-      },
-      {
-        timeout: this.waitForPageTimeout,
-        timeoutMsg: 'The OnClick callback did not fire.',
-        interval: 1000,
-      },
-    );
+  async didOnClickCallbackFire(): Promise<boolean> {
+    const callbackText = await By(BUTTON_ON_PRESS_DEPRECATED);
+    await browser.waitUntil(async () => await callbackText.isDisplayed(), {
+      timeout: this.waitForPageTimeout,
+      timeoutMsg: 'The OnClick callback did not fire.',
+      interval: 1000,
+    });
 
-    return callbackText.isDisplayed();
+    return await callbackText.isDisplayed();
   }
 
   /* Sends a Keyboarding command on a specific UI element */
-  sendKey(buttonSelector: ButtonSelector, key: string): void {
-    this.getButtonSelector(buttonSelector).addValue(key);
+  async sendKey(buttonSelector: ButtonSelector, key: string): Promise<void> {
+    await (await this.getButtonSelector(buttonSelector)).addValue(key);
   }
 
   /* Returns the correct WebDriverIO element from the Button Selector */
-  getButtonSelector(buttonSelector?: ButtonSelector): WebdriverIO.Element {
+  async getButtonSelector(buttonSelector?: ButtonSelector): Promise<WebdriverIO.Element> {
     if (buttonSelector == ButtonSelector.PrimaryButton) {
-      return this._primaryComponent;
+      return await this._primaryComponent;
     }
-    return this._primaryComponent;
+    return await this._primaryComponent;
   }
 
   /*****************************************/

package/src/E2E/Button/specs/Button.spec.macos.ts

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

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

@@ -6,74 +6,74 @@ import { BUTTON_ACCESSIBILITY_LABEL_DEPRECATED, BUTTON_TEST_COMPONENT_LABEL_DEPR
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Button Testing Initialization', function () {
-  it('Wait for app load', () => {
-    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
-    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
   });
 
-  it('Click and navigate to Button test page', () => {
+  it('Click and navigate to Button test page', async () => {
     /* Scroll to component test page button in scrollview if not already visible*/
-    ButtonPageObject.scrollToComponentButton();
-    ButtonPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+    await ButtonPageObject.scrollToComponentButton();
+    await ButtonPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */
-    NavigateAppPage.clickAndGoToButtonPage();
-    ButtonPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+    await NavigateAppPage.clickAndGoToButtonPage();
+    await ButtonPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
 
-    expect(ButtonPageObject.isPageLoaded()).toBeTruthy(ButtonPageObject.ERRORMESSAGE_PAGELOAD);
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+    await expect(await ButtonPageObject.isPageLoaded()).toBeTruthy(ButtonPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 });
 
 describe('Button Accessibility Testing', () => {
   /* Scrolls and waits for the Button to be visible on the Test Page */
-  beforeEach(() => {
-    ButtonPageObject.scrollToTestElement();
-    ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  beforeEach(async () => {
+    await ButtonPageObject.scrollToTestElement();
+    await ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
   });
 
-  it('Button - Validate accessibilityRole is correct', () => {
-    expect(ButtonPageObject.getAccessibilityRole()).toEqual(BUTTON_A11Y_ROLE);
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Button - Validate accessibilityRole is correct', async () => {
+    await expect(await ButtonPageObject.getAccessibilityRole()).toEqual(BUTTON_A11Y_ROLE);
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Button - Set accessibilityLabel', () => {
-    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL_DEPRECATED);
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Button - Set accessibilityLabel', async () => {
+    await expect(await ButtonPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(BUTTON_ACCESSIBILITY_LABEL_DEPRECATED);
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 
-  it('Button - Do not set accessibilityLabel -> Default to Button label', () => {
-    expect(ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL_DEPRECATED);
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Button - Do not set accessibilityLabel -> Default to Button label', async () => {
+    await expect(await ButtonPageObject.getAccessibilityLabel(ComponentSelector.Secondary)).toEqual(BUTTON_TEST_COMPONENT_LABEL_DEPRECATED);
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 });
 
 describe('Button Functional Testing', () => {
   /* Scrolls and waits for the Button to be visible on the Test Page */
-  beforeEach(() => {
-    ButtonPageObject.scrollToTestElement();
-    ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  beforeEach(async () => {
+    await ButtonPageObject.scrollToTestElement();
+    await ButtonPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
   });
 
-  it('Validate OnClick() callback was fired -> Click', () => {
-    ButtonPageObject.clickComponent();
-    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Validate OnClick() callback was fired -> Click', async () => {
+    await ButtonPageObject.clickComponent();
+    await expect(await ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
 
-    ButtonPageObject.clickComponent(); // Reset Button State
+    await ButtonPageObject.clickComponent(); // Reset Button State
   });
 
-  it('Validate OnClick() callback was fired -> Type "Enter"', () => {
-    ButtonPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Enter);
-    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Validate OnClick() callback was fired -> Type "Enter"', async () => {
+    await ButtonPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Enter);
+    await expect(await ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
 
-    ButtonPageObject.clickComponent(); // Reset Button State
+    await ButtonPageObject.clickComponent(); // Reset Button State
   });
 
-  it('Validate OnClick() callback was fired -> Type "Spacebar"', () => {
-    ButtonPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Spacebar);
-    expect(ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
-    expect(ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
+  it('Validate OnClick() callback was fired -> Type "Spacebar"', async () => {
+    await ButtonPageObject.sendKey(ButtonSelector.PrimaryButton, Keys.Spacebar);
+    await expect(await ButtonPageObject.didOnClickCallbackFire()).toBeTruthy();
+    await expect(await ButtonPageObject.didAssertPopup()).toBeFalsy(ButtonPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/E2E/ButtonExperimental/pages/ButtonExperimentalPageObject.ts

@@ -16,33 +16,28 @@ class ButtonExperimentalPageObject extends BasePage {
   /******************************************************************/
   /**************** UI Element Interaction Methods ******************/
   /******************************************************************/
-  didOnClickCallbackFire(): boolean {
-    const callbackText = By(BUTTON_ON_PRESS);
-    browser.waitUntil(
-      () => {
-        return callbackText.isDisplayed();
-      },
-      {
-        timeout: this.waitForPageTimeout,
-        timeoutMsg: 'The OnClick callback did not fire.',
-        interval: 1000,
-      },
-    );
+  async didOnClickCallbackFire(): Promise<boolean> {
+    const callbackText = await By(BUTTON_ON_PRESS);
+    await browser.waitUntil(async () => await callbackText.isDisplayed(), {
+      timeout: this.waitForPageTimeout,
+      timeoutMsg: 'The OnClick callback did not fire.',
+      interval: 1000,
+    });
 
-    return callbackText.isDisplayed();
+    return await callbackText.isDisplayed();
   }
 
   /* Sends a Keyboarding command on a specific UI element */
-  sendKey(buttonSelector: ButtonSelector, key: string): void {
-    this.getButtonSelector(buttonSelector).addValue(key);
+  async sendKey(buttonSelector: ButtonSelector, key: string): Promise<void> {
+    await (await this.getButtonSelector(buttonSelector)).addValue(key);
   }
 
   /* Returns the correct WebDriverIO element from the Button Selector */
-  getButtonSelector(buttonSelector?: ButtonSelector): WebdriverIO.Element {
+  async getButtonSelector(buttonSelector?: ButtonSelector): Promise<WebdriverIO.Element> {
     if (buttonSelector == ButtonSelector.PrimaryButton) {
-      return this._primaryComponent;
+      return await this._primaryComponent;
     }
-    return this._primaryComponent;
+    return await this._primaryComponent;
   }
 
   /*****************************************/