feat: add playwright test for start page [fixes #15896]

[agualis]

Fixes #15896 by adding a playwright test for start page to test wallet connection

Description

Adds a new rainbow kit Test group with wagmi's mock connector (only when the app is running in localhost).

Another approach could be using an env var like NEXT_PUBLIC_ALLOW_WALLET_MOCK that must be true when running the app to be tested by playwright but I find it less straight forward (so worse DX).

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	e3ed01f
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/68c7cbd5201768000833dd85
😎 Deploy Preview	https://deploy-preview-15897--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 42 (🔴 down 9 from production) Accessibility: 96 (🟢 up 1 from production) Best Practices: 92 (🔴 down 8 from production) SEO: 92 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[agualis]

Not using ssr: true casues hydration issues. Is there an explicit reason why you are not using it by default?

[pettinarip]

True, I don't see why not to enable this.

[wackerow]

Assuming we still want this updated?

Suggested change

	ssr: isLocalhost,
	ssr: true,

[wackerow]

Thanks @agualis! Will get some eyes on this soon

[pettinarip]

Hey @agualis, thanks for adding this test! 💪🏼

The test looks good and is working perfectly for me locally, but I think we could make a small refactor to organize the code better.

To keep things separated and clean, I'd suggest placing all test-related files and code within the /tests/e2e folder. We could:

• Move mockWallet to the fixtures folder.
• Create a rainbowkitConfig specifically for the test runtime.

We could export the config from rainbow-kit.ts and then extend it in a test.beforeEach block, for example. This way, we keep the code clean and decoupled from the test logic.

LMK what do you think.

[pettinarip]

True, I don't see why not to enable this.

[agualis]

Thanks for reviewing @pettinarip

The test looks good and is working perfectly for me locally, but I think we could make a small refactor to organize the code better.

Move mockWallet to the fixtures folder.

Done ✅

• Create a rainbowkitConfig specifically for the test runtime.
  We could export the config from rainbow-kit.ts and then extend it in a test.beforeEach block, for example. This way, we keep the code clean and decoupled from the test logic.

I understand your concern but this is not so trivial because, in order to update rainbowkitConfig from the tests we should store it in a react useState and expose a method to be called from playwright (which is not so straightforward).

If you want to keep the original rainbow-kit.ts file clean, we could isolate the test config in its own file like I show here.

✅ Test setup would be more isolated.
❌ We introduce one test related line in WalletProviders.tsx to chose between rainbowkitTestConfig and rainbowkitConfig which is not ideal but much simpler that the mentioned useState approach.

Happy to use an alternative simpler approach if you know one.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[wackerow]

@agualis Thanks for the updates here!—any chance you could help clear up the merge conflicts? 🙏
Pinged @pettinarip for another review

[pettinarip]

@agualis you are right. If we add more tests that depends on this in the future we might change it. As of now, current implementation looks good enough.

[agualis]

@agualis Thanks for the updates here!—any chance you could help clear up the merge conflicts? 🙏 Pinged @pettinarip for another review

I don't have time this week but I will try next one.

[agualis]

@agualis Thanks for the updates here!—any chance you could help clear up the merge conflicts? 🙏

@pettinarip @wackerow Cleared up!