Test

Test

Testing Checklist

Feature Testing:
- [ ] Happy path works (main user flow)
- [ ] Edge cases handled (empty, long, invalid data)
- [ ] Error messages clear and helpful
- [ ] Works on mobile (iOS and Android)
- [ ] Works in Safari, Chrome, Firefox
- [ ] Loading states show during waits
- [ ] Forms validate input
- [ ] Can't break it with weird input
- [ ] Back button works correctly
- [ ] Page refresh doesn't lose data

See TEST-SCENARIOS.md for detailed scenarios.

---

When to Test

Test when:

• Feature just built by AI
• Before deploying to production
• After fixing a bug (verify fix works)
• Users report issues (reproduce first)

Don't test:

• While AI is still building
• Before feature is complete
• Every tiny change (batch test features)

Rule: Build → Test → Fix → Test again → Deploy

---

Structured QA Workflow

Don't test randomly. Follow this sequence every time.

Step 1: Orient — What Exists?

Before testing, know what you're testing. Walk through your app and list every page and feature.

Map Your App:
- [ ] List every page (home, dashboard, settings, etc.)
- [ ] List every form (signup, contact, create/edit)
- [ ] List every button that does something
- [ ] List every integration (payments, email, third-party)

Step 2: Explore — Visit Everything Systematically

Go through every page, every button, every form. Don't skip pages you "know" work.

Tell AI:

Go through every page of my app. Click every button. Fill every form.
Submit every action. Tell me what's broken, what looks wrong, and what
behaves unexpectedly. For each issue, tell me:
- What page it's on
- What you did
- What happened vs. what should happen
- How severe it is (blocks users vs. cosmetic)

Step 3: Score — Rate Your App's Health

Rate your app 1-10 on each dimension. Be honest — this is for you.

App Health Score:
                                      Score (1-10)
Does it load fast? (under 3 seconds)  ___
Do all buttons/links work?            ___
Do forms submit correctly?            ___
Do error messages make sense?         ___
Does it work on mobile?               ___
Is the core flow completable?         ___
                              Total:  ___/60

50-60: Ready to ship
40-49: Fix the gaps, then ship
30-39: Significant issues — fix before showing users
<30:   Major problems — keep building before testing

Step 4: Fix and Re-Verify

After each fix, re-test two things: the thing that was broken AND the things that were working. AI fixes often break something else.

After Every Fix:
- [ ] Original bug is resolved
- [ ] Core signup/login flow still works
- [ ] Core action still works
- [ ] No new visual issues on the page you changed

Step 5: The Fresh Eyes Test

Have someone who's never seen your app try to sign up and complete the core action. Watch without helping. What surprises you?

• Where do they hesitate?
• What do they click that you didn't expect?
• Where do they get confused but don't say anything?
• Can they describe what the app does after using it for 2 minutes?

This test reveals more than a week of solo testing. The things you "know" are obvious often aren't.

---

Manual Testing Checklist

1. Test happy path
   - Does the main flow work?
   - Can user complete the task?

2. Test edge cases
   - What if field is empty?
   - What if text is very long?
   - What if user clicks twice?

3. Test on mobile
   - Open on real phone
   - Test main actions
   - Check layout doesn't break

4. Test in different browsers
   - Chrome (most users)
   - Safari (iOS users)
   - Firefox (some users)

5. Document issues
   - Screenshot the problem
   - Write exact steps to reproduce
   - Give to AI to fix

---

Testing Edge Cases

Always test these:

Empty data:

• What shows when no items in list?
• What happens with empty form field?
• Is placeholder/empty state clear?

Long data:

• Very long name (200 characters)
• Very long text (10,000 characters)
• Does layout break?

Invalid data:

• Invalid email format
• Negative numbers where not allowed
• Special characters in text field
• SQL characters ('; DROP TABLE)

Boundary cases:

• Exactly at limit (100 char limit, enter 100)
• Just over limit (enter 101)
• Zero/empty values

Tell AI:

Test these edge cases:
- Empty username: show "Required"
- Username too long (>50 chars): show "Max 50 characters"
- Username with spaces: show "No spaces allowed"
- Special characters: show "Letters and numbers only"

See EDGE-CASES.md for comprehensive list.

---

Testing on Mobile

Minimum mobile tests:

Mobile Testing:
- [ ] Page loads and looks correct
- [ ] Can tap all buttons (44px minimum)
- [ ] Forms work (keyboard appears)
- [ ] No horizontal scroll
- [ ] Images load and fit screen
- [ ] Navigation works
- [ ] Can complete main user flow

Test on:

• iPhone (Safari) - Most common iOS
• Android phone (Chrome) - Most common Android

Don't need to test:

• Every phone model
• Tablets (unless primary use case)
• Landscape mode (unless important)

---

Cross-Browser Testing

Priority order:

1. Chrome (65% of users) - Test thoroughly 2. Safari (20% of users) - Test main flows 3. Firefox (5% of users) - Quick check 4. Edge (5% of users) - Usually works if Chrome works

Common browser issues:

• Date pickers look different
• Flexbox behaves differently
• Scrolling momentum feels different
• Animations may not work on old Safari

Quick test:

Open in each browser:
1. Load homepage
2. Sign up / Log in
3. Complete 1-2 main actions
4. Check nothing is broken

---

Testing Forms

Form validation testing:

Form Testing Checklist:
- [ ] Required fields show error if empty
- [ ] Email validation works (format check)
- [ ] Password requirements enforced
- [ ] Can't submit invalid form
- [ ] Error messages clear and specific
- [ ] Success message shows after submit
- [ ] Form disables during submit (no double-submit)
- [ ] Errors clear when user fixes them

Tell AI:

Test form validation:
- Required field left empty: "This field is required"
- Invalid email: "Enter a valid email address"
- Weak password: "Password must be 8+ characters with 1 number"
- All valid: Allow submit
- Show errors inline, not alert()

---

Testing Authentication

Auth flow testing:

Auth Testing:
- [ ] Can sign up with valid info
- [ ] Can't sign up with existing email
- [ ] Can log in with correct password
- [ ] Can't log in with wrong password
- [ ] Can reset password via email
- [ ] Session expires after timeout
- [ ] Logout works (can't access protected pages)
- [ ] Can't access protected routes without login
- [ ] Redirect to login when session expires

---

Testing Integrations

Third-party services:

Payment (Stripe):

- [ ] Test card (4242 4242 4242 4242) processes
- [ ] Declined card shows error
- [ ] Receipt email sent
- [ ] Subscription status updates
- [ ] Can cancel subscription

Email (SendGrid):

- [ ] Welcome email sends on signup
- [ ] Password reset email arrives
- [ ] Emails have correct content
- [ ] Links in email work
- [ ] Unsubscribe link works

Tell AI:

Add test mode checking:
Log when using test API keys.
Show banner: "TEST MODE - No real charges"
Use Stripe test cards only in development.

---

Finding Bugs Yourself

How to break your app:

1. Click fast and repeatedly

• Double-click submit button
• Click back button quickly
• Refresh during loading

2. Enter unexpected data

• Copy/paste 10,000 characters
• Enter emojis 🎉 in text fields
• Try SQL: '; DROP TABLE users;--
• Enter HTML: <script>alert('xss')</script>

3. Change state unexpectedly

• Log out in another tab
• Let session expire, then try action
• Open same page in multiple tabs

4. Use slow connection

• Chrome DevTools → Network → Slow 3G
• Try all main actions
• Do loading states show?

See BREAKING-THINGS.md for full list.

---

Documenting Bugs

Bug report template:

Bug: [Short description]

Steps to reproduce:
1. [First action]
2. [Second action]
3. [What triggers the bug]

Expected: [What should happen]
Actual: [What actually happened]

Screenshot: [Attach if visual]
Browser: [Chrome 120 on Mac]
URL: [Where it happened]
Frequency: [Always / Sometimes / Once]

Give to AI to fix:

Bug found: [paste bug report]

Please:
1. Reproduce the bug
2. Identify root cause
3. Fix the issue
4. Verify fix works
5. Test that fix didn't break anything else

---

Regression Testing

After fixing a bug, test:

Regression Checklist:
- [ ] Original bug is fixed
- [ ] Happy path still works
- [ ] Related features still work
- [ ] No new errors in console
- [ ] No new visual issues

Common regression issues:

• Fix breaks different browser
• Fix breaks mobile layout
• Fix breaks related feature
• Fix introduces new edge case bug

---

Pre-Deployment Checklist

Before pushing to production:

Production Readiness:
- [ ] All features tested (happy path + edge cases)
- [ ] Works on mobile (iPhone + Android)
- [ ] Works in Safari and Chrome
- [ ] No console errors
- [ ] Forms validate correctly
- [ ] Authentication works
- [ ] No test data visible
- [ ] Error messages are user-friendly
- [ ] Loading states show
- [ ] Can't break it with weird input

---

When to Get QA Help

Consider hiring QA when:

• > 10 features to test before launch
• Complex user flows (multi-step processes)
• Multiple integrations to verify
• Preparing for big launch (> 1000 users)

For most MVPs: Following this checklist is sufficient.

---

Common Testing Mistakes

---

Quick Testing Shortcuts

5-minute quick test:

1. Load page in Chrome
2. Complete main user flow
3. Try one edge case (empty field)
4. Check mobile view (Chrome DevTools)
5. Look for console errors

15-minute thorough test:

1. Happy path in Chrome
2. 3-4 edge cases
3. Test on real phone
4. Check Safari
5. Try to break it (fast clicks, weird input)
6. Check all error messages

---

Testing Tools

Built into browser:

• Chrome DevTools (Inspect)
• Network tab (check API calls)
• Console (check for errors)
• Device mode (test mobile sizes)
• Lighthouse (performance + best practices)

Free external tools:

• BrowserStack (free trial) - Test on real devices
• Can I Use (caniuse.com) - Check browser support
• Validator.nu - Check HTML validity

Usually don't need:

• Automated testing frameworks (too complex for non-technical)
• Paid testing services (manual testing sufficient for MVP)

---

Success Looks Like

✅ Main user flow works perfectly ✅ Edge cases handled gracefully ✅ Works on mobile and desktop ✅ Works in Chrome and Safari ✅ Error messages clear and helpful ✅ Can't break it with weird input ✅ No bugs reported by users

Breaking Things on Purpose

How to intentionally break your app to find bugs before users do.

---

Why Break Things?

Users are creative at finding bugs. They:

• Click too fast
• Enter weird data
• Use your app in unexpected ways
• Have slow connections
• Use old browsers

Better you find bugs than users.

---

The Chaos Monkey Approach

1. Click Everything Rapidly

Test: Click submit button 10 times fast
Good: Button disables after first click
Bad: Creates 10 duplicate submissions

Test: Click between tabs rapidly
Good: Tabs switch smoothly, no errors
Bad: UI breaks, data gets mixed up

Test: Navigate back/forward fast
Good: Pages load correctly
Bad: Page shows wrong data or errors

2. Enter Absurd Data

Test: Enter 10,000 characters in "name" field
Good: Truncates to 50 chars or shows error
Bad: Breaks layout or crashes

Test: Enter: <script>alert('xss')</script>
Good: Sanitizes input, stores as plain text
Bad: Alert appears (XSS vulnerability)

Test: Enter: '; DROP TABLE users;--
Good: Treated as plain text
Bad: Database error (SQL injection)

3. Do Things Out of Order

Test: Go directly to step 3 of 5 (URL hack)
Good: Redirects to step 1 or shows error
Bad: Breaks or skips validation

Test: Submit form before fields loaded
Good: Form disabled until ready
Bad: Submits partial/empty data

Test: Edit item you just deleted
Good: Shows "Item not found"
Bad: Crashes or shows stale data

4. Refresh at Wrong Times

Test: Refresh during form submission
Good: Shows confirmation or idempotent
Bad: Submits twice

Test: Refresh during file upload
Good: Upload cancels or resumes
Bad: Partial file saved or error

Test: Refresh after successful action
Good: Shows result, no re-execution
Bad: Action runs again

---

Network Chaos

Simulate Slow Connection

Chrome DevTools: 1. Open DevTools (F12) 2. Network tab 3. Dropdown: "Slow 3G" 4. Try your app

What breaks:

• Missing loading states
• Timeouts with no error message
• Double-submits (user clicks again)
• Broken layout (images don't load)

Simulate Offline

Chrome DevTools: 1. Network tab 2. Check "Offline" 3. Try actions

What breaks:

• No offline message shown
• Actions fail silently
• Error messages unhelpful
• Can't recover when back online

Interrupt Actions

Test: Start upload, disable network
Good: Shows error, allows retry
Bad: Hangs forever or crashes

Test: Submit form, go offline mid-request
Good: Shows "Connection lost, retrying..."
Bad: Form clears or shows success incorrectly

---

Authentication Chaos

Expired Sessions

Test: Log in, wait 30 min, try action
Good: Redirects to login with clear message
Bad: Shows generic error or crashes

Test: Open app in 2 tabs, logout in one
Good: Other tab detects logout
Bad: Other tab breaks on next action

Permission Chaos

Test: Regular user tries /admin URL
Good: 403 error or redirect with message
Bad: Shows admin page or crashes

Test: Edit URL to view other user's data
Good: Permission denied
Bad: Shows other user's data (security issue!)

Token Manipulation

Test: Clear auth token, try protected action
Good: Redirects to login
Bad: Shows error page or crashes

Test: Modify token in DevTools, make request
Good: Rejects invalid token
Bad: Accepts tampered token (security issue!)

---

Data Chaos

Empty States

Test: New account, view dashboard
Good: Clear empty state with action
Bad: Blank page or loading forever

Test: Delete all items, view list
Good: "No items" with "Create" button
Bad: Error or broken layout

Volume Stress

Test: Create 1000 items, load list
Good: Paginates, loads quickly
Bad: Crashes or takes minutes

Test: Upload 100 files at once
Good: Handles or limits queue
Bad: Crashes or uploads fail

Weird Characters

Test: Name with emoji: "John 🎉 Doe"
Good: Saves and displays correctly
Bad: Breaks display or saves incorrectly

Test: Bio with every special char: !@#$%^&*()
Good: Handles gracefully
Bad: Breaks layout or parsing

---

Browser Chaos

Different Browsers

Test in Safari (iOS):
- Dates formatted differently
- Flexbox behaves differently
- Some CSS might not work

Test in Firefox:
- Extensions might interfere
- Scrolling feels different
- Input behaviors vary

Browser Settings

Test: Disable JavaScript
Good: Shows "Please enable JS" message
Bad: Blank page

Test: Disable cookies
Good: Still works or clear message
Bad: Infinite redirect or error

Test: Enable "Do Not Track"
Good: Respects privacy setting
Bad: Tracking breaks app

Extensions

Test: Ad blocker active
Good: App works (maybe disable ads gracefully)
Bad: App breaks or loads forever

Test: Password manager active
Good: Plays nice with autofill
Bad: Double-fills fields or breaks

---

Mobile Chaos

Rotation

Test: Fill form, rotate device
Good: Form data preserved
Bad: Form clears

Test: Rotate during action
Good: Action continues
Bad: Action cancels or duplicates

Keyboards

Test: Keyboard covers input
Good: Page scrolls to show input
Bad: Can't see what you're typing

Test: Autocorrect changes input
Good: Validation still works
Bad: Form rejects valid input

Gestures

Test: Swipe vs scroll confusion
Good: Clear distinction
Bad: Accidental actions

Test: Pinch to zoom (if not intended)
Good: Disabled on form
Bad: Zooms and breaks layout

---

Timing Attacks

Race Conditions

Test: Submit form, immediately click elsewhere
Good: Form submission completes
Bad: Submission cancelled

Test: Open modal, immediately press Escape
Good: Modal closes gracefully
Bad: Modal stuck or errors

Test: Load data, immediately navigate away
Good: Request cancelled, no errors
Bad: Memory leak or errors

Rapid Actions

Test: Type very fast in search
Good: Debounces, searches after pause
Bad: Makes 50 API calls

Test: Scroll up/down rapidly
Good: Smooth, no flicker
Bad: Jumpy or errors

Test: Click pagination rapidly
Good: Loads correctly
Bad: Wrong page or duplicate requests

---

Copy/Paste Attacks

Large Pastes

Test: Copy 10,000 words, paste in field
Good: Truncates or shows error
Bad: Freezes or crashes

Test: Paste HTML from website
Good: Strips HTML, keeps text
Bad: Renders HTML (security issue!)

Weird Paste

Test: Paste image in text field
Good: Ignores or shows error
Bad: Crashes

Test: Paste formatted text
Good: Strips formatting
Bad: Breaks layout

---

File Upload Chaos

File Types

Test: Upload .exe file (expecting .pdf)
Good: Rejects with clear message
Bad: Accepts or crashes

Test: Rename virus.exe to virus.pdf
Good: Checks file content, not just name
Bad: Accepts malicious file

File Sizes

Test: Upload 100MB file (limit 5MB)
Good: Rejects before uploading
Bad: Uploads then fails

Test: Upload 0-byte file
Good: Rejects with message
Bad: Saves broken file

---

The Nuclear Option

Ultimate Stress Test

Do all of these at once:
1. Slow 3G connection
2. Fill every field with maximum data
3. Double-click all buttons
4. Open 5 tabs doing different things
5. Go offline mid-action
6. Rotate device continuously
7. Paste 10,000 characters everywhere
8. Refresh randomly

If app survives: Very robust
If app breaks: You found bugs!

---

Automated Breaking (Optional)

Simple Script

// Run in browser console
// Clicks "submit" button 100 times
for(let i=0; i<100; i++) {
  document.querySelector('button[type="submit"]').click();
}

Monkey Testing Tools

• Gremlins.js - Random clicks and inputs
• FuzzDB - Malicious input strings
• Chrome DevTools - Throttling, offline mode

---

What to Do When Things Break

When you find a bug:

1. Document it:

• Exact steps to reproduce
• Screenshot/video
• Browser and device
• Frequency

2. Assess severity:

• Blocker: Can't use app at all
• Critical: Main feature broken
• Major: Important feature broken
• Minor: Edge case, rare issue

3. Give to AI to fix:

Found bug: [paste documentation]
Severity: [level]
Please fix and verify it doesn't break anything else.

4. Test the fix:

• Reproduce original bug (should be gone)
• Test related features (no regression)
• Try to break fix in new ways

---

Breaking Things Checklist

Before every deploy:

- [ ] Clicked buttons rapidly
- [ ] Entered 1000+ characters in fields
- [ ] Tested with slow 3G
- [ ] Tested offline scenario
- [ ] Tried to access protected routes
- [ ] Submitted forms twice
- [ ] Refreshed during actions
- [ ] Tested on mobile device
- [ ] Rotated device during use
- [ ] Tried SQL/HTML injection

If nothing broke: Either very robust or need to try harder!

Edge Case Testing

Comprehensive list of edge cases to test.

---

Input Edge Cases

Text Fields

Empty:

• Required field left blank
• Optional field left blank
• Space-only input (" ")

Length:

• Exactly at max limit (if 50 chars, enter 50)
• One over max limit (enter 51)
• Extremely long (10,000 characters)
• Single character

Special characters:

• Emoji: 🎉💀🔥
• Accents: café, naïve, Zürich
• Quotes: "test" 'test' test
• HTML: <script>alert('xss')</script>
• SQL: '; DROP TABLE users;--
• Newlines and tabs

Case sensitivity:

• ALL CAPS
• all lowercase
• MiXeD cAsE

---

Number Fields

Boundaries:

• Zero
• Negative numbers
• Decimal numbers (if integers only)
• Very large numbers (999999999)
• Scientific notation (1e10)

Invalid:

• Letters in number field
• Special characters: $1,000
• Multiple decimals: 12.34.56

---

Email Fields

Valid formats:

• simple@example.com
• name+tag@example.com
• name.with.dots@example.com

Invalid formats:

• No @ sign: plaintext
• No domain: user@
• No username: @domain.com
• Multiple @: user@@example.com
• Spaces: user @example.com

---

Date/Time Fields

Boundaries:

• Past dates (when not allowed)
• Future dates (when not allowed)
• February 29 (leap year)
• Invalid dates: Feb 30, April 31

Formats:

• Different input formats
• Different display formats
• Timezone handling

---

Dropdown/Select

Edge cases:

• Nothing selected (if required)
• First option selected
• Last option selected
• Very long option text (does it truncate?)

---

Checkboxes

Edge cases:

• None selected (if at least one required)
• All selected
• Checking/unchecking rapidly

---

File Upload

File types:

• Correct type (PDF, JPG)
• Wrong type (EXE, ZIP)
• No extension: file
• Multiple extensions: file.pdf.exe

File sizes:

• Empty file (0 bytes)
• Exactly at limit (5MB file, 5MB limit)
• Slightly over limit (5.1MB)
• Huge file (100MB+)

File names:

• Very long filename (200+ chars)
• Special characters: file!@#$.jpg
• Non-English: 文档.pdf
• Spaces: my file.pdf
• No extension

---

List/Table Edge Cases

Data volume:

• Empty list (0 items)
• Single item
• Exactly one page (50 items)
• Multiple pages (500 items)
• Huge list (10,000+ items)

Item content:

• Very long title (breaks layout?)
• No title/description
• Special characters in data
• Mixed data types

---

URL/Link Edge Cases

Valid URLs:

• https://example.com
• http://example.com (if allowed)
• www.example.com (missing protocol)
• example.com (missing protocol)

Invalid URLs:

• Not a URL: "banana"
• JavaScript: javascript:alert('xss')
• Internal IPs: http://192.168.1.1
• File protocol: file:///etc/passwd

---

User Action Edge Cases

Timing

Too fast:

• Double-click submit button
• Click back button immediately
• Type and submit before validation

Too slow:

• Fill form, wait 30 min, submit
• Start action, let session expire
• Open page, leave for hour, interact

Multiple actions

Concurrent:

• Open same page in 2 tabs
• Edit in tab 1, save in tab 2
• Log out in one tab, act in another

Repeated:

• Click button 10 times fast
• Submit form 5 times
• Refresh page repeatedly

Unexpected order

Skip steps:

• Navigate directly to step 3 of 5
• Access protected route while logged out
• Submit without filling required fields

Go backwards:

• Click back button after submit
• Use browser back (not app navigation)
• Edit after finalizing

---

Network Edge Cases

Connection:

• Slow connection (3G)
• Disconnected mid-action
• Intermittent connection
• Very high latency (500ms+)

Errors:

• 500 Internal Server Error
• 404 Not Found
• 503 Service Unavailable
• Timeout (no response)

---

Browser/Device Edge Cases

Browser

Storage:

• Cookies disabled
• Local storage full
• Private/incognito mode

Settings:

• JavaScript disabled
• Ad blocker active
• Browser extensions interfering

Device

Screen sizes:

• Very small (320px width)
• Very large (4K monitor)
• Non-standard aspect ratio

Performance:

• Old/slow device
• Low memory
• CPU throttled

---

Data State Edge Cases

New user:

• First login (onboarding flow)
• No data created yet
• Empty dashboard

Active user:

• Normal amount of data
• Some incomplete actions
• Recent activity

Power user:

• Lots of data (1000+ items)
• Complex setup
• Heavy usage patterns

Inactive user:

• Account dormant for months
• Old data format
• Deprecated features used

---

Authentication Edge Cases

Session:

• Session expired mid-action
• Multiple concurrent sessions
• Session hijacking attempts

Permissions:

• Try to access admin route as regular user
• View another user's data
• Edit data you don't own

Token:

• Expired token
• Invalid token
• Missing token
• Malformed token

---

Payment Edge Cases

Card validation:

• Test card: 4242 4242 4242 4242
• Declined card: 4000 0000 0000 0002
• Insufficient funds: 4000 0000 0000 9995
• Expired card
• Invalid CVV

Billing:

• Upgrade mid-cycle
• Downgrade mid-cycle
• Cancel with refund
• Failed payment retry

---

Search Edge Cases

Query:

• Empty search
• Single character: "a"
• Very long query (500 chars)
• Special characters: *?%
• SQL injection attempt

Results:

• No results
• One result
• Thousands of results
• Exact match
• Partial match

---

Real-Time Edge Cases

Updates:

• Data changes while user viewing
• Conflict: two users edit same item
• Delete item user is viewing
• Update item user is editing

Notifications:

• Single notification
• 100 notifications at once
• Notification while user typing
• Old unread notifications

---

Mobile-Specific Edge Cases

Gestures:

• Swipe vs scroll
• Long press
• Pinch to zoom (if allowed)
• Pull to refresh

Orientation:

• Start portrait, rotate to landscape
• Rotate while form open
• Rotate during action

Keyboard:

• Keyboard covers input
• Auto-correct changes input
• Keyboard shortcuts (if any)

---

Quick Edge Case Test

10-minute edge case test:

1. Leave required field empty → error?
2. Enter 1000 characters in text field → truncate or error?
3. Double-click submit button → prevents double submit?
4. Enter HTML/SQL in text field → sanitized?
5. Upload 10MB file (over limit) → clear error?
6. Go offline, try action → handles gracefully?
7. Very long item name → layout breaks?
8. Open 2 tabs, log out in one → other tab handles?
9. Enter invalid email → validates?
10. Submit form, immediately refresh → doesn't resubmit?

Testing Scenarios

Common scenarios to test for SaaS applications.

---

Authentication Scenarios

Signup Flow

Happy Path:
1. Enter valid email and password
2. Click "Sign Up"
3. See "Check your email" message
4. Click link in email
5. Redirected to dashboard

Edge Cases:
- Email already registered: "Email already in use"
- Weak password: "Password must be 8+ characters"
- Invalid email format: "Enter valid email"
- Email link expired: "Link expired. Request new one"
- Email link already used: "Already confirmed. Log in"

Login Flow

Happy Path:
1. Enter correct email and password
2. Click "Log In"
3. Redirected to dashboard

Edge Cases:
- Wrong password: "Invalid email or password"
- Account doesn't exist: "Invalid email or password"
- Too many attempts: "Too many attempts. Try again in 15 minutes"
- Session expired: Redirect to login with message

Password Reset

Happy Path:
1. Click "Forgot Password"
2. Enter email
3. Click link in email
4. Enter new password
5. See "Password updated" message
6. Can log in with new password

Edge Cases:
- Email not found: "If email exists, we sent a link"
- Reset link expired: "Link expired. Request new one"
- Passwords don't match: "Passwords must match"
- Weak new password: "Password requirements not met"

---

Form Scenarios

Contact Form

Happy Path:
1. Fill in name, email, message
2. Click "Send"
3. See "Message sent!" confirmation
4. Form clears

Edge Cases:
- Missing required field: "This field is required"
- Invalid email: "Enter valid email address"
- Message too short: "Message must be at least 10 characters"
- Submit while loading: Button disabled, show spinner
- Network error: "Could not send. Try again"

Profile Update

Happy Path:
1. Change name
2. Upload new photo
3. Click "Save"
4. See "Profile updated!" message
5. Changes reflected immediately

Edge Cases:
- No changes made: "No changes to save"
- Image too large: "Image must be under 5MB"
- Invalid image type: "Only JPG and PNG allowed"
- Name too long: "Max 50 characters"
- Save during upload: Wait for upload, then save

---

Data Display Scenarios

List/Table View

Happy Path:
1. Load page
2. See list of items
3. Click item to view details
4. Navigate between pages

Edge Cases:
- No items: "No items yet. Create your first one!"
- Loading: Show skeleton/spinner
- Error loading: "Could not load. Try refreshing"
- Very long list: Paginate (50 items/page)
- Search with no results: "No matches found"

Dashboard

Happy Path:
1. Load dashboard
2. See metrics update
3. Charts render correctly
4. Data is current

Edge Cases:
- No data yet: "Getting started? Here's what to do"
- Data still loading: Show skeleton cards
- API fails: Show cached data + "Using cached data"
- Very large numbers: Format (1.2M not 1200000)
- Negative values: Handle gracefully (red color, parentheses)

---

Payment Scenarios

Checkout

Happy Path:
1. Select plan
2. Enter card details (Stripe)
3. Click "Subscribe"
4. See success message
5. Receive email receipt
6. Access pro features

Edge Cases:
- Card declined: "Payment failed. Try different card"
- Missing card details: "Enter card information"
- Invalid card: "Invalid card number"
- Expired card: "Card is expired"
- Network timeout: "Payment processing. Check email for confirmation"

Subscription Management

Happy Path:
1. View current plan
2. Change to different plan
3. Confirm change
4. See updated features
5. Receive confirmation email

Edge Cases:
- Downgrade with data loss: "Downgrading will remove X. Continue?"
- Cancel subscription: "Cancel subscription? Access until [date]"
- Reactivate cancelled: "Reactivate subscription?"
- Payment method failed: "Update payment method to continue"

---

File Upload Scenarios

Single File Upload

Happy Path:
1. Click "Upload"
2. Select file
3. See progress bar
4. File uploads successfully
5. See uploaded file

Edge Cases:
- File too large: "Max 5MB"
- Wrong file type: "Only PDF and images allowed"
- Network error during upload: "Upload failed. Try again"
- File with same name exists: "File already exists. Replace?"
- Cancel during upload: Stop upload, remove partial

Multiple Files

Happy Path:
1. Select multiple files
2. See all files listed
3. Upload starts automatically
4. Progress shown for each
5. All succeed

Edge Cases:
- Some files invalid: "3 files uploaded, 2 failed"
- Mixed success/failure: Show status per file
- Very slow connection: Show time remaining estimate
- Upload folder: "Folders not supported"

---

Search Scenarios

Basic Search

Happy Path:
1. Enter search term
2. Results appear instantly
3. Click result to view
4. Highlight matching text

Edge Cases:
- No results: "No matches for 'term'. Try different keywords"
- Search while typing: Debounce (wait 300ms)
- Special characters: Handle gracefully
- Very long search term: Truncate, still search
- Empty search: Show all items or recent

Advanced Search

Happy Path:
1. Enter search with filters
2. Results match all criteria
3. Clear filters individually
4. Results update

Edge Cases:
- Conflicting filters: "No items match all filters"
- Invalid date range: "End date must be after start date"
- Too many results: "500+ results. Narrow your search"
- Filters with no results: "0 results. Try removing filters"

---

Navigation Scenarios

Multi-Step Form

Happy Path:
1. Complete step 1
2. Click "Next"
3. Complete step 2
4. Click "Next"
5. Review and submit
6. See confirmation

Edge Cases:
- Click "Next" without completing: "Complete required fields"
- Click "Back": Previous data preserved
- Refresh page mid-flow: Resume where left off
- Abandon and return: Resume or start over?
- Invalid step: Jump directly to step 3 in URL

Tabs

Happy Path:
1. Click tab
2. Content switches
3. Tab stays active on refresh
4. Deep link to tab works

Edge Cases:
- Unsaved changes: "You have unsaved changes. Leave?"
- Loading new tab: Show loading state
- Tab with error: Show error, don't break all tabs
- Too many tabs: Horizontal scroll or dropdown

---

Real-Time Scenarios

Live Updates

Happy Path:
1. Data changes on server
2. UI updates automatically
3. Smooth transition, no flicker
4. User sees latest data

Edge Cases:
- User editing during update: Don't overwrite
- Conflict (2 users edit): Show conflict resolution
- Connection lost: Show "Offline" banner
- Reconnect: Sync changes, show what happened

Notifications

Happy Path:
1. Event occurs
2. Notification appears
3. Click to view details
4. Mark as read

Edge Cases:
- Many notifications: Group similar ones
- Notification while typing: Don't interrupt
- Old notifications: Auto-mark read after 7 days
- Disabled notifications: Store, show in app only

---

Error Recovery Scenarios

Network Failure

Test:
1. Start action
2. Disable network (DevTools)
3. Action fails
4. Re-enable network
5. Retry action

Expected:
- Clear error message
- Easy retry (button or auto-retry)
- Don't lose user's data
- Recover gracefully when back online

Session Expiry

Test:
1. Log in
2. Wait 30 minutes (or change system time)
3. Try to perform action
4. Session expired

Expected:
- Redirect to login
- Show "Session expired. Please log in"
- After re-login, return to where they were
- Don't lose unsaved data if possible

---

Mobile-Specific Scenarios

Portrait/Landscape

Test:
1. Open app in portrait
2. Rotate to landscape
3. Rotate back to portrait

Expected:
- Layout adapts smoothly
- No content cut off
- Maintain scroll position
- Inputs don't lose focus

Touch Interactions

Test:
1. Tap buttons (not click)
2. Swipe to scroll
3. Pinch to zoom (if allowed)
4. Long press (if used)

Expected:
- Tap targets 44x44px minimum
- No hover states (they stick)
- Smooth scrolling
- No accidental taps

---

Accessibility Scenarios

Keyboard Navigation

Test:
1. Use only Tab key
2. Navigate through forms
3. Submit with Enter
4. Escape closes modals

Expected:
- All interactive elements reachable
- Visible focus indicator
- Logical tab order
- Shortcuts work

Screen Reader

Test (with VoiceOver/NVDA):
1. Navigate page with screen reader
2. Forms are labeled
3. Buttons are described
4. Images have alt text

Expected:
- Content makes sense
- No "button button button"
- Form errors announced
- Skip links available

---

Quick Scenario Checklist

Before every deploy:

- [ ] Sign up and log in
- [ ] Complete main user flow
- [ ] Submit a form (valid and invalid)
- [ ] Upload a file
- [ ] Search for something
- [ ] View list/table
- [ ] Edit something and save
- [ ] Delete something
- [ ] Check mobile layout
- [ ] Try in Safari