# Missing Test IDs Audit

This document identifies components that are missing `data-testid` attributes and provides recommendations for the frontend team.

**Audit Date:** 2026-03-24
**Last Updated:** 2026-03-24

---

## Overview

This audit was performed by analyzing all E2E test spec files to identify selectors that rely on:
- CSS selectors (brittle)
- Text content (can change)
- XPath expressions (fragile)
- ARIA roles without test IDs (less stable)

### Priority Levels

| Priority | Description |
|----------|-------------|
| **High** | Critical user flows, frequently failing tests |
| **Medium** | Important but not blocking, occasional issues |
| **Low** | Nice to have, stable fallbacks currently exist |

---

## Components Missing data-testid

### Authentication / Login

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Login form container | `form` or `[data-testid="login-form"]` | `login-form-container` | High |
| Remember me checkbox | `[data-testid="remember-me"]` | Ensure consistent usage | High |
| Password visibility toggle | `[data-testid="password-visibility-toggle"]` | Already defined | Low |
| Login error container | `.error-message` | `login-error-container` | High |

### Navigation

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Main navigation container | N/A | `main-navigation` | Medium |
| Breadcrumb container | `[data-testid="breadcrumbs"]` | Already defined | Low |
| User menu dropdown | `[data-testid="user-menu-dropdown"]` | Already defined | Low |
| Mobile hamburger menu | `[data-testid="hamburger-menu"]` | Already defined | Medium |
| Mobile menu container | `[data-testid="mobile-menu"]` | Already defined | Medium |

### Accounts

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Accounts table container | `[data-testid="accounts-table"]` | Already defined | Low |
| Account row cell (name) | `[data-testid^="cell-name"]` | Standardize pattern | Medium |
| Account row cell (industry) | `[data-testid^="cell-industry"]` | Standardize pattern | Medium |
| Bulk actions container | `[data-testid="bulk-actions"]` | Already defined | Low |
| Import/export buttons | `[data-testid^="import/export-button"]` | Already defined | Low |

### Contacts

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Contacts table | `[data-testid="contacts-table"]` | Already defined | Low |
| Contact email cell | `[data-testid^="cell-email"]` | Standardize pattern | Medium |
| Account filter dropdown | `[data-testid="account-filter"]` | Already defined | Low |
| Activities timeline | `[data-testid="activities-timeline"]` | Already defined | Low |

### Opportunities

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Opportunities table | `[data-testid="opportunities-table"]` | Already defined | Low |
| Stage badges | `[data-testid^="cell-stage"]` | Standardize pattern | Medium |
| Amount cells | `[data-testid^="cell-amount"]` | Standardize pattern | Medium |
| Pipeline board | `[data-testid="pipeline-board"]` | Already defined | Medium |
| Opportunity cards | `[data-testid^="opportunity-card"]` | Already defined | Medium |
| Stage columns | `[data-testid^="stage-column"]` | Already defined | Medium |

### Search

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Global search input | `[data-testid="global-search-input"]` | Already defined | Low |
| Search results dropdown | `[data-testid="search-results-dropdown"]` | Already defined | Low |
| Search result items | `[data-testid^="search-result-"]` | Already defined | Low |
| No results message | `[data-testid="no-results-message"]` | Already defined | Low |
| Recent searches | `[data-testid="recent-searches"]` | Already defined | Low |
| Advanced search modal | `[data-testid="advanced-search-modal"]` | Already defined | Low |

### Dashboards

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Dashboard cards | `[data-testid^="dashboard-card"]` | Already defined | Low |
| Dashboard thumbnails | `[data-testid^="dashboard-thumbnail"]` | Already defined | Low |
| Dashboard container | `[data-testid="dashboards-container"]` | Already defined | Low |
| View toggle | `[data-testid="view-toggle"]` | Already defined | Low |
| Widget containers | `[data-testid^="dashboard-widget"]` | Already defined | Medium |
| Chart widgets | `[data-testid^="chart-widget"]` | Already defined | Medium |
| Table widgets | `[data-testid^="table-widget"]` | Already defined | Medium |
| Metric widgets | `[data-testid^="metric-widget"]` | Already defined | Medium |
| Widget expand button | `[data-testid^="widget-expand"]` | Already defined | Medium |
| Widget menu | `[data-testid^="widget-menu"]` | Already defined | Medium |
| Widget library | `[data-testid="widget-library"]` | Already defined | Medium |

### Reports

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Reports container | `[data-testid="reports-container"]` | Already defined | Low |
| Report folders | `[data-testid^="report-folder"]` | Already defined | Low |
| Report items | `[data-testid^="report-item"]` | Already defined | Low |
| Report builder | `[data-testid="report-builder"]` | Already defined | Low |
| Report results | `[data-testid="report-results"]` | Already defined | Low |
| Report chart | `[data-testid^="report-chart"]` | Already defined | Medium |
| Export options | `[data-testid="export-options"]` | Already defined | Low |
| Schedule modal | `[data-testid="schedule-modal"]` | Already defined | Low |

### Object Manager / Custom Objects

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Objects table | `[data-testid="objects-table"]` | Already defined | Low |
| Custom object rows | `[data-testid^="custom-object-row"]` | Already defined | Low |
| Standard object rows | `[data-testid^="standard-object-row"]` | Already defined | Low |
| Fields table | `[data-testid="fields-table"]` | Already defined | Low |
| Custom fields section | `[data-testid="custom-fields-section"]` | Already defined | Low |
| Standard fields section | `[data-testid="standard-fields-section"]` | Already defined | Low |

### Flows (Automation)

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Flows container | `[data-testid="flows-container"]` | Already defined | Low |
| Flow builder | `[data-testid="flow-builder"]` | Already defined | Low |
| Flow items | `[data-testid^="flow-item"]` | Already defined | Low |
| Action selector | `[data-testid="action-selector"]` | Already defined | Medium |
| Condition config | `[data-testid="condition-config"]` | Already defined | Medium |
| Flow history panel | `[data-testid="flow-history-panel"]` | Already defined | Low |

### Approvals

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Approvals container | `[data-testid="approvals-container"]` | Already defined | Low |
| Approval processes | `[data-testid^="approval-process"]` | Already defined | Low |
| Approval builder | `[data-testid="approval-builder"]` | Already defined | Low |
| Approval queue | `[data-testid="approval-queue"]` | Already defined | Low |
| Approval requests | `[data-testid^="approval-request"]` | Already defined | Low |
| Approval detail panel | `[data-testid="approval-detail-panel"]` | Already defined | Low |
| Approval history timeline | `[data-testid="approval-history-timeline"]` | Already defined | Low |
| Pending approvals panel | `[data-testid="pending-approvals-panel"]` | Already defined | Low |

### Common UI Components

| Component | Current Selector | Recommended data-testid | Priority |
|-----------|-----------------|------------------------|----------|
| Loading spinner | `[data-testid="loading-spinner"]` | Already defined | Low |
| Loading overlay | `[data-testid="loading-overlay"]` | Already defined | Low |
| Toast notifications | `[data-testid="toast"]` | Already defined | Low |
| Modal container | `[data-testid="modal"]` | Already defined | Low |
| Modal title | `[data-testid="modal-title"]` | Already defined | Low |
| Modal body | `[data-testid="modal-body"]` | Already defined | Low |
| Confirm delete modal | `[data-testid="confirm-delete-modal"]` | Already defined | Low |
| Pagination | `[data-testid="pagination"]` | Already defined | Low |
| Empty state | `[data-testid="empty-state"]` | Already defined | Low |
| Empty state CTA | `[data-testid="empty-state-cta"]` | Already defined | Low |

---

## Recommendations

### Immediate Actions (High Priority)

1. **Login Form Container**: Add `data-testid="login-form-container"` to wrap all login elements
2. **Error Containers**: Standardize error message containers with consistent test IDs
3. **Table Cell Selectors**: Standardize the cell selector pattern across all tables

### Short-term Actions (Medium Priority)

1. **Widget Components**: Add consistent test IDs to all dashboard widget types
2. **Flow Builder Elements**: Add test IDs to drag-drop handles and connection points
3. **Chart Elements**: Add test IDs to specific chart components (bars, lines, segments)

### Long-term Actions (Low Priority)

1. **Icon Components**: Consider adding test IDs to icons used for status indicators
2. **Tooltip Elements**: Add test IDs for accessibility testing
3. **Animation Elements**: Add test IDs for testing animation states

---

## Selector Standardization Guidelines

For the frontend team, here are the recommended conventions:

### Naming Pattern

```
{component}-{element}[-{variant}]

Examples:
- account-table-row
- account-table-cell-name
- submit-button-primary
- nav-item-active
```

### Component-Specific Patterns

| Component Type | Pattern | Example |
|---------------|---------|---------|
| Tables | `{entity}-table`, `table-row-{id}`, `table-cell-{column}` | `accounts-table`, `table-row-123`, `table-cell-name` |
| Forms | `{entity}-form`, `{field}-input`, `{action}-button` | `account-form`, `name-input`, `save-button` |
| Modals | `{purpose}-modal`, `modal-{element}` | `confirm-delete-modal`, `modal-title` |
| Navigation | `nav-{section}`, `breadcrumb-{page}` | `nav-accounts`, `breadcrumb-dashboard` |
| Cards | `{entity}-card`, `card-{element}` | `dashboard-card`, `card-thumbnail` |
| Lists | `{entity}-list`, `list-item-{id}` | `account-list`, `list-item-456` |

---

## Testing the Test IDs

Once test IDs are added, verify them using:

```bash
# Check if test IDs are present in the DOM
npx playwright test --grep "@smoke" --project=chromium

# Run codegen to verify selectors
npx playwright codegen http://localhost:5173
```

---

## Contact

For questions about this audit or to coordinate adding test IDs, please contact the QA team.