search

WalletConnect / walletconnect-docs

WalletConnect Documentation
https://docs.walletconnect.com
MIT License
565 stars 413 forks source link

[docs] How to test an application with Playwright? #1607

Open mlenser opened 8 months ago

mlenser commented 8 months ago

Summary

Firstly thank you for your amazing work on this project. The migration to v4 (wagmi 2 and viem 2) was very straightforward which is a testament to the effort that has been put into this project. Thank you very much!

Documentation question: I have some playwright tests and I want to go e2e with them. Therefore I need to connect and interact with a wallet. I'm using Playwright. I tried using https://github.com/Synthetixio/synpress, but I can't even get to the MetaMask interaction as web3modal can't find MetaMask: image

For reference: I'm building a NextJS app using web3modal via the const { open } = useWeb3Modal(); hook.

Is there a recommended way for apps to interact with web3modal and wallets, specifically with Playwright?

Thank you

Link to the related docs page

New docs section for testing

arein commented 8 months ago

See our own Playwright tests in the lab folder

arein commented 8 months ago

@mlenser please share back when done or write a blog post - we want more dapp developers writing UI tests!

arein commented 8 months ago

Bonus points if you add a PR to our example wallet for testnet fund mining :)

mlenser commented 8 months ago

I checked those, but those are internal tests. There doesn't seem to be any examples of an app interacting with web3modal and then a wallet.

mlenser commented 8 months ago

@arein I've looked again and the lab tests are very specific for web3modal itself to be tested. There are no examples of how to connect with a wagmi app for example. Can you point me in the right direction?

arein commented 8 months ago

@mlenser our example app is the app we're testing. It uses wagmi. But that's an implementation detail that your tests shouldn't care about.

mlenser commented 7 months ago

Sorry to bother, but the tests in that repo are not clear/extensible. There is a lot of abstraction and a lot of fixtures/pages, none of which is importable from an app using web3modal. Is the expectation that every app that wants to UI test copies a bunch of boilerplate from that repo and makes it work somehow? Or is there a more clear path forward? Thanks for your time.

mlenser commented 7 months ago

@arein Is the expectation that every app that wants to UI test copies a bunch of boilerplate from that repo and makes it work somehow? Or is there a more clear path forward?

mlenser commented 7 months ago

@glitch-txs I saw you reopened this. Is this something you guys will look into?

I've been hoping for some clarity else I'll probably end up biting the bullet and manually copy&pasting all the boilerplate and probably setting up scripts to copy&paste it into our app. It's a fair amount of files that seem to be updated regularly so it seems there must be a better way?

gittygoo commented 5 months ago

Having the same problems here, unable to test with synpress at all