How to Use This Checklist
This checklist is designed to be used during active testing sessions. When you're assigned a component to review, open this page alongside the feature and work through each section systematically. Don't try to memorize it—treat it as a reference guide.
Each section represents a critical testing dimension: layout and visual consistency, interactive behavior, form validation, error handling, and edge cases. A component isn't ready to ship until it passes all five. Your job is to find what breaks before users do.
Your goal isn't to prove the feature works—it's to try to break it. Click things twice. Leave fields empty. Enter garbage data. Resize the window. Use the back button. The more creative you are in finding failure modes, the more valuable your testing becomes.
- Desktop view (1920×1080): Elements aligned, text readable, no overflow, spacing consistent with other pages.
- Laptop view (1366×768): Content fits without horizontal scroll, buttons remain accessible, no text cutoff.
- Tablet view (768×1024): Layout adapts cleanly, touch targets large enough, no overlapping elements.
- Mobile view (375×667): Single-column layout, all controls reachable, text scales appropriately.
- Font rendering: DM Sans and Playfair Display load correctly, weights match design system, no FOUT (flash of unstyled text).
- Colors and contrast: Background `#0d1117`, surface `#161b22`, text `#c9d1d9`, accent `#4a7fbd` applied consistently.
- Spacing and alignment: Margins/padding match other components, section breaks clear, visual hierarchy intact.
- Buttons respond on first click: No double-click required, no delay, no lag.
- Hover states work: Links change color to `#6fa3e0`, buttons show visual feedback, cursor changes to pointer.
- Focus states visible: Tab through all interactive elements, ensure keyboard nav works, outline or highlight appears on focus.
- Loading states shown: If an action takes time (save, fetch), show a spinner or disable the button so user knows it's processing.
- Dropdowns open/close cleanly: No flicker, options fully visible, selected value updates immediately.
- Form submission: Clicking Save/Submit triggers expected action, success message appears, page state updates.
- Cancel/back behavior: Clicking Cancel or Back returns to previous state without saving, no stray data left behind.
- Required fields enforced: Leaving a required field empty shows inline error, submit button disabled or validation message appears.
- Format validation works: Email fields reject invalid emails, phone fields enforce proper format, numeric fields reject letters.
- Error messages clear:"Please enter a valid email" not "Invalid input." Tell the user exactly what's wrong and how to fix it.
- Error placement: Inline errors appear directly below the field, not buried in a toast or hidden modal.
- Validation timing: Errors appear on blur (when user leaves the field) or on submit, not while user is still typing.
- Success confirmation: After successful save, show a clear success message, update UI to reflect the change, don't leave user guessing.
- Network failure handling: If Firebase save fails, show error message, don't silently fail, give user option to retry.
- Data saves to Firebase: After submit, open Firebase console and verify data appears in the correct path with correct structure.
- Data loads on page refresh: Reload the page—does saved data populate correctly? No blank fields where data should be.
- Updates overwrite correctly: Change a saved value and re-save—does the new value replace the old one, or does it create a duplicate?
- Timestamps accurate: If the component uses timestamps, verify they're in the correct format and timezone.
- Auth checks enforced: If the component requires login, try accessing it logged out—should redirect or show auth wall.
- Multi-user safety: If two users edit the same data simultaneously, does last-write-win work correctly, or does it corrupt the data?
- Empty state: What happens when there's no data? Should show "No items yet" not a blank screen.
- Maximum length inputs: Enter 1000 characters in a text field—does it overflow, truncate, or handle gracefully?
- Special characters: Try apostrophes, quotes, emoji, accented characters—does the system handle them or break?
- Rapid clicking: Click submit 10 times fast—does it create 10 duplicates, or is there debounce/disable logic?
- Browser back button: Submit a form, hit back—does it return to a clean state, or show stale data?
- Simultaneous edits: Open the same component in two tabs, edit in both, save—what happens?
- Slow network simulation: Throttle your connection (Chrome DevTools → Network → Slow 3G)—do loading states appear? Timeouts handled?
As you work through the checklist, take notes. If you find an issue, file a bug report immediately while it's fresh. If everything passes, submit a quick note via the Feedback Form saying "Reviewed [Component Name], all checklist items passed." Confirmation that something works is just as valuable as finding bugs.
When to File a Bug vs Feedback
Not every issue you find is a bug. Here's the quick decision tree:
- File a bug report if: Something is broken—buttons don't work, validation fails, data doesn't save, layout is broken, errors appear unexpectedly.
- File feedback if: It works but could be better—confusing labels, awkward workflow, missing feature, styling inconsistency, usability improvement.
- File both if: You found a bug and you have an idea for how to prevent it in the future. Example: "Save button breaks if clicked twice (bug) — suggest disabling button after first click (feedback)."
After the Review
Once you've completed your review using this checklist, mark the assignment as complete in the portal and add a summary note. Example: "Tested Case Intake Form on desktop and mobile. Found 2 validation bugs (filed), 1 layout issue on tablet (filed), otherwise all checklist items passed."
Your thoroughness here directly impacts launch readiness. A component that passes all five sections of this checklist is ready for production. One that doesn't needs another round of testing after fixes. Take your time, be systematic, and document everything.