# UI Dev Team - Complete data-testid Requirements

## 🎯 Purpose

This document provides a **complete, detailed list** of ALL missing `data-testid` attributes and temporary locators that need to be implemented in the UI code.

**Goal**: Once all attributes are added, the automation framework will be 100% aligned and ready for testing.

---

## 📊 Current Status

**DOM Validation Result**: **0 elements** with `data-testid` attributes found in live DOM.

This means **ALL** `data-testid` attributes need to be added to the rendered DOM.

---

## 📋 COMPLETE LIST OF MISSING ATTRIBUTES

### 1. LOGIN PAGE (`/` or `/login`)

**Scope**: `student_login`

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `student_login__form` | Form | ❌ Missing | Login component |
| `student_login__identifier_input` | Input | ❌ Missing | Login component |
| `student_login__password_input` | Input | ❌ Missing | Login component |
| `student_login__remember_checkbox` | Checkbox | ❌ Missing | Login component |
| `student_login__error_banner` | Error div | ❌ Missing | Login component |
| `student_login__submit_button` | Button | ❌ Missing | Login component |
| `student_login__error_toast` | Toast div | ❌ Missing | Login component (currently using XPath) |

**Total**: 7 attributes

---

### 2. DASHBOARD PAGE (`/student/dashboard`)

**Scope**: `dashboard` (optional), `profile_incomplete`

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `dashboard__welcome_message` | Heading | ❌ Missing | Dashboard component (currently using XPath) |
| `profile_incomplete__modal` | Modal | ❌ Missing | Profile incomplete modal |
| `profile_incomplete__progress_value` | Span | ❌ Missing | Profile incomplete modal |
| `profile_incomplete__complete_button` | Button | ❌ Missing | Profile incomplete modal |

**Total**: 4 attributes

---

### 3. STUDENT NAVIGATION (Header - All Pages)

**Scope**: `student_nav`

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `student_nav__dashboard_link` | Link | ❌ Missing | Navigation component |
| `student_nav__assessments_link` | Link | ❌ Missing | Navigation component |
| `student_nav__profile_button` | Button | ❌ Missing | Navigation component |
| `student_nav__profile_dropdown` | Dropdown | ❌ Missing | Navigation component |
| `student_nav__edit_profile_button` | Button | ❌ Missing | Navigation component |
| `student_nav__reset_password_button` | Button | ❌ Missing | Navigation component |
| `student_nav__sign_out_button` | Button | ❌ Missing | Navigation component |

**Total**: 7 attributes

---

### 4. MANDATORY PASSWORD RESET MODAL

**Scope**: `mandatory_reset`

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `mandatory_reset__modal` | Modal | ❌ Missing | Password reset modal |
| `mandatory_reset__continue_button` | Button | ❌ Missing | Password reset modal |
| `mandatory_reset__form` | Form | ❌ Missing | Password reset modal |
| `mandatory_reset__current_password_input` | Input | ❌ Missing | Password reset modal |
| `mandatory_reset__new_password_input` | Input | ❌ Missing | Password reset modal |
| `mandatory_reset__confirm_password_input` | Input | ❌ Missing | Password reset modal |
| `mandatory_reset__current_password_error` | Error div | ❌ Missing | Password reset modal |
| `mandatory_reset__new_password_error` | Error div | ❌ Missing | Password reset modal |
| `mandatory_reset__confirm_password_error` | Error div | ❌ Missing | Password reset modal |
| `mandatory_reset__back_button` | Button | ❌ Missing | Password reset modal |
| `mandatory_reset__submit_button` | Button | ❌ Missing | Password reset modal |

**Total**: 11 attributes

---

### 5. PROFILE EDITOR PAGE (`/student/profile-builder`)

**Scope**: `profile_editor`

#### 5.1 Page-Level Elements (3 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__page` | Main container div | ❌ Missing | `StudentProfileEditor.jsx:1629` |
| `profile_editor__progress_value` | Progress span | ❌ Missing | `StudentProfileEditor.jsx:1692` |
| `profile_editor__missing_fields_toggle` | Toggle button | ❌ Missing | `StudentProfileEditor.jsx:1701` |

#### 5.2 Navigation Buttons (4 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__prev_button` | Previous button | ❌ Missing | `StudentProfileEditor.jsx:1897` |
| `profile_editor__next_button` | Next button | ❌ Missing | `StudentProfileEditor.jsx:1907` |
| `profile_editor__cancel_button` | Cancel button | ❌ Missing | `StudentProfileEditor.jsx:1919` |
| `profile_editor__save_button` | Save button | ❌ Missing | `StudentProfileEditor.jsx:1927` |

#### 5.3 Tab Navigation (9 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__tab_personal_information` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_contact_information` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_parent_guardian` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_education_details` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_focus_areas` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_self_assessment` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_hobbies_clubs` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_achievements` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |
| `profile_editor__tab_expectations` | Tab button | ❌ Missing | `StudentProfileEditor.jsx:1831` (dynamic) |

**Note**: These are generated dynamically using `formatTestId(section.title)`. Verify the function works correctly.

#### 5.4 Tab Scroll Buttons (2 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__tabs_scroll_right_button` | Scroll button | ❌ Missing | Tab scroll container (~1850) |
| `profile_editor__tabs_scroll_left_button` | Scroll button | ❌ Missing | Tab scroll container (~1850) |

**Currently using**: XPath locators (temporary)

#### 5.5 Step 1: Personal Information (11 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__first_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:777` |
| `profile_editor__last_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:795` |
| `profile_editor__gender_select` | Select | ❌ Missing | `StudentProfileEditor.jsx:810` |
| `profile_editor__dob_input` | Date input | ❌ Missing | `StudentProfileEditor.jsx:830` |
| `profile_editor__roll_number_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:847` |
| `profile_editor__nationality_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:863` |
| `profile_editor__language_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:873` |
| `profile_editor__student_id_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:883` |
| `profile_editor__student_cpid_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:893` |
| `profile_editor__specially_abled_checkbox` | Checkbox | ❌ Missing | `StudentProfileEditor.jsx:904` |
| `profile_editor__specially_abled_details_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:917` |

#### 5.6 Step 2: Contact Information (7 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__email_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:937` |
| `profile_editor__phone_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:955` |
| `profile_editor__address_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:973` |
| `profile_editor__city_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:984` |
| `profile_editor__state_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:994` |
| `profile_editor__zip_code_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1004` |
| `profile_editor__native_state_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1014` |

#### 5.7 Step 3: Parent/Guardian (14 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__father_full_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1040` |
| `profile_editor__father_age_range_select` | Select | ❌ Missing | `StudentProfileEditor.jsx:1048` |
| `profile_editor__father_occupation_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1064` |
| `profile_editor__father_email_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1074` |
| `profile_editor__mother_full_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1093` |
| `profile_editor__mother_age_range_select` | Select | ❌ Missing | `StudentProfileEditor.jsx:1101` |
| `profile_editor__mother_occupation_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1117` |
| `profile_editor__mother_email_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1127` |
| `profile_editor__guardian_different_checkbox` | Checkbox | ❌ Missing | `StudentProfileEditor.jsx:1142` |
| `profile_editor__guardian_full_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1157` |
| `profile_editor__guardian_relationship_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1167` |
| `profile_editor__guardian_phone_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1178` |
| `profile_editor__guardian_email_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1188` |
| `profile_editor__guardian_address_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1199` |

#### 5.8 Step 4: Education Details (4 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__full_name_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1236` |
| `profile_editor__current_grade_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1247` |
| `profile_editor__section_input` | Input | ❌ Missing | `StudentProfileEditor.jsx:1257` |
| `profile_editor__board_stream_select` | Select | ❌ Missing | `StudentProfileEditor.jsx:1265` |

#### 5.9 Step 5: Focus Areas (22+ dynamic attributes)

**Short-term Focus Areas** (11 options):
- Pattern: `profile_editor__short_term_focus__{formatTestId(option)}`
- Example: `profile_editor__short_term_focus__01_academics`
- Location: `StudentProfileEditor.jsx:1301` (MultiSelectPicker with `testIdPrefix="profile_editor__short_term_focus"`)

**Long-term Focus Areas** (11 options):
- Pattern: `profile_editor__long_term_focus__{formatTestId(option)}`
- Example: `profile_editor__long_term_focus__01_academics`
- Location: `StudentProfileEditor.jsx:1333` (MultiSelectPicker with `testIdPrefix="profile_editor__long_term_focus"`)

**"Others" Text Inputs**:
- `profile_editor__short_term_focus_others_text` - Location: `StudentProfileEditor.jsx:1312`
- `profile_editor__long_term_focus_others_text` - Location: `StudentProfileEditor.jsx:1344`

**Status**: ❌ Missing - MultiSelectPicker component needs to generate these dynamically

#### 5.10 Step 6: Self-Assessment (36+ dynamic attributes)

**Strengths** (19 options):
- Pattern: `profile_editor__strength__{formatTestId(option)}`
- Example: `profile_editor__strength__1_quick_learning`
- Location: `StudentProfileEditor.jsx:1375` (MultiSelectPicker with `testIdPrefix="profile_editor__strength"`)

**Areas of Improvement** (19 options):
- Pattern: `profile_editor__improvement__{formatTestId(option)}`
- Example: `profile_editor__improvement__1_quick_learning`
- Location: `StudentProfileEditor.jsx:1407` (MultiSelectPicker with `testIdPrefix="profile_editor__improvement"`)

**"Others" Text Inputs**:
- `profile_editor__strength_others_text` - Location: `StudentProfileEditor.jsx:1386`
- `profile_editor__improvement_others_text` - Location: `StudentProfileEditor.jsx:1418`

**Status**: ❌ Missing - MultiSelectPicker component needs to generate these dynamically

#### 5.11 Step 7: Hobbies & Clubs (26+ dynamic attributes)

**Hobbies/Interests** (12 options):
- Pattern: `profile_editor__hobby__{formatTestId(option)}`
- Example: `profile_editor__hobby__01_reading`
- Location: `StudentProfileEditor.jsx:1449` (MultiSelectPicker with `testIdPrefix="profile_editor__hobby"`)

**Clubs or Teams** (12 options):
- Pattern: `profile_editor__club_{formatTestId(option)}` (NOTE: single underscore, not double)
- Example: `profile_editor__club_1_science_club`
- Location: `StudentProfileEditor.jsx:1495` (Direct mapping, not MultiSelectPicker)

**"Others" Text Inputs**:
- `profile_editor__hobby_other_text` - Location: `StudentProfileEditor.jsx:1460`
- `profile_editor__club_other_text` - Location: `StudentProfileEditor.jsx:1518`

**Status**: ❌ Missing - MultiSelectPicker and Clubs mapping need these

#### 5.12 Step 8: Achievements (5 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__achievement_academics_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:1541` |
| `profile_editor__achievement_sports_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:1551` |
| `profile_editor__achievement_cultural_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:1561` |
| `profile_editor__achievement_trained_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:1572` (conditional - adults only) |
| `profile_editor__achievement_others_textarea` | Textarea | ❌ Missing | `StudentProfileEditor.jsx:1583` |

#### 5.13 Step 9: Expectations (11+ dynamic attributes)

**Expectations** (10 options):
- Pattern: `profile_editor__expectation__{formatTestId(option)}`
- Example: `profile_editor__expectation__1_self_understanding_gain_deeper_insights_into_their_personality_strengths_and_areas_for_growth`
- Location: `StudentProfileEditor.jsx:1605` (MultiSelectPicker with `testIdPrefix="profile_editor__expectation"`)

**"Others" Text Input**:
- `profile_editor__expectation_others_text` - Location: `StudentProfileEditor.jsx:1616`

**Status**: ❌ Missing - MultiSelectPicker component needs to generate these dynamically

#### 5.14 Toast Messages (1-2 attributes)

| Required data-testid | Element Type | Current Status | File Location |
|---------------------|--------------|----------------|---------------|
| `profile_editor__toast_message` | Toast div | ❌ Missing | Toast component (currently using XPath) |
| OR separate: | | | |
| `profile_editor__success_toast` | Success toast | ❌ Missing | Toast component |
| `profile_editor__error_toast` | Error toast | ❌ Missing | Toast component |

**Currently using**: XPath `//div[@role='status']`

---

### 6. ASSESSMENTS PAGE (`/assessments`)

**Scope**: `assessment_card`

**Dynamic Pattern** (Already implemented in code, verify in DOM):
- `assessment_card__{assignmentId}` - Assessment card container
- `assessment_card__{assignmentId}_action` - Begin/Continue/Resume button

**Status**: ✅ Pattern defined, verify in DOM

---

## 📊 SUMMARY STATISTICS

### Total Missing Attributes: **~150+ base attributes + 100+ dynamic checkboxes**

**Breakdown by Page:**
- Login Page: **7 attributes**
- Dashboard Page: **4 attributes**
- Student Navigation: **7 attributes**
- Password Reset Modal: **11 attributes**
- Profile Editor Page: **~120+ base attributes + 100+ dynamic checkboxes**
- Assessments Page: **Dynamic pattern** (verify in DOM)

### Total Temporary Locators: **6 XPath locators**

1. Login error toast (XPath)
2. Dashboard welcome message (XPath)
3. Profile editor tab scroll right button (XPath - 2 variants)
4. Profile editor tab scroll left button (XPath)
5. Profile editor toast message (XPath)

---

## 🎯 IMPLEMENTATION PRIORITY

### Priority 1: CRITICAL (Must Implement First)
1. **Profile Editor - Navigation Buttons** (4)
   - `profile_editor__prev_button`
   - `profile_editor__next_button`
   - `profile_editor__cancel_button`
   - `profile_editor__save_button`

2. **Profile Editor - Tab Navigation** (9)
   - All 9 tab buttons

3. **Profile Editor - Tab Scroll Buttons** (2)
   - `profile_editor__tabs_scroll_right_button`
   - `profile_editor__tabs_scroll_left_button`

4. **Profile Editor - Steps 1-4 Basic Fields** (36)
   - All input fields, selects, textareas in Steps 1-4

### Priority 2: IMPORTANT (Required for Complete Automation)
1. **MultiSelectPicker Component Update**
   - Verify `testIdPrefix` prop is passed correctly
   - Verify `formatTestId` function generates correct IDs
   - This will automatically fix 100+ dynamic checkboxes

2. **Profile Editor - Steps 5-9** (84+ attributes)
   - All multi-select checkboxes
   - All textareas
   - All "Others" text inputs

3. **Toast Messages** (1-2)
   - Success/error toast containers

### Priority 3: NICE TO HAVE
1. Login error toast
2. Dashboard welcome message

---

## 📝 CODE EXAMPLES FOR UI DEV TEAM

### Example 1: Input Field
```jsx
<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  data-testid="profile_editor__first_name_input"  // ✅ ADD THIS
  className="..."
/>
```

### Example 2: Select Dropdown
```jsx
<select
  value={form.gender}
  onChange={(e) => handleFieldChange('gender', e.target.value)}
  data-testid="profile_editor__gender_select"  // ✅ ADD THIS
  className="..."
>
```

### Example 3: Textarea
```jsx
<textarea
  value={form.achievementsAcademics}
  onChange={(e) => handleFieldChange('achievementsAcademics', e.target.value)}
  data-testid="profile_editor__achievement_academics_textarea"  // ✅ ADD THIS
  className="..."
/>
```

### Example 4: Checkbox
```jsx
<input
  type="checkbox"
  checked={form.speciallyAbled}
  onChange={(e) => handleFieldChange('speciallyAbled', e.target.checked)}
  data-testid="profile_editor__specially_abled_checkbox"  // ✅ ADD THIS
  className="..."
/>
```

### Example 5: Button
```jsx
<button
  type="button"
  onClick={handleSave}
  data-testid="profile_editor__save_button"  // ✅ ADD THIS
  className="..."
>
  Save
</button>
```

### Example 6: Tab Button (Dynamic)
```jsx
// Current code (line 1821) - VERIFY THIS WORKS:
const tabTestId = `profile_editor__tab_${formatTestId(section.title)}`
<button
  data-testid={tabTestId}  // ✅ VERIFY THIS IS RENDERING
  onClick={() => setActiveTab(idx)}
  ...
>
```

### Example 7: MultiSelectPicker (Verify Implementation)
```jsx
// Current code (line 182) - VERIFY THIS IS WORKING:
<input
  type="checkbox"
  data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}
  // ✅ VERIFY testIdPrefix IS BEING PASSED CORRECTLY
  ...
/>
```

### Example 8: Tab Scroll Buttons
```jsx
<button
  onClick={() => scrollTabs('right')}
  data-testid="profile_editor__tabs_scroll_right_button"  // ✅ ADD THIS
  className="absolute right-0 ..."
>
  <ChevronRight ... />
</button>

<button
  onClick={() => scrollTabs('left')}
  data-testid="profile_editor__tabs_scroll_left_button"  // ✅ ADD THIS
  className="absolute left-0 ..."
>
  <ChevronLeft ... />
</button>
```

### Example 9: Toast Messages
```jsx
<div
  role="status"
  aria-live="polite"
  data-testid="profile_editor__toast_message"  // ✅ ADD THIS
  // OR separate for success/error:
  // data-testid="profile_editor__success_toast"  // for success
  // data-testid="profile_editor__error_toast"    // for errors
  className="..."
>
  {message}
</div>
```

---

## ✅ VERIFICATION STEPS

After implementation, run:

```bash
python scripts/validate_dom_locators.py
```

**Expected Result**: Should find **100%** of expected attributes (currently finding 0%).

---

## 📄 RELATED DOCUMENTS

1. `analysis/COMPLETE_MISSING_LOCATORS_LIST.md` - Detailed breakdown
2. `analysis/TEMPORARY_LOCATORS_TO_REPLACE.md` - Temporary locators list
3. `analysis/dom_validation_results.json` - Current DOM validation results

---

**Document Version**: 1.0  
**Status**: Ready for UI Dev Team Implementation  
**Next Step**: After implementation, re-run DOM validation to verify 100% alignment