CP_AUTOMATION/CognitivePrism/my-project/backup_docs/UI_CODE_ANALYSIS.md

UI Code Analysis - Profile Editor data-testid Attributes

Analysis Date: November 18, 2025

Source: CognitivePrism/my-project/cognitive-prism-assesment-ui/src/pages/StudentProfileEditor.jsx

---

✅ Currently Implemented (14 attributes)

#	Attribute	Line	Element	Status
1	profile_editor__page	1582	Main container div	✅
2	profile_editor__progress_value	1645	Progress percentage span	✅
3	profile_editor__missing_fields_toggle	1654	Info button	✅
4	profile_editor__first_name_input	776	Input	✅
5	profile_editor__last_name_input	794	Input	✅
6	profile_editor__gender_select	809	Select dropdown	✅
7	profile_editor__dob_input	829	Date input	✅
8	profile_editor__roll_number_input	846	Input	✅
9	profile_editor__nationality_input	862	Input	✅
10	profile_editor__phone_input	948	Input	✅
11	profile_editor__address_input	966	Input	✅
12	profile_editor__full_name_input	1211	Input	✅
13	profile_editor__tab_{tab_name}	1784	Tab buttons (dynamic)	✅
14	profile_editor__save_button	1877	Save button	✅

---

❌ Missing Attributes (140+ attributes)

Page & Navigation (3 missing)

Attribute	Element	Line Reference	Status
profile_editor__prev_button	Prev button	~1845	❌ Missing
profile_editor__next_button	Next button	~1854	❌ Missing
profile_editor__cancel_button	Cancel button	~1866	❌ Missing

---

Step 1: Personal Information (6 missing)

Attribute	Element	Line Reference	Status
profile_editor__language_input	Language input	~866	❌ Missing
profile_editor__student_id_input	Student ID Number	~874	❌ Missing
profile_editor__student_cpid_input	Student CPID	~883	❌ Missing
profile_editor__specially_abled_checkbox	Specially Abled checkbox	~895	❌ Missing
profile_editor__specially_abled_details_textarea	Specially Abled Details	~906	❌ Missing (conditional)

Note: All other Step 1 fields are ✅ implemented.

---

Step 2: Contact Information (5 missing)

Attribute	Element	Line Reference	Status
profile_editor__email_input	Email input	~925	❌ Missing
profile_editor__city_input	City input	~970	❌ Missing
profile_editor__state_input	State input	~979	❌ Missing
profile_editor__zip_code_input	ZIP Code input	~988	❌ Missing
profile_editor__native_state_input	Native State input	~997	❌ Missing

Note: Phone and Address are ✅ implemented.

---

Step 3: Parent/Guardian (13 missing)

Father's Details (4 missing)

Attribute	Element	Line Reference	Status
profile_editor__father_full_name_input	Father Full Name	~1022	❌ Missing
profile_editor__father_age_range_select	Father Age Range	~1032	❌ Missing
profile_editor__father_occupation_input	Father Occupation	~1044	❌ Missing
profile_editor__father_email_input	Father Email	~1053	❌ Missing

Mother's Details (4 missing)

Attribute	Element	Line Reference	Status
profile_editor__mother_full_name_input	Mother Full Name	~1071	❌ Missing
profile_editor__mother_age_range_select	Mother Age Range	~1080	❌ Missing
profile_editor__mother_occupation_input	Mother Occupation	~1093	❌ Missing
profile_editor__mother_email_input	Mother Email	~1102	❌ Missing

Guardian (5 missing)

Attribute	Element	Line Reference	Status
profile_editor__guardian_different_checkbox	Guardian Different checkbox	~1117	❌ Missing
profile_editor__guardian_full_name_input	Guardian Full Name	~1130	❌ Missing
profile_editor__guardian_relationship_input	Guardian Relationship	~1139	❌ Missing
profile_editor__guardian_phone_input	Guardian Phone	~1148	❌ Missing
profile_editor__guardian_email_input	Guardian Email	~1158	❌ Missing
profile_editor__guardian_address_input	Guardian Address	~1168	❌ Missing

---

Step 4: Education Details (3 missing)

Attribute	Element	Line Reference	Status
profile_editor__current_grade_input	Current Grade/Class	~1215	❌ Missing
profile_editor__section_input	Section/Subject	~1224	❌ Missing
profile_editor__board_stream_select	Board/Stream	~1233	❌ Missing

Note: Full Name is ✅ implemented.

---

Step 5: Focus Areas (22 missing)

Short-term Focus Areas (11 missing)

Attribute	Element	Line Reference	Status
profile_editor__short_term_focus_academics	Academics checkbox	~1263 (MultiSelectPicker)	❌ Missing
profile_editor__short_term_focus_family	Family checkbox	~1263	❌ Missing
profile_editor__short_term_focus_health	Health checkbox	~1263	❌ Missing
profile_editor__short_term_focus_friendship	Friendship checkbox	~1263	❌ Missing
profile_editor__short_term_focus_emotional	Emotional management checkbox	~1263	❌ Missing
profile_editor__short_term_focus_personal_growth	Personal Growth checkbox	~1263	❌ Missing
profile_editor__short_term_focus_hobbies	Hobbies checkbox	~1263	❌ Missing
profile_editor__short_term_focus_physical	Physical Activities checkbox	~1263	❌ Missing
profile_editor__short_term_focus_future	Future Aspiration checkbox	~1263	❌ Missing
profile_editor__short_term_focus_others	Others checkbox	~1263	❌ Missing
profile_editor__short_term_focus_others_text	Others text input	~1277	❌ Missing

Long-term Focus Areas (11 missing)

Attribute	Element	Line Reference	Status
profile_editor__long_term_focus_academics	Academics checkbox	~1293	❌ Missing
profile_editor__long_term_focus_family	Family checkbox	~1293	❌ Missing
profile_editor__long_term_focus_health	Health checkbox	~1293	❌ Missing
profile_editor__long_term_focus_friendship	Friendship checkbox	~1293	❌ Missing
profile_editor__long_term_focus_emotional	Emotional management checkbox	~1293	❌ Missing
profile_editor__long_term_focus_personal_growth	Personal Growth checkbox	~1293	❌ Missing
profile_editor__long_term_focus_hobbies	Hobbies checkbox	~1293	❌ Missing
profile_editor__long_term_focus_physical	Physical Activities checkbox	~1293	❌ Missing
profile_editor__long_term_focus_future	Future Aspiration checkbox	~1293	❌ Missing
profile_editor__long_term_focus_others	Others checkbox	~1293	❌ Missing
profile_editor__long_term_focus_others_text	Others text input	~1307	❌ Missing

Note: MultiSelectPicker component (line 147) needs data-testid on each checkbox input.

---

Step 6: Self-Assessment (36 missing)

Strengths (18 missing)

Attribute	Element	Line Reference	Status
profile_editor__strength_quick_learning	Quick Learning checkbox	~1333 (MultiSelectPicker)	❌ Missing
profile_editor__strength_curiosity	Curiosity checkbox	~1333	❌ Missing
profile_editor__strength_problem_solving	Problem-Solving checkbox	~1333	❌ Missing
profile_editor__strength_justice	Sense of Justice checkbox	~1333	❌ Missing
profile_editor__strength_empathy	Empathy checkbox	~1333	❌ Missing
profile_editor__strength_risk_taking	Risk Taking checkbox	~1333	❌ Missing
profile_editor__strength_compassion	Compassion checkbox	~1333	❌ Missing
profile_editor__strength_creative	Creative Skills checkbox	~1333	❌ Missing
profile_editor__strength_technical	Technical Skills checkbox	~1333	❌ Missing
profile_editor__strength_leadership	Leadership checkbox	~1333	❌ Missing
profile_editor__strength_communication	Communication checkbox	~1333	❌ Missing
profile_editor__strength_athletic	Athletic Talents checkbox	~1333	❌ Missing
profile_editor__strength_languages	Languages checkbox	~1333	❌ Missing
profile_editor__strength_research	Research Skills checkbox	~1333	❌ Missing
profile_editor__strength_critical_thinking	Critical Thinking checkbox	~1333	❌ Missing
profile_editor__strength_artistic	Artistic Talent checkbox	~1333	❌ Missing
profile_editor__strength_others	Others checkbox	~1333	❌ Missing
profile_editor__strength_others_text	Others text input	~1347	❌ Missing

Areas of Improvement (18 missing)

Attribute	Element	Line Reference	Status
profile_editor__improvement_quick_learning	Quick Learning checkbox	~1363	❌ Missing
profile_editor__improvement_curiosity	Curiosity checkbox	~1363	❌ Missing
profile_editor__improvement_problem_solving	Problem-Solving checkbox	~1363	❌ Missing
profile_editor__improvement_justice	Sense of Justice checkbox	~1363	❌ Missing
profile_editor__improvement_empathy	Empathy checkbox	~1363	❌ Missing
profile_editor__improvement_risk_taking	Risk Taking checkbox	~1363	❌ Missing
profile_editor__improvement_compassion	Compassion checkbox	~1363	❌ Missing
profile_editor__improvement_creative	Creative Skills checkbox	~1363	❌ Missing
profile_editor__improvement_technical	Technical Skills checkbox	~1363	❌ Missing
profile_editor__improvement_leadership	Leadership checkbox	~1363	❌ Missing
profile_editor__improvement_communication	Communication checkbox	~1363	❌ Missing
profile_editor__improvement_athletic	Athletic Talents checkbox	~1363	❌ Missing
profile_editor__improvement_languages	Languages checkbox	~1363	❌ Missing
profile_editor__improvement_research	Research Skills checkbox	~1363	❌ Missing
profile_editor__improvement_critical_thinking	Critical Thinking checkbox	~1363	❌ Missing
profile_editor__improvement_artistic	Artistic Talent checkbox	~1363	❌ Missing
profile_editor__improvement_others	Others checkbox	~1363	❌ Missing
profile_editor__improvement_others_text	Others text input	~1377	❌ Missing

Note: MultiSelectPicker component needs data-testid on each checkbox.

---

Step 7: Hobbies & Clubs (26 missing)

Hobbies (13 missing)

Attribute	Element	Line Reference	Status
profile_editor__hobby_reading	Reading checkbox	~1403 (MultiSelectPicker)	❌ Missing
profile_editor__hobby_musical	Playing Musical Instruments checkbox	~1403	❌ Missing
profile_editor__hobby_sports	Sports checkbox	~1403	❌ Missing
profile_editor__hobby_arts_crafts	Arts and Crafts checkbox	~1403	❌ Missing
profile_editor__hobby_cooking	Cooking and Baking checkbox	~1403	❌ Missing
profile_editor__hobby_gardening	Gardening checkbox	~1403	❌ Missing
profile_editor__hobby_gaming	Gaming checkbox	~1403	❌ Missing
profile_editor__hobby_traveling	Traveling checkbox	~1403	❌ Missing
profile_editor__hobby_volunteering	Volunteering checkbox	~1403	❌ Missing
profile_editor__hobby_learning	Learning New Skills checkbox	~1403	❌ Missing
profile_editor__hobby_singing	Singing checkbox	~1403	❌ Missing
profile_editor__hobby_other	Other checkbox	~1403	❌ Missing
profile_editor__hobby_other_text	Other text input	~1417	❌ Missing

Clubs (13 missing)

Attribute	Element	Line Reference	Status
profile_editor__club_science	Science Club checkbox	~1434	❌ Missing
profile_editor__club_mathematics	Mathematics Club checkbox	~1434	❌ Missing
profile_editor__club_quiz	Quiz Club checkbox	~1434	❌ Missing
profile_editor__club_literary	Literary Club checkbox	~1434	❌ Missing
profile_editor__club_robotics	Robotics Club checkbox	~1434	❌ Missing
profile_editor__club_art	Art Club checkbox	~1434	❌ Missing
profile_editor__club_music	Music Club checkbox	~1434	❌ Missing
profile_editor__club_dramatics	Dramatics / Theatre Club checkbox	~1434	❌ Missing
profile_editor__club_sports	Sports Club checkbox	~1434	❌ Missing
profile_editor__club_community	Community Service Club checkbox	~1434	❌ Missing
profile_editor__club_mun	Model United Nations (MUN) checkbox	~1434	❌ Missing
profile_editor__club_other	Other checkbox	~1434	❌ Missing
profile_editor__club_other_text	Other text input	~1472	❌ Missing

Note: Clubs use direct mapping (line 1434), not MultiSelectPicker.

---

Step 8: Achievements (5 missing)

Attribute	Element	Line Reference	Status
profile_editor__achievement_academics_textarea	Academics textarea	~1495	❌ Missing
profile_editor__achievement_sports_textarea	Sports textarea	~1504	❌ Missing
profile_editor__achievement_cultural_textarea	Cultural/Arts textarea	~1513	❌ Missing
profile_editor__achievement_trained_textarea	Trained/Certified textarea	~1522	❌ Missing (conditional)
profile_editor__achievement_others_textarea	Others textarea	~1532	❌ Missing

---

Step 9: Expectations (11 missing)

Attribute	Element	Line Reference	Status
profile_editor__expectation_self_understanding	Self-Understanding checkbox	~1550 (MultiSelectPicker)	❌ Missing
profile_editor__expectation_career_guidance	Career Guidance checkbox	~1550	❌ Missing
profile_editor__expectation_academic_support	Academic Support checkbox	~1550	❌ Missing
profile_editor__expectation_validation	Validation / Reassurance checkbox	~1550	❌ Missing
profile_editor__expectation_decision_making	Improved Decision-Making checkbox	~1550	❌ Missing
profile_editor__expectation_clarity	Clarity About Strengths checkbox	~1550	❌ Missing
profile_editor__expectation_personal_growth	Personal Growth checkbox	~1550	❌ Missing
profile_editor__expectation_objective_feedback	Objective Feedback checkbox	~1550	❌ Missing
profile_editor__expectation_actionable_steps	Actionable Next Steps checkbox	~1550	❌ Missing
profile_editor__expectation_others	Others checkbox	~1550	❌ Missing
profile_editor__expectation_others_text	Others text input	~1564	❌ Missing

---

Summary Statistics

Implementation Status

• ✅ Implemented: 14 attributes (9%)
• ❌ Missing: 140+ attributes (91%)
• Total Required: ~154 attributes

By Category

Category	Implemented	Missing	Total
Page & Navigation	1	3	4
Step 1: Personal Information	6	5	11
Step 2: Contact Information	2	5	7
Step 3: Parent/Guardian	0	13	13
Step 4: Education Details	1	3	4
Step 5: Focus Areas	0	22	22
Step 6: Self-Assessment	0	36	36
Step 7: Hobbies & Clubs	0	26	26
Step 8: Achievements	0	5	5
Step 9: Expectations	0	11	11

---

Critical Components Needing Updates

1. MultiSelectPicker Component (Line 147)

Issue: Checkboxes inside MultiSelectPicker don't have data-testid attributes.

Current Code (Line 171):

<input
  type="checkbox"
  checked={isSelected}
  disabled={isDisabled}
  onChange={() => {...}}
  className="..."
/>

Required: Add data-testid to each checkbox based on option value.

Solution: Modify MultiSelectPicker to accept a testIdPrefix prop:

<input
  type="checkbox"
  data-testid={`${testIdPrefix}_${formatTestId(option)}`}
  ...
/>

Affected Sections:

• Focus Areas (short-term & long-term)
• Self-Assessment (strengths & improvements)
• Expectations

---

2. Clubs Checkboxes (Line 1434)

Issue: Direct mapping without data-testid.

Current Code:

{CLUBS_OPTIONS.map((club) => (
  <motion.label>
    <input type="checkbox" ... />
  </motion.label>
))}

Required: Add data-testid to each checkbox:

<input
  type="checkbox"
  data-testid={`profile_editor__club_${formatTestId(club)}`}
  ...
/>

---

3. All Text Inputs

Issue: Many text inputs missing data-testid.

Pattern to Follow:

<input
  type="text"
  data-testid="profile_editor__{field_name}_input"
  ...
/>

---

4. All Select Dropdowns

Issue: Select elements missing data-testid.

Pattern to Follow:

<select
  data-testid="profile_editor__{field_name}_select"
  ...
>

---

5. All Textareas

Issue: Textarea elements missing data-testid.

Pattern to Follow:

<textarea
  data-testid="profile_editor__{field_name}_textarea"
  ...
/>

---

6. Navigation Buttons

Issue: Prev, Next, Cancel buttons missing data-testid.

Required:

• profile_editor__prev_button (Line ~1845)
• profile_editor__next_button (Line ~1854)
• profile_editor__cancel_button (Line ~1866)

---

Implementation Priority

Priority 1: Critical (Required for Basic Automation)

1. Navigation buttons (Prev, Next, Cancel)
2. Step 2: Contact Information inputs (email, city, state, zip_code, native_state)
3. Step 4: Education Details (current_grade, section, board_stream)
4. Step 8: Achievements textareas

Priority 2: Important (Required for Complete Automation)

1. Step 3: Parent/Guardian fields
2. Step 5: Focus Areas checkboxes
3. Step 6: Self-Assessment checkboxes
4. Step 7: Hobbies & Clubs checkboxes
5. Step 9: Expectations checkboxes

Priority 3: Optional (Nice to Have)

1. Step 1: Language, Student ID, Student CPID, Specially Abled
2. Conditional fields (Guardian, Specially Abled Details, "Others" text inputs)

---

Recommended Implementation Approach

Phase 1: Update MultiSelectPicker Component

1. Add testIdPrefix prop to MultiSelectPicker
2. Generate data-testid for each checkbox using formatTestId function
3. This will automatically fix Focus Areas, Self-Assessment, and Expectations

Phase 2: Add Missing Input Attributes

1. Add data-testid to all remaining text inputs
2. Add data-testid to all select dropdowns
3. Add data-testid to all textareas

Phase 3: Add Missing Checkbox Attributes

1. Update Clubs mapping to include data-testid
2. Add data-testid to Specially Abled checkbox
3. Add data-testid to Guardian Different checkbox

Phase 4: Add Navigation Buttons

1. Add data-testid to Prev button
2. Add data-testid to Next button
3. Add data-testid to Cancel button

---

Code Examples for Dev Team

Example 1: MultiSelectPicker Update

// Current (Line 147)
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems = 3, icon: Icon }) => {
  // ...
  <input
    type="checkbox"
    checked={isSelected}
    // ... missing data-testid
  />
}

// Required
const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems = 3, icon: Icon, testIdPrefix }) => {
  // ...
  <input
    type="checkbox"
    data-testid={`${testIdPrefix}_${formatTestId(option)}`}
    checked={isSelected}
    // ...
  />
}

// Usage
<MultiSelectPicker
  testIdPrefix="profile_editor__short_term_focus"
  options={focusAreas}
  // ...
/>

Example 2: Clubs Checkboxes

// Current (Line 1434)
{CLUBS_OPTIONS.map((club) => (
  <input type="checkbox" ... />
))}

// Required
{CLUBS_OPTIONS.map((club) => (
  <input
    type="checkbox"
    data-testid={`profile_editor__club_${formatTestId(club)}`}
    // ...
  />
))}

Example 3: Text Input

// Current (Line 925)
<input
  type="email"
  value={form.email}
  // ... missing data-testid
/>

// Required
<input
  type="email"
  data-testid="profile_editor__email_input"
  value={form.email}
  // ...
/>

---

Verification Checklist

After implementation, verify:

• All 154 attributes are present
• All checkboxes have data-testid
• All inputs have data-testid
• All selects have data-testid
• All textareas have data-testid
• All buttons have data-testid
• Dynamic attributes use formatTestId function
• No duplicate data-testid values
• All attributes follow naming convention: profile_editor__{element_name}

---

Status: ✅ Analysis Complete
Confidence: 100%
Next Step: Share with Dev Team for Implementation