# Visual Verification Workflow

Run iterative Playwright verification for CSS and visual fixes. Creates test script, verifies issues, applies fixes, re-tests, and only commits when all tests pass.

## When to Use

**REQUIRED for any visual/CSS issue:**
- Text color issues (blue on blue, white on white, unreadable)
- Dark mode problems (both icons showing, wrong colors)
- Font rendering issues
- Layout/spacing/visibility problems
- Button styling issues
- Icon opacity/color problems
- Any CSS-related visual bug

## Workflow

### Step 1: Analyze Issue & Create Test

1. **Gather visual evidence** from user (screenshot, description)
2. **Identify affected elements** (selectors, classes, IDs)
3. **Create Playwright test script** in `tmp/verify-[issue].js`:

```javascript
const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  const results = { timestamp: new Date().toISOString(), tests: [] };

  // Navigate to affected page
  await page.goto('http://localhost:8000/[page-url]');
  await page.waitForTimeout(2000);

  // TEST: Check computed style
  const element = page.locator('[selector]').first();
  const computedColor = await element.evaluate(el =>
    window.getComputedStyle(el).color
  );

  // Validate (example: check if white)
  const isWhite = computedColor === 'rgb(255, 255, 255)';

  console.log(`Color: ${computedColor} - ${isWhite ? '✅ PASS' : '❌ FAIL'}`);
  results.tests.push({
    name: 'Button text color',
    pass: isWhite,
    expected: 'rgb(255, 255, 255)',
    actual: computedColor
  });

  // Screenshot
  await element.screenshot({ path: 'tmp/test-before.png' });

  await browser.close();

  // Save results
  fs.writeFileSync('tmp/test-results.json', JSON.stringify(results, null, 2));

  // Exit with failure if any test failed
  const allPass = results.tests.every(t => t.pass);
  process.exit(allPass ? 0 : 1);
})();
```

### Step 2: Run Initial Verification (BEFORE Fix)

```bash
node tmp/verify-[issue].js
```

**Expected:** Tests should FAIL, confirming the reported issue exists.

### Step 3: Apply Fix

Based on test failures, apply CSS fix to appropriate files.

**Project-specific build commands:**
| Project | Build Command |
|---------|---------------|
| Theme | `npm run build` from `themes/presszone/` |
| Forum | `npm run build:css` from plugin root |
| Comments | `npm run build:css` from plugin root |
| Newsletter | `npm run build` from plugin root |
| Game | `npm run build` from plugin root |
| Artist | `pnpm build` from plugin root |

### Step 4: Build CSS/Assets

Run the appropriate build command for your project (see table above).

### Step 5: Run Verification AGAIN (AFTER Fix)

```bash
node tmp/verify-[issue].js
```

**Expected:** All tests should now PASS.

### Step 6: If Tests Still Fail

**DO NOT COMMIT.** Instead:

1. **Revert changes:**
```bash
git checkout -- [modified-files]
[run build command]
```

2. **Analyze test output** - What CSS property is still wrong?

3. **Try different approach** - Use `!important`, absolute selectors, etc.

4. **Re-test** until all pass

### Step 7: Only Commit When Tests Pass

```bash
# All tests MUST pass (exit code 0)
git add [css-files] tmp/verify-[issue].js tmp/test-*.png
git commit -m "fix: [description] - verified with Playwright"
git push
```

## Test Script Template

Save as `tmp/verify-template.js`:

```javascript
const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  const results = { timestamp: new Date().toISOString(), tests: [] };
  let allPass = true;

  console.log('🧪 Running visual verification tests...\n');

  try {
    // ============================================================
    // TEST 1: [Description]
    // ============================================================
    console.log('TEST 1: [Test Name]');
    await page.goto('[URL]');
    await page.waitForTimeout(2000);

    const element = page.locator('[selector]');
    const value = await element.evaluate(el =>
      window.getComputedStyle(el).[property]
    );

    const pass = value === '[expected]';
    console.log(`  Expected: [expected]`);
    console.log(`  Actual: ${value}`);
    console.log(`  ${pass ? '✅ PASS' : '❌ FAIL'}\n`);

    results.tests.push({
      name: '[Test Name]',
      pass,
      expected: '[expected]',
      actual: value
    });

    allPass = allPass && pass;
    await element.screenshot({ path: 'tmp/test-[name].png' });

  } catch (error) {
    console.error('❌ Test error:', error.message);
    results.error = error.message;
    allPass = false;
  } finally {
    await browser.close();
  }

  // Summary
  console.log('\n' + '='.repeat(60));
  console.log(`SUMMARY: ${results.tests.filter(t => t.pass).length}/${results.tests.length} tests passed`);
  console.log('='.repeat(60));

  fs.writeFileSync('tmp/test-results.json', JSON.stringify(results, null, 2));
  process.exit(allPass ? 0 : 1);
})();
```

## Common Test Patterns

### Check Text Color
```javascript
const color = await element.evaluate(el =>
  window.getComputedStyle(el).color
);
const isWhite = color === 'rgb(255, 255, 255)';
```

### Check Display Property
```javascript
const display = await element.evaluate(el =>
  window.getComputedStyle(el).display
);
const isVisible = display !== 'none';
```

### Check Opacity
```javascript
const opacity = await element.evaluate(el =>
  window.getComputedStyle(el).opacity
);
const isOpaque = opacity === '1';
```

### Parse RGB Colors
```javascript
const colorMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
const isWhiteish = colorMatch &&
  parseInt(colorMatch[1]) > 240 &&
  parseInt(colorMatch[2]) > 240 &&
  parseInt(colorMatch[3]) > 240;
```

## Benefits

✅ **Eliminates false positives** - No more "looks fixed but isn't"
✅ **Catches specificity issues** - Tests actual computed styles
✅ **Provides proof** - Screenshots and JSON results
✅ **Prevents broken commits** - Only commit when tests pass
✅ **Fast iteration** - Quick feedback loop

## Notes

- **Requires local dev server** running (typically localhost:8000)
- Tests run in **non-headless mode** for visibility
- Screenshots saved to `tmp/test-*.png`
- Test results saved to `tmp/test-results.json`
- Exit code 0 = all pass, 1 = any fail