Afternoon. What did I do this afternoon?
I was back at it on Hustle (hustlestats.io)*beta*, o
my youth soccer stats platform.
I had 7 E2E tests failing in CI, and login was broken in production for a day. Spent the session with Claude Code systematically debugging the whole thing.
The bugs were sneaky:
1. Playwright strict mode violation
The dashboard page has both an and an that say “Dashboard”. Strict mode blew up because the locator matched 2 elements. Fix was just .first() — but you don’t see it until you actually read the error.
2. Regex matching the wrong URL
Tests were doing: waitForURL(//dashboard/) after submitting the add-athlete form.
Problem: the current URL was /dashboard/add-athlete which ALSO matches //dashboard/.
So the wait resolved instantly, the test moved on, and found zero athletes.
Fix: changed to //dashboard/?$/ to match only the root.
3. Phantom error detection
Next.js dev tools puts an empty [role=“alert”] element on every page.
Our test used [role=“alert”] as the error indicator.
API returned 200 success, but the test saw the alert element and threw:
“Athlete creation failed:” (with empty text). Absolute ghost bug.
Debugging process:
• Ran the failing test and read the actual error messages (strict mode was obvious once you saw it)
• For the URL bug, traced the chain: form submits -> API returns 200 -> waitForURL resolves instantly -> test navigates away before redirect completes -> “no athletes yet”
• Phantom alert only showed up after fixing the first two bugs (classic “fix one bug, reveal the next”)
Now the happy path is fully passing:
Register -> Add Athlete -> Log Game -> View Stats -> Dashboard updates
Goalkeeper position-specific fields test passes too.
Remaining failures are Firebase rate-limiting from creating too many test users per suite run — infra problem, not code.
Stack: Next.js 15 + Firebase Auth + Firestore + Playwright
Anyone else run into Playwright strict mode catching duplicate headings?
0 Comments