gh-cskiro-claudex/skills/testing/playwright-e2e-automation/workflow/phase-7-fixes.md

Phase 7: Fix Recommendation Generation

Purpose: Map visual issues to source code and generate actionable fixes

Steps

1. Correlate issues with source code

• Use test file metadata to identify component under test
• Search codebase for relevant files (component, styles, layout)
• Match visual issues to likely code locations

2. Generate fix recommendations

For each issue, provide:

• Issue description: Natural language explanation
• File location: src/components/Button.tsx:45
• Current code: Snippet showing problematic code
• Recommended fix: Specific code change
• Reasoning: Why this fix addresses the issue

3. Prioritize fixes

• Sort by severity (critical → low)
• Group related fixes (same component, same file)
• Estimate complexity (simple CSS tweak vs. complex refactor)

4. Format as actionable report

# Visual Bug Fix Recommendations

## Critical Issues (2)

### 1. Button text cut off on mobile viewport
**Location**: `src/components/Button.tsx:45`
**Screenshot**: `screenshots/current/button-mobile-1234.png`

**Current Code**:
```tsx
<button className="px-4 py-2 text-lg">
  {children}
</button>

Recommended Fix:

<button className="px-4 py-2 text-sm sm:text-lg truncate max-w-full">
  {children}
</button>

Reasoning: Fixed width and font size cause overflow on narrow viewports. Added responsive text sizing and truncation.

## Output

fix-recommendations.md with prioritized, actionable fixes

## Common Issues

**Can't find source file**
- Ask user for component location
- Search by component name patterns

**Multiple possible fixes**
- Present options with trade-offs
- Recommend simplest solution

## Transition

Proceed to Phase 8 (Test Suite Export)