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	263e9a4
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6916a37b7f4175000805fdd7
😎 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 11 from production) Accessibility: 94 (no change 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!

[github-actions]

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

[corwintines]

Thanks @agualis this is great!

[corwintines]

@all-contributors can you add @agualis for code

[allcontributors]

@corwintines

I've put up a pull request to add @agualis! 🎉

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2025 Ethereum.org Contributor:

Join the [ethereum.org Discord server](https://ethereum.org/discord) to explore more ways to contribute to the project. Depending on the tasks you complete, you may also unlock additional rewards. Visit [ethereum.org/contributing](https://ethereum.org/contributing) to learn more.

Head to gitpoap.io & connect your GitHub account to mint!Keep buidling, keep learning, and let's grow the Ethereum open-source community together 🌱

Learn more about GitPOAPs here.