# Multi-Step Forms Manual Testing Checklist

## Overview

This checklist provides comprehensive manual testing procedures for verifying browser extension behavior on multi-step authentication forms. Use this document to ensure Q icon (LockNKey autofill button) appears correctly after password fields become visible.

**Testing Date**: _______________
**Tester Name**: _______________
**Extension Version**: _______________
**Browser**: Chrome / Firefox / Edge (circle one)
**Browser Version**: _______________

---

## Test Environment Setup

### Prerequisites

- [ ] LockNKey browser extension installed and active
- [ ] Extension built using `npm run build:extension`
- [ ] Browser DevTools open (Console tab) to view logs
- [ ] Screen recording software ready (optional, for bug reports)
- [ ] Test user accounts created (if testing actual login flows)

### Extension Verification

1. **Check Extension Installation**
   - [ ] Navigate to `chrome://extensions/` (or `about:addons` for Firefox)
   - [ ] Verify LockNKey extension is enabled
   - [ ] Note extension ID: _______________

2. **Verify Console Logging**
   - [ ] Open any webpage
   - [ ] Open DevTools Console (F12)
   - [ ] Look for "LockNKey: Content script initializing..." log
   - [ ] Confirm content script is running

---

## Test Sites

### 1. OneLogin (broward.onelogin.com)

**Pattern**: Email first → Continue → Password second

#### Step 1: Email-Only Form

- [ ] **Navigate**: Go to `https://broward.onelogin.com/login`
- [ ] **Wait for Load**: Page fully loaded (~3 seconds)
- [ ] **Verify Email Field**: Email input visible
- [ ] **Check Password Field**: Password field NOT visible
- [ ] **Verify Q Icon**: Q icon should NOT appear (no password field)
- [ ] **Console Check**: Look for form detection logs

**Expected Result**: ❌ No Q icon visible
**Actual Result**: _________________
**Screenshot**: _________________

#### Step 2: Password Field Appears

- [ ] **Enter Email**: Type `test@example.com` in email field
- [ ] **Click Continue**: Click "Continue" button
- [ ] **Wait for Password**: Password field appears (~1-2 seconds)
- [ ] **Verify Q Icon**: Q icon should appear on right side of password field
- [ ] **Check Position**: Q icon positioned to the left of eye icon
- [ ] **Console Check**: Look for "LockNKey: Detected 1 login form(s)"

**Expected Result**: ✅ Q icon visible and positioned correctly
**Actual Result**: _________________
**Screenshot**: _________________

#### Q Icon Visual Verification

- [ ] **Quantum Badge**: Q icon shows purple gradient "Q" badge
- [ ] **Hover Effect**: Hover shows scale animation
- [ ] **Click Test**: Click Q icon opens credential dialog
- [ ] **No Overlap**: Q icon does not overlap eye icon

**Notes**: _________________

---

### 2. TradingView (tradingview.com)

**Pattern**: Modal-based authentication

#### Initial Page Load

- [ ] **Navigate**: Go to `https://www.tradingview.com/`
- [ ] **Verify No Q Icon**: Q icon should not appear (no login form visible)

**Expected Result**: ❌ No Q icon visible
**Actual Result**: _________________

#### Open Sign In Modal

- [ ] **Click Sign In**: Click "Sign in" button in header
- [ ] **Wait for Modal**: Authentication modal appears
- [ ] **Check Form Type**: Single-step or multi-step?
  - [ ] Single-step: Email and password both visible
  - [ ] Multi-step: Email only, then password

#### If Single-Step Form

- [ ] **Verify Password Field**: Password field visible in modal
- [ ] **Verify Q Icon**: Q icon appears immediately
- [ ] **Check Position**: Q icon positioned correctly

**Expected Result**: ✅ Q icon visible in modal
**Actual Result**: _________________
**Screenshot**: _________________

#### If Multi-Step Form

- [ ] **Email Step**: Enter email, verify NO Q icon
- [ ] **Click Next**: Proceed to password step
- [ ] **Password Step**: Password field appears
- [ ] **Verify Q Icon**: Q icon appears after password field loads

**Expected Result**: ✅ Q icon appears on password step
**Actual Result**: _________________
**Screenshot**: _________________

---

### 3. Facebook (facebook.com)

**Pattern**: Single-step form (email and password both visible)

#### Login Form Verification

- [ ] **Navigate**: Go to `https://www.facebook.com/`
- [ ] **Wait for Load**: Page fully loaded
- [ ] **Verify Email Field**: Email/phone input visible
- [ ] **Verify Password Field**: Password input visible
- [ ] **Verify Q Icon**: Q icon appears immediately on password field
- [ ] **Check Position**: Q icon on right side, no overlap with eye icon

**Expected Result**: ✅ Q icon visible on page load
**Actual Result**: _________________
**Screenshot**: _________________

#### Q Icon Interaction

- [ ] **Hover**: Hover over Q icon shows animation
- [ ] **Click**: Click Q icon opens credential dialog
- [ ] **Empty State**: Dialog shows "No credentials" or "Generate Password"

**Notes**: _________________

---

### 4. Google (accounts.google.com)

**Pattern**: Email first → Next → Password second

#### Step 1: Email Step

- [ ] **Navigate**: Go to `https://accounts.google.com/`
- [ ] **Verify Email Field**: Email input visible
- [ ] **Check Password Field**: Password field NOT visible
- [ ] **Verify Q Icon**: Q icon should NOT appear

**Expected Result**: ❌ No Q icon visible
**Actual Result**: _________________
**Screenshot**: _________________

#### Step 2: Password Step

- [ ] **Enter Email**: Type `test@example.com`
- [ ] **Click Next**: Click "Next" button
- [ ] **Wait for Password**: New page/step loads with password field
- [ ] **Verify Q Icon**: Q icon appears on password field
- [ ] **Check Position**: Q icon positioned correctly

**Expected Result**: ✅ Q icon visible on password step
**Actual Result**: _________________
**Screenshot**: _________________

---

### 5. Microsoft (login.microsoftonline.com)

**Pattern**: Email first → Next → Password second

#### Step 1: Email Step

- [ ] **Navigate**: Go to `https://login.microsoftonline.com/`
- [ ] **Verify Email Field**: Email input visible
- [ ] **Check Password Field**: Password field NOT visible
- [ ] **Verify Q Icon**: Q icon should NOT appear

**Expected Result**: ❌ No Q icon visible
**Actual Result**: _________________
**Screenshot**: _________________

#### Step 2: Password Step

- [ ] **Enter Email**: Type `test@example.com`
- [ ] **Click Next**: Click "Next" button
- [ ] **Wait for Password**: Password field appears
- [ ] **Verify Q Icon**: Q icon appears on password field
- [ ] **Check Position**: Q icon positioned correctly

**Expected Result**: ✅ Q icon visible on password step
**Actual Result**: _________________
**Screenshot**: _________________

---

## Edge Cases & Special Scenarios

### Dynamic Content Loading

#### React/Next.js Hydration

- [ ] **Test Site**: localhost:3000 (LockNKey app)
- [ ] **Hard Refresh**: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
- [ ] **Verify Detection**: Q icon appears after hydration (~500ms-1000ms)
- [ ] **Console Check**: Look for retry detection logs

**Expected Result**: ✅ Q icon appears after hydration
**Actual Result**: _________________

#### SPA Navigation

- [ ] **Navigate**: Go to site with SPA (e.g., TradingView)
- [ ] **Click Link**: Navigate to different page within app
- [ ] **Return to Login**: Navigate back to login page
- [ ] **Verify Q Icon**: Q icon still appears correctly

**Expected Result**: ✅ Q icon appears on navigation
**Actual Result**: _________________

### Multiple Forms on Same Page

- [ ] **Test Site**: Create test page with 2+ login forms
- [ ] **Verify Detection**: Multiple Q icons appear (one per form)
- [ ] **Check Independence**: Each Q icon functions independently

**Expected Result**: ✅ Q icon appears on all password fields
**Actual Result**: _________________

### Orphan Password Inputs (No `<form>` Tag)

- [ ] **Test Site**: Custom React login (no `<form>` wrapper)
- [ ] **Check Detection**: Password input detected
- [ ] **Verify Q Icon**: Q icon appears (if implemented)

**Expected Result**: ✅ Q icon appears on orphan password inputs
**Actual Result**: _________________
**Note**: May require enhancement if not currently implemented

---

## Q Icon Positioning Tests

### Visual Positioning

- [ ] **Right Side**: Q icon on right side of password field
- [ ] **No Overlap**: Does not overlap eye icon (password visibility toggle)
- [ ] **Alignment**: Vertically centered with password field
- [ ] **Z-Index**: Q icon appears above all other elements

**Expected Result**: ✅ Q icon positioned correctly
**Actual Result**: _________________

### Responsive Design

#### Desktop (1920x1080)

- [ ] **Test Site**: facebook.com
- [ ] **Verify Position**: Q icon positioned correctly
- [ ] **Screenshot**: _________________

#### Tablet (768x1024)

- [ ] **Resize Window**: 768px width
- [ ] **Verify Position**: Q icon adapts to smaller screen
- [ ] **Screenshot**: _________________

#### Mobile (375x667)

- [ ] **Resize Window**: 375px width
- [ ] **Verify Position**: Q icon visible and functional
- [ ] **Screenshot**: _________________

### Scroll Behavior

- [ ] **Test Site**: Long page with login form
- [ ] **Scroll Down**: Scroll password field out of view
- [ ] **Verify Q Icon**: Q icon moves with password field (fixed positioning)
- [ ] **Scroll Up**: Return to password field
- [ ] **Verify Position**: Q icon still correctly positioned

**Expected Result**: ✅ Q icon follows password field on scroll
**Actual Result**: _________________

### Window Resize

- [ ] **Test Site**: facebook.com
- [ ] **Initial Size**: 1920x1080
- [ ] **Note Position**: Record Q icon position
- [ ] **Resize**: Change to 1280x720
- [ ] **Verify Update**: Q icon repositions correctly

**Expected Result**: ✅ Q icon updates position on resize
**Actual Result**: _________________

---

## Q Icon Interaction Tests

### Click Behavior

- [ ] **Click Q Icon**: Click on Q icon
- [ ] **Verify Dialog**: Credential selection dialog opens
- [ ] **Check Content**: Dialog shows credentials or empty state
- [ ] **Close Dialog**: Close dialog, Q icon still visible

**Expected Result**: ✅ Dialog opens on click
**Actual Result**: _________________

### Keyboard Accessibility

- [ ] **Tab Focus**: Tab to Q icon
- [ ] **Visual Focus**: Focus indicator visible
- [ ] **Enter Key**: Press Enter, dialog opens
- [ ] **Space Key**: Press Space, dialog opens

**Expected Result**: ✅ Q icon keyboard accessible
**Actual Result**: _________________

### Hover State

- [ ] **Hover**: Hover over Q icon
- [ ] **Visual Change**: Scale animation or color change
- [ ] **Tooltip**: Tooltip shows "LockNKey - Quantum-Protected Auto-fill"

**Expected Result**: ✅ Hover effects work
**Actual Result**: _________________

---

## Performance Tests

### Detection Speed

- [ ] **Test Site**: facebook.com
- [ ] **Hard Refresh**: Clear cache and reload
- [ ] **Time Detection**: Measure time until Q icon appears
- [ ] **Target**: < 500ms for immediate detection, < 1500ms for retry detection

**Expected Result**: ✅ Q icon appears within target time
**Actual Result**: _______ ms
**Performance**: Pass / Fail (circle one)

### Multi-Step Detection Speed

- [ ] **Test Site**: OneLogin
- [ ] **Time Step 2**: Measure time from Continue click to Q icon appearing
- [ ] **Target**: < 300ms after password field appears

**Expected Result**: ✅ Q icon appears quickly after password field
**Actual Result**: _______ ms
**Performance**: Pass / Fail (circle one)

---

## Console Error Checking

### Check for JavaScript Errors

- [ ] **Test Each Site**: Run through all 5 test sites
- [ ] **Console Check**: Look for red errors in console
- [ ] **Document Errors**: List any errors found

**Errors Found**:
```
Site: _________________
Error: _________________

Site: _________________
Error: _________________
```

### Check for Content Script Logs

Expected logs:
- "LockNKey: Content script initializing..."
- "LockNKey: Detected N login form(s)"
- "LockNKey: Setting up form"

- [ ] **Verify Logs**: All expected logs present
- [ ] **No Warnings**: No yellow warnings in console

**Notes**: _________________

---

## Bug Reporting

### If Q Icon Does NOT Appear

**Site**: _________________
**Steps to Reproduce**:
1. _________________
2. _________________
3. _________________

**Expected Behavior**: Q icon should appear on password field
**Actual Behavior**: _________________

**Console Errors**: _________________

**Screenshots**: _________________

**Browser Details**:
- Browser: _________________
- Version: _________________
- OS: _________________
- Screen Resolution: _________________

### If Q Icon Positioned Incorrectly

**Site**: _________________
**Issue Description**: _________________

**Screenshot**: _________________ (annotate with expected vs. actual position)

**Console Errors**: _________________

---

## Test Summary

### Overall Results

| Test Site | Step 1 (No Q Icon) | Step 2 (Q Icon Appears) | Positioning | Interaction | Pass/Fail |
|-----------|--------------------|-----------------------------|-------------|-------------|-----------|
| OneLogin  | ⬜ | ⬜ | ⬜ | ⬜ | ⬜ |
| TradingView | ⬜ | ⬜ | ⬜ | ⬜ | ⬜ |
| Facebook  | N/A | ⬜ | ⬜ | ⬜ | ⬜ |
| Google    | ⬜ | ⬜ | ⬜ | ⬜ | ⬜ |
| Microsoft | ⬜ | ⬜ | ⬜ | ⬜ | ⬜ |

**Legend**: ✅ Pass | ❌ Fail | ⚠️ Partial | N/A Not Applicable

### Critical Issues Found

**Priority**: High / Medium / Low (circle one)

1. Issue: _________________
   - Site: _________________
   - Impact: _________________

2. Issue: _________________
   - Site: _________________
   - Impact: _________________

### Recommendations

_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

### Sign-Off

**Tester Signature**: _________________
**Date**: _________________
**Status**: ✅ Approved / ❌ Requires Fixes (circle one)

---

## Appendix: Screenshot Naming Convention

Save screenshots using this format:
```
YYYY-MM-DD-{site}-{step}-{result}.png

Examples:
2025-11-17-onelogin-step1-no-q-icon.png
2025-11-17-onelogin-step2-q-icon-visible.png
2025-11-17-facebook-q-icon-positioning.png
```

Save screenshots to: `./test-results/manual-testing/`

---

## Appendix: GIF Recording Instructions

For bug reports, record GIFs showing:
1. Full user flow (email → continue → password)
2. Q icon appearance (or lack thereof)
3. Q icon interaction (click, dialog open)

**Recommended Tools**:
- **macOS**: QuickTime Screen Recording + GIF converter
- **Windows**: ScreenToGif
- **Linux**: Peek
- **Cross-platform**: OBS Studio

**GIF Naming**:
```
YYYY-MM-DD-{site}-{issue-description}.gif

Example:
2025-11-17-onelogin-q-icon-not-appearing.gif
```
