chore: flaky E2E tests improved (#25565)

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

Improvements to our E2E tests.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **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
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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.

test/e2e/mmi/pageObjects/mmi-accountMenu-page.ts

@@ -47,6 +47,10 @@ export class MMIAccountMenuPage {
       .filter({ hasText: 'Select an account' });
   }
 
+  delay(time: number) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+  }
+
   async connectCustodian(name: string, visual?: boolean, qrCode?: boolean) {
     await this.page
       .getByRole('button', { name: /Add account or hardware wallet/iu })
@@ -56,9 +60,10 @@ export class MMIAccountMenuPage {
     if (visual) {
       // wait until all custodian icons are loaded
       await this.page.waitForLoadState();
-      await test.expect
-        .soft(this.page)
-        .toHaveScreenshot('custodian_list.png', { fullPage: true });
+      await test.expect.soft(this.page).toHaveScreenshot('custodian_list.png', {
+        fullPage: true,
+        maxDiffPixelRatio: 0.06,
+      });
     }
 
     const custodian = await getCustodianInfoByName(name);
@@ -72,13 +77,24 @@ export class MMIAccountMenuPage {
       .click();
 
     if (qrCode) {
+      await this.delay(3000);
+
       const spanElement = await this.page.$('span.hidden');
 
       if (spanElement) {
+        await this.delay(3000);
+
+        const startTime = Date.now();
+        const timeout = 10000;
+
         let data = await spanElement.getAttribute('data-value');
 
         while (!data) {
-          await new Promise((resolve) => setTimeout(resolve, 1000));
+          if (Date.now() - startTime > timeout) {
+            break;
+          }
+
+          await this.delay(3000);
           data = await spanElement.getAttribute('data-value');
         }
 
@@ -119,8 +135,11 @@ export class MMIAccountMenuPage {
   }
 
   async selectCustodyAccount(account: string) {
-    await this.accountsMenu();
-    await this.dialog.getByText(`${account}`).click();
+    if (account) {
+      await this.accountsMenu();
+
+      await this.dialog.getByText(`${account}`).click();
+    }
   }
 
   async accountMenuScreenshot(screenshotName: string) {
@@ -144,12 +163,6 @@ export class MMIAccountMenuPage {
       .getByRole('button', { name: `${accountToRemoveName} Options` })
       .click();
     await this.page.getByText('Remove custodian token').click();
-    // Scrollbar issues with different environments
-    // const dialog = this.page
-    //   .getByRole('dialog')
-    //   .filter({ hasText: 'Remove custodian token' });
-
-    // await test.expect.soft(dialog).toHaveScreenshot();
     await this.page.getByRole('button', { name: /close/iu }).first().click();
   }
 

test/e2e/mmi/specs/navigation.spec.ts

@@ -24,8 +24,7 @@ const termsOfUse = 'https://consensys.io/terms-of-use';
 const learnMoreArticles = 'https://support.metamask.io/';
 
 test.describe('MMI Navigation', () => {
-  test('MMI full navigation links', async ({ context }) => {
-    test.slow();
+  test('MMI full navigation links', async ({ page, context }) => {
     // Getting extension id of MMI
     const extensions = new ChromeExtensionPage(await context.newPage());
 
@@ -43,20 +42,29 @@ test.describe('MMI Navigation', () => {
     await signUp.authentication();
     await signUp.info();
 
+    // Setup testnetwork in settings
+    const mainMenuPage = new MMIMainMenuPage(page, extensionId as string);
+    await mainMenuPage.goto();
+    await mainMenuPage.fillPassword();
+    await mainMenuPage.finishOnboarding();
+    await mainMenuPage.selectMenuOption('settings');
+    await mainMenuPage.selectSettings('Advance');
+    await mainMenuPage.switchTestNetwork();
+    // await mainMenuPage.showIncomingTransactionsOff()
+    await mainMenuPage.closeSettings();
+
     // This is removed to improve test performance
     // Signin auth0
     const auth0 = new Auth0Page(await context.newPage());
     await auth0.signIn();
     await auth0.page.close();
 
-    // Close pages not used to remove data from logs
+    // // Close pages not used to remove data from logs
     await closePages(context, ['metamask-institutional.io']);
     const mainPage = new MMIMainPage(
       await getPageAndCloseRepeated(context, 'home.html'),
     );
 
-    await mainPage.finishOnboarding();
-
     // Check main page links
     await checkLinkURL(
       context,
@@ -92,10 +100,6 @@ test.describe('MMI Navigation', () => {
     );
 
     // Check main menu links
-    const mainMenuPage = new MMIMainMenuPage(
-      mainPage.page,
-      extensionId as string,
-    );
     await mainMenuPage.openMenu();
     await checkLinkURL(
       context,

test/e2e/mmi/specs/qrCode.spec.ts

@@ -10,7 +10,7 @@ import { SEPOLIA_DISPLAY_NAME } from '../helpers/utils';
 
 test.describe('QR Code Connection Request', () => {
   // @TODO Follow up task to understand why this test fails more times than it passes
-  test.skip('run the extension and add custodian accounts using the QR Code feature', async ({
+  test('run the extension and add custodian accounts using the QR Code feature', async ({
     page,
     context,
   }) => {