User Flows, Navigation & SPA Behavior
Run 30 test cases across 4 parallel agents covering authentication, registration, SPA navigation, and data flows.
Setup
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-flows/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces" "$OUTDIR/videos"
Before running, verify prerequisites per references/prerequisites.md.
Credentials
Credentials must come from arguments or environment variables:
# From $ARGUMENTS: /test-flows https://app.com user@example.com password123
TEST_URL=$(echo "$ARGUMENTS" | awk '{print $1}')
TEST_USER_ARG=$(echo "$ARGUMENTS" | awk '{print $2}')
TEST_PASS_ARG=$(echo "$ARGUMENTS" | awk '{print $3}')
URL="${TEST_URL:-http://localhost:3000}"
USER="${TEST_USER_ARG:-$TEST_USER}"
PASS="${TEST_PASS_ARG:-$TEST_PASS}"
If no credentials provided, auth-related tests should be skipped (not failed) with a note in the report.
Parallel Execution — 4 Subagents
Agent 1: Auth (-s=flows-auth, --persistent)
Tests authentication flows. Uses persistent profile to maintain session state.
playwright-cli -s=flows-auth open "$URL" --persistent
playwright-cli -s=flows-auth tracing-start
playwright-cli -s=flows-auth video-start
Test Cases:
| TC |
Test |
How to Check |
| TC-FL1 |
Login→dashboard→settings→logout full chain |
Fill login form, submit, navigate to dashboard, then settings, then logout. Verify each page loads correctly |
| TC-FL2 |
Session persistence (navigate away/back) |
After login, navigate to external URL, come back, verify still logged in |
| TC-FL3 |
"Remember me" functionality |
If checkbox exists: login with "remember me", close browser, reopen, verify still logged in |
| TC-FL4 |
Social login buttons present/functional |
Check for OAuth buttons (Google, GitHub, Facebook), verify they link to valid OAuth endpoints |
| TC-FL5 |
2FA/MFA flow (if present) |
If 2FA UI exists: verify the flow is navigable (OTP input, verification page) |
| TC-FL6 |
Account lockout after failed attempts |
Attempt 5+ failed logins with wrong password, check for lockout or rate-limit message |
playwright-cli -s=flows-auth video-stop "$OUTDIR/videos/auth-flow.webm"
playwright-cli -s=flows-auth state-save "$OUTDIR/auth-state.json"
playwright-cli -s=flows-auth tracing-stop
playwright-cli -s=flows-auth close
Agent 2: Register (-s=flows-register)
Tests registration and account management flows.
playwright-cli -s=flows-register open "$URL"
playwright-cli -s=flows-register tracing-start
Test Cases:
| TC |
Test |
How to Check |
| TC-FL7 |
Registration end-to-end |
Navigate to registration page, fill all fields, submit, verify success |
| TC-FL8 |
Password reset flow |
Navigate to "forgot password", enter email, verify confirmation page/message |
| TC-FL9 |
Email verification flow |
If email verification exists: check for verification prompt after registration |
| TC-FL10 |
Profile edit + save |
If profile page exists: edit a field, save, reload, verify change persisted |
| TC-FL11 |
Account deletion flow |
If account deletion exists: navigate to it, verify confirmation dialog |
| TC-FL12 |
Password strength indicator |
On registration/password change: type passwords of varying strength, verify indicator updates |
playwright-cli -s=flows-register tracing-stop
playwright-cli -s=flows-register close
Agent 3: Navigation (-s=flows-navigation)
Tests SPA navigation and browser behavior.
playwright-cli -s=flows-navigation open "$URL"
playwright-cli -s=flows-navigation tracing-start
Test Cases:
| TC |
Test |
How to Check |
| TC-FL13 |
Browser back button works in SPA |
Navigate 2-3 pages, go-back, verify previous page content loads correctly |
| TC-FL14 |
Browser forward button works |
go-back then go-forward, verify correct page loads |
| TC-FL15 |
Deep linking — direct URL to nested page |
Open a deep URL directly (e.g., $URL/settings/profile), verify it loads correctly |
| TC-FL16 |
404 page for invalid routes |
Navigate to $URL/nonexistent-page-xyz, verify 404 page with navigation |
| TC-FL17 |
Breadcrumb navigation accuracy |
If breadcrumbs exist: click each breadcrumb link, verify correct page |
| TC-FL18 |
Scroll position restored on back |
Scroll down on page, navigate away, go-back, check scroll position restored |
| TC-FL19 |
Anchor links scroll to correct position |
Find # links, click them, verify page scrolls to target element |
| TC-FL20 |
Hash changes update URL |
Click anchor link, verify URL hash updates in browser |
| TC-FL21 |
Refresh preserves state |
Fill form or apply filter, reload, verify state preserved |
| TC-FL22 |
Protected routes redirect to login |
If auth exists: navigate to protected route without login, verify redirect to login page |
playwright-cli -s=flows-navigation tracing-stop
playwright-cli -s=flows-navigation close
Agent 4: Data (-s=flows-data)
Tests data flows — pagination, search, CRUD operations.
playwright-cli -s=flows-data open "$URL"
playwright-cli -s=flows-data tracing-start
Test Cases:
| TC |
Test |
How to Check |
| TC-FL23 |
Pagination — all pages load, no duplicates |
If pagination exists: navigate pages, collect items, verify no duplicates across pages |
| TC-FL24 |
Infinite scroll — items append, no gaps |
If infinite scroll exists: scroll down, verify new items append without gaps or duplicates |
| TC-FL25 |
Search — results display, empty state shown |
If search exists: search for known term (verify results), search for gibberish (verify empty state) |
| TC-FL26 |
Search — debounce works |
If search exists: type rapidly, check network requests aren't fired per keystroke (use network) |
| TC-FL27 |
Sort/filter — changes reflected |
If sort/filter exists: apply sort, verify order changes. Apply filter, verify items filtered |
| TC-FL28 |
CRUD — create/read/update/delete cycle |
If CRUD exists: create item, verify appears. Edit item, verify updated. Delete item, verify removed |
| TC-FL29 |
Optimistic update — UI updates before server |
If CRUD exists: run-code to intercept mutation request (add delay), verify UI updates immediately |
| TC-FL30 |
Stale data — refresh shows updated data |
Load page, run-code to modify data via API, reload, verify updated data shown |
playwright-cli -s=flows-data tracing-stop
playwright-cli -s=flows-data close
Fix Loop
After execution, if any tests failed, follow the fix loop process in references/fix-loop.md.
Max 3 attempts. Only re-run failed test cases.
Include fix attempt history in the report.
Report Generation
After all 4 agents complete, merge results into $OUTDIR/report.md.
Note skipped tests prominently (especially auth tests when no credentials provided).
Group results:
- Authentication (TC-FL1 through TC-FL6)
- Registration (TC-FL7 through TC-FL12)
- Navigation (TC-FL13 through TC-FL22)
- Data Flows (TC-FL23 through TC-FL30)
Cleanup
playwright-cli -s=flows-auth close 2>/dev/null
playwright-cli -s=flows-register close 2>/dev/null
playwright-cli -s=flows-navigation close 2>/dev/null
playwright-cli -s=flows-data close 2>/dev/null
1---2name: test-flows3description: Test user flows, authentication, navigation, and SPA behavior. Use when user wants to test login flows, registration, browser history, pagination, search, CRUD operations, or routing.4---56# User Flows, Navigation & SPA Behavior78Run 30 test cases across 4 parallel agents covering authentication, registration, SPA navigation, and data flows.910## Setup1112```bash13URL="${ARGUMENTS:-http://localhost:3000}"14TIMESTAMP=$(date +%Y%m%d-%H%M%S)15OUTDIR="test-results/test-flows/$TIMESTAMP"16mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces" "$OUTDIR/videos"17```1819Before running, verify prerequisites per `references/prerequisites.md`.2021## Credentials2223Credentials must come from arguments or environment variables:24```bash25# From $ARGUMENTS: /test-flows https://app.com user@example.com password12326TEST_URL=$(echo "$ARGUMENTS" | awk '{print $1}')27TEST_USER_ARG=$(echo "$ARGUMENTS" | awk '{print $2}')28TEST_PASS_ARG=$(echo "$ARGUMENTS" | awk '{print $3}')2930URL="${TEST_URL:-http://localhost:3000}"31USER="${TEST_USER_ARG:-$TEST_USER}"32PASS="${TEST_PASS_ARG:-$TEST_PASS}"33```3435If no credentials provided, auth-related tests should be **skipped** (not failed) with a note in the report.3637## Parallel Execution — 4 Subagents3839### Agent 1: Auth (`-s=flows-auth`, `--persistent`)4041Tests authentication flows. Uses persistent profile to maintain session state.4243```bash44playwright-cli -s=flows-auth open "$URL" --persistent45playwright-cli -s=flows-auth tracing-start46playwright-cli -s=flows-auth video-start47```4849**Test Cases:**5051| TC | Test | How to Check |52|----|------|-------------|53| TC-FL1 | Login→dashboard→settings→logout full chain | Fill login form, submit, navigate to dashboard, then settings, then logout. Verify each page loads correctly |54| TC-FL2 | Session persistence (navigate away/back) | After login, navigate to external URL, come back, verify still logged in |55| TC-FL3 | "Remember me" functionality | If checkbox exists: login with "remember me", close browser, reopen, verify still logged in |56| TC-FL4 | Social login buttons present/functional | Check for OAuth buttons (Google, GitHub, Facebook), verify they link to valid OAuth endpoints |57| TC-FL5 | 2FA/MFA flow (if present) | If 2FA UI exists: verify the flow is navigable (OTP input, verification page) |58| TC-FL6 | Account lockout after failed attempts | Attempt 5+ failed logins with wrong password, check for lockout or rate-limit message |5960```bash61playwright-cli -s=flows-auth video-stop "$OUTDIR/videos/auth-flow.webm"62playwright-cli -s=flows-auth state-save "$OUTDIR/auth-state.json"63playwright-cli -s=flows-auth tracing-stop64playwright-cli -s=flows-auth close65```6667### Agent 2: Register (`-s=flows-register`)6869Tests registration and account management flows.7071```bash72playwright-cli -s=flows-register open "$URL"73playwright-cli -s=flows-register tracing-start74```7576**Test Cases:**7778| TC | Test | How to Check |79|----|------|-------------|80| TC-FL7 | Registration end-to-end | Navigate to registration page, fill all fields, submit, verify success |81| TC-FL8 | Password reset flow | Navigate to "forgot password", enter email, verify confirmation page/message |82| TC-FL9 | Email verification flow | If email verification exists: check for verification prompt after registration |83| TC-FL10 | Profile edit + save | If profile page exists: edit a field, save, reload, verify change persisted |84| TC-FL11 | Account deletion flow | If account deletion exists: navigate to it, verify confirmation dialog |85| TC-FL12 | Password strength indicator | On registration/password change: type passwords of varying strength, verify indicator updates |8687```bash88playwright-cli -s=flows-register tracing-stop89playwright-cli -s=flows-register close90```9192### Agent 3: Navigation (`-s=flows-navigation`)9394Tests SPA navigation and browser behavior.9596```bash97playwright-cli -s=flows-navigation open "$URL"98playwright-cli -s=flows-navigation tracing-start99```100101**Test Cases:**102103| TC | Test | How to Check |104|----|------|-------------|105| TC-FL13 | Browser back button works in SPA | Navigate 2-3 pages, `go-back`, verify previous page content loads correctly |106| TC-FL14 | Browser forward button works | `go-back` then `go-forward`, verify correct page loads |107| TC-FL15 | Deep linking — direct URL to nested page | Open a deep URL directly (e.g., `$URL/settings/profile`), verify it loads correctly |108| TC-FL16 | 404 page for invalid routes | Navigate to `$URL/nonexistent-page-xyz`, verify 404 page with navigation |109| TC-FL17 | Breadcrumb navigation accuracy | If breadcrumbs exist: click each breadcrumb link, verify correct page |110| TC-FL18 | Scroll position restored on back | Scroll down on page, navigate away, `go-back`, check scroll position restored |111| TC-FL19 | Anchor links scroll to correct position | Find `#` links, click them, verify page scrolls to target element |112| TC-FL20 | Hash changes update URL | Click anchor link, verify URL hash updates in browser |113| TC-FL21 | Refresh preserves state | Fill form or apply filter, `reload`, verify state preserved |114| TC-FL22 | Protected routes redirect to login | If auth exists: navigate to protected route without login, verify redirect to login page |115116```bash117playwright-cli -s=flows-navigation tracing-stop118playwright-cli -s=flows-navigation close119```120121### Agent 4: Data (`-s=flows-data`)122123Tests data flows — pagination, search, CRUD operations.124125```bash126playwright-cli -s=flows-data open "$URL"127playwright-cli -s=flows-data tracing-start128```129130**Test Cases:**131132| TC | Test | How to Check |133|----|------|-------------|134| TC-FL23 | Pagination — all pages load, no duplicates | If pagination exists: navigate pages, collect items, verify no duplicates across pages |135| TC-FL24 | Infinite scroll — items append, no gaps | If infinite scroll exists: scroll down, verify new items append without gaps or duplicates |136| TC-FL25 | Search — results display, empty state shown | If search exists: search for known term (verify results), search for gibberish (verify empty state) |137| TC-FL26 | Search — debounce works | If search exists: type rapidly, check network requests aren't fired per keystroke (use `network`) |138| TC-FL27 | Sort/filter — changes reflected | If sort/filter exists: apply sort, verify order changes. Apply filter, verify items filtered |139| TC-FL28 | CRUD — create/read/update/delete cycle | If CRUD exists: create item, verify appears. Edit item, verify updated. Delete item, verify removed |140| TC-FL29 | Optimistic update — UI updates before server | If CRUD exists: `run-code` to intercept mutation request (add delay), verify UI updates immediately |141| TC-FL30 | Stale data — refresh shows updated data | Load page, `run-code` to modify data via API, reload, verify updated data shown |142143```bash144playwright-cli -s=flows-data tracing-stop145playwright-cli -s=flows-data close146```147148## Fix Loop149150After execution, if any tests failed, follow the fix loop process in `references/fix-loop.md`.151Max 3 attempts. Only re-run failed test cases.152153Include fix attempt history in the report.154155## Report Generation156157After all 4 agents complete, merge results into `$OUTDIR/report.md`.158159Note skipped tests prominently (especially auth tests when no credentials provided).160161Group results:1621. Authentication (TC-FL1 through TC-FL6)1632. Registration (TC-FL7 through TC-FL12)1643. Navigation (TC-FL13 through TC-FL22)1654. Data Flows (TC-FL23 through TC-FL30)166167## Cleanup168169```bash170playwright-cli -s=flows-auth close 2>/dev/null171playwright-cli -s=flows-register close 2>/dev/null172playwright-cli -s=flows-navigation close 2>/dev/null173playwright-cli -s=flows-data close 2>/dev/null174```
az9713