PDD-CLI Bug: Assumes Verbose Button Text When UIs Prefer Concise Labels

## PDD-CLI Bug: Assumes Verbose Button Text When UIs Prefer Concise Labels

PDD-CLI generates E2E test selectors expecting verbose, descriptive button text when actual UIs use short, concise labels for space/design reasons.

**Why this matters:** Tests fail to find buttons because PDD expects "Run Action Now" but button just says "Run".

## Concrete Example

For a dashboard with action buttons:

```typescript
// PDD generated test (WRONG):
test('can run action', async ({ page }) => {
  await page.goto('/actions');
  
  // Expects verbose button text
  await page.getByRole('button', { name: 'Run Now' }).click();
});
```

But the actual UI uses concise labels:

```typescript
// ActionsTable.tsx (actual implementation)
export function ActionsTable() {
  return (
    <table>
      <tr>
        <td>{action.name}</td>
        <td><button onClick={handleRun}>Run</button></td>  {/* Short label */}
      </tr>
    </table>
  );
}
```

**What went wrong:** PDD assumed button would say "Run Now" (more descriptive) but UI designers chose "Run" (more concise).

**Impact:** Test fails with `locator.getByRole('button', { name: 'Run Now' }) not found`.

## Why PDD Makes This Mistake

PDD-CLI currently:
- Generates "obvious" button labels based on action descriptions
- Assumes verbose text improves clarity
- Doesn't consider UI design constraints (space, visual hierarchy)

But it should:
1. Parse actual button text from generated components
2. Prefer data-testid for action buttons
3. Use flexible matching when generating tests before UI

## How to Prevent This in PDD-CLI

**What PDD should do differently:**

1. **Add data-testid to action buttons:**
   ```typescript
   // In component
   <button data-testid="run-action-btn" onClick={handleRun}>
     Run
   </button>
   
   // In test
   page.getByTestId('run-action-btn').click()
   ```

2. **Parse actual button text:** If UI exists, extract real labels instead of assuming.

3. **Use partial matching:** `getByRole('button', { name: /Run/ })` instead of exact match.

**Example improvement:**
```
Current: "Run action" → assume button text "Run Now"
       → Generate: getByRole('button', { name: 'Run Now' })
       → Test fails

Improved: "Run action" → generate button with data-testid="run-action-btn"
        → Generate test: getByTestId('run-action-btn')
        → Resilient to text changes
```

## Severity

**P2 - Medium Priority**

- **Frequency:** Medium - common for action buttons in tables/lists
- **Impact:** Test failures requiring manual selector fixes
- **Detectability:** High - tests fail immediately  
- **Prevention cost:** Low - data-testid generation is simple

## Category

`test-generation`

## Related Issues

- #416 - Exact string matches before seeing UI (same assumption problem)
- #417 - Dynamic UI text not handled (similar text matching issue)
- #419 - Fragile CSS class selectors (alternative bad selector strategy)

---

**For Contributors:** Discovered in `frontend/e2e/crm.spec.ts` where button text was "Run" not "Run Now", fixed in commit `34a651d5`.


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PDD-CLI Bug: Assumes Verbose Button Text When UIs Prefer Concise Labels #571