test: react native app e2e appwright test coverage (legacy evm) (#26566)

ffmcgee725 · jiexi · adonesky1 · web-flow · commit 48275cf54674 · 2026-02-27T11:08:00.000Z
## **Description** This PR establishes E2E test coverage for legacy evm MetaMask Connect flows within the React Native Playground app, ensuring the MetaMask Connect correctly manages simultaneous connections across multiple networks and that permissions, request routing, and session lifecycle all function end-to-end.  ## **Changelog**  CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/WAPI-1052 ## **Manual testing steps** ~~1. Pull https://github.com/MetaMask/connect-monorepo 2. `yarn && yarn build` 3. Run appropriate test dapp locally `integrations/wagmi` or `playground/legacy-evm-react-vite-playground` using `yarn dev --host`~~ 4. In the mobile repo, update `appwright/appwright.config.ts` for the `mm-connect-android-local` entry 5. You will need a prefined SRP android build. You can find one **[here](https://app.bitrise.io/build/2f2254fc-34bf-4291-bbb5-d525aa01d717?tab=artifacts)**. 6. Add entry for `E2E_PASSWORD` in `.js.env` and source it with `source .js.env`. You can get the password from someone in slack. 7. Determine which `appwright/tests/mm-connect/connection-*.spec.js` you want to run ~~8. Update the dapp url constant to use `10.0.2.2` for the host~~ 9. Ensure the other tests in the suite are marked `.skip` 10. Follow instructions in `tests/performance/mm-connect/README.md` (L#51 - L#105) to create APK for react native playground to be used in e2e test 11. `yarn appwright test --project mm-connect-android-local --config appwright/appwright.config.ts` ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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.  --- > [!NOTE] > **Low Risk** > Test-only changes; main risk is increased CI runtime/flakiness due to added end-to-end app automation and new selectors. > > **Overview** > Adds a new RN-playground Appwright spec, `legacy-evm-rn-connect.spec.js`, that exercises the **Legacy EVM** MetaMask Connect flow end-to-end (connect, `personal_sign`, cancelled `eth_sendTransaction`, and `wallet_switchEthereumChain` verification). > > Extends `RNPlaygroundDapp` with Legacy EVM-specific selectors/actions/assertions (connect-legacy button, card fields, response text, and action buttons), and updates the performance/MM Connect READMEs to document the new test and RN playground APK requirements/commands. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e6b529e. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>  --------- Co-authored-by: Jiexi Luan <jiexiluan@gmail.com> Co-authored-by: Alex Donesky <adonesky@gmail.com>
diff --git a/tests/performance/README.md b/tests/performance/README.md
@@ -276,10 +276,13 @@ Integration tests for MetaMask Connect:
 - `connection-multichain.spec.js` - Multichain connection performance
 - `connection-wagmi.spec.js` - Wagmi integration performance
 - `multichain-rn-connect.spec.js` - Multichain + Solana via the React Native Playground APK
+- `legacy-evm-rn-connect.spec.js` - Legacy EVM connection via the React Native Playground APK
 
-> The RN playground test requires a separate APK to be built and installed on the
-> emulator before running. See [`tests/performance/mm-connect/README.md`](mm-connect/README.md)
-> for full setup instructions.
+> The RN playground tests require a separate APK built from the
+> [`playground/react-native-playground`](https://github.com/MetaMask/connect-monorepo/tree/main/playground/react-native-playground)
+> directory of the [connect-monorepo](https://github.com/MetaMask/connect-monorepo).
+> The APK must be installed on the emulator before running.
+> See [`tests/performance/mm-connect/README.md`](mm-connect/README.md) for full setup instructions.
 
 ## Performance Tracking System
 
diff --git a/tests/performance/mm-connect/README.md b/tests/performance/mm-connect/README.md
@@ -4,12 +4,13 @@ This directory contains Appwright-based E2E tests for MetaMask Connect flows.
 
 ## Test Files
 
-| File                            | Description                                                 |
-| ------------------------------- | ----------------------------------------------------------- |
-| `connection-evm.spec.js`        | Legacy EVM connection via Browser Playground in Chrome      |
-| `connection-multichain.spec.js` | Multichain API connection via Browser Playground in Chrome  |
-| `connection-wagmi.spec.js`      | Wagmi connector via Browser Playground in Chrome            |
-| `multichain-rn-connect.spec.js` | **Multichain + Solana via the React Native Playground APK** |
+| File                            | Description                                                   |
+| ------------------------------- | ------------------------------------------------------------- |
+| `connection-evm.spec.js`        | Legacy EVM connection via Browser Playground in Chrome        |
+| `connection-multichain.spec.js` | Multichain API connection via Browser Playground in Chrome    |
+| `connection-wagmi.spec.js`      | Wagmi connector via Browser Playground in Chrome              |
+| `multichain-rn-connect.spec.js` | **Multichain + Solana via the React Native Playground APK**   |
+| `legacy-evm-rn-connect.spec.js` | **Legacy EVM connection via the React Native Playground APK** |
 
 ## React Native Playground Setup
 
@@ -156,12 +157,18 @@ Then run:
 yarn run-appwright:mm-connect-android-local
 ```
 
-Or run only the RN playground spec:
+Or run individual RN playground specs:
 
 ```bash
+# Multichain + Solana test
 npx appwright test tests/performance/mm-connect/multichain-rn-connect.spec.js \
   --project mm-connect-android-local \
   --config tests/appwright.config.ts
+
+# Legacy EVM test
+npx appwright test tests/performance/mm-connect/legacy-evm-rn-connect.spec.js \
+  --project mm-connect-android-local \
+  --config tests/appwright.config.ts
 ```
 
 ### What the Test Covers
@@ -184,6 +191,25 @@ MetaMask Connect flow:
    (`sdk.disconnect()`, the equivalent of `wallet_revokeSession`) and verifies
    the session is fully terminated on both the dApp and wallet sides.
 
+The `legacy-evm-rn-connect` test validates the Legacy EVM connection flow:
+
+1. **accountsChanged propagation** — connects via the Legacy EVM SDK and
+   verifies the dapp receives accounts and displays the active account.
+
+2. **personal_sign** — sends a personal_sign request, approves it in the
+   wallet, and verifies the signature is returned to the dapp.
+
+3. **eth_sendTransaction (cancel)** — sends a transaction request, cancels it
+   in the wallet (to avoid spending funds), and verifies the dapp handles the
+   rejection.
+
+4. **Chain switching from the dapp** — calls `wallet_switchEthereumChain` to
+   switch to Polygon from the dapp side and verifies the chain ID updates.
+
+5. **Chain switching from the wallet** — switches to Ethereum Mainnet in the
+   wallet's network picker and verifies the dapp receives the `chainChanged`
+   event.
+
 ### How It Works
 
 Unlike the browser-based tests (which serve a web dApp in Chrome and use
diff --git a/tests/performance/mm-connect/legacy-evm-rn-connect.spec.js b/tests/performance/mm-connect/legacy-evm-rn-connect.spec.js
@@ -0,0 +1,176 @@
+import { test, expect } from '../../framework/fixtures/performance';
+
+import { login } from '../../framework/utils/Flows.js';
+import RNPlaygroundDapp from '../../../wdio/screen-objects/RNPlaygroundDapp.js';
+import DappConnectionModal from '../../../wdio/screen-objects/Modals/DappConnectionModal.js';
+import SignModal from '../../../wdio/screen-objects/Modals/SignModal.js';
+import {
+  unlockIfLockScreenVisible,
+  ensurePlaygroundInstalled,
+} from './utils.js';
+import AppwrightGestures from '../../framework/AppwrightGestures.ts';
+
+const DEFAULT_SCROLL_PARAMS = {
+  scrollParams: { percent: 0.2 },
+};
+
+/**
+ * After a MetaMask action (approve / sign / cancel), wait for the callback
+ * deeplink to return to the playground. Falls back to activateApp if the
+ * automatic return does not happen within a short window.
+ */
+async function returnToPlayground() {
+  await AppwrightGestures.wait(2000);
+  await RNPlaygroundDapp.ensureInPlayground();
+}
+
+test.beforeAll(() => {
+  ensurePlaygroundInstalled();
+});
+
+test('@metamask/connect-legacy-evm-rn - Connect via Legacy EVM, sign, send transaction, and switch chains', async ({
+  device,
+}) => {
+  RNPlaygroundDapp.device = device;
+  DappConnectionModal.device = device;
+  SignModal.device = device;
+
+  await device.webDriverClient.updateSettings({
+    waitForIdleTimeout: 100,
+    waitForSelectorTimeout: 0,
+    shouldWaitForQuiescence: false,
+  });
+
+  //
+  // 1. Login to MetaMask wallet
+  //
+
+  await login(device);
+
+  //
+  // 2. Switch to the RN playground and connect via Legacy EVM
+  //
+
+  await RNPlaygroundDapp.switchToPlayground();
+  await RNPlaygroundDapp.waitForPlaygroundReady();
+
+  await RNPlaygroundDapp.tapConnectLegacy();
+  await AppwrightGestures.wait(3000);
+
+  await unlockIfLockScreenVisible(device);
+  await AppwrightGestures.wait(5000);
+  await DappConnectionModal.tapConnectButton();
+
+  //
+  // 3. Verify accountsChanged — Legacy EVM card visible with accounts
+  //
+
+  await returnToPlayground();
+  await AppwrightGestures.wait(2000);
+
+  await RNPlaygroundDapp.scrollToElement(RNPlaygroundDapp.appTitle, {
+    scrollParams: { direction: 'down' },
+  });
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmCard,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  await RNPlaygroundDapp.assertLegacyEvmConnected();
+  await RNPlaygroundDapp.assertLegacyEvmHasAccounts();
+  await RNPlaygroundDapp.assertLegacyEvmActiveAccount();
+
+  const initialChainId = await RNPlaygroundDapp.getLegacyEvmChainId();
+  console.log(`Initial chain ID: ${initialChainId}`);
+
+  //
+  // 4. personal_sign — request, approve, verify result
+  //
+
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmBtnPersonalSign,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  await RNPlaygroundDapp.tapLegacyEvmButton(
+    RNPlaygroundDapp.legacyEvmBtnPersonalSign,
+  );
+  await AppwrightGestures.wait(3000);
+
+  await unlockIfLockScreenVisible(device);
+  await AppwrightGestures.wait(1000);
+  await SignModal.tapConfirmButton();
+
+  await returnToPlayground();
+  await AppwrightGestures.wait(1000);
+
+  // Verify signature was returned (hex string starting with 0x)
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmResponseText,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  const signResponse = await RNPlaygroundDapp.getLegacyEvmResponseText();
+  console.log(`personal_sign response: ${signResponse}`);
+  expect(signResponse).toContain('0x');
+
+  //
+  // 5. eth_sendTransaction — request, cancel (to avoid spending funds)
+  //
+
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmBtnSendTransaction,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  await RNPlaygroundDapp.tapLegacyEvmButton(
+    RNPlaygroundDapp.legacyEvmBtnSendTransaction,
+  );
+  await AppwrightGestures.wait(3000);
+
+  await unlockIfLockScreenVisible(device);
+  await AppwrightGestures.wait(1000);
+
+  // Cancel the transaction to avoid spending real funds
+  await SignModal.tapCancelButton();
+
+  await returnToPlayground();
+  await AppwrightGestures.wait(1000);
+
+  // The dapp should show an error (user rejected) in the response
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmResponseText,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  const txResponse = await RNPlaygroundDapp.getLegacyEvmResponseText();
+  console.log(`eth_sendTransaction (cancelled) response: ${txResponse}`);
+  expect(txResponse.toLowerCase()).toContain('denied');
+
+  //
+  // 6. Chain switching from the dapp — wallet_switchEthereumChain
+  //    Switch to Polygon from the dapp, verify the chain ID updates.
+  //
+
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmBtnSwitchPolygon,
+    DEFAULT_SCROLL_PARAMS,
+  );
+  await RNPlaygroundDapp.tapLegacyEvmButton(
+    RNPlaygroundDapp.legacyEvmBtnSwitchPolygon,
+  );
+  await AppwrightGestures.wait(3000);
+
+  // The switch opens MetaMask with a network approval dialog.
+  // The SwitchChainApproval dialog uses "connect-button" as its confirm testID.
+  await unlockIfLockScreenVisible(device);
+  await AppwrightGestures.wait(1000);
+  await DappConnectionModal.tapConnectButton();
+
+  await returnToPlayground();
+  await AppwrightGestures.wait(2000);
+
+  // Verify chain ID updated to Polygon (0x89)
+  await RNPlaygroundDapp.scrollToElement(
+    RNPlaygroundDapp.legacyEvmChainIdValue,
+    { scrollParams: { direction: 'down' } },
+  );
+  const polygonChainId = await RNPlaygroundDapp.getLegacyEvmChainId();
+  console.log(`Chain ID after dapp switch to Polygon: ${polygonChainId}`);
+  expect(polygonChainId).toContain('0x89');
+});
diff --git a/wdio/screen-objects/RNPlaygroundDapp.js b/wdio/screen-objects/RNPlaygroundDapp.js
@@ -69,6 +69,46 @@ class RNPlaygroundDapp {
     return this._getByTestId('app-section-error');
   }
 
+  get connectLegacyButton() {
+    return this._getByTestId('app-btn-connect-legacy');
+  }
+
+  // ============================================================
+  // LEGACY EVM CARD SELECTORS
+  // ============================================================
+
+  get legacyEvmCard() {
+    return this._getByTestId('legacy-evm-card');
+  }
+
+  get legacyEvmChainIdValue() {
+    return this._getByTestId('legacy-evm-chain-id-value');
+  }
+
+  get legacyEvmAccountsValue() {
+    return this._getByTestId('legacy-evm-accounts-value');
+  }
+
+  get legacyEvmActiveAccount() {
+    return this._getByTestId('legacy-evm-active-account');
+  }
+
+  get legacyEvmResponseText() {
+    return this._getByTestId('legacy-evm-response-text');
+  }
+
+  get legacyEvmBtnPersonalSign() {
+    return this._getByTestId('legacy-evm-btn-personal-sign');
+  }
+
+  get legacyEvmBtnSendTransaction() {
+    return this._getByTestId('legacy-evm-btn-send-transaction');
+  }
+
+  get legacyEvmBtnSwitchPolygon() {
+    return this._getByTestId('legacy-evm-btn-switch-polygon');
+  }
+
   // ============================================================
   // NETWORK CHECKBOX SELECTORS
   // ============================================================
@@ -172,6 +212,18 @@ class RNPlaygroundDapp {
     await AppwrightGestures.tap(elem);
   }
 
+  async tapConnectLegacy() {
+    if (!this._device) return;
+    const elem = await this.connectLegacyButton;
+    await AppwrightGestures.tap(elem);
+  }
+
+  async tapLegacyEvmButton(buttonPromise) {
+    if (!this._device) return;
+    const elem = await buttonPromise;
+    await AppwrightGestures.tap(elem);
+  }
+
   async tapDisconnect() {
     if (!this._device) return;
     const elem = await this.disconnectButton;
@@ -275,6 +327,36 @@ class RNPlaygroundDapp {
     await expect(code).toBeVisible({ timeout: timeoutMs });
   }
 
+  async assertLegacyEvmConnected(timeoutMs = 15000) {
+    if (!this._device) return;
+    const card = await this.legacyEvmCard;
+    await expect(card).toBeVisible({ timeout: timeoutMs });
+  }
+
+  async assertLegacyEvmHasAccounts(timeoutMs = 10000) {
+    if (!this._device) return;
+    const accounts = await this.legacyEvmAccountsValue;
+    await expect(accounts).toBeVisible({ timeout: timeoutMs });
+  }
+
+  async assertLegacyEvmActiveAccount(timeoutMs = 10000) {
+    if (!this._device) return;
+    const activeAcct = await this.legacyEvmActiveAccount;
+    await expect(activeAcct).toBeVisible({ timeout: timeoutMs });
+  }
+
+  async getLegacyEvmChainId() {
+    if (!this._device) return null;
+    const chainIdElem = await this.legacyEvmChainIdValue;
+    return await chainIdElem.getText();
+  }
+
+  async getLegacyEvmResponseText() {
+    if (!this._device) return null;
+    const resp = await this.legacyEvmResponseText;
+    return await resp.getText();
+  }
+
   /**
    * Assert the result code text contains the expected substring.
    */
