test: add performance test for loading available balance on Predict Market List screen (MetaMask#24041)

<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Adding new performance test that measures the loading times for the
available balance on the Predict Market List screen. The test tracks the
time taken to navigate to the Predict tab, display the balance card, and
fully load the available balance text. Additionally, it enhances the
`PredictMarketListScreen` class by adding methods to check the
visibility of the balance card and available balance text, improving the
overall testing framework.

## **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-1193

## **Manual testing steps**

```gherkin
Feature: Predict Available Balance Performance
  As a user with an existing balance on Polygon
  I want the available balance to load quickly on the Predict Market List screen
  So that I can see my funds without waiting

  Background:
    Given I have an existing wallet with balance on Polygon
    And I am logged into the MetaMask Mobile app

  @performance @predict @balance
  Scenario: Measure time to navigate to Predict tab
    Given I am on the Wallet Main screen
    When I tap the action button in the tab bar
    And I tap the Predict button in the wallet action modal
    Then the Predict Market List container should be displayed
    And the navigation time should be recorded

  @performance @predict @balance
  Scenario: Measure time for balance card to appear
    Given I am on the Predict Market List screen
    When the container is displayed
    Then the Balance Card should become visible
    And the balance card load time should be recorded

  @performance @predict @balance
  Scenario: Measure time for available balance text to load
    Given I am on the Predict Market List screen
    And the Balance Card is visible
    When the balance data is fetched from the network
    Then the "Available balance" text should be displayed
    And the balance text load time should be recorded

  @performance @predict @balance @e2e
  Scenario: Complete available balance load time performance test
    Given I am logged into the app with an account that has Polygon balance
    When I tap the action button in the tab bar
    And I tap the Predict button
    Then the Predict Market List container should be displayed within acceptable time
    And the Balance Card should become visible
    And the "Available balance" text should appear indicating the balance is fully loaded
    And all performance metrics should be recorded:
      | Metric                          | Description                                              |
      | Navigate to Predict             | Time from tapping Predict button to container displayed  |
      | Balance Card Visible            | Time from container displayed to balance card visible    |
      | Available Balance Loaded        | Time from balance card visible to balance text displayed |
```

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Adds a performance test for time-to-available-balance on Predict
Market List and extends the screen object with balance card/available
balance selectors and visibility checks.
> 
> - **Tests**:
> - Add
`appwright/tests/performance/login/predict/predict-available-balance.spec.js`
to measure time from tapping Predict to when `Available balance` is
shown, recording metrics via `performanceTracker`.
> - **Screen Objects**
(`wdio/screen-objects/PredictMarketListScreen.js`):
>   - Import `PredictBalanceSelectorsIDs` and add `balanceCard` getter.
> - Add `isBalanceCardDisplayed()`, `getAvailableBalanceText()`, and
`isAvailableBalanceDisplayed()` for both WDIO and Appwright flows.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
6605ff1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: chrisleewilcox

appwright/tests/performance/login/predict/predict-available-balance.spec.js

@@ -0,0 +1,56 @@
+import { test } from '../../../../fixtures/performance-test.js';
+
+import TimerHelper from '../../../../utils/TimersHelper.js';
+import LoginScreen from '../../../../../wdio/screen-objects/LoginScreen.js';
+import WalletMainScreen from '../../../../../wdio/screen-objects/WalletMainScreen.js';
+import TabBarModal from '../../../../../wdio/screen-objects/Modals/TabBarModal.js';
+import WalletActionModal from '../../../../../wdio/screen-objects/Modals/WalletActionModal.js';
+import PredictMarketListScreen from '../../../../../wdio/screen-objects/PredictMarketListScreen.js';
+import { login } from '../../../../utils/Flows.js';
+
+/*
+ * Scenario: Predict Available Balance Performance Test
+ *
+ * This test measures how long it takes to load the available balance
+ * on the Predict Market List screen under 4G network conditions.
+ *
+ * Test Setup:
+ * - Account with existing balance on Polygon
+ *
+ * The test measures:
+ * 1. Total time from tapping Predict button until available balance is displayed
+ */
+test('Predict Available Balance - Load Time Performance', async ({
+  device,
+  performanceTracker,
+}, testInfo) => {
+  // Setup screen objects with device
+  LoginScreen.device = device;
+  WalletMainScreen.device = device;
+  TabBarModal.device = device;
+  WalletActionModal.device = device;
+  PredictMarketListScreen.device = device;
+
+  // Login to the app
+  await login(device);
+  await TabBarModal.tapActionButton();
+  await WalletActionModal.tapPredictButton();
+
+  // Timer 1: Navigate to Predict tab and wait for available balance to load
+  const timer1 = new TimerHelper(
+    'Time since user taps Predict button in Action modal until Available Balance is displayed',
+  );
+  timer1.start();
+  await PredictMarketListScreen.isBalanceCardDisplayed();
+  await PredictMarketListScreen.isAvailableBalanceDisplayed();
+  timer1.stop();
+
+  // Add timer to performance tracker
+  await performanceTracker.addTimer(timer1);
+
+  // Attach performance metrics to test report
+  await performanceTracker.attachToTest(testInfo);
+
+  console.log('✅ Predict Available Balance Performance Test completed');
+  console.log(`📊 Total Time to Available Balance: ${timer1.getDuration()}ms`);
+});

wdio/screen-objects/PredictMarketListScreen.js

@@ -2,7 +2,7 @@ import Selectors from '../helpers/Selectors';
 import Gestures from '../helpers/Gestures';
 import AppwrightSelectors from '../../e2e/framework/AppwrightSelectors';
 import AppwrightGestures from '../../e2e/framework/AppwrightGestures';
-import { PredictMarketListSelectorsIDs, getPredictMarketListSelector } from '../../e2e/selectors/Predict/Predict.selectors';
+import { PredictMarketListSelectorsIDs, getPredictMarketListSelector, PredictBalanceSelectorsIDs } from '../../e2e/selectors/Predict/Predict.selectors';
 import { expect as appwrightExpect } from 'appwright';
 
 class PredictMarketListScreen {
@@ -98,6 +98,52 @@ class PredictMarketListScreen {
       await AppwrightGestures.tap(addFundsButton);
     }
   }
+
+  get balanceCard() {
+    if (!this._device) {
+      return Selectors.getElementByPlatform(PredictBalanceSelectorsIDs.BALANCE_CARD);
+    } else {
+      return AppwrightSelectors.getElementByID(this._device, PredictBalanceSelectorsIDs.BALANCE_CARD);
+    }
+  }
+
+  async isBalanceCardDisplayed() {
+    if (!this._device) {
+      const balanceCard = await this.balanceCard;
+      await balanceCard.waitForDisplayed();
+    } else {
+      const balanceCard = await this.balanceCard;
+      await appwrightExpect(balanceCard).toBeVisible();
+    }
+  }
+
+  async getAvailableBalanceText() {
+    if (!this._device) {
+      const balanceText = await Selectors.getXpathElementByText('Available balance');
+      await balanceText.waitForDisplayed();
+      return balanceText;
+    } else {
+      const balanceText = await AppwrightSelectors.getElementByCatchAll(
+        this._device,
+        'Available balance',
+      );
+      await appwrightExpect(balanceText).toBeVisible();
+      return balanceText;
+    }
+  }
+
+  async isAvailableBalanceDisplayed() {
+    if (!this._device) {
+      const balanceText = await Selectors.getXpathElementByText('Available balance');
+      await balanceText.waitForDisplayed();
+    } else {
+      const balanceText = await AppwrightSelectors.getElementByCatchAll(
+        this._device,
+        'Available balance',
+      );
+      await appwrightExpect(balanceText).toBeVisible();
+    }
+  }
 }
 
 export default new PredictMarketListScreen();