[🐛 Bug]: Alpha (new dawn) - switch to custom network does not clear popover correctly

[imornar]

🔎 Have you searched existing issues to avoid duplicates?

• I have made sure that my issue is not a duplicate.

🧪 Have you tested your code using latest version of Synpress?

• I have made sure that my issue still exists on latest version of Synpress.

💡 Are you able to provide enough information to be able to reproduce your issue locally?

• I can provide enough details to reproduce my issue on local environment.

Synpress version

4.0.0-alpha.9

Node.js version

v20.12.0

Operating system

macOS and linux ubuntu

Run mode

Playwright + Synpress (as plugin)

CI platform (if applicable)

No response

Are you running your tests inside docker? (if applicable)

• This issue could be related to docker.

What happened?

I use this code to authenticate user against my dapp

export async function login(page: Page, metamask: MetaMask) {
  await page.getByTestId('login-button-header').click();
  await page.getByTestId('rk-wallet-option-metaMask').click();

  await metamask.connectToDapp();
  // my dapp works only on binance smart chain, and default network of metamask is eth mainnet
  // so I'm being promted with add network and switch to network popups
  await metamask.approveSwitchNetwork();
  await metamask.approveNewNetwork();

  // this is where issues happens, after approving and adding new network,
  // in metamask version v11.9.1 popover is rendered and it block's flow

  // below you can see my custom code to close it if it happens, but it does not work
  // when I use same code in wallet setup
  
  // try {
  //   await metamask.notificationPage.page.getByTestId('popover-close').waitFor({ timeout: 3000 });
  //   await metamask.notificationPage.page.getByTestId('popover-close').click();
  // } catch (error) {
  //   console.log('Network switch prompt not found, continuing...');
  // }

  await page.getByRole('button', { name: /Sign message/ }).click();
  await metamask.confirmSignature();

  await expect(page.getByTestId('header-user-menu')).toContainText(/0x[0-9a-f]{2}...[0-9a-f]{4}/);
}

That popover looks like this

This is my code I use to cache authenticated metamask

import { defineWalletSetup } from '@synthetixio/synpress';
import { login } from '../helper/user';
import { PASSWORD, SEED_PHRASE } from './wallet-credentials';
import { getExtensionId, MetaMask } from '@synthetixio/synpress/playwright';

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const extensionId = await getExtensionId(context, 'MetaMask');
  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId);
  await metamask.importWallet(SEED_PHRASE);

  const page = await context.newPage();
  await page.goto('http://localhost:4200/profile');

  await login(page, metamask);
});

If I use test with this cache I'm stuck at this screen

What is your expected behavior?

Expected behavior is that popover is automatically closed when it's rendered, not blocking flow

How to reproduce the bug.

helper/user.s

export async function login(page: Page, metamask: MetaMask) {
  await page.getByTestId('login-button-header').click();
  await page.getByTestId('rk-wallet-option-metaMask').click();

  await metamask.connectToDapp();
  await metamask.approveSwitchNetwork();
  await metamask.approveNewNetwork();

  await page.getByRole('button', { name: /Sign message/ }).click();
  await metamask.confirmSignature();

  await expect(page.getByTestId('header-user-menu')).toContainText(/0x[0-9a-f]{2}...[0-9a-f]{4}/);
}

setup wallet

import { defineWalletSetup } from '@synthetixio/synpress';
import { login } from '../helper/user';
import { PASSWORD, SEED_PHRASE } from './wallet-credentials';
import { getExtensionId, MetaMask } from '@synthetixio/synpress/playwright';

export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
  const extensionId = await getExtensionId(context, 'MetaMask');
  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId);
  await metamask.importWallet(SEED_PHRASE);

  const page = await context.newPage();
  await page.goto('http://localhost:4200/profile');

  await login(page, metamask);
});

Relevant log output

No response