CP_AUTOMATION/CognitivePrism/my-project/docTracks/02_PATTERN_RULES.md

Data-TestID Pattern Rules

Purpose: Universal rules that survive code changes
Based On: Automation test requirements + existing code patterns
Verification: Pattern-based (not file-specific)

---

🎯 CORE PATTERN

{scope}__{element_name}

Rules:

1. Double underscore (__) separates scope from element name
2. Single underscore (_) within element names for readability
3. All lowercase - no camelCase, no PascalCase
4. Snake_case throughout

---

📋 SCOPE DEFINITIONS

Scope	Purpose	Example Files
student_login	Student login page	SignInPage.jsx
student_nav	Student navigation header	Design1Header.jsx
mandatory_reset	Mandatory password reset modal	MandatoryPasswordResetModal.jsx
profile_incomplete	Profile incomplete modal	ProfileIncompleteModal.jsx
profile_editor	Profile editor form	StudentProfileEditor.jsx
dashboard	Dashboard page	DashboardPage.jsx
assessment_card	Assessment card component	ProductCard.jsx

---

🔤 ELEMENT NAME PATTERNS

Input Fields

{scope}__{field_name}_input

Examples:

• student_login__identifier_input
• profile_editor__first_name_input
• mandatory_reset__current_password_input

Select/Dropdown

{scope}__{field_name}_select

Examples:

• profile_editor__gender_select
• profile_editor__board_stream_select

Textarea

{scope}__{field_name}_textarea

Examples:

• profile_editor__specially_abled_details_textarea
• profile_editor__achievement_academics_textarea

Checkbox

{scope}__{field_name}_checkbox

Examples:

• student_login__remember_checkbox
• profile_editor__specially_abled_checkbox

Buttons

{scope}__{action}_button

Examples:

• student_login__submit_button
• profile_editor__save_button
• profile_editor__prev_button
• profile_editor__next_button
• profile_editor__cancel_button

Links

{scope}__{destination}_link

Examples:

• student_nav__dashboard_link
• student_nav__assessments_link

Modals/Containers

{scope}__modal
{scope}__form
{scope}__dropdown

Examples:

• mandatory_reset__modal
• student_login__form
• student_nav__profile_dropdown

Error Messages

{scope}__{field_name}_error
{scope}__error_banner
{scope}__error_toast

Examples:

• mandatory_reset__current_password_error
• student_login__error_banner
• student_login__error_toast

Progress/Status

{scope}__progress_value

Examples:

• profile_editor__progress_value
• profile_incomplete__progress_value

---

🔄 DYNAMIC PATTERNS

Dynamic Collections (Checkboxes, Cards)

{scope}__{base_name}__{formatted_value}

Formatting Function (if needed):

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:

• profile_editor__short_term_focus__academics (from "01. Academics")
• profile_editor__club__science_club (from "1. Science Club")
• assessment_card__{assignmentId} (dynamic ID)
• assessment_card__{assignmentId}__action (dynamic action button)

Tab Navigation

{scope}__tab_{formatted_tab_name}

Examples:

• profile_editor__tab_personal_information
• profile_editor__tab_contact_information

---

⚠️ CRITICAL RULES

1. NEVER use single underscore between scope and element

   • ❌ student_login_identifier_input
   • ✅ student_login__identifier_input

2. NEVER use camelCase or PascalCase

   • ❌ studentLogin__identifierInput
   • ❌ StudentLogin__IdentifierInput
   • ✅ student_login__identifier_input

3. NEVER use hyphens

   • ❌ student-login__identifier-input
   • ✅ student_login__identifier_input

4. ALWAYS use descriptive element names

   • ❌ profile_editor__btn1
   • ✅ profile_editor__save_button

5. For dynamic values, use double underscore before dynamic part

   • ✅ profile_editor__short_term_focus__academics
   • ❌ profile_editor__short_term_focus_academics

---

✅ VERIFICATION PATTERN

All attributes must match this regex:

^[a-z][a-z0-9_]*__[a-z][a-z0-9_]*(__[a-z0-9_]+)*$

Breakdown:

• ^[a-z][a-z0-9_]* - Scope (starts with lowercase letter)
• __ - Double underscore separator
• [a-z][a-z0-9_]* - Element name (starts with lowercase letter)
• (__[a-z0-9_]+)* - Optional dynamic parts (each prefixed with __)

---

Note: These rules are universal and apply to ALL future implementations, regardless of code changes.