E2e tests init #316

rin-st · 2025-09-03T13:19:22Z

E2e tests for user registration + gh action.

Testing wallet: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

To initialize playwright run in your nextjs folder (only first time)

yarn next:playwright-install

Build wallet cache. It couldn't install metamask extension (11.9.1) with latest versions of playwright/synpress so I used older versions, which use a bit older chromium and MM works fine with it

yarn next:cache-synpress

docs: https://docs.synpress.io/docs/setup-playwright

To run tests locally

yarn next:test
from root folder or yarn next:test-ui if you want to see and analyze how it looks

There's one bug though, when running yarn next:test you can meet the error Error: Cache for 08a20e3c7fc77e6ae298 does not exist. Create it first!. In that case you need to rename your cache folder name to that "does not exist" cache packages/nextjs/.cache-synpress/<cache-folder>. In my case it's 532f685e346606c2a803 to 08a20e3c7fc77e6ae298

Since the testing user is registered, to make the test work again you need to run remove user from db or run yarn db:seed

fixes: #313

vercel · 2025-09-03T13:19:38Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
speedrunethereum-v2	Ready	Preview	Comment	Nov 4, 2025 8:34am

rin-st · 2025-10-15T14:04:28Z

And playwright is not able to input password in metamask popup extension, can you please try once?

For me it works as expected

Also another things which we can ignore is, we get this in CI:

There was a typo in NEXTAUTH vars, fixed! b652ffc

So currently we only have an issue with zerion api key, but I think we can skip it for now

Run xvfb-run yarn next:test
  xvfb-run yarn next:test
  shell: /usr/bin/bash -e {0}
  env:
    CI: true
    NODE_ENV: test
    POSTGRES_URL: ***localhost:5432/postgres
    NEXTAUTH_SECRET: 1234567890
    NEXTAUTH_URL: http://localhost:3000
    ZERION_API_KEY: test_api_key_for_ci
    PLAYWRIGHT_TEST_BASE_URL: http://localhost:3000

Running 1 test using 1 worker

[WebServer] Error checking side quest contractDeployed for user 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266: Error: Failed to fetch transactions from Zerion: Unauthorized
[WebServer]     at d (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:669)
[WebServer]     at async Object.check (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:1316)
[WebServer]     at async e (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:10724)
[WebServer]     at async h (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:11309)
[WebServer]     at async (.next/server/app/api/users/register/route.js:1:4173)
[WebServer] Error fetching side quests snapshot: Error: Failed to fetch transactions from Zerion: Unauthorized
[WebServer]     at d (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:669)
[WebServer]     at async Object.check (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:1316)
[WebServer]     at async e (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:10724)
[WebServer]     at async h (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:11309)
[WebServer]     at async (.next/server/app/api/users/register/route.js:1:4173)
[WebServer] Error in background processing for user 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266: Error: Failed to fetch transactions from Zerion: Unauthorized
[WebServer]     at d (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:669)
[WebServer]     at async Object.check (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:1316)
[WebServer]     at async e (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:10724)
[WebServer]     at async h (.next/server/app/api/users/[address]/update-onchain-data/route.js:1:11309)
[WebServer]     at async (.next/server/app/api/users/register/route.js:1:4173)
  ✓  1 [chromium] › 01_user_onboarding.spec.ts:10:3 › User Onboarding Flow › Should complete full user onboarding flow: connect wallet, register user, and verify address display (19.9s)
Warning: packages/nextjs/[chromium] › 01_user_onboarding.spec.ts took 19.9s
Notice:   1 passed (25.7s)

  Slow test file: [chromium] › 01_user_onboarding.spec.ts (19.9s)
  Consider splitting slow test files to speed up parallel execution
  1 passed (25.7s)

technophile-04 · 2025-10-20T10:18:31Z

Ohh thanks @rin-st!! I just tried locally again and lol it started working for me as well (myabe I re-downloaded the playwright browser).

Also another last thing sorry 😅, I was talking with Carlos, and he observed it takes a lot of time for CI to run :

Maybe there is a better way to cache this Playwright browser install? Maybe we find something here?

microsoft/playwright#7249

Also here in their setup it took only 55 sec:
https://playwright.dev/docs/ci-intro#opening-the-workflows

rin-st · 2025-10-20T13:40:07Z

Good point, added cache step 1c4be91

Action:
https://github.com/BuidlGuidl/SpeedRunEthereum-v2/actions/runs/18653348316/job/53177104497

Also as an option we can install only chromium browser since we disabled tests for others. But I think it's not necessary right now

technophile-04

microsoft/playwright#7249 (comment)

Like here they said, it not recommended to cache the browser...Shall we try with just Chromium and see how long it takes? (ideally, maybe we should run for diff types of browser) But I think we can go more robust in the future 🙌

If it still takes a very long time for only Chromium, then we could go with the cache. What do you think?

But this is already looking great! Thanks Rinat!!

rin-st · 2025-10-21T09:31:39Z

Updated! Tried two times and lol it took only 7 and 10 sec

technophile-04

Updated! Tried two times and lol it took only 7 and 10 sec

NOICEE this is what we wanted! This is looking great! TYSM Rinat 🙏

carletex · 2025-10-23T07:14:34Z

love this, thank you all! Let me play with it a bit before merging (maybe next week)

carletex · 2025-11-03T11:48:56Z

Hey guys! Followed all the steps, and running the test locally (i tried a few times) I always get this error

I can see it opening the mm extension, putting the pass, go to the homepage.... and then it just stays there for a while (with not visual movement) until it throws the error.

Any ideas?

rin-st · 2025-11-03T12:08:45Z

Could you try to run yarn next:test-ui and then run it (click inner play button). It seems for some reason you don't have modal or metamask button. What do you see when you click on the actions before selected?

technophile-04 · 2025-11-03T12:27:53Z

Ohh I think it has something to with palywright browsers version.

For me it was working perfectly fine but then i uninstalled the playwright browser using:

npx playwright@latest uninstall --all

And then install it again via yarn next:playwright-browser and it started failing for me (maybe Carlos is also using the latest failing browser?)

I can see it opening the mm extension, putting the pass, go to the homepage.... and then it just stays there for a while (with not visual movement) until it throws the error.

For me it connects the wallet, I see the connected address and then get stuck (not doing the signature)

Error

❯ yarn next:test

Running 1 test using 1 worker

  ✘  1 … Onboarding Flow › Should complete full user onboarding flow: connect wallet, register user, and verify address display (41.1s)


  1) [chromium] › 01_user_onboarding.spec.ts:10:3 › User Onboarding Flow › Should complete full user onboarding flow: connect wallet, register user, and verify address display

    TimeoutError: locator.waitFor: Timeout 30000ms exceeded.
    Call log:
      - waiting for getByTestId('register-user-tooltip') to be visible


      31 |
      32 |     // Step 2: Verify wallet connection and registration prompt
    > 33 |     await page.getByTestId("register-user-tooltip").waitFor({
         |                                                     ^
      34 |       state: "visible",
      35 |       timeout: 30000,
      36 |     });

        at SpeedRunEthereum-v2/packages/nextjs/test/01_user_onboarding.spec.ts:33:53

    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
    test-results/01_user_onboarding-User-On-8ee17--and-verify-address-display-chromium/test-failed-1.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

    attachment #2: screenshot (image/png) ──────────────────────────────────────────────────────────
    test-results/01_user_onboarding-User-On-8ee17--and-verify-address-display-chromium/test-failed-2.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

  Slow test file: [chromium] › 01_user_onboarding.spec.ts (41.1s)
  Consider splitting slow test files to speed up parallel execution
  1 failed
    [chromium] › 01_user_onboarding.spec.ts:10:3 › User Onboarding Flow › Should complete full user onboarding flow: connect wallet, register user, and verify address display

To open last HTML report run:

  yarn playwright show-report

And If I run with yarn next:test-ui I get this:

rin-st · 2025-11-03T12:42:46Z

And then install it again via yarn next:playwright-browser and it started failing for me (maybe Carlos is also using the latest failing browser?)

For me it still works 🤷‍♂️

For me it connects the wallet, I see the connected address and then get stuck (not doing the signature)

Your error is different (// Step 2). I think it's because you forgot to do yarn db:seed before running tests again

technophile-04 · 2025-11-03T14:49:54Z

Ohh it just worked for me!

@carletex Can you try this steps once:

Uninstall playwright browser:

npx playwright@latest uninstall --all

Install playrwright browser:

yarn next:playwright-install

Cache Synpress:

yarn next:cache-synpress

Mv cached id to correct path:

mv packages/nextjs/.cache-synpress/532f685e346606c2a803 packages/nextjs/.cache-synpress/08a20e3c7fc77e6ae298

Seed the DB:

yar db:seed

Run the test:

yarn next:test

carletex

Thanks guys!! Got it working after your feedback.

I uninstalled the browsers and installed them again... and the everything started working properly. I had to increase the timeout, but that is just my laptop (faster as a 🐌 haha)

this is great stuff, can't wait to add more tests!

.github/workflows/playwright.yml

This reverts commit 93f5da2.

carletex

Merginnnng!

Thanks all

rin-st added 5 commits September 2, 2025 19:19

feat: base config

7dfd7cf

feat: working versions

50eca98

feat: register test

03e42e9

refactor: basic spec

2ffb577

chore: try to test

4c81d50

vercel bot deployed to Preview September 3, 2025 13:21 View deployment

fix: check database setup

58c118b

vercel bot deployed to Preview September 3, 2025 13:37 View deployment

feat: copy seed data

e457eaf

vercel bot deployed to Preview September 3, 2025 13:42 View deployment

chore: mock fb envs

4d7746f

vercel bot deployed to Preview September 3, 2025 17:12 View deployment

chore: handle firebase

0079ec4

vercel bot deployed to Preview September 3, 2025 17:46 View deployment

fix: uncomment browsers

a39fbc9

vercel bot deployed to Preview September 3, 2025 17:51 View deployment

fix: synpress

32c220c

vercel bot deployed to Preview September 3, 2025 19:26 View deployment

chore: xvfb

15c61aa

vercel bot deployed to Preview September 3, 2025 21:31 View deployment

fix: rename cache folder

f2b0fd3

vercel bot deployed to Preview September 3, 2025 21:39 View deployment

fix: playwright xvfb

936b681

vercel bot deployed to Preview September 3, 2025 21:51 View deployment

fix: -a flag

0a55ab5

vercel bot deployed to Preview September 3, 2025 21:57 View deployment

chore: another try

0c27b78

vercel bot deployed to Preview September 3, 2025 22:09 View deployment

feat: comment duplicate

c9a4f25

rin-st added 3 commits October 15, 2025 14:31

chore: move command

2b83845

chore: install browsers and build cache commands

496310f

fix: nextauth vars

b652ffc

vercel bot deployed to Preview October 15, 2025 13:54 View deployment

feat: cache browsers

1c4be91

vercel bot deployed to Preview October 20, 2025 13:24 View deployment

technophile-04 approved these changes Oct 21, 2025

View reviewed changes

feat: try to install only chromium

fac8b4e

vercel bot deployed to Preview October 21, 2025 09:17 View deployment

technophile-04 approved these changes Oct 23, 2025

View reviewed changes

carletex approved these changes Nov 3, 2025

View reviewed changes

.github/workflows/playwright.yml Show resolved Hide resolved

.github/workflows/playwright.yml Show resolved Hide resolved

rin-st added 2 commits November 3, 2025 19:57

fix: remove on:pr

93f5da2

fix: disable zerion in ci

ad00eda

vercel bot deployed to Preview November 4, 2025 08:27 View deployment

Revert "fix: remove on:pr"

d658c40

This reverts commit 93f5da2.

vercel bot deployed to Preview November 4, 2025 08:34 View deployment

rin-st requested a review from carletex November 4, 2025 08:46

carletex approved these changes Nov 4, 2025

View reviewed changes

carletex merged commit 5f1c20e into main Nov 4, 2025
4 checks passed

carletex deleted the e2e-tests-init branch November 4, 2025 09:48

E2e tests init #316

E2e tests init #316

Uh oh!

Conversation

rin-st commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rin-st commented Oct 15, 2025

Uh oh!

technophile-04 commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rin-st commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

technophile-04 left a comment

Choose a reason for hiding this comment

Uh oh!

rin-st commented Oct 21, 2025

Uh oh!

technophile-04 left a comment

Choose a reason for hiding this comment

Uh oh!

carletex commented Oct 23, 2025

Uh oh!

carletex commented Nov 3, 2025

Uh oh!

rin-st commented Nov 3, 2025

Uh oh!

technophile-04 commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rin-st commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

technophile-04 commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carletex left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

carletex left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rin-st commented Sep 3, 2025 •

edited

Loading

vercel bot commented Sep 3, 2025 •

edited

Loading

technophile-04 commented Oct 20, 2025 •

edited

Loading

rin-st commented Oct 20, 2025 •

edited

Loading

technophile-04 commented Nov 3, 2025 •

edited

Loading

rin-st commented Nov 3, 2025 •

edited

Loading

technophile-04 commented Nov 3, 2025 •

edited

Loading