[🐛 Bug]: `await metamask.connectToDapp();` Not connecting to dapp (How to connect via Rainbowkit?)

[PatrickAlphaC]

trafficstars

🔎 Have you searched existing issues to avoid duplicates?

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

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

• [x] 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?

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

Synpress version

4.0.5

Node.js version

23.5.0

Operating system

macOs 15.3

Run mode

Synpress (standalone)

CI platform (if applicable)

No response

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

• [ ] This issue could be related to docker.

What happened?

Attempting to connect to Rainbowkit with Synpress is giving me issues.

I have this code in my basic.spec.ts:

test('should connect wallet to the Dapp', async ({ context, page, metamaskPage, extensionId }) => {
  // Create a new MetaMask instance with the provided context, page, password, and extension ID
  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword, extensionId)

  // Navigate to the root page
  await page.goto('/')

  // Click the connect button to initiate the wallet connection
  await page.getByTestId('rk-connect-button').click()
  await page.getByTestId('rk-wallet-option-metaMask').waitFor({state: 'visible'});
  await page.getByTestId('rk-wallet-option-metaMask').click();
  await metamask.connectToDapp();

I think await page.getByTestId('rk-wallet-option-metaMask').click(); is correct

And I was expecting to connect with await metamask.connectToDapp();, but it just sort of freezes on this line:

await page.getByTestId('rk-wallet-option-metaMask').click();

Maybe I'm doing something wrong.

What is your expected behavior?

It to connect to metamask.

How to reproduce the bug.

A bit tricky, I can write out a longer reproducible issue if the answer isn't clear...

Have your nextjs app connect to a rainbowkit wallet, and use a basic wallet setup to try to connect... And you cannot.

Relevant log output

[drptbl]

@PatrickAlphaC I have checked rainbowkit with this website: https://superbridge.app/base

it seems that if your wallet is in different section inside rainbowkit (in your example it's inside of "Installed" section), selector is different.

1. data-testid="rk-connect-button" => Connect button
2. data-testid="rk-wallet-option-io.metamask" is WHEN:

OR data-testid="rk-wallet-option-metaMask" is WHEN:

I hope it helps. Then you use await metamask.connectToDapp(); after you can see metamask popup with wallet access request.

[PatrickAlphaC]

WOW.

I'm an idiot. I used playwright codegen to come up with the incorrect tag, when using codegen it doesn't do the metamask setup bit so it had the wrong tag. Thank you so much!!

So... When you're building a test, it looks like codegen is a bit tough. Do you just run pnpm playwright test --ui and add like a await page.pause(); to see what the IDs are? It feels like a lot of work for me to then inspect the page source and find the tag to use.

Wondering if you have a more clever method.

...or you know how to use the codegen thing with the metamask setup bit

[FerEnoch]

Hey @PatrickAlphaC I'm following your full-stack Cyfrin course (great course btw!) and I got a similar issue with metamask.connectToDapp() not connecting.

I'm using WSL in Windows and I came with a solution to make the e2e tests work following the official Synpress docs here https://docs.synpress.io/docs/known-issues#headless-mode-limitations-on-ci, with this command:

package.json:

"scripts": {
    "test:e2e": "xvfb-run pnpm exec playwright test",
 }

[PatrickAlphaC]

@FerEnoch nice!! Should we update the repo with this information somewhere?

[FerEnoch]

@PatrickAlphaC I think so. Surely would be useful for anyone using WSL