test: migrate more token tests and update related page objects (#29651)

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

This PR introduces significant improvements to the token-related E2E
tests and page objects, focusing on better test coverage and
maintainability. The changes include:

1. Enhanced token management functionality:
   - New page objects for token approval and transfer modals
   - Improved token existence checks
   - Streamlined gas fee editing capabilities
   - Better navigation controls for token-related features

2. Test infrastructure improvements:
   - Added data-testid attributes for more reliable testing
   - Consolidated mock functions
   - Improved transaction validation checks
   - Enhanced custom token creation and approval process testing
   - Fixed flaky tests

3. Code quality updates:
   - Reorganised dapp page object structure
   - Improved code maintainability through refactoring

## **Related issues**
N/A

## **Manual testing steps**

1. Run the E2E test suite focusing on token-related tests
2. Verify token test flows with the new page objects

## **Screenshots/Recordings**

<!-- Test execution recordings can be added here if available -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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 (primary focus of this PR)
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
- [x] I've applied the appropriate labels (team-qa)

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

test/e2e/page-objects/flows/send-transaction.flow.ts

@@ -45,7 +45,7 @@ export const sendTransactionToAddress = async ({
   // confirm transaction when user lands on confirm transaction screen
   const confirmTxPage = new ConfirmTxPage(driver);
   await confirmTxPage.check_pageIsLoaded(gasFee, totalFee);
-  await confirmTxPage.confirmTx();
+  await confirmTxPage.clickConfirmButton();
 };
 
 /**
@@ -160,7 +160,7 @@ export const sendTransactionToAccount = async ({
   // confirm transaction when user lands on confirm transaction screen
   const confirmTxPage = new ConfirmTxPage(driver);
   await confirmTxPage.check_pageIsLoaded(gasFee, totalFee);
-  await confirmTxPage.confirmTx();
+  await confirmTxPage.clickConfirmButton();
 };
 
 /**

test/e2e/page-objects/pages/confirmations/redesign/token-transfer-confirmation.ts

@@ -1,45 +1,121 @@
 import { tEn } from '../../../../../lib/i18n-helpers';
 import { Driver } from '../../../../webdriver/driver';
-import { RawLocator } from '../../../common';
 import TransactionConfirmation from './transaction-confirmation';
 
 class TokenTransferTransactionConfirmation extends TransactionConfirmation {
-  private networkParagraph: RawLocator;
+  private readonly confirmButton = '[data-testid="confirm-footer-button"]';
 
-  private interactingWithParagraph: RawLocator;
+  private readonly editGasFeeButton = '[data-testid="edit-gas-fee-icon"]';
 
-  private networkFeeParagraph: RawLocator;
+  private readonly gasInputs = 'input[type="number"]';
+
+  private readonly interactingWithParagraph = {
+    css: 'p',
+    text: tEn('interactingWith') as string,
+  };
+
+  private readonly networkFee = '[data-testid="first-gas-field"]';
+
+  private readonly networkFeeParagraph = {
+    css: 'p',
+    text: tEn('networkFee') as string,
+  };
+
+  private readonly networkParagraph = {
+    css: 'p',
+    text: tEn('transactionFlowNetwork') as string,
+  };
+
+  private readonly saveButton = { text: 'Save', tag: 'button' };
 
   constructor(driver: Driver) {
     super(driver);
-
     this.driver = driver;
+  }
+
+  // Action Methods
 
-    this.networkParagraph = {
-      css: 'p',
-      text: tEn('transactionFlowNetwork') as string,
-    };
-    this.interactingWithParagraph = {
-      css: 'p',
-      text: tEn('interactingWith') as string,
-    };
-    this.networkFeeParagraph = {
-      css: 'p',
-      text: tEn('networkFee') as string,
-    };
+  async clickConfirmButton(): Promise<void> {
+    console.log('Click confirm button to confirm transaction');
+    await this.driver.clickElement(this.confirmButton);
   }
 
-  async check_networkParagraph() {
-    await this.driver.waitForSelector(this.networkParagraph);
+  /**
+   * Edits the gas fee by setting custom gas limit and price values
+   *
+   * @param gasLimit - The gas limit value to set
+   * @param gasPrice - The gas price value to set
+   */
+  async editGasFee(gasLimit: string, gasPrice: string): Promise<void> {
+    console.log('Editing gas fee values');
+
+    await this.driver.clickElement(this.editGasFeeButton);
+
+    const inputs = await this.driver.findElements(this.gasInputs);
+    const [gasLimitInput, gasPriceInput] = inputs;
+
+    await gasLimitInput.clear();
+    await gasLimitInput.sendKeys(gasLimit);
+    await gasPriceInput.clear();
+    await gasPriceInput.sendKeys(gasPrice);
+
+    await this.driver.clickElement(this.saveButton);
+
+    console.log('Gas fee values updated successfully');
   }
 
+  // Check Methods
+
   async check_interactingWithParagraph() {
     await this.driver.waitForSelector(this.interactingWithParagraph);
   }
 
   async check_networkFeeParagraph() {
     await this.driver.waitForSelector(this.networkFeeParagraph);
   }
+
+  async check_networkParagraph() {
+    await this.driver.waitForSelector(this.networkParagraph);
+  }
+
+  /**
+   * Verifies that the confirm token transfer (redesigned) screen is fully loaded by checking for the presence of the expected symbol, token/gas values and buttons.
+   *
+   * @param transferAmount - The amount of tokens to be transferred.
+   * @param symbol - The symbol of the token to be transferred.
+   * @param expectedNetworkFee - The expected gas/network fee value to be displayed on the page.
+   * @returns A promise that resolves when all specified elements are verified to be present and contain the expected values, indicating the page has fully loaded.
+   * @example
+   * await tokenTransferTransactionConfirmation.check_pageIsLoaded('10', 'ETH', '0.01');
+   */
+  async check_pageIsLoaded(
+    transferAmount: string,
+    symbol: string,
+    expectedNetworkFee: string,
+  ): Promise<void> {
+    try {
+      await Promise.all([
+        this.driver.waitForSelector(this.confirmButton),
+        this.driver.waitForSelector({
+          text: `${transferAmount} ${symbol}`,
+          tag: 'h2',
+        }),
+        this.driver.waitForSelector({
+          css: this.networkFee,
+          text: `${expectedNetworkFee} ETH`,
+        }),
+      ]);
+      console.log(
+        'Confirm token transfer (Redesigned) screen is loaded with expected values',
+      );
+    } catch (e) {
+      console.error(
+        `Timeout while waiting for confirm token transfer (redesigned) screen to be loaded, expected network fee is: ${expectedNetworkFee}, transfer amount is: ${transferAmount} and symbol is: ${symbol}`,
+        e,
+      );
+      throw e;
+    }
+  }
 }
 
 export default TokenTransferTransactionConfirmation;