Pillar 02 · Scenario Area
Real-world end-to-end flows that map to a Jira-shaped story
Each scenario carries the artefacts a hiring manager actually inspects: user story, acceptance criteria, manual steps, expected outcome, bug-risk inventory, and a copy-pasteable Playwright spec.
Authentication
Login, registration, OTP, password recovery, session expiry — the front door of every product.
Authentication
Valid login
Demo credentials happy path that lands on the dashboard with a personalized welcome.
Open scenario →
Authentication
Invalid login
Negative path: wrong password surfaces a stable, accessible error message.
Open scenario →
Authentication
Forgot password
Email submission triggers a reset confirmation; rate limit prevents spam.
Open scenario →
Authentication
OTP verification
Six-digit code modal validates length, supports paste, and rejects expired codes.
Open scenario →
Authentication
Session timeout
Idle session expires, prompting the user to sign in again without losing the route they were on.
Open scenario →
E-Commerce
Cart, checkout, promo codes — money-moving flows where flakiness costs revenue.
E-Commerce
Add to cart
Adding a product updates the badge counter and opens the mini-cart drawer.
Open scenario →
E-Commerce
Remove from cart
Removing the last item empties the cart and disables checkout.
Open scenario →
E-Commerce
Checkout
Three-step checkout: shipping → payment → review with Place Order side effects.
Open scenario →
E-Commerce
Promo code validation
Coupon engine accepts QA20, rejects EXPIRED, and ignores invalid casing differences.
Open scenario →
Wallet & Fintech
Deposits, withdrawals, currency, pending state — precision-critical UI that must never round wrong.
Wallet & Fintech
Deposit validation
Deposit field rejects negatives, more than 2 decimal places, and amounts above the per-tx cap.
Open scenario →
Wallet & Fintech
Withdraw limits
Daily withdraw cap blocks the next request once the rolling window is exhausted.
Open scenario →
Wallet & Fintech
Currency switch
Switching currency re-formats balances and disables fiat-only actions for crypto rails.
Open scenario →
Wallet & Fintech
Pending transactions
Pending row remains in the ledger with a spinner until settlement, then transitions to posted.
Open scenario →
Admin Panel
Search, filter, export, RBAC — back-office surfaces where bugs become incidents.
Admin Panel
User search
Debounced search filters the table and preserves the active filter when paginating.
Open scenario →
Admin Panel
Table filters
Compound filter (role + status) narrows the data set and reflects the chip count.
Open scenario →
Admin Panel
Export CSV
CSV export streams the active filter set, not the entire table, and uses a stable filename.
Open scenario →
Admin Panel
Role permissions
Non-admins receive a 403-style empty state on /admin; the route does not even render the data shell.
Open scenario →
Advanced
Network interception, retries, races — the proof points that separate seniors from juniors.
Advanced
Network interception
page.route fulfils a deterministic balance so the wallet UI is decoupled from any backend.
Open scenario →
Advanced
API error fallback
When the ledger returns 500, the UI shows a stable error surface without crashing the route.
Open scenario →
Advanced
Retry flow
First attempt 500s, second attempt succeeds — UI must reach the success state without a manual reload.
Open scenario →
Advanced
Slow backend handling
A 3-second backend delay must show a skeleton state, not a blank page; user input must not be lost.
Open scenario →
Advanced
Race conditions
Two rapid filter changes must commit only the latest result — not the slower-arriving prior request.
Open scenario →