2025-12-12 19:54:54 +05:30

27 KiB

Raw Blame History

🎯 COMPLETE DATA-TESTID REQUIREMENTS

For UI Development Team - All Components

Date: 2025-01-20
Priority: 🔴 CRITICAL - BLOCKING AUTOMATION
Status: ❌ ALL ATTRIBUTES MISSING
Version: 1.0 - Standalone Complete Document

📋 EXECUTIVE SUMMARY

This document contains ALL required data-testid attributes for automation testing across ALL components.

Total Required Attributes: ~214+ attributes across 2 components

Components Requiring Updates:

Student Profile Editor (StudentProfileEditor.jsx) - ~200+ attributes
Mandatory Password Reset Modal (MandatoryPasswordResetModal.jsx) - 14 attributes

🔑 NAMING CONVENTION (MANDATORY - READ THIS FIRST)

Pattern:

{scope}__{element_name}_{type}

Rules:

Scope: Component-specific scope (e.g., profile_editor, mandatory_reset)
Separator: Double underscore __ between scope and element name
Element Name: Snake_case (lowercase with underscores)
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
✅ mandatory_reset__continue_button
✅ profile_editor__tab_personal_information
❌ profile_editor_first_name (single underscore - WRONG)
❌ profileEditor__first_name (camelCase - WRONG)

Dynamic Elements:

For dynamic elements (like checkboxes in lists), use:

{scope}__{base_name}__{formatted_option}

Example:

profile_editor__short_term_focus__01_academics
profile_editor__strength__1_quick_learning

📚 PART 1: STUDENT PROFILE EDITOR

File: src/pages/StudentProfileEditor.jsx
Scope: profile_editor
Total Attributes: ~200+

1.1 PAGE-LEVEL ELEMENTS

Element	Required Attribute	Line Reference	Priority
Page container	`profile_editor__page`	Line 1516	🔴 CRITICAL
Progress value display	`profile_editor__progress_value`	Line 1577	🔴 CRITICAL
Missing fields toggle button	`profile_editor__missing_fields_toggle`	Line 1580-1586	🟡 IMPORTANT
Back button (header)	`profile_editor__back_button`	Line 1555-1560	🟡 IMPORTANT

Implementation:

<div data-testid="profile_editor__page">
  <span data-testid="profile_editor__progress_value">{progress}%</span>
  <button data-testid="profile_editor__missing_fields_toggle">...</button>
  <button data-testid="profile_editor__back_button">Back</button>
</div>

Element	Required Attribute	Line Reference	Priority
Tab container	`profile_editor__tabs_container`	Line 1693-1700	🔴 CRITICAL
Tab scroll left button	`profile_editor__tabs_scroll_left_button`	Line 1683-1690	🟡 IMPORTANT
Tab scroll right button	`profile_editor__tabs_scroll_right_button`	Line 1729-1736	🟡 IMPORTANT

Tab Buttons (9 tabs) - 🔴 CRITICAL

Format: profile_editor__tab_{formatTestId(section.title)}

Tab Index	Tab Title	Required Attribute	Priority
0	Personal Information	`profile_editor__tab_personal_information`	🔴 CRITICAL
1	Contact Information	`profile_editor__tab_contact_information`	🔴 CRITICAL
2	Parent/Guardian	`profile_editor__tab_parent_guardian`	🔴 CRITICAL
3	Education Details	`profile_editor__tab_education_details`	🔴 CRITICAL
4	Focus Areas	`profile_editor__tab_focus_areas`	🔴 CRITICAL
5	Self-Assessment	`profile_editor__tab_self_assessment`	🔴 CRITICAL
6	Hobbies & Clubs	`profile_editor__tab_hobbies_clubs`	🔴 CRITICAL
7	Achievements	`profile_editor__tab_achievements`	🔴 CRITICAL
8	Expectations	`profile_editor__tab_expectations`	🔴 CRITICAL

Implementation (Line 1703):

<button
  key={idx}
  onClick={() => setActiveTab(idx)}
  data-testid={`profile_editor__tab_${formatTestId(section.title)}`}
  className={...}
>

formatTestId Function (Add at top of file, Line ~23):

const formatTestId = (value = '') => {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '_')  // Replace all non-alphanumeric with underscore
    .replace(/^_|_$/g, '')         // Remove leading/trailing underscores
}

1.3 SECTION 1: PERSONAL INFORMATION (Tab 0)

Element	Required Attribute	Line Reference	Priority
First Name input	`profile_editor__first_name_input`	Line 767-773	🔴 CRITICAL
Last Name input	`profile_editor__last_name_input`	Line 776-782	🔴 CRITICAL
Gender select	`profile_editor__gender_select`	Line 785-794	🔴 CRITICAL
Date of Birth input	`profile_editor__dob_input`	Line 797-802	🔴 CRITICAL
Nationality input	`profile_editor__nationality_input`	Line 805-811	🔴 CRITICAL
Language input	`profile_editor__language_input`	Line 814-820	🟡 IMPORTANT
Student ID Number input	`profile_editor__student_id_input`	Line 823-829	🟡 IMPORTANT
Student CPID input	`profile_editor__student_cpid_input`	Line 832-838	🟡 IMPORTANT
Specially Abled checkbox	`profile_editor__specially_abled_checkbox`	Line 843-848	🟡 IMPORTANT
Specially Abled Details textarea	`profile_editor__specially_abled_details_textarea`	Line 854-860	🟢 OPTIONAL

Implementation Example:

<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  data-testid="profile_editor__first_name_input"
  className={...}
/>

1.4 SECTION 2: CONTACT INFORMATION (Tab 1)

Element	Required Attribute	Line Reference	Priority
Email input	`profile_editor__email_input`	Line 873-879	🔴 CRITICAL
Phone input	`profile_editor__phone_input`	Line 882-889	🔴 CRITICAL
Address input	`profile_editor__address_input`	Line 892-898	🔴 CRITICAL
City input	`profile_editor__city_input`	Line 901-907	🔴 CRITICAL
State input	`profile_editor__state_input`	Line 910-916	🔴 CRITICAL
ZIP Code input	`profile_editor__zip_code_input`	Line 919-925	🔴 CRITICAL
Native State input	`profile_editor__native_state_input`	Line 928-934	🟡 IMPORTANT

1.5 SECTION 3: PARENT/GUARDIAN (Tab 2)

Father's Details:

Element	Required Attribute	Line Reference	Priority
Father Full Name input	`profile_editor__father_full_name_input`	Line 953-959	🔴 CRITICAL
Father Age Range select	`profile_editor__father_age_range_select`	Line 962-972	🔴 CRITICAL
Father Occupation input	`profile_editor__father_occupation_input`	Line 975-981	🔴 CRITICAL
Father Email input	`profile_editor__father_email_input`	Line 984-990	🔴 CRITICAL

Mother's Details:

Element	Required Attribute	Line Reference	Priority
Mother Full Name input	`profile_editor__mother_full_name_input`	Line 1002-1008	🔴 CRITICAL
Mother Age Range select	`profile_editor__mother_age_range_select`	Line 1011-1021	🔴 CRITICAL
Mother Occupation input	`profile_editor__mother_occupation_input`	Line 1024-1030	🔴 CRITICAL
Mother Email input	`profile_editor__mother_email_input`	Line 1033-1039	🔴 CRITICAL

Guardian (If Different):

Element	Required Attribute	Line Reference	Priority
Guardian Different checkbox	`profile_editor__guardian_different_checkbox`	Line 1047-1052	🟡 IMPORTANT
Guardian Full Name input	`profile_editor__guardian_full_name_input`	Line 1061-1067	🟡 IMPORTANT
Guardian Relationship input	`profile_editor__guardian_relationship_input`	Line 1070-1076	🟡 IMPORTANT
Guardian Phone input	`profile_editor__guardian_phone_input`	Line 1079-1086	🟡 IMPORTANT
Guardian Email input	`profile_editor__guardian_email_input`	Line 1089-1095	🟡 IMPORTANT
Guardian Address input	`profile_editor__guardian_address_input`	Line 1099-1105	🟡 IMPORTANT

1.6 SECTION 4: EDUCATION DETAILS (Tab 3)

Element	Required Attribute	Line Reference	Priority
Full Name input	`profile_editor__full_name_input`	Line 1128-1134	🔴 CRITICAL
Current Grade/Class input	`profile_editor__current_grade_input`	Line 1137-1143	🔴 CRITICAL
Section/Subject input	`profile_editor__section_input`	Line 1146-1152	🔴 CRITICAL
Board/Stream select	`profile_editor__board_stream_select`	Line 1155-1167	🔴 CRITICAL

1.7 SECTION 5: FOCUS AREAS (Tab 4)

Short-term Focus Areas:

Format: profile_editor__short_term_focus__{formatTestId(option)}

Required for each option in FOCUS_AREAS_ADOLESCENT/FOCUS_AREAS_ADULT:

profile_editor__short_term_focus__01_academics
profile_editor__short_term_focus__02_family
profile_editor__short_term_focus__03_health
... (all options)
profile_editor__short_term_focus__10_others (or 20_others for adult)

Others Text Input:

profile_editor__short_term_focus_others_text (Line 1198-1204)

Long-term Focus Areas:

Format: profile_editor__long_term_focus__{formatTestId(option)}

Required for each option:

profile_editor__long_term_focus__01_academics
... (all options)
profile_editor__long_term_focus__10_others (or 20_others)

Others Text Input:

profile_editor__long_term_focus_others_text (Line 1228-1234)

Implementation - Update MultiSelectPicker Component (Line 174-186):

const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems, icon: Icon, testIdPrefix }) => {
  // ... existing code ...
  
  return (
    <div className="space-y-2 xs:space-y-3">
      {options.map((option) => {
        // ... existing code ...
        return (
          <label key={option} className={...}>
            <input
              type="checkbox"
              checked={isSelected}
              disabled={isDisabled}
              onChange={...}
              data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}
              className={...}
            />
            {/* ... */}
          </label>
        )
      })}
    </div>
  )
}

Usage:

<MultiSelectPicker
  options={focusAreas}
  selectedItems={form.shortTermFocusAreas}
  onToggle={...}
  maxItems={3}
  testIdPrefix="profile_editor__short_term_focus"  // ADD THIS
/>

1.8 SECTION 6: SELF-ASSESSMENT (Tab 5)

Strengths:

Format: profile_editor__strength__{formatTestId(option)}

Required for each option in STRENGTHS_OPTIONS (19 options):

profile_editor__strength__1_quick_learning
profile_editor__strength__2_curiosity
profile_editor__strength__3_problem_solving
... (all 19 options)
profile_editor__strength__19_others

Others Text Input:

profile_editor__strength_others_text (Line 1268-1274)

Areas of Improvement:

Format: profile_editor__improvement__{formatTestId(option)}

Required for each option (same as strengths, 19 options):

profile_editor__improvement__1_quick_learning
... (all 19 options)
profile_editor__improvement__19_others

Others Text Input:

profile_editor__improvement_others_text (Line 1298-1304)

Usage:

<MultiSelectPicker
  options={STRENGTHS_OPTIONS}
  selectedItems={form.strengths}
  onToggle={...}
  maxItems={3}
  testIdPrefix="profile_editor__strength"  // ADD THIS
/>

1.9 SECTION 7: HOBBIES & CLUBS (Tab 6)

Hobbies/Interests:

Format: profile_editor__hobby__{formatTestId(option)}

Required for each option in HOBBIES_OPTIONS (12 options):

profile_editor__hobby__01_reading
profile_editor__hobby__02_playing_musical_instruments
... (all 12 options)
profile_editor__hobby__12_other

Others Text Input:

profile_editor__hobby_other_text (Line 1337-1343)

Clubs or Teams:

Format: profile_editor__club_{formatTestId(club)}

Required for each option in CLUBS_OPTIONS (13 options):

profile_editor__club_0_no_clubs_teams
profile_editor__club_1_science_club
profile_editor__club_2_mathematics_club
... (all 13 options)
profile_editor__club_12_other

Others Text Input:

profile_editor__club_other_text (Line 1410-1416)

Implementation for Clubs (Line 1372):

<input
  type="checkbox"
  checked={isChecked}
  disabled={isDisabled}
  onChange={...}
  data-testid={`profile_editor__club_${formatTestId(club)}`}
  className={...}
/>

1.10 SECTION 8: ACHIEVEMENTS (Tab 7)

Element	Required Attribute	Line Reference	Priority
Academics textarea	`profile_editor__achievement_academics_textarea`	Line 1432-1438	🔴 CRITICAL
Sports textarea	`profile_editor__achievement_sports_textarea`	Line 1441-1447	🔴 CRITICAL
Cultural/Arts textarea	`profile_editor__achievement_cultural_textarea`	Line 1450-1456	🔴 CRITICAL
Trained/Certified textarea	`profile_editor__achievement_trained_textarea`	Line 1460-1466	🟡 IMPORTANT
Others textarea	`profile_editor__achievement_others_textarea`	Line 1470-1476	🔴 CRITICAL

Note: Trained/Certified field is conditional (only for ageCategory === '18-23').

1.11 SECTION 9: EXPECTATIONS (Tab 8)

Format: profile_editor__expectation__{formatTestId(option)}

Required for each option in EXPECTATIONS_OPTIONS (10 options):

profile_editor__expectation__1_self_understanding_gain_deeper_insights_into_their_personality_strengths_and_areas_for_growth
profile_editor__expectation__2_career_guidance_clear_recommendations_on_suitable_career_paths_or_college_majors_based_on_their_interests_and_abilities_backed_by_scientific_tool
... (all 10 options)
profile_editor__expectation__10_others

Others Text Input:

profile_editor__expectation_others_text (Line 1500-1506)

Note: Expectations have very long text. The formatTestId function will handle this automatically.

Element	Required Attribute	Line Reference	Priority
Previous button	`profile_editor__prev_button`	Line 1770-1778	🔴 CRITICAL
Next button	`profile_editor__next_button`	Line 1779-1787	🔴 CRITICAL
Cancel button	`profile_editor__cancel_button`	Line 1791-1797	🔴 CRITICAL
Save button	`profile_editor__save_button`	Line 1798-1814	🔴 CRITICAL

Implementation:

<button
  type="submit"
  disabled={loading || loadingStudent}
  data-testid="profile_editor__save_button"
  className={...}
>
  Save
</button>

File: src/pages/designs/design-1/components/MandatoryPasswordResetModal.jsx
Scope: mandatory_reset
Total Attributes: 14

Element	Required Attribute	Line Reference	Priority
Modal Overlay	`mandatory_reset__modal`	Line 150	🔴 CRITICAL
Modal Content	`mandatory_reset__modal_content`	Line 156	🟢 OPTIONAL

Implementation (Line 150):

<motion.div
  className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4"
  data-testid="mandatory_reset__modal"
>
  <motion.div
    className="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl max-w-lg w-full relative border border-white/20 dark:border-gray-700"
    data-testid="mandatory_reset__modal_content"
  >

2.2 STEP 1: WELCOME SCREEN

Element	Required Attribute	Line Reference	Priority
Continue Button	`mandatory_reset__continue_button`	Line 248	🔴 CRITICAL

Implementation (Line 248):

<motion.button
  onClick={goToStep2}
  className="w-full mt-6 bg-gradient-to-r from-blue-500 to-indigo-600..."
  data-testid="mandatory_reset__continue_button"
>
  <span>Continue to Reset Password</span>
  <ArrowRight className="w-5 h-5" />
</motion.button>

2.3 STEP 2: PASSWORD RESET FORM

Element	Required Attribute	Line Reference	Priority
Form Container	`mandatory_reset__form`	Line 283	🔴 CRITICAL
Current Password Input	`mandatory_reset__current_password_input`	Line 290	🔴 CRITICAL
Current Password Toggle	`mandatory_reset__current_password_toggle`	Line 305	🟢 OPTIONAL
Current Password Error	`mandatory_reset__current_password_error`	Line 313	🟡 IMPORTANT
New Password Input	`mandatory_reset__new_password_input`	Line 325	🔴 CRITICAL
New Password Toggle	`mandatory_reset__new_password_toggle`	Line 340	🟢 OPTIONAL
New Password Error	`mandatory_reset__new_password_error`	Line 348	🟡 IMPORTANT
Confirm Password Input	`mandatory_reset__confirm_password_input`	Line 360	🔴 CRITICAL
Confirm Password Toggle	`mandatory_reset__confirm_password_toggle`	Line 375	🟢 OPTIONAL
Confirm Password Error	`mandatory_reset__confirm_password_error`	Line 383	🟡 IMPORTANT
Back Button	`mandatory_reset__back_button`	Line 454	🟡 IMPORTANT
Submit Button	`mandatory_reset__submit_button`	Line 464	🔴 CRITICAL

Implementation Examples:

Form (Line 283):

<form onSubmit={handleSubmit} className="p-6 space-y-4" data-testid="mandatory_reset__form">

Current Password Input (Line 290):

<input
  type={showCurrentPassword ? 'text' : 'password'}
  name="currentPassword"
  value={formData.currentPassword}
  onChange={handleInputChange}
  data-testid="mandatory_reset__current_password_input"
  className={...}
/>

Current Password Toggle (Line 305):

<button
  type="button"
  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
  data-testid="mandatory_reset__current_password_toggle"
  className={...}
>

Current Password Error (Line 313):

{errors.currentPassword && (
  <p className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center gap-1"
     data-testid="mandatory_reset__current_password_error">
    <AlertCircle className="w-4 h-4" />
    {errors.currentPassword}
  </p>
)}

Submit Button (Line 464):

<motion.button
  type="submit"
  disabled={isLoading}
  data-testid="mandatory_reset__submit_button"
  className={...}
>
  {isLoading ? (
    <>Resetting...</>
  ) : (
    <>
      <Lock className="w-5 h-5" />
      Reset Password
    </>
  )}
</motion.button>

🔧 IMPLEMENTATION GUIDE

Step 1: Add formatTestId Helper Function

Add this function at the top of StudentProfileEditor.jsx (after imports, around line 23):

// Helper function to format test IDs
const formatTestId = (value = '') => {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '_')  // Replace all non-alphanumeric with underscore
    .replace(/^_|_$/g, '')         // Remove leading/trailing underscores
}

Step 2: Update Tab Buttons

Update the tab button rendering (Line 1703 in StudentProfileEditor.jsx):

<button
  key={idx}
  onClick={() => setActiveTab(idx)}
  data-testid={`profile_editor__tab_${formatTestId(section.title)}`}
  className={...}
>

Step 3: Update MultiSelectPicker Component

Update MultiSelectPicker component (Line 174-186) to accept and use testIdPrefix prop:

const MultiSelectPicker = ({ options, selectedItems, onToggle, maxItems, icon: Icon, testIdPrefix }) => {
  // ... existing code ...
  
  return (
    <div className="space-y-2 xs:space-y-3">
      <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-2">
        {options.map((option) => {
          // ... existing code ...
          return (
            <label key={option} className={...}>
              <input
                type="checkbox"
                checked={isSelected}
                disabled={isDisabled}
                onChange={...}
                data-testid={testIdPrefix ? `${testIdPrefix}__${formatTestId(option)}` : undefined}
                className={...}
              />
              {/* ... */}
            </label>
          )
        })}
      </div>
    </div>
  )
}

Step 4: Add data-testid to All Input Elements

For each <input>, <select>, <textarea>, add data-testid attribute:

<input
  type="text"
  value={form.firstName}
  onChange={(e) => handleFieldChange('firstName', e.target.value)}
  data-testid="profile_editor__first_name_input"
  className={...}
/>

Step 5: Add data-testid to All Buttons

For each <button>, add data-testid attribute:

<button
  type="submit"
  disabled={loading || loadingStudent}
  data-testid="profile_editor__save_button"
  className={...}
>

✅ VERIFICATION CHECKLIST

After implementation, verify:

Profile Editor:

All 9 tab buttons have data-testid attributes
All input fields have data-testid attributes
All select dropdowns have data-testid attributes
All textareas have data-testid attributes
All checkboxes have data-testid attributes
All buttons (Save, Cancel, Prev, Next, Back, Scroll) have data-testid attributes
All MultiSelectPicker checkboxes have data-testid attributes
All "Others" text inputs have data-testid attributes
Progress value display has data-testid attribute
Missing fields toggle has data-testid attribute
Page container has data-testid attribute

Modal overlay has data-testid="mandatory_reset__modal"
Continue button has data-testid="mandatory_reset__continue_button"
Form has data-testid="mandatory_reset__form"
All 3 password inputs have their data-testid attributes
All 3 error messages have their data-testid attributes
Back button has data-testid="mandatory_reset__back_button"
Submit button has data-testid="mandatory_reset__submit_button"

🧪 VERIFICATION SCRIPT

After implementation, run this in browser console to verify:

// Check Profile Editor attributes
const profileEditorIds = Array.from(document.querySelectorAll('[data-testid^="profile_editor__"]'))
  .map(el => el.getAttribute('data-testid'))
  .sort()

console.log(`✅ Profile Editor: Found ${profileEditorIds.length} data-testid attributes`)

// Check Password Reset Modal attributes
const mandatoryResetIds = Array.from(document.querySelectorAll('[data-testid^="mandatory_reset__"]'))
  .map(el => el.getAttribute('data-testid'))
  .sort()

console.log(`✅ Password Reset Modal: Found ${mandatoryResetIds.length} data-testid attributes`)

// Check for missing critical attributes
const criticalProfileEditor = [
  'profile_editor__page',
  'profile_editor__progress_value',
  'profile_editor__save_button',
  'profile_editor__tab_personal_information',
  'profile_editor__first_name_input',
  'profile_editor__email_input',
]

const criticalMandatoryReset = [
  'mandatory_reset__modal',
  'mandatory_reset__continue_button',
  'mandatory_reset__form',
  'mandatory_reset__current_password_input',
  'mandatory_reset__new_password_input',
  'mandatory_reset__submit_button',
]

const missingProfileEditor = criticalProfileEditor.filter(id => !profileEditorIds.includes(id))
const missingMandatoryReset = criticalMandatoryReset.filter(id => !mandatoryResetIds.includes(id))

if (missingProfileEditor.length > 0) {
  console.error('❌ Missing Profile Editor attributes:', missingProfileEditor)
} else {
  console.log('✅ All critical Profile Editor attributes present!')
}

if (missingMandatoryReset.length > 0) {
  console.error('❌ Missing Password Reset Modal attributes:', missingMandatoryReset)
} else {
  console.log('✅ All critical Password Reset Modal attributes present!')
}

🎯 PRIORITY ORDER

🔴 CRITICAL (Must Have - Implement First):

Profile Editor:

Tab buttons (all 9 tabs)
Save, Cancel, Prev, Next buttons
All input fields in Personal Information
All input fields in Contact Information
Progress value display
All input fields in Parent/Guardian
All input fields in Education Details
All checkboxes in Focus Areas
All checkboxes in Self-Assessment
All checkboxes in Hobbies & Clubs
All textareas in Achievements
All checkboxes in Expectations

Password Reset Modal:

Modal overlay
Continue button
Form container
All 3 password inputs
Submit button

🟡 IMPORTANT (Should Have - Implement Second):

Profile Editor:

Missing fields toggle
Back button
Tab scroll buttons
All "Others" text inputs
Conditional fields (guardian, specially abled details)

Password Reset Modal:

Back button
All 3 error messages

🟢 OPTIONAL (Nice to Have - Implement Last):

Profile Editor:

Page container
Modal content container

Password Reset Modal:

Modal content container
Password toggle buttons

📊 SUMMARY STATISTICS

Component	Total Attributes	Critical	Important	Optional
Profile Editor	~200+	~150	~40	~10
Password Reset Modal	14	7	4	3
TOTAL	~214+	~157	~44	~13

📝 FILES TO UPDATE

src/pages/StudentProfileEditor.jsx
- Add formatTestId function
- Add data-testid to all elements listed above
- Update MultiSelectPicker component
src/pages/designs/design-1/components/MandatoryPasswordResetModal.jsx
- Add data-testid to all elements listed above

🚀 AFTER IMPLEMENTATION

Once all attributes are added:

Run Verification Script (see above) in browser console
Share Results with Automation Team
Automation Team will:
- Update locators to use data-testid
- Run DOM Inspector to verify
- Run full test suite
- Confirm 100% reliability

Expected Results:

✅ Tests run in < 1 minute (currently 8+ minutes)
✅ 100% test pass rate
✅ Zero fragile XPath/CSS selectors needed
✅ World-class automation reliability

📞 SUPPORT & QUESTIONS

If you have questions about:

Naming conventions
Implementation details
Testing requirements
Verification process

Contact: Automation Team

✅ FINAL CHECKLIST

Before marking as complete:

All Profile Editor attributes added
All Password Reset Modal attributes added
formatTestId function added
MultiSelectPicker updated with testIdPrefix
Verification script run successfully
Results shared with Automation Team
Automation Team confirmed implementation

Document Version: 1.0
Last Updated: 2025-01-20
Status: ✅ Ready for UI Team Implementation
Total Attributes Required: ~214+

This is a STANDALONE document - contains everything the UI team needs!

27 KiB Raw Blame History

🎯 COMPLETE DATA-TESTID REQUIREMENTS

For UI Development Team - All Components

📋 EXECUTIVE SUMMARY

Components Requiring Updates:

🔑 NAMING CONVENTION (MANDATORY - READ THIS FIRST)

Pattern:

Rules:

Examples:

Dynamic Elements:

📚 PART 1: STUDENT PROFILE EDITOR

1.1 PAGE-LEVEL ELEMENTS

1.2 TAB NAVIGATION

Tab Buttons (9 tabs) - 🔴 CRITICAL

1.3 SECTION 1: PERSONAL INFORMATION (Tab 0)

1.4 SECTION 2: CONTACT INFORMATION (Tab 1)

1.5 SECTION 3: PARENT/GUARDIAN (Tab 2)

Father's Details:

Mother's Details:

Guardian (If Different):

1.6 SECTION 4: EDUCATION DETAILS (Tab 3)

1.7 SECTION 5: FOCUS AREAS (Tab 4)

Short-term Focus Areas:

Long-term Focus Areas:

1.8 SECTION 6: SELF-ASSESSMENT (Tab 5)

Strengths:

Areas of Improvement:

1.9 SECTION 7: HOBBIES & CLUBS (Tab 6)

Hobbies/Interests:

Clubs or Teams:

1.10 SECTION 8: ACHIEVEMENTS (Tab 7)

1.11 SECTION 9: EXPECTATIONS (Tab 8)

1.12 NAVIGATION BUTTONS

📚 PART 2: MANDATORY PASSWORD RESET MODAL

2.1 MODAL CONTAINER

2.2 STEP 1: WELCOME SCREEN

2.3 STEP 2: PASSWORD RESET FORM

🔧 IMPLEMENTATION GUIDE

Step 1: Add formatTestId Helper Function

Step 2: Update Tab Buttons

Step 3: Update MultiSelectPicker Component

Step 4: Add data-testid to All Input Elements

Step 5: Add data-testid to All Buttons

✅ VERIFICATION CHECKLIST

Profile Editor:

Password Reset Modal:

🧪 VERIFICATION SCRIPT

🎯 PRIORITY ORDER

🔴 CRITICAL (Must Have - Implement First):

🟡 IMPORTANT (Should Have - Implement Second):

🟢 OPTIONAL (Nice to Have - Implement Last):

📊 SUMMARY STATISTICS

📝 FILES TO UPDATE

🚀 AFTER IMPLEMENTATION

📞 SUPPORT & QUESTIONS

✅ FINAL CHECKLIST

27 KiB

Raw Blame History