synpress icon indicating copy to clipboard operation
synpress copied to clipboard

Broken metamask.confirmTransaction on Synpress + Playwright

Open norswap opened this issue 2 years ago • 16 comments

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

norswap avatar Jul 03 '23 10:07 norswap

@norswap thanks for report, will investigate today

r3kt-eth avatar Jul 03 '23 10:07 r3kt-eth

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 avatar Jul 03 '23 12:07 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

ayushrungta8 avatar Jul 04 '23 08:07 ayushrungta8

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: Screenshot 2023-07-05 at 22 00 25

any ideas?

Screenshot 2023-07-05 at 22 01 19

r3kt-eth avatar Jul 05 '23 20:07 r3kt-eth

@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.

BernalCarlos avatar Jul 11 '23 15:07 BernalCarlos

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

soub4i avatar Jul 15 '23 21:07 soub4i

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

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

ayushrungta8 avatar Jul 16 '23 10:07 ayushrungta8

@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).

norswap avatar Jul 16 '23 15:07 norswap

@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

soub4i avatar Jul 17 '23 02:07 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) ..

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.

ayushrungta8 avatar Jul 17 '23 14:07 ayushrungta8

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

soub4i avatar Jul 17 '23 16:07 soub4i

The workaround code doesn't work for me either

BernalCarlos avatar Jul 17 '23 17:07 BernalCarlos

@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

ayushrungta8 avatar Jul 24 '23 11:07 ayushrungta8

@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).

norswap avatar Jul 25 '23 12:07 norswap

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

spacesailor24 avatar Sep 06 '23 04:09 spacesailor24

@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! ❤️

duckception avatar Sep 06 '23 22:09 duckception