test: 1/3 remove wdio folder dependencies (#29820)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

> Removes the WDIO `generateTestId` helper and updates many UI
components to pass `testID` directly (dropping `Platform`-dependent
spreading) across buttons, toggles, list items, and modals.
> 
> Introduces/standardizes colocated `*.testIds.ts` selector constants
for several screens/components (e.g., `Navbar`, `EthereumAddress`,
`AccountSelector`, `BrowserTab` options, `PhishingModal`,
`WebviewError`, `TermsAndConditions`, `ConnectQRHardware`) and updates
unit tests/components to import selectors from the new
`tests/selectors`/local testId modules instead of `wdio` paths.
> 

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

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

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

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Low Risk**
> Low risk refactor focused on test selectors: changes only how
`testID`s are assigned and referenced, with minimal runtime impact
beyond potential selector/name mismatches in tests/automation.
> 
> **Overview**
> Removes the WDIO `generateTestId` utility and updates multiple UI
components to pass `testID` directly (dropping `Platform`-dependent
spreading) across buttons, toggles, list items, and modals.
> 
> Introduces/standardizes co-located `*.testIds.ts` selector constants
(e.g., `Navbar`, `EthereumAddress`, `AccountSelector`, browser options,
phishing/webview error modals, terms, QR hardware connect) and updates
unit tests/components to import selectors from these modules (and from
`tests/selectors`) instead of `wdio` paths.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
7d696af. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: cortisiko

app/component-library/components-temp/SheetActions/SheetActions.tsx

@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React, { useCallback } from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
@@ -10,7 +10,6 @@ import Button, {
   ButtonWidthTypes,
 } from '../../components/Buttons/Button';
 import Loader from '../Loader';
-import generateTestId from '../../../../wdio/utils/generateTestId';
 
 // Internal dependencies.
 import { SheetActionsProps } from './SheetActions.types';
@@ -46,7 +45,7 @@ const SheetActions = ({ actions }: SheetActionsProps) => {
                   disabled={disabled || isLoading}
                   style={buttonStyle}
                   isDanger={isDanger}
-                  {...generateTestId(Platform, testID)}
+                  testID={testID}
                 />
                 {isLoading && <Loader size={'small'} />}
               </View>

app/component-library/components/Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork.constants.ts

@@ -1,12 +1,11 @@
 /* eslint-disable import-x/prefer-default-export */
 
 // Third party dependencies.
-import { ImageSourcePropType, Platform } from 'react-native';
+import { ImageSourcePropType } from 'react-native';
 
 // External dependencies.
 import { AvatarSize } from '../../Avatar.types';
 import { BrowserViewSelectorsIDs } from '../../../../../../components/Views/BrowserTab/BrowserView.testIds';
-import generateTestId from '../../../../../../../wdio/utils/generateTestId';
 
 // Internal dependencies.
 import { AvatarNetworkProps } from './AvatarNetwork.types';
@@ -16,10 +15,7 @@ export const DEFAULT_AVATARNETWORK_SIZE = AvatarSize.Md;
 export const DEFAULT_AVATARNETWORK_ERROR_TEXT = '?';
 
 // Test IDs
-export const AVATARNETWORK_IMAGE_TESTID = generateTestId(
-  Platform,
-  BrowserViewSelectorsIDs.AVATAR_IMAGE,
-).testID;
+export const AVATARNETWORK_IMAGE_TESTID = BrowserViewSelectorsIDs.AVATAR_IMAGE;
 
 // Sample consts
 const SAMPLE_AVATARNETWORK_IMAGESOURCE_REMOTE: ImageSourcePropType = {

app/components/UI/AddToAddressBookWrapper/AddToAddressBookWrapper.tsx

@@ -1,8 +1,7 @@
 import React, { ReactElement, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { View, Platform, TextInput, TouchableOpacity } from 'react-native';
+import { View, TextInput, TouchableOpacity } from 'react-native';
 
-import generateTestId from '../../../../wdio/utils/generateTestId';
 import { AddAddressModalSelectorsIDs } from './AddAddressModal.testIds';
 import { strings } from '../../../../locales/i18n';
 import Engine from '../../../core/Engine';
@@ -91,10 +90,7 @@ export const AddToAddressBookWrapper = ({
               <View style={baseStyles.flexGrow}>
                 <Text
                   style={styles.addTextTitle}
-                  {...generateTestId(
-                    Platform,
-                    AddAddressModalSelectorsIDs.TITLE,
-                  )}
+                  testID={AddAddressModalSelectorsIDs.TITLE}
                 >
                   {strings('address_book.add_to_address_book')}
                 </Text>
@@ -117,10 +113,7 @@ export const AddToAddressBookWrapper = ({
                       numberOfLines={1}
                       value={alias}
                       keyboardAppearance={themeAppearance}
-                      {...generateTestId(
-                        Platform,
-                        AddAddressModalSelectorsIDs.ENTER_ALIAS_INPUT,
-                      )}
+                      testID={AddAddressModalSelectorsIDs.ENTER_ALIAS_INPUT}
                     />
                   </View>
                 </View>

app/components/UI/AssetElement/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import AssetElement from './';
-import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { getAssetTestId } from '../../../../tests/selectors/Wallet/WalletView.selectors';
 import {
   BALANCE_TEST_ID,
   SECONDARY_BALANCE_BUTTON_TEST_ID,

app/components/UI/AssetElement/index.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { TouchableOpacity, StyleSheet, Platform, View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import {
   TextVariant,
   TextColor,
 } from '../../../component-library/components/Texts/Text';
 import SkeletonText from '../Ramp/Aggregator/components/SkeletonText';
 import { TokenI } from '../Tokens/types';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { getAssetTestId } from '../../../../tests/selectors/Wallet/WalletView.selectors';
 import SensitiveText, {
   SensitiveTextLength,
 } from '../../../component-library/components/Texts/SensitiveText';
@@ -113,7 +112,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
       onPress={handleOnPress}
       onLongPress={handleOnLongPress}
       style={styles.itemWrapper}
-      {...generateTestId(Platform, getAssetTestId(asset.symbol))}
+      testID={getAssetTestId(asset.symbol)}
     >
       {children}
       <View style={styles.arrow}>

app/components/UI/AssetOverview/AssetActionButton/AssetActionButton.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import Ionicon from 'react-native-vector-icons/Ionicons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { useTheme } from '../../../../util/theme';
 import Text from '../../../Base/Text';
 import styleSheet from './AssetActionButton.styles';
@@ -84,7 +83,7 @@ const AssetActionButton = ({
 
   return (
     <TouchableOpacity
-      {...generateTestId(Platform, testID)}
+      testID={testID}
       onPress={onPress}
       style={[styles.button, disabled && styles.disabledButton]}
       disabled={disabled}

app/components/UI/Bridge/components/TokenSelectorItem.test.tsx

@@ -50,11 +50,6 @@ jest.mock('../../../../component-library/hooks', () => ({
   }),
 }));
 
-jest.mock('../../../../../wdio/utils/generateTestId', () => ({
-  __esModule: true,
-  default: () => ({}),
-}));
-
 jest.mock(
   '../../../../component-library/components/Badges/BadgeWrapper',
   () => ({

app/components/UI/Bridge/components/TokenSelectorItem.tsx

@@ -4,14 +4,12 @@ import {
   ImageSourcePropType,
   View,
   TouchableOpacity,
-  Platform,
   StyleProp,
   TextStyle,
 } from 'react-native';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../locales/i18n';
-import { getAssetTestId } from '../../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
+import { getAssetTestId } from '../../../../../tests/selectors/Wallet/WalletView.selectors';
 import TagBase, {
   TagSeverity,
   TagShape,
@@ -334,10 +332,7 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
         key={token.address}
         onPress={() => onPress(token)}
         style={styles.itemWrapper}
-        {...generateTestId(
-          Platform,
-          getAssetTestId(`${token.chainId}-${token.symbol}`),
-        )}
+        testID={getAssetTestId(`${token.chainId}-${token.symbol}`)}
       >
         <Box
           flexDirection={FlexDirection.Row}

app/components/UI/Card/components/ManageCardListItem/ManageCardListItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, Platform, ActivityIndicator } from 'react-native';
+import { TouchableOpacity, ActivityIndicator } from 'react-native';
 import { useTheme } from '../../../../../util/theme';
-import generateTestId from '../../../../../../wdio/utils/generateTestId';
 import Icon, {
   IconName,
   IconSize,
@@ -43,7 +42,7 @@ const ManageCardListItem: React.FC<ManageCardListItemProps> = ({
   const styles = createStyles(colors, descriptionOrientation);
 
   return (
-    <TouchableOpacity onPress={onPress} {...generateTestId(Platform, testID)}>
+    <TouchableOpacity onPress={onPress} testID={testID}>
       <ListItem style={styles.root}>
         <ListItemColumn widthType={WidthType.Fill} style={styles.description}>
           <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>

app/components/UI/EthereumAddress/EthereumAddress.testIds.ts

@@ -0,0 +1,3 @@
+export const EthereumAddressSelectorsIDs = {
+  ADDRESS_LABEL: 'wallet-account-address-label',
+};