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

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

<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

<select
  value={form.gender}
  onChange={(e) => handleFieldChange('gender', e.target.value)}
  data-testid="profile_editor__gender_select"  // ✅ ADD THIS
  className="..."
>

Example 3: Textarea

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

Example 4: Checkbox

<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

<button
  type="button"
  onClick={handleSave}
  data-testid="profile_editor__save_button"  // ✅ ADD THIS
  className="..."
>
  Save
</button>

Example 6: Tab Button (Dynamic)

// 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)

// 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

<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

<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:

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