e2e tests playwright & chromatic

[pettinarip]

Summary

This PR adds E2E testing infrastructure with Playwright and Chromatic:

• Playwright E2E tests for Home and Find Wallet pages (desktop + mobile)
• Page Object Model refactor for maintainable test architecture
• Global tests for search functionality and error handling
• Chromatic integration for visual regression testing
• Complete testing documentation and developer guide
• GitHub Actions CI workflow integration
• Component updates with data-testid attributes for reliable testing

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	4ce2caf
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6874cf168174130008d75138
😎 Deploy Preview	https://deploy-preview-15550--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 50 (🟢 up 2 from production) Accessibility: 96 (🟢 up 2 from production) Best Practices: 91 (🔴 down 1 from production) SEO: 99 (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.

[gitguardian]

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

---

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}}

[Aldekein]

I've read https://www.chromatic.com/docs/faq/find-project-token/ but still not sure is this a secret revealed in code:

projectToken: chpt_7691c1ff8d1f07d

[pettinarip]

I've read https://www.chromatic.com/docs/faq/find-project-token/ but still not sure is this a secret revealed in code:

projectToken: chpt_7691c1ff8d1f07d

Hey @Aldekein this is a testing token and low risk one. Will reset it once we are done.

[pettinarip]

TODO before merging

[wackerow]

Hey @pettinarip was looking through action logs https://github.com/ethereum/ethereum-org-website/actions/runs/15740734598/job/44365122681 and looks like there are a bunch of errors during the "Run E2E Tests on Netlify URL" step of the playwright action .

Error:   4) [Mobile Safari] › tests/e2e/home.spec.ts:27:7 › Home Page › main navigation - desktop ─────────
    Test timeout of 30000ms exceeded while running "beforeEach" hook.

All looking similar to that... the chromatic action appears to handle things fine; do you know if we need to worry about those?

[pettinarip]

Hey @pettinarip was looking through action logs https://github.com/ethereum/ethereum-org-website/actions/runs/15740734598/job/44365122681 and looks like there are a bunch of errors during the "Run E2E Tests on Netlify URL" step of the playwright action .

Error:   4) [Mobile Safari] › tests/e2e/home.spec.ts:27:7 › Home Page › main navigation - desktop ─────────
    Test timeout of 30000ms exceeded while running "beforeEach" hook.

All looking similar to that... the chromatic action appears to handle things fine; do you know if we need to worry about those?

Yeah, I've seen those errors before too. My understanding is that tests like this fail for other reasons like network issues, long responses, etc. In those cases, Playwright retries the same test. If it fails again (or reaches your retry limit), it will throw an error. If it succeeds on retry, it passes the test but tags it as "flaky". You can see the summary at the bottom of the logs:

[74/72] (retries) [Mobile Safari] › tests/e2e/home.spec.ts:35:7 › Home Page › navigation menu - mobile
[75/72] (retries) [Mobile Safari] › tests/e2e/whitepaper.spec.ts:11:7 › Whitepaper Page › whitepaper PDF link has correct href
[76/72] (retries) [Mobile Safari] › tests/e2e/whitepaper.spec.ts:19:7 › Whitepaper Page › whitepaper PDF is accessible and served as PDF
  4 flaky
    [webkit] › tests/e2e/global.spec.ts:68:9 › Global › Internationalization › switches to Chinese ─
    [webkit] › tests/e2e/global.spec.ts:90:9 › Global › RTL Support › home page RTL visual snapshot 
    [webkit] › tests/e2e/global.spec.ts:96:9 › Global › RTL Support › nav flips logo and search button when switching to RTL via language picker 
    [Mobile Safari] › tests/e2e/home.spec.ts:27:7 › Home Page › main navigation - desktop ──────────
  7 skipped
  61 passed (6.3m)

I wouldn't worry too much since they seem pretty random (depends on external things). I assume we will have flaky tests in future runs.

Having said that, I'll try to make the tests more robust and see if we can reduce the amount of flaky tests.

[wackerow]

Nice! @pettinarip this is looking great.. just gave it a run locally and overall the setup seems to be working well... it did report a handful of "failed" tests here, none "flaky", so posted a screenshot, but not sure that would need to block this.

[pettinarip]

Nice! @pettinarip this is looking great.. just gave it a run locally and overall the setup seems to be working well... it did report a handful of "failed" tests here, none "flaky", so posted a screenshot, but not sure that would need to block this.

uhmm would like to understand what is going on there. Could you paste the error messages for those tests? I assume that you were running pnpm dev in a different terminal. Happy to chat/test this async to make it easier.

[wackerow]

@pettinarip They appear to be time-outs:

Error: Timed out 10000ms waiting for expect(locator).toBeVisible()

And yes, pnpm dev, not a production build, so that's probably causing the latency. I'll try again today with a production build

[wackerow]

@pettinarip Okay so my issues appear related to env vars, not just being dev and timing out because it's slower. For example I had NEXT_PUBLIC_BUILD_LOCALES=en set, which broke the languages switching and RTL checks which require access to Chinese and Arabic.

Search may be related to Algolia keys? Added a set that I had, but they may be old, since it's still not working; I normally don't have that enabled locally. Without those keys any page will crash if I try to access the search modal locally, so maybe that's a legit test failure?

Commented out NEXT_PUBLIC_BUILD_LOCALES and ran pnpm dev with pnpm test:e2e in another terminal and the only problems were the above search issues.

[pettinarip]

@pettinarip Okay so my issues appear related to env vars, not just being dev and timing out because it's slower. For example I had NEXT_PUBLIC_BUILD_LOCALES=en set, which broke the languages switching and RTL checks which require access to Chinese and Arabic.

Search may be related to Algolia keys? Added a set that I had, but they may be old, since it's still not working; I normally don't have that enabled locally. Without those keys any page will crash if I try to access the search modal locally, so maybe that's a legit test failure?

Commented out NEXT_PUBLIC_BUILD_LOCALES and ran pnpm dev with pnpm test:e2e in another terminal and the only problems were the above search issues.

Yes. To clarify, given that these are e2e tests, you should run the dev mode as similar as production as possible. This means that you would need to build all languages and have api keys for all the 3rd party services since we are testing those integrations as well.

[agualis]

Hey @pettinarip Once the playwright setup is merged, I can add tests for the rainbow kit wallet connection flows in the start page. Would that be interesting?

Ofc! yeah, thanks for bringing that up. It would be good to test the /start page. I'll let you know when it's been merged. I'm currently doing a code refactor but it should be merged this week.

Hey @pettinarip, just created this PR to address this issue.