[docs] How to test an application with Playwright?

[mlenser]

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:

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]

See our own Playwright tests in the lab folder

[arein]

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

[arein]

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

[mlenser]

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]

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

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

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]

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

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