test: unified framework main branch (#27939)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

> **Migrates performance testing from `appwright` to `playwright` and
modernizes the Playwright/Appium test harness.** The GitHub workflow and
`package.json` scripts are switched to `run-playwright:*`, and several
performance specs are rewritten from legacy WDIO screen-objects to new
page-objects/flows.
> 
> **Adds new Playwright fixtures and utilities for performance runs.** A
`currentDeviceDetails` fixture is introduced, plus a
`performanceTracker` fixture that auto-attaches metrics post-test,
validates quality gates (skipping retries after threshold-only
failures), publishes scenarios to Sentry, and stores session metadata.
> 
> **Improves Appium interaction reliability and provider integration.**
Playwright matchers/gestures gain stability-aware `waitAndTap`, better
text/XPath handling, app lifecycle helpers
(terminate/activate/background/hide keyboard), standardized default
timeouts, and BrowserStack/emulator capability updates including
per-platform app identifiers and a provider `getRecordingUrl` for video
links.
> 
> **Updates test IDs and selectors used by E2E.** Predict market details
testIDs are normalized (tab vs tab-content), and confirmations add a
`KEYBOARD_CONTAINER` id with corresponding page-object updates.
> 

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMQA-1454

## **Manual testing steps**
N/A

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
N/A
<!-- [screenshots/recordings] -->

### **After**
N/A
<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Broad changes across the E2E/performance harness (fixtures,
matchers/gestures, BrowserStack capabilities, and multiple rewritten
specs) could introduce new test flakiness or CI/run-time regressions
despite being non-production code.
> 
> **Overview**
> Migrates BrowserStack performance test execution from `appwright` to
`playwright` by switching the GitHub workflow and `package.json` scripts
to `run-playwright:*` commands.
> 
> Refactors the Playwright/Appium test harness with **new fixtures**
(including `currentDeviceDetails` and an auto-managed
`performanceTracker` that attaches metrics, enforces quality gates, and
publishes to Sentry), plus reliability improvements to matchers/gestures
(stability-aware `waitAndTap`, richer XPath/text handling, app lifecycle
helpers, and standardized default timeouts).
> 
> Rewrites several performance specs and page objects to the unified
page-object/flow style (wallet/login, swaps, perps), adds a new
`perps.flow` helper, and updates/normalizes test IDs used by E2E
(Predict market details tab/content IDs and a new confirmations
`KEYBOARD_CONTAINER` selector).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7a072f2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Christopher Ferreira <christopher.ferreira@consensys.net>
Co-authored-by: Christopher Ferreira <104831203+christopherferreira9@users.noreply.github.com>
Co-authored-by: Javier Garcia Vera <javier.vera@consensys.net>

Author: 3 people

.github/workflows/performance-test-runner.yml

@@ -241,11 +241,11 @@ jobs:
 
           # Run the appropriate test command based on build_type flag
           if [ "${{ inputs.build_type }}" = "onboarding" ]; then
-            yarn run-appwright:${{ inputs.platform }}-onboarding-bs
+            yarn run-playwright:${{ inputs.platform }}-onboarding-bs
           elif [ "${{ inputs.build_type }}" = "mm-connect" ]; then
-            yarn run-appwright:mm-connect-${{ inputs.platform }}-bs
+            yarn run-playwright:mm-connect-${{ inputs.platform }}-bs
           else
-            yarn run-appwright:${{ inputs.platform }}-bs
+            yarn run-playwright:${{ inputs.platform }}-bs
           fi
 
           echo "✅ ${{ inputs.build_type }} tests completed for ${{ inputs.platform }} on ${{ matrix.device.name }}"

app/components/UI/Predict/Predict.testIds.ts

@@ -82,9 +82,14 @@ export const getPredictFeedMockSelector = {
 
 export type PredictMarketDetailsTabKey = 'positions' | 'outcomes' | 'about';
 
+const PREDICT_MARKET_DETAILS_SELECTOR_BASE = 'predict-market-details';
+
 export const getPredictMarketDetailsSelector = {
+  tabBar: `${PREDICT_MARKET_DETAILS_SELECTOR_BASE}-tab-bar`,
+  tabContent: (tabKey: PredictMarketDetailsTabKey) =>
+    `${PREDICT_MARKET_DETAILS_SELECTOR_BASE}-${tabKey}-tab-content`,
   tabBarTab: (tabKey: PredictMarketDetailsTabKey) =>
-    `predict-market-details-tab-bar-tab-${tabKey}`,
+    `${PREDICT_MARKET_DETAILS_SELECTOR_BASE}-tab-bar-tab-${tabKey}`,
   icon: (name: string) => `icon-${name}`,
 } as const;
 
@@ -98,20 +103,16 @@ export const PredictMarketDetailsSelectorsIDs = {
   SHARE_BUTTON: 'predict-market-details-share-button',
 
   // Tabs
-  TAB_BAR: 'predict-market-details-tab-bar',
-  ABOUT_TAB: 'predict-market-details-about-tab',
-  POSITIONS_TAB: 'predict-market-details-positions-tab',
-  OUTCOMES_TAB: 'predict-market-details-outcomes-tab',
-
-  // Tab labels
-  POSITIONS_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('positions'),
-  OUTCOMES_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('outcomes'),
-  ABOUT_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('about'),
+  TAB_BAR: getPredictMarketDetailsSelector.tabBar,
+  ABOUT_TAB: getPredictMarketDetailsSelector.tabBarTab('about'),
+  POSITIONS_TAB: getPredictMarketDetailsSelector.tabBarTab('positions'),
+  OUTCOMES_TAB: getPredictMarketDetailsSelector.tabBarTab('outcomes'),
 
   // Tab content containers
-  ABOUT_TAB_CONTENT: 'about-tab-content',
-  POSITIONS_TAB_CONTENT: 'positions-tab-content',
-  OUTCOMES_TAB_CONTENT: 'outcomes-tab-content',
+  ABOUT_TAB_CONTENT: getPredictMarketDetailsSelector.tabContent('about'),
+  POSITIONS_TAB_CONTENT:
+    getPredictMarketDetailsSelector.tabContent('positions'),
+  OUTCOMES_TAB_CONTENT: getPredictMarketDetailsSelector.tabContent('outcomes'),
   MARKET_DETAILS_CASH_OUT_BUTTON: 'predict-market-details-cash-out-button',
   CLAIM_WINNINGS_BUTTON: 'predict-market-details-claim-winnings-button',
 

app/components/UI/Predict/views/PredictMarketDetails/components/PredictMarketDetailsTabContent.tsx

@@ -68,7 +68,7 @@ const PredictMarketDetailsTabContent = memo(
       return (
         <Box
           twClassName="px-3 pt-4 pb-8"
-          testID={PredictMarketDetailsSelectorsIDs.ABOUT_TAB}
+          testID={PredictMarketDetailsSelectorsIDs.ABOUT_TAB_CONTENT}
         >
           <PredictMarketDetailsAbout
             market={market}
@@ -81,7 +81,7 @@ const PredictMarketDetailsTabContent = memo(
       return (
         <Box
           twClassName="px-3 pt-4 pb-8"
-          testID={PredictMarketDetailsSelectorsIDs.POSITIONS_TAB}
+          testID={PredictMarketDetailsSelectorsIDs.POSITIONS_TAB_CONTENT}
         >
           <PredictMarketDetailsPositions
             activePositions={activePositions}
@@ -95,7 +95,7 @@ const PredictMarketDetailsTabContent = memo(
       return (
         <Box
           twClassName="px-3 pt-4 pb-8"
-          testID={PredictMarketDetailsSelectorsIDs.OUTCOMES_TAB}
+          testID={PredictMarketDetailsSelectorsIDs.OUTCOMES_TAB_CONTENT}
         >
           <PredictMarketDetailsOutcomes
             market={market}

app/components/Views/confirmations/ConfirmationView.testIds.ts

@@ -101,4 +101,5 @@ export const TransactionPayComponentIDs = {
   PAY_WITH_FIAT: 'pay-with-fiat',
   PAY_WITH_SYMBOL: 'pay-with-symbol',
   PAY_WITH_TOKEN_LIST: 'pay-with-token-list',
+  KEYBOARD_CONTAINER: 'custom-amount-input',
 };

package.json

@@ -110,15 +110,17 @@
     "test:reassure:branch": "REASSURE=true yarn reassure --branch && node -e \"const r=require('./.reassure/output.json'); if ((r.significant||[]).length>0) { console.error('Reassure: significant regressions detected'); process.exit(1);} else { process.exit(0);} \"",
     "test:e2e:feature-flag:coverage": "ts-node tests/feature-flags/feature-flag-coverage-report.ts",
     "test:e2e:ai-test-plan": "node -r esbuild-register tests/tools/e2e-ai-analyzer --mode generate-test-plan --auto-ff",
-    "run-appwright:android-bs": "yarn appwright test --project browserstack-android --config tests/appwright.config.ts",
-    "run-appwright:android-onboarding-bs": "yarn appwright test --project android-onboarding --project android-onboarding-seedless --config tests/appwright.config.ts",
-    "run-appwright:ios-onboarding-bs": "yarn appwright test --project ios-onboarding --project ios-onboarding-seedless --config tests/appwright.config.ts",
-    "run-appwright:ios-bs": "yarn appwright test --project browserstack-ios --config tests/appwright.config.ts",
-    "run-appwright:android": "yarn appwright test --project android --config tests/appwright.config.ts",
-    "run-appwright:ios": "yarn appwright test --project ios --config tests/appwright.config.ts",
-    "run-appwright:mm-connect-android-local": "yarn appwright test --project mm-connect-android-local --config tests/appwright.config.ts",
-    "run-appwright:mm-connect-android-bs": "yarn appwright test --project mm-connect-android-browserstack --config tests/appwright.config.ts",
-    "run-appwright:mm-connect-android-bs-local": "yarn appwright test --project mm-connect-android-browserstack --config tests/appwright.config.ts",
+    "run-playwright:android-bs": "yarn playwright test --project browserstack-android --config tests/playwright.config.ts",
+    "run-playwright:android-onboarding-bs": "yarn playwright test --project android-onboarding --project android-onboarding-seedless --config tests/playwright.config.ts",
+    "run-playwright:ios-onboarding-bs": "yarn playwright test --project ios-onboarding --project ios-onboarding-seedless --config tests/playwright.config.ts",
+    "run-playwright:android-seedless-bs": "yarn playwright test --project android-onboarding-seedless --config tests/playwright.config.ts",
+    "run-playwright:ios-seedless-bs": "yarn playwright test --project ios-onboarding-seedless --config tests/playwright.config.ts",
+    "run-playwright:ios-bs": "yarn playwright test --project browserstack-ios --config tests/playwright.config.ts",
+    "run-playwright:android": "yarn playwright test --project android --config tests/playwright.config.ts",
+    "run-playwright:ios": "yarn playwright test --project ios --config tests/playwright.config.ts",
+    "run-playwright:mm-connect-android-local": "yarn playwright test --project mm-connect-android-local --config tests/playwright.config.ts",
+    "run-playwright:mm-connect-android-bs": "yarn playwright test --project mm-connect-android-browserstack --config tests/playwright.config.ts",
+    "run-playwright:mm-connect-android-bs-local": "yarn playwright test --project mm-connect-android-browserstack --config tests/playwright.config.ts",
     "test:depcheck": "yarn depcheck",
     "test:tgz-check": "./scripts/tgz-check.sh",
     "test:attribution-check": "./scripts/attributions-check.sh",

tests/flows/perps.flow.ts

@@ -0,0 +1,105 @@
+import {
+  asDetoxElement,
+  asPlaywrightElement,
+  Assertions,
+  encapsulatedAction,
+} from '../framework';
+import PerpsMarketDetailsView from '../page-objects/Perps/PerpsMarketDetailsView';
+import PerpsOrderView from '../page-objects/Perps/PerpsOrderView';
+
+/**
+ * Checks if the position is open by checking if the close button is visible.
+ * @returns {Promise<boolean>} True if the position is open, false otherwise.
+ */
+export const isPositionOpen = async (timeout = 5000): Promise<boolean> => {
+  let isPositionOpen = false;
+  await encapsulatedAction({
+    detox: async () => {
+      try {
+        const el = asDetoxElement(PerpsMarketDetailsView.closeButton);
+        await Assertions.expectElementToBeVisible(el, {
+          timeout,
+          description: 'Close position button',
+        });
+        isPositionOpen = true;
+      } catch {
+        isPositionOpen = false;
+      }
+    },
+    appium: async () => {
+      try {
+        const closeEl = await asPlaywrightElement(
+          PerpsMarketDetailsView.closeButton,
+        );
+        isPositionOpen = await closeEl.isVisible();
+      } catch {
+        // Element lookup timed out — position is not open
+        isPositionOpen = false;
+      }
+    },
+  });
+  return isPositionOpen;
+};
+
+export const waitForPositionOpen = async (
+  timeout = 20000,
+  interval = 1000,
+): Promise<void> => {
+  const start = Date.now();
+  while (Date.now() - start < timeout) {
+    if (await isPositionOpen()) return;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+  throw new Error(`Position not open after ${timeout}ms`);
+};
+
+/**
+ * Checks if the place order button is visible.
+ * @returns {Promise<boolean>} True if the place order button is visible, false otherwise.
+ */
+export const isPlaceOrderButtonVisible = async (): Promise<boolean> => {
+  let visible = false;
+  await encapsulatedAction({
+    detox: async () => {
+      try {
+        const el = asDetoxElement(PerpsOrderView.placeOrderButton);
+        await Assertions.expectElementToBeVisible(el, {
+          timeout: 5000,
+          description: 'Place order button',
+        });
+        visible = true;
+      } catch {
+        visible = false;
+      }
+    },
+    appium: async () => {
+      try {
+        const placeOrderButtonEl = await asPlaywrightElement(
+          PerpsOrderView.placeOrderButton,
+        );
+        visible = await placeOrderButtonEl.isVisible();
+      } catch {
+        visible = false;
+      }
+    },
+  });
+  return visible;
+};
+
+/**
+ * Waits for the order screen to be visible.
+ * @param timeout - The timeout in milliseconds.
+ * @param interval - The interval in milliseconds.
+ * @returns {Promise<void>} Resolves when the order screen is visible.
+ */
+export const waitForOrderScreenVisible = async (
+  timeout = 20000,
+  interval = 1000,
+): Promise<void> => {
+  const start = Date.now();
+  while (Date.now() - start < timeout) {
+    if (await isPlaceOrderButtonVisible()) return;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+  throw new Error(`Order screen not visible after ${timeout}ms`);
+};