@nextsparkjs/theme-default 0.1.0-beta.30 → 0.1.0-beta.35

package/tests/cypress/e2e/{_selectors → _utils/selectors}/settings-api-keys.cy.ts

@@ -14,27 +14,40 @@
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
  *
+ * Test IDs:
+ * - SEL_API_001: API Keys Page Structure
+ * - SEL_API_002: Empty State / Skeleton Selectors
+ * - SEL_API_003: Create Dialog Selectors
+ * - SEL_API_004: API Key Row Dynamic Selectors
+ * - SEL_API_005: Details Dialog Selectors
+ * - SEL_API_006: Revoke/New Key Selectors
+ *
  * NOTE: API Keys page requires 'api-keys' permission (colaborator role minimum).
  * Many selectors are dynamic with {id} placeholders.
+ *
+ * SELECTOR MISMATCHES:
+ * - CORE_SELECTORS uses 'api-keys-create-dialog' but component uses 'api-keys-dialog'
+ * - CORE_SELECTORS uses 'api-key-name' but component uses 'api-keys-dialog-name'
+ * Tests use direct selectors based on actual implementation where mismatches exist.
  */
 
-import { SettingsPOM } from '../../src/features/SettingsPOM'
-import { loginAsDefaultOwner } from '../../src/session-helpers'
+import { SettingsPOM } from '../../../src/features/SettingsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
-describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors', '@settings'] }, () => {
   const settings = SettingsPOM.create()
 
   beforeEach(() => {
-    loginAsDefaultOwner()
+    loginAsDefaultDeveloper()
     settings.visitApiKeys()
     // Wait for API keys page to load
     cy.get(settings.selectors.apiKeysPage, { timeout: 15000 }).should('exist')
   })
 
   // ============================================
-  // API KEYS PAGE STRUCTURE (5 selectors)
+  // SEL_API_001: API KEYS PAGE STRUCTURE
   // ============================================
-  describe('API Keys Page Structure', () => {
+  describe('SEL_API_001: API Keys Page Structure', { tags: '@SEL_API_001' }, () => {
     it('should find api keys page container', () => {
       cy.get(settings.selectors.apiKeysPage).should('exist')
     })
@@ -58,9 +71,9 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
   })
 
   // ============================================
-  // EMPTY STATE / SKELETON (3 selectors)
+  // SEL_API_002: EMPTY STATE / SKELETON
   // ============================================
-  describe('Empty State Selectors', () => {
+  describe('SEL_API_002: Empty State / Skeleton Selectors', { tags: '@SEL_API_002' }, () => {
     // Note: Skeleton only visible during loading
     it.skip('should find skeleton (only visible during loading)', () => {
       cy.get(settings.selectors.apiKeysSkeleton).should('exist')
@@ -77,11 +90,10 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
   })
 
   // ============================================
-  // CREATE DIALOG SELECTORS (4 selectors)
-  // NOTE: CORE_SELECTORS uses 'api-keys-create-dialog' but component uses 'api-keys-dialog'
-  // Tests use direct selectors based on actual implementation
+  // SEL_API_003: CREATE DIALOG SELECTORS
+  // NOTE: Component uses different selectors than CORE_SELECTORS
   // ============================================
-  describe('Create Dialog Selectors', () => {
+  describe('SEL_API_003: Create Dialog Selectors', { tags: '@SEL_API_003' }, () => {
     beforeEach(() => {
       cy.get(settings.selectors.apiKeysCreate).click()
       // Component uses 'api-keys-dialog' not 'api-keys-create-dialog'
@@ -109,9 +121,9 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
   })
 
   // ============================================
-  // API KEY ROW SELECTORS (Dynamic with {id})
+  // SEL_API_004: API KEY ROW DYNAMIC SELECTORS
   // ============================================
-  describe('API Key Row Dynamic Selectors', () => {
+  describe('SEL_API_004: API Key Row Dynamic Selectors', { tags: '@SEL_API_004' }, () => {
     it('should find api key rows if any exist', () => {
       cy.get('body').then(($body) => {
         const hasRows = $body.find(settings.selectors.apiKeyRowGeneric).length > 0
@@ -133,10 +145,10 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
   })
 
   // ============================================
-  // DETAILS DIALOG SELECTORS (14 selectors) - SKIP
+  // SEL_API_005: DETAILS DIALOG SELECTORS
   // Require clicking on an existing API key
   // ============================================
-  describe('Details Dialog Selectors', () => {
+  describe('SEL_API_005: Details Dialog Selectors', { tags: '@SEL_API_005' }, () => {
     it.skip('should find details dialog (requires existing API key)', () => {
       cy.get(settings.selectors.apiKeysDetailsDialog).should('exist')
     })
@@ -195,9 +207,9 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
   })
 
   // ============================================
-  // REVOKE DIALOG SELECTORS (3 selectors) - SKIP
+  // SEL_API_006: REVOKE / NEW KEY DISPLAY SELECTORS
   // ============================================
-  describe('Revoke Dialog Selectors', () => {
+  describe('SEL_API_006: Revoke / New Key Selectors', { tags: '@SEL_API_006' }, () => {
     it.skip('should find revoke dialog (requires clicking revoke)', () => {
       cy.get(settings.selectors.apiKeyRevokeDialog).should('exist')
     })
@@ -206,13 +218,6 @@ describe('Settings API Keys Selectors Validation', { tags: ['@ui-selectors'] },
       cy.get(settings.selectors.apiKeyRevokeConfirm).should('exist')
     })
 
-    // Note: Cancel is in dialog footer, not specific selector
-  })
-
-  // ============================================
-  // NEW KEY DISPLAY SELECTORS (3 selectors) - SKIP
-  // ============================================
-  describe('New Key Display Selectors', () => {
     it.skip('should find new key display (after creating key)', () => {
       cy.get(settings.selectors.apiKeyNewDisplay).should('exist')
     })

package/tests/cypress/e2e/_utils/selectors/settings-billing.bdd.md

@@ -0,0 +1,78 @@
+---
+feature: Settings Billing UI Selectors Validation
+priority: medium
+tags: [selectors, settings, billing, ui-validation]
+grepTags: [ui-selectors, settings, SEL_BILL_001]
+coverage: 1
+---
+
+# Settings Billing UI Selectors Validation
+
+> Validates that settings billing selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Runs as Phase 12 sub-gate before functional tests.
+
+## @test SEL_BILL_001: Billing Page Selectors
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** settings, billing, subscription
+- **Grep:** `@ui-selectors` `@SEL_BILL_001`
+- **Status:** Active (1 passing, 13 skipped)
+
+```gherkin:en
+Scenario: Billing page has required selectors
+
+Given I am logged in as admin with billing permission
+And I navigate to the billing settings page
+Then I should find the billing main container
+And I should find the manage subscription button
+And I should find the current plan card
+And I should find the plan name display
+And I should find the plan status display
+```
+
+```gherkin:es
+Scenario: La pagina de billing tiene los selectores requeridos
+
+Given estoy logueado como admin con permiso de billing
+And navego a la pagina de settings de billing
+Then deberia encontrar el contenedor principal de billing
+And deberia encontrar el boton de administrar suscripcion
+And deberia encontrar la tarjeta del plan actual
+And deberia encontrar el nombre del plan
+And deberia encontrar el estado del plan
+```
+
+### Expected Results
+- `settings.billing.main` selector exists (settings-billing-main) - **SKIPPED: Requires admin**
+- `settings.billing.manageSubscription` selector exists (settings-billing-manage-subscription) - **SKIPPED: Requires admin**
+- `settings.billing.currentPlan` selector exists (settings-billing-current-plan) - **SKIPPED: Requires admin**
+- `settings.billing.planName` selector exists (settings-billing-plan-name) - **SKIPPED: Requires admin**
+- `settings.billing.planStatus` selector exists (settings-billing-plan-status) - **SKIPPED: Requires admin**
+
+### Notes
+**All tests are skipped because:**
+- The billing page requires `settings.billing` permission
+- The default developer user in devKeyring does not have this permission
+- To test billing selectors:
+  1. Configure a user with admin role that includes billing permissions
+  2. Use `loginAsUser('admin')` instead of `loginAsDefaultDeveloper()`
+  3. Enable tests by removing `.skip`
+
+**Future Enhancement:**
+Consider adding a billing admin user to devKeyring specifically for testing billing functionality.
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| BillingSettings | `packages/core/src/components/settings/BillingSettings.tsx` | settings-billing-* |
+| PlanCard | `packages/core/src/components/billing/PlanCard.tsx` | settings-billing-current-plan, settings-billing-plan-name, settings-billing-plan-status |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| SettingsPOM | `themes/default/tests/cypress/src/features/SettingsPOM.ts` | Billing page selectors |

package/tests/cypress/e2e/{_selectors → _utils/selectors}/settings-billing.cy.ts

@@ -14,35 +14,38 @@
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
  *
+ * Test IDs:
+ * - SEL_BILL_001: Billing Page Selectors (mostly skipped - requires admin role)
+ *
  * IMPORTANT: Billing page requires 'settings.billing' permission (admin role).
  * Users without this permission are redirected to /dashboard/settings.
  * Many billing selectors from CORE_SELECTORS are not yet implemented.
  */
 
-import { SettingsPOM } from '../../src/features/SettingsPOM'
-import { loginAsDefaultOwner } from '../../src/session-helpers'
+import { SettingsPOM } from '../../../src/features/SettingsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
-describe('Settings Billing Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Settings Billing Selectors Validation', { tags: ['@ui-selectors', '@settings'] }, () => {
   const settings = SettingsPOM.create()
 
   // ============================================
-  // BILLING SELECTORS (19 selectors in CORE_SELECTORS)
+  // SEL_BILL_001: BILLING PAGE SELECTORS
   // Requires admin role permission 'settings.billing'
   // All tests skipped - billing page requires special permissions
   // ============================================
-  describe('Billing Page Selectors', () => {
+  describe('SEL_BILL_001: Billing Page Selectors', { tags: '@SEL_BILL_001' }, () => {
     // NOTE: Billing page requires 'settings.billing' permission (admin role)
     // The default owner may not have this permission, causing redirects
     // All tests are skipped until proper admin login is available
 
     it.skip('should find billing main (requires admin permission)', () => {
-      loginAsDefaultOwner()
+      loginAsDefaultDeveloper()
       settings.visitBilling()
       cy.get(settings.selectors.billingMain).should('exist')
     })
 
     it.skip('should find billing header (requires admin permission)', () => {
-      loginAsDefaultOwner()
+      loginAsDefaultDeveloper()
       settings.visitBilling()
       cy.get(settings.selectors.billingHeader).should('exist')
     })

package/tests/cypress/e2e/_utils/selectors/settings-layout.bdd.md

@@ -0,0 +1,138 @@
+---
+feature: Settings Layout UI Selectors Validation
+priority: high
+tags: [selectors, settings, layout, ui-validation]
+grepTags: [ui-selectors, settings, SEL_LAY_001, SEL_LAY_002]
+coverage: 2
+---
+
+# Settings Layout UI Selectors Validation
+
+> Validates that settings layout selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Runs as Phase 12 sub-gate before functional tests.
+
+## @test SEL_LAY_001: Layout Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** settings, layout, container
+- **Grep:** `@ui-selectors` `@SEL_LAY_001`
+- **Status:** Active (7 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Settings layout has required selectors
+
+Given I am logged in as developer
+And I navigate to the settings page
+Then I should find the settings layout main container
+And I should find the settings header
+And I should find the settings content area
+And I should find the settings sidebar
+And I should find the settings sidebar container
+And I should find the settings mobile menu trigger
+And I should find the settings mobile sheet
+```
+
+```gherkin:es
+Scenario: El layout de settings tiene los selectores requeridos
+
+Given estoy logueado como developer
+And navego a la pagina de settings
+Then deberia encontrar el contenedor principal del layout de settings
+And deberia encontrar el header de settings
+And deberia encontrar el area de contenido de settings
+And deberia encontrar el sidebar de settings
+And deberia encontrar el contenedor del sidebar de settings
+And deberia encontrar el trigger del menu movil de settings
+And deberia encontrar el sheet movil de settings
+```
+
+### Expected Results
+- `settings.layout.main` selector exists (settings-layout-main)
+- `settings.layout.header` selector exists (settings-layout-header)
+- `settings.layout.content` selector exists (settings-layout-content)
+- `settings.layout.sidebar` selector exists (settings-layout-sidebar)
+- `settings.layout.sidebarContainer` selector exists (settings-sidebar-container)
+- `settings.layout.mobileMenuTrigger` selector exists (settings-mobile-menu-trigger)
+- `settings.layout.mobileSheet` selector exists (settings-mobile-sheet)
+
+---
+
+## @test SEL_LAY_002: Sidebar Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** settings, sidebar, navigation
+- **Grep:** `@ui-selectors` `@SEL_LAY_002`
+- **Status:** Active (11 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Settings sidebar has all navigation links
+
+Given I am logged in as developer
+And I navigate to the settings page
+Then I should find the profile nav link
+And I should find the password nav link
+And I should find the teams nav link
+And I should find the API keys nav link
+And I should find the appearance nav link
+And I should find the notifications nav link
+And I should find the billing nav link
+And I should find the members nav link
+And I should find the invite nav link
+And I should find the roles nav link
+And I should find the danger zone nav link
+And I should find the back to dashboard link
+```
+
+```gherkin:es
+Scenario: El sidebar de settings tiene todos los links de navegacion
+
+Given estoy logueado como developer
+And navego a la pagina de settings
+Then deberia encontrar el link de navegacion a perfil
+And deberia encontrar el link de navegacion a password
+And deberia encontrar el link de navegacion a equipos
+And deberia encontrar el link de navegacion a API keys
+And deberia encontrar el link de navegacion a apariencia
+And deberia encontrar el link de navegacion a notificaciones
+And deberia encontrar el link de navegacion a facturacion
+And deberia encontrar el link de navegacion a miembros
+And deberia encontrar el link de navegacion a invitar
+And deberia encontrar el link de navegacion a roles
+And deberia encontrar el link de navegacion a zona de peligro
+And deberia encontrar el link de volver al dashboard
+```
+
+### Expected Results
+- `settings.sidebar.profile` selector exists (settings-sidebar-profile)
+- `settings.sidebar.password` selector exists (settings-sidebar-password)
+- `settings.sidebar.teams` selector exists (settings-sidebar-teams)
+- `settings.sidebar.apiKeys` selector exists (settings-sidebar-api-keys)
+- `settings.sidebar.appearance` selector exists (settings-sidebar-appearance)
+- `settings.sidebar.notifications` selector exists (settings-sidebar-notifications)
+- `settings.sidebar.billing` selector exists (settings-sidebar-billing)
+- `settings.sidebar.members` selector exists (settings-sidebar-members)
+- `settings.sidebar.invite` selector exists (settings-sidebar-invite)
+- `settings.sidebar.roles` selector exists (settings-sidebar-roles)
+- `settings.sidebar.dangerZone` selector exists (settings-sidebar-danger-zone)
+- `settings.sidebar.backToDashboard` selector exists (settings-sidebar-back-to-dashboard)
+
+### Notes
+Some sidebar items may not be visible depending on user permissions. The test validates selectors that are accessible to the developer role.
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| SettingsLayout | `packages/core/src/components/settings/SettingsLayout.tsx` | settings-layout-main, settings-layout-header, settings-layout-content |
+| SettingsSidebar | `packages/core/src/components/settings/SettingsSidebar.tsx` | settings-sidebar-*, settings-layout-sidebar |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| SettingsPOM | `themes/default/tests/cypress/src/features/SettingsPOM.ts` | Settings layout and sidebar selectors |

package/tests/cypress/e2e/{_selectors → _utils/selectors}/settings-layout.cy.ts

@@ -13,22 +13,26 @@
  * - Navigate to settings pages (requires login)
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_LAY_001: Layout Selectors
+ * - SEL_LAY_002: Sidebar Selectors
  */
 
-import { SettingsPOM } from '../../src/features/SettingsPOM'
-import { loginAsDefaultOwner } from '../../src/session-helpers'
+import { SettingsPOM } from '../../../src/features/SettingsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
-describe('Settings Layout Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Settings Layout Selectors Validation', { tags: ['@ui-selectors', '@settings'] }, () => {
   const settings = SettingsPOM.create()
 
   beforeEach(() => {
-    loginAsDefaultOwner()
+    loginAsDefaultDeveloper()
   })
 
   // ============================================
-  // LAYOUT SELECTORS (7 selectors)
+  // SEL_LAY_001: LAYOUT SELECTORS
   // ============================================
-  describe('Layout Selectors', () => {
+  describe('SEL_LAY_001: Layout Selectors', { tags: '@SEL_LAY_001' }, () => {
     beforeEach(() => {
       settings.visitSettings()
       settings.waitForSettings()
@@ -64,9 +68,9 @@ describe('Settings Layout Selectors Validation', { tags: ['@ui-selectors'] }, ()
   })
 
   // ============================================
-  // SIDEBAR SELECTORS (4 selectors)
+  // SEL_LAY_002: SIDEBAR SELECTORS
   // ============================================
-  describe('Sidebar Selectors', () => {
+  describe('SEL_LAY_002: Sidebar Selectors', { tags: '@SEL_LAY_002' }, () => {
     beforeEach(() => {
       settings.visitSettings()
       settings.waitForSettings()

package/tests/cypress/e2e/_utils/selectors/settings-password.bdd.md

@@ -0,0 +1,82 @@
+---
+feature: Settings Password UI Selectors Validation
+priority: high
+tags: [selectors, settings, password, ui-validation]
+grepTags: [ui-selectors, settings, SEL_PASS_001]
+coverage: 1
+---
+
+# Settings Password UI Selectors Validation
+
+> Validates that settings password selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Runs as Phase 12 sub-gate before functional tests.
+
+## @test SEL_PASS_001: Password Page Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** settings, password, form
+- **Grep:** `@ui-selectors` `@SEL_PASS_001`
+- **Status:** Active (2 passing, 5 skipped)
+
+```gherkin:en
+Scenario: Password page has required selectors
+
+Given I am logged in as developer
+And I navigate to the password settings page
+Then I should find the password container
+And I should find the password form
+And I should find the current password input
+And I should find the new password input
+And I should find the confirm password input
+And I should find the password submit button
+```
+
+```gherkin:es
+Scenario: La pagina de password tiene los selectores requeridos
+
+Given estoy logueado como developer
+And navego a la pagina de settings de password
+Then deberia encontrar el contenedor de password
+And deberia encontrar el formulario de password
+And deberia encontrar el input de password actual
+And deberia encontrar el input de nuevo password
+And deberia encontrar el input de confirmar password
+And deberia encontrar el boton de enviar password
+```
+
+### Expected Results
+- `settings.password.container` selector exists (settings-password) - **SKIPPED: Mismatch**
+- `settings.password.form` selector exists (password-form)
+- `settings.password.current` selector exists (password-current) - **SKIPPED: Mismatch**
+- `settings.password.new` selector exists (password-new) - **SKIPPED: Mismatch**
+- `settings.password.confirm` selector exists (password-confirm) - **SKIPPED: Mismatch**
+- `settings.password.submit` selector exists (password-submit)
+
+### Notes
+**Selector Mismatches Documented:**
+
+| Expected (CORE_SELECTORS) | Actual (Component) | Issue |
+|---------------------------|-------------------|-------|
+| `settings-password` | `password-main` | Container uses different naming |
+| `password-current` | `password-current-input` | Extra `-input` suffix |
+| `password-new` | `password-new-input` | Extra `-input` suffix |
+| `password-confirm` | `password-confirm-input` | Extra `-input` suffix |
+
+Resolution options:
+1. Update CORE_SELECTORS to match component naming
+2. Update PasswordForm component to match CORE_SELECTORS
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| PasswordForm | `packages/core/src/components/settings/PasswordForm.tsx` | password-main, password-form, password-current-input, password-new-input, password-confirm-input, password-submit |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| SettingsPOM | `themes/default/tests/cypress/src/features/SettingsPOM.ts` | Password page selectors |

package/tests/cypress/e2e/{_selectors → _utils/selectors}/settings-password.cy.ts

@@ -14,27 +14,30 @@
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
  *
- * NOTE: Password page only visible for users with password auth (not Google OAuth)
+ * Test IDs:
+ * - SEL_PASS_001: Password Page Selectors
+ *
+ * NOTE: Password page only visible for users with password auth (not Google OAuth).
  * Some selectors from CORE_SELECTORS have naming mismatches with implementation.
  */
 
-import { SettingsPOM } from '../../src/features/SettingsPOM'
-import { loginAsDefaultOwner } from '../../src/session-helpers'
+import { SettingsPOM } from '../../../src/features/SettingsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
-describe('Settings Password Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Settings Password Selectors Validation', { tags: ['@ui-selectors', '@settings'] }, () => {
   const settings = SettingsPOM.create()
 
   beforeEach(() => {
-    loginAsDefaultOwner()
+    loginAsDefaultDeveloper()
     settings.visitPassword()
     // Wait for password page to load
     cy.get(settings.selectors.passwordForm, { timeout: 15000 }).should('be.visible')
   })
 
   // ============================================
-  // PASSWORD SELECTORS (7 selectors in CORE_SELECTORS)
+  // SEL_PASS_001: PASSWORD PAGE SELECTORS
   // ============================================
-  describe('Password Page Selectors', () => {
+  describe('SEL_PASS_001: Password Page Selectors', { tags: '@SEL_PASS_001' }, () => {
     // NOTE: CORE_SELECTORS defines 'settings-password' but component uses 'password-main'
     it.skip('should find password container (selector mismatch: CORE uses settings-password, component uses password-main)', () => {
       cy.get(settings.selectors.passwordContainer).should('exist')

package/tests/cypress/e2e/_utils/selectors/settings-profile.bdd.md

@@ -0,0 +1,77 @@
+---
+feature: Settings Profile UI Selectors Validation
+priority: high
+tags: [selectors, settings, profile, ui-validation]
+grepTags: [ui-selectors, settings, SEL_PROF_001]
+coverage: 1
+---
+
+# Settings Profile UI Selectors Validation
+
+> Validates that settings profile selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Runs as Phase 12 sub-gate before functional tests.
+
+## @test SEL_PROF_001: Profile Page Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** settings, profile, form
+- **Grep:** `@ui-selectors` `@SEL_PROF_001`
+- **Status:** Active (6 passing, 3 skipped)
+
+```gherkin:en
+Scenario: Profile page has required selectors
+
+Given I am logged in as developer
+And I navigate to the profile settings page
+Then I should find the profile container
+And I should find the profile form
+And I should find the first name input
+And I should find the last name input
+And I should find the email input
+And I should find the profile submit button
+```
+
+```gherkin:es
+Scenario: La pagina de perfil tiene los selectores requeridos
+
+Given estoy logueado como developer
+And navego a la pagina de settings de perfil
+Then deberia encontrar el contenedor de perfil
+And deberia encontrar el formulario de perfil
+And deberia encontrar el input de nombre
+And deberia encontrar el input de apellido
+And deberia encontrar el input de email
+And deberia encontrar el boton de enviar perfil
+```
+
+### Expected Results
+- `settings.profile.container` selector exists (settings-profile) ✅
+- `settings.profile.form` selector exists (profile-form) ✅
+- `settings.profile.firstName` selector exists (profile-first-name) ✅
+- `settings.profile.lastName` selector exists (profile-last-name) ✅
+- `settings.profile.email` selector exists (profile-email) ✅
+- `settings.profile.submit` selector exists (profile-submit) ✅
+- `settings.profile.avatar` selector - **SKIPPED: Feature not implemented**
+- `settings.profile.avatarUpload` selector - **SKIPPED: Feature not implemented**
+- `settings.profile.successMessage` selector - **SKIPPED: Requires form submission (functional test)**
+
+### Notes
+**Skipped Tests (3):**
+1. `profile-avatar` - Avatar feature not implemented in ProfilePage component
+2. `profile-avatar-upload` - Avatar upload feature not implemented
+3. `profile-success` - Success message only appears after form submission (functional test, not selector validation)
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| ProfilePage | `apps/dev/app/dashboard/settings/profile/page.tsx` | settings-profile, profile-form, profile-first-name, profile-last-name, profile-email, profile-submit, profile-success |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| SettingsPOM | `themes/default/tests/cypress/src/features/SettingsPOM.ts` | Profile page selectors |