# 🎯 COMPLETE DATA-TESTID ATTRIBUTES REQUIREMENT DOCUMENT
## For UI Development Team - Student Profile Editor

**Date:** 2025-11-20  
**Priority:** 🔴 **CRITICAL - BLOCKING AUTOMATION**  
**Status:** ❌ **ALL ATTRIBUTES MISSING**

---

## 📋 **EXECUTIVE SUMMARY**

**ALL form fields, buttons, and interactive elements in `StudentProfileEditor.jsx` are MISSING `data-testid` attributes.**

This document provides the **COMPLETE LIST** of all required attributes with exact naming conventions.

**Total Required:** ~250+ attributes

---

## 🔑 **NAMING PATTERN (MANDATORY)**

### **Pattern:**
```
{scope}__{element_name}_{type}
```

### **Rules:**
1. **Scope:** Always `profile_editor`
2. **Separator:** Double underscore `__` between scope and element name
3. **Element Name:** Snake_case (lowercase with underscores)
4. **Type Suffix:** 
   - `_input` for text inputs
   - `_select` for dropdowns
   - `_textarea` for text areas
   - `_checkbox` for checkboxes
   - `_button` for buttons
   - `_tab` for tab buttons

### **Examples:**
- ✅ `profile_editor__first_name_input`
- ✅ `profile_editor__gender_select`
- ✅ `profile_editor__save_button`
- ❌ `profile_editor_first_name` (single underscore)
- ❌ `profileEditor__first_name` (camelCase)

---

## 📊 **TAB STRUCTURE**

The profile editor has **9 sections** (tabs):

1. **Personal Information** (Tab 1)
2. **Contact Information** (Tab 2) 
3. **Parent/Guardian Information** (Tab 3)
4. **Education Details** (Tab 4)
5. **Focus Areas** (Tab 5)
6. **Self-Assessment** (Tab 6)
7. **Hobbies & Clubs** (Tab 7)
8. **Achievements** (Tab 8)
9. **Expectations** (Tab 9)

---

## 🚨 **MISSING ATTRIBUTES BY SECTION**

### **1. PAGE-LEVEL ELEMENTS**

| Element | Required Attribute | Current Status | Location |
|---------|-------------------|----------------|----------|
| Page container | `profile_editor__page` | ❌ MISSING | Line ~1514 |
| Progress value | `profile_editor__progress_value` | ❌ MISSING | Line ~1576 |
| Missing fields toggle | `profile_editor__missing_fields_toggle` | ❌ MISSING | Line ~1579 |

---

### **2. TAB NAVIGATION**

| Element | Required Attribute | Current Status | Location |
|---------|-------------------|----------------|----------|
| Tab 1 button | `profile_editor__tab_personal_information` | ❌ MISSING | Line ~1702 |
| Tab 2 button | `profile_editor__tab_contact_information` | ❌ MISSING | Line ~1702 |
| Tab 3 button | `profile_editor__tab_parent_guardian` | ❌ MISSING | Line ~1702 |
| Tab 4 button | `profile_editor__tab_education_details` | ❌ MISSING | Line ~1702 |
| Tab 5 button | `profile_editor__tab_focus_areas` | ❌ MISSING | Line ~1702 |
| Tab 6 button | `profile_editor__tab_self_assessment` | ❌ MISSING | Line ~1702 |
| Tab 7 button | `profile_editor__tab_hobbies_clubs` | ❌ MISSING | Line ~1702 |
| Tab 8 button | `profile_editor__tab_achievements` | ❌ MISSING | Line ~1702 |
| Tab 9 button | `profile_editor__tab_expectations` | ❌ MISSING | Line ~1702 |
| Scroll left button | `profile_editor__tabs_scroll_left_button` | ❌ MISSING | Line ~1682 |
| Scroll right button | `profile_editor__tabs_scroll_right_button` | ❌ MISSING | Line ~1728 |

---

### **3. NAVIGATION BUTTONS**

| Element | Required Attribute | Current Status | Location |
|---------|-------------------|----------------|----------|
| Previous button | `profile_editor__prev_button` | ❌ MISSING | Line ~1769 |
| Next button | `profile_editor__next_button` | ❌ MISSING | Line ~1778 |
| Cancel button | `profile_editor__cancel_button` | ❌ MISSING | Line ~1790 |
| Save button | `profile_editor__save_button` | ❌ MISSING | Line ~1797 |

---

### **4. TAB 1: PERSONAL INFORMATION**

| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| First Name | `profile_editor__first_name_input` | `<input type="text">` | ❌ MISSING | Line ~766 |
| Last Name | `profile_editor__last_name_input` | `<input type="text">` | ❌ MISSING | Line ~775 |
| Gender | `profile_editor__gender_select` | `<select>` | ❌ MISSING | Line ~784 |
| Date of Birth | `profile_editor__dob_input` | `<input type="date">` | ❌ MISSING | Line ~796 |
| Age | `profile_editor__age_input` | `<input type="number">` | ❌ MISSING | (Auto-calculated) |
| Nationality | `profile_editor__nationality_input` | `<input type="text">` | ❌ MISSING | Line ~804 |
| Language | `profile_editor__language_input` | `<input type="text">` | ❌ MISSING | Line ~813 |
| Student ID Number | `profile_editor__student_id_input` | `<input type="text">` | ❌ MISSING | Line ~822 |
| Student CPID | `profile_editor__student_cpid_input` | `<input type="text">` | ❌ MISSING | Line ~831 |
| Specially Abled | `profile_editor__specially_abled_checkbox` | `<input type="checkbox">` | ❌ MISSING | Line ~842 |
| Specially Abled Details | `profile_editor__specially_abled_details_textarea` | `<textarea>` | ❌ MISSING | Line ~853 |

---

### **5. TAB 2: CONTACT INFORMATION**

| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Email | `profile_editor__email_input` | `<input type="email">` | ❌ MISSING | Line ~872 |
| Phone | `profile_editor__phone_input` | `<input type="tel">` | ❌ MISSING | Line ~881 |
| Address | `profile_editor__address_input` | `<input type="text">` | ❌ MISSING | Line ~891 |
| City | `profile_editor__city_input` | `<input type="text">` | ❌ MISSING | Line ~900 |
| State | `profile_editor__state_input` | `<input type="text">` | ❌ MISSING | Line ~909 |
| ZIP Code | `profile_editor__zip_code_input` | `<input type="text">` | ❌ MISSING | Line ~918 |
| Native State | `profile_editor__native_state_input` | `<input type="text">` | ❌ MISSING | Line ~927 |

---

### **6. TAB 3: PARENT/GUARDIAN INFORMATION**

#### **Father's Details:**
| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Full Name | `profile_editor__father_full_name_input` | `<input type="text">` | ❌ MISSING | Line ~952 |
| Age Range | `profile_editor__father_age_range_select` | `<select>` | ❌ MISSING | Line ~961 |
| Occupation | `profile_editor__father_occupation_input` | `<input type="text">` | ❌ MISSING | Line ~974 |
| Email | `profile_editor__father_email_input` | `<input type="email">` | ❌ MISSING | Line ~983 |

#### **Mother's Details:**
| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Full Name | `profile_editor__mother_full_name_input` | `<input type="text">` | ❌ MISSING | Line ~1001 |
| Age Range | `profile_editor__mother_age_range_select` | `<select>` | ❌ MISSING | Line ~1010 |
| Occupation | `profile_editor__mother_occupation_input` | `<input type="text">` | ❌ MISSING | Line ~1023 |
| Email | `profile_editor__mother_email_input` | `<input type="email">` | ❌ MISSING | Line ~1032 |

#### **Guardian Details (Conditional):**
| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Guardian Different Checkbox | `profile_editor__guardian_different_checkbox` | `<input type="checkbox">` | ❌ MISSING | Line ~1046 |
| Guardian Full Name | `profile_editor__guardian_full_name_input` | `<input type="text">` | ❌ MISSING | Line ~1060 |
| Guardian Relationship | `profile_editor__guardian_relationship_input` | `<input type="text">` | ❌ MISSING | Line ~1069 |
| Guardian Phone | `profile_editor__guardian_phone_input` | `<input type="tel">` | ❌ MISSING | Line ~1078 |
| Guardian Email | `profile_editor__guardian_email_input` | `<input type="email">` | ❌ MISSING | Line ~1088 |
| Guardian Address | `profile_editor__guardian_address_input` | `<input type="text">` | ❌ MISSING | Line ~1098 |

---

### **7. TAB 4: EDUCATION DETAILS**

| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Full Name | `profile_editor__full_name_input` | `<input type="text">` | ❌ MISSING | Line ~1127 |
| Current Grade/Class | `profile_editor__current_grade_input` | `<input type="text">` | ❌ MISSING | Line ~1136 |
| Section/Stream | `profile_editor__section_input` | `<input type="text">` | ❌ MISSING | Line ~1145 |
| Board/Stream | `profile_editor__board_stream_select` | `<select>` | ❌ MISSING | Line ~1154 |

---

### **8. TAB 5: FOCUS AREAS**

#### **Short-term Focus Areas (Pick 3):**
**Pattern:** `profile_editor__short_term_focus__{formatted_option}`

**Options:**
- `01. Academics` → `profile_editor__short_term_focus__01_academics`
- `02. Family` → `profile_editor__short_term_focus__02_family`
- `03. Health` → `profile_editor__short_term_focus__03_health`
- `04. Friendship` → `profile_editor__short_term_focus__04_friendship`
- `05. Emotional management` → `profile_editor__short_term_focus__05_emotional_management`
- `06. Personal Growth` → `profile_editor__short_term_focus__06_personal_growth`
- `07. Hobbies` → `profile_editor__short_term_focus__07_hobbies`
- `08. Physical Activities` → `profile_editor__short_term_focus__08_physical_activities`
- `09. Future Aspiration` → `profile_editor__short_term_focus__09_future_aspiration`
- `10. Others` → `profile_editor__short_term_focus__10_others`
- `20. Others` (Adult) → `profile_editor__short_term_focus__20_others`

**Others Text Input:**
- `profile_editor__short_term_focus_others_text` (Line ~1197)

#### **Long-term Focus Areas (Pick 3):**
**Pattern:** `profile_editor__long_term_focus__{formatted_option}`

Same options as short-term, but with `long_term_focus` prefix.

**Others Text Input:**
- `profile_editor__long_term_focus_others_text` (Line ~1227)

**Current Status:** ❌ **ALL CHECKBOXES MISSING** (MultiSelectPicker component - Line ~1183)

---

### **9. TAB 6: SELF-ASSESSMENT**

#### **Strengths (Pick 3):**
**Pattern:** `profile_editor__strength__{formatted_option}`

**Options:**
- `1. Quick Learning` → `profile_editor__strength__1_quick_learning`
- `2. Curiosity` → `profile_editor__strength__2_curiosity`
- `3. Problem-Solving` → `profile_editor__strength__3_problem_solving`
- `4. Sense of Justice and Fairness` → `profile_editor__strength__4_sense_of_justice_and_fairness`
- `5. Empathy` → `profile_editor__strength__5_empathy`
- `6. Risk Taking` → `profile_editor__strength__6_risk_taking`
- `7. Compassion` → `profile_editor__strength__7_compassion`
- `8. Creative Skills` → `profile_editor__strength__8_creative_skills`
- `9. Technical Skills` → `profile_editor__strength__9_technical_skills`
- `10. Leadership` → `profile_editor__strength__10_leadership`
- `12. Communication` → `profile_editor__strength__12_communication` (Note: No 11)
- `13. Athletic Talents` → `profile_editor__strength__13_athletic_talents`
- `14. Languages` → `profile_editor__strength__14_languages`
- `15. Research Skills` → `profile_editor__strength__15_research_skills`
- `16. Critical Thinking` → `profile_editor__strength__16_critical_thinking`
- `18. Artistic Talent` → `profile_editor__strength__18_artistic_talent` (Note: No 17)
- `19. Others` → `profile_editor__strength__19_others`

**Others Text Input:**
- `profile_editor__strength_others_text` (Line ~1272)

#### **Areas of Improvement (Pick 3):**
**Pattern:** `profile_editor__improvement__{formatted_option}`

Same options as strengths, but with `improvement` prefix.

**Others Text Input:**
- `profile_editor__improvement_others_text` (Line ~1302)

**Current Status:** ❌ **ALL CHECKBOXES MISSING** (MultiSelectPicker component)

---

### **10. TAB 7: HOBBIES & CLUBS**

#### **Hobbies/Interests (Pick 3):**
**Pattern:** `profile_editor__hobby__{formatted_option}`

**Options:**
- `01. Reading` → `profile_editor__hobby__01_reading`
- `02. Playing Musical Instruments` → `profile_editor__hobby__02_playing_musical_instruments`
- `03. Sports` → `profile_editor__hobby__03_sports`
- `04. Arts and Crafts` → `profile_editor__hobby__04_arts_and_crafts`
- `05. Cooking and Baking` → `profile_editor__hobby__05_cooking_and_baking`
- `06. Gardening` → `profile_editor__hobby__06_gardening`
- `07. Gaming` → `profile_editor__hobby__07_gaming`
- `08. Traveling` → `profile_editor__hobby__08_traveling`
- `09. Volunteering` → `profile_editor__hobby__09_volunteering`
- `10. Learning New Skills` → `profile_editor__hobby__10_learning_new_skills`
- `11. Singing` → `profile_editor__hobby__11_singing`
- `12. Other` → `profile_editor__hobby__12_other`

**Others Text Input:**
- `profile_editor__hobby_other_text` (Line ~1341)

#### **Clubs or Teams:**
**Pattern:** `profile_editor__club_{formatted_option}` ⚠️ **SINGLE UNDERSCORE** (as per requirements)

**Options:**
- `0. No Clubs/Teams` → `profile_editor__club_0_no_clubs_teams`
- `1. Science Club` → `profile_editor__club_1_science_club`
- `2. Mathematics Club` → `profile_editor__club_2_mathematics_club`
- `3. Quiz Club` → `profile_editor__club_3_quiz_club`
- `4. Literary Club` → `profile_editor__club_4_literary_club`
- `5. Robotics Club` → `profile_editor__club_5_robotics_club`
- `6. Art Club` → `profile_editor__club_6_art_club`
- `7. Music Club` → `profile_editor__club_7_music_club`
- `8. Dramatics/Theatre Club` → `profile_editor__club_8_dramatics_theatre_club`
- `9. Sports Team` → `profile_editor__club_9_sports_team`
- `10. Debate Club` → `profile_editor__club_10_debate_club`
- `11. Environmental Club` → `profile_editor__club_11_environmental_club`
- `12. Other` → `profile_editor__club_12_other`

**Others Text Input:**
- `profile_editor__club_other_text` (Line ~1409)

**Current Status:** ❌ **ALL CHECKBOXES MISSING** (Line ~1353)

---

### **11. TAB 8: ACHIEVEMENTS**

| Field Label | Required Attribute | Element Type | Current Status | Location |
|------------|-------------------|--------------|----------------|----------|
| Academics | `profile_editor__achievement_academics_textarea` | `<textarea>` | ❌ MISSING | Line ~1431 |
| Sports | `profile_editor__achievement_sports_textarea` | `<textarea>` | ❌ MISSING | Line ~1440 |
| Cultural/Arts | `profile_editor__achievement_cultural_textarea` | `<textarea>` | ❌ MISSING | Line ~1449 |
| Trained/Certified | `profile_editor__achievement_trained_textarea` | `<textarea>` | ❌ MISSING | Line ~1459 (conditional) |
| Others | `profile_editor__achievement_others_textarea` | `<textarea>` | ❌ MISSING | Line ~1469 |

---

### **12. TAB 9: EXPECTATIONS**

#### **Expectations (Select all that apply):**
**Pattern:** `profile_editor__expectation__{formatted_option}`

**Options:**
- `1. Understanding my strengths` → `profile_editor__expectation__1_understanding_my_strengths`
- `2. Identifying areas for improvement` → `profile_editor__expectation__2_identifying_areas_for_improvement`
- `3. Career guidance` → `profile_editor__expectation__3_career_guidance`
- `4. Academic planning` → `profile_editor__expectation__4_academic_planning`
- `5. Personal development` → `profile_editor__expectation__5_personal_development`
- `6. Better self-awareness` → `profile_editor__expectation__6_better_self_awareness`
- `7. Improved decision-making` → `profile_editor__expectation__7_improved_decision_making`
- `8. Stress management` → `profile_editor__expectation__8_stress_management`
- `9. Building confidence` → `profile_editor__expectation__9_building_confidence`
- `10. Others` → `profile_editor__expectation__10_others`

**Others Text Input:**
- `profile_editor__expectation_others_text` (Line ~1499)

**Current Status:** ❌ **ALL CHECKBOXES MISSING** (MultiSelectPicker component - Line ~1486)

---

## 🔧 **IMPLEMENTATION REQUIREMENTS**

### **1. Format Function for Dynamic Options**

Create a `formatTestId` function to convert option text to test ID format:

```javascript
const formatTestId = (text) => {
  return text
    .toLowerCase()
    .replace(/^\d+\.\s*/, '') // Remove leading number and dot
    .replace(/\s+/g, '_')     // Replace spaces with underscores
    .replace(/[^a-z0-9_]/g, '') // Remove special characters
}
```

**Examples:**
- `"01. Academics"` → `"01_academics"`
- `"05. Emotional management"` → `"05_emotional_management"`
- `"12. Other"` → `"12_other"`

### **2. MultiSelectPicker Component Update**

**Current Code (Line ~146):**
```jsx
<input
  type="checkbox"
  checked={isSelected}
  // ... no data-testid
/>
```

**Required Code:**
```jsx
<input
  type="checkbox"
  checked={isSelected}
  data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}
  // ... rest of props
/>
```

**Where `testIdPrefix` is passed as prop:**
- Short-term focus: `testIdPrefix="profile_editor__short_term_focus"`
- Long-term focus: `testIdPrefix="profile_editor__long_term_focus"`
- Strengths: `testIdPrefix="profile_editor__strength"`
- Improvements: `testIdPrefix="profile_editor__improvement"`
- Hobbies: `testIdPrefix="profile_editor__hobby"`
- Expectations: `testIdPrefix="profile_editor__expectation"`

### **3. Clubs Checkboxes (Special Case)**

**Current Code (Line ~1371):**
```jsx
<input
  type="checkbox"
  checked={isChecked}
  // ... no data-testid
/>
```

**Required Code:**
```jsx
<input
  type="checkbox"
  checked={isChecked}
  data-testid={`profile_editor__club_${formatTestId(club)}`}
  // ⚠️ NOTE: SINGLE UNDERSCORE after "club" (not double)
  // ... rest of props
/>
```

### **4. All Input Fields**

**Current Code:**
```jsx
<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  placeholder="John"
/>
```

**Required Code:**
```jsx
<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  placeholder="John"
  data-testid="profile_editor__first_name_input"
/>
```

### **5. All Select Fields**

**Current Code:**
```jsx
<select
  value={form.gender}
  onChange={(e) => handleFieldChange('gender', e.target.value)}
>
```

**Required Code:**
```jsx
<select
  value={form.gender}
  onChange={(e) => handleFieldChange('gender', e.target.value)}
  data-testid="profile_editor__gender_select"
>
```

### **6. All Textarea Fields**

**Current Code:**
```jsx
<textarea
  value={form.speciallyAbledDetails}
  onChange={(e) => handleFieldChange('speciallyAbledDetails', e.target.value)}
  rows="3"
/>
```

**Required Code:**
```jsx
<textarea
  value={form.speciallyAbledDetails}
  onChange={(e) => handleFieldChange('speciallyAbledDetails', e.target.value)}
  rows="3"
  data-testid="profile_editor__specially_abled_details_textarea"
/>
```

### **7. All Buttons**

**Current Code:**
```jsx
<button
  type="submit"
  disabled={loading}
>
  Save
</button>
```

**Required Code:**
```jsx
<button
  type="submit"
  disabled={loading}
  data-testid="profile_editor__save_button"
>
  Save
</button>
```

### **8. Tab Buttons**

**Current Code (Line ~1702):**
```jsx
<button
  key={idx}
  onClick={() => setActiveTab(idx)}
>
  {section.title}
</button>
```

**Required Code:**
```jsx
<button
  key={idx}
  onClick={() => setActiveTab(idx)}
  data-testid={`profile_editor__tab_${section.title.toLowerCase().replace(/\s+/g, '_')}`}
>
  {section.title}
</button>
```

---

## ✅ **VERIFICATION CHECKLIST**

After implementation, verify:

- [ ] All 36 form fields (Tabs 1-4) have `data-testid` attributes
- [ ] All 100+ dynamic checkboxes have `data-testid` attributes
- [ ] All 7 "Others" text inputs have `data-testid` attributes
- [ ] All 5 achievement textareas have `data-testid` attributes
- [ ] All 4 navigation buttons have `data-testid` attributes
- [ ] All 9 tab buttons have `data-testid` attributes
- [ ] All 2 scroll buttons have `data-testid` attributes
- [ ] All 3 page-level elements have `data-testid` attributes
- [ ] Pattern compliance: Double underscore `__` (except clubs)
- [ ] Clubs use single underscore `_` (as specified)

---

## 📝 **IMPLEMENTATION PRIORITY**

1. **CRITICAL (Blocking):**
   - Tab 1: Personal Information fields (11 fields)
   - Tab 2: Contact Information fields (7 fields)
   - Navigation buttons (4 buttons)
   - Save button

2. **HIGH:**
   - Tab 3: Parent/Guardian fields (14 fields)
   - Tab 4: Education Details fields (4 fields)
   - Tab buttons (9 buttons)

3. **MEDIUM:**
   - Tab 5-9: All checkbox fields and textareas
   - Page-level elements

---

## 🎯 **EXPECTED OUTCOME**

After implementation:
- ✅ Automation tests can locate ALL form fields
- ✅ Automation tests can interact with ALL buttons
- ✅ Automation tests can select ALL checkboxes
- ✅ 100% test coverage possible
- ✅ No more placeholder-based XPath locators needed

---

## 📞 **QUESTIONS?**

If any clarification is needed:
1. Check the naming pattern examples above
2. Refer to existing attributes in Login page (already implemented)
3. Follow the exact pattern: `profile_editor__{element_name}_{type}`

---

**Last Updated:** 2025-11-20  
**Document Version:** 1.0  
**Status:** Ready for Implementation

