Broken metamask.confirmTransaction on Synpress + Playwright

[norswap]

Describe the bug

As it says in the title — in particular, playwright will timeout on await metamask.confirmaTransaction() even though the metamask transaction confirmation window is open & visible.

The particular failing instance is here: https://github.com/norswap/0xFable/blob/master/packages/e2e/tests/specs/create.spec.ts#L84-L89

When running in headed mode, you can see the MetaMask confirmation window open but nothing happens.

Adding a page.pause() then resuming in the playwright console allows it to move past that, only to fail on a further confirmTransaction.

To Reproduce

• pull repo
• make dev at top level (fourth subshell (circuits) may fail, doesn't matter)
• once contracts have deployed (third subshell has finished), go to packages/e2e and run make chrome or HEADLESS=false make chrome
  • I left the page.pause() in the code, so you might want to remove that to see the bug

Expected behavior

metamask.confirmTransaction() should work, as it did before.

Desktop (please complete the following information):

• macOS Venture 13.4
• running locally
• playwright 1.35.1
• synpress 3.7.1

[r3kt-eth]

@norswap thanks for report, will investigate today

[ayushrungta8]

I was also facing the same issue while trying to reject the tx. It seems its getting stuck at await page.waitForLoadState('networkidle'); here on adding a custom sleep for 10 sec its passing

[ayushrungta8]

@norswap Adding an explicit wait of 10 sec before attempting to accept or reject tx seems to fix the issue for now while waiting for an official fix

[r3kt-eth]

hi @norswap,

i was able to set everything up on my mac, but i'm stuck on connect wallet button.

anvil is running in background, metamask succesfully switched to localhost with e2e tests.

it throws following errors:

any ideas?

[BernalCarlos]

@norswap Adding an explicit wait of 10 sec before attempting to accept or reject tx seems to fix the issue for now while waiting for an official fix

@norswap Could you tell me where to make that 10-second wait and how to do it (cy.wait?)

I'm having the same issue, and I'm trying to figure out how to apply the workaround you mention.

Thank you.

[soub4i]

Same issue here. @norswap @ayushrungta8 any code snippet for the workaround please?

[ayushrungta8]

Cypress.Commands.overwrite("confirmMetamaskTransaction", (originalFn) => { cy.wait(10000); return originalFn(); });

something like this in support/e2e.ts file should fix it

[norswap]

@r3kt-eth Hey! Sorry for the delay, was on holiday. I was able to reprod, it's due to a now-fixed a bug in wagmi. Fixed on new master.

Anyhow, updated to new version, and now all my tests work flawlessly.

In case it helps, here's the commit that updates the versions: https://github.com/norswap/0xFable/commit/c6841163a7e2c2ad86eee94fa6121222783ae049

One issue I'm encountering (might have been there before) is that pnpm playwright test is flaky (once it failed on the first step that waits for the page for all browsers, once it failed later at different stages for different browsers), whereas pnpm playwright test --project=chromium && pnpm playwright test --project=firefox && pnpm playwright test --project=webkit always works.

I consider the issue resolved, feel free to either close or keep open if you want to discuss the remaining issue (which doesn't bother me too much given the workaround is so easy).

[soub4i]

@ayushrungta8 Thanks for your response I tried the workaround and it didn't work unfortunately .. in my case if I resize the metamask notification it's working (see the video for more context) ..

https://github.com/Synthetixio/synpress/assets/11523791/b147d41d-80a9-48da-9eae-8bc00b3ce29e

e context) .. The notification popup "Add nickname" modal I guess.

Do you have any ideas about what's going on .. pinging @norswap @r3kt-eth

Thank you

[ayushrungta8]

@ayushrungta8 Thanks for your response I tried the workaround and it didn't work unfortunately .. in my case if I resize the metamask notification it's working (see the video for more context) ..

Screencast.from.2023-07-17.03-30-44.online-video-cutter.com.mp4 e context) .. The notification popup "Add nickname" modal I guess.

Do you have any ideas about what's going on .. pinging @norswap @r3kt-eth

Thank you

I never faced this resize issue. For me the popup was clearly visible throughout.

[soub4i]

Thank you for your response @ayushrungta8. Yes it's weird. BTW all other notifications are minimized but working only the confirmTransaction showing the previous behavior.

My code:

        cy.contains("Approve").click();
        cy.wait(2000);
        cy.switchToMetamaskWindow();
        cy.confirmMetamaskDataSignatureRequest().should('be.true');
        cy.wait(1000);
        cy.switchToCypressWindow();
        cy.contains("Buy").click();
        cy.wait(2000);
        cy.switchToMetamaskWindow()

        cy.confirmMetamaskTransaction().then( ({confirmed}) => {
            expect(confirmed).to.be.true;
        })
        cy.wait(1000);
        cy.switchToCypressWindow();

config:

const { defineConfig } = require('cypress');
const synpressPlugins = require('@synthetixio/synpress/plugins');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: 'tests/e2e/specs',
    supportFile: 'tests/support/index.js',
    screenshotsFolder: 'tests/e2e/screenshots',
    defaultCommandTimeout: 30000,
    pageLoadTimeout: 30000,
    requestTimeout: 30000,
    chromeWebSecurity: true,
    viewportWidth: 1366,
    viewportHeight: 850,
    video: false,
    env: {
      coverage: false,
    },
    retries: {
      runMode: 0,
      openMode: 0,
    },
    screenshotOnRunFailure: true,
    setupNodeEvents(on, config) {
      synpressPlugins(on, config);
      return config
    },
  },
});

• Synpress: 3.7.1
• Linux 6.1.38-1-MANJARO

[BernalCarlos]

The workaround code doesn't work for me either

[ayushrungta8]

@norswap I tried with the latest version of wagmi and it seems the issue is not there anymore. though I could not find any issues or PR in the wagmi mentioning this.

I checked your repo and it seems the wait is not there in the main branch. Did updating the wagmi package make it work for you as well?

Also do you have a link to any PR or issue (in wagmi repo) that mentions this. Thanks

[norswap]

@ayushrungta8 All that info (including link) is literally in my last message (here)

The bug in wagmi only caused issues in my own repo and are seemingly unrelated to the playwright/synpress issue. Updating those probably fixed the issue (unless it was some other package, I linked the commit where I updated, so you can look yourself for what changed).

[spacesailor24]

I'm using the MetaMask test dApp and metamask.confirmTransaction() hangs if I try to send a transaction where the recipient and sender addresses are the same

[duckception]

@spacesailor24 I believe your problem is not related to this issue. However, I've just released a fix for that bug under the 3.7.2-beta.6 tag. Thanks for the catch! ❤️