# 1. Update Claude Code
npm install -g @anthropic-ai/claude-code@latest

# 2. Verify version
claude --version  # Should be 2.0.73+

# 3. Install Chrome extension
# Go to: chrome.google.com/webstore → search "Claude in Chrome"
# Install version 1.0.36+

# 4. Start Claude Code with Chrome enabled
claude --chrome

# 5. Verify connection
/chrome

CHECK Claude Code started with --chrome:
  IF /chrome shows "Connected":
    → Continue
  ELSE:
    → REPORT: "Chrome integration not available. Start with: claude --chrome"
    → STOP

IDENTIFY test requirements from:
  1. Task POML <acceptance-criteria> - specific test cases
  2. Task POML <ui-tests> section - if defined
  3. Project CLAUDE.md - environment URLs, test accounts
  4. ADR-021 - dark mode requirements for PCF/frontend tasks

EXTRACT:
  - Target URL (localhost or deployed environment)
  - Elements to verify
  - User flows to test
  - Expected behaviors

CHECK deployment status:
  IF PCF control:
    VERIFY pac pcf push completed
    GET environment URL from dataverse-deploy output

  IF localhost:
    VERIFY dev server running (npm start, dotnet run, etc.)

HANDLE authentication:
  REPORT: "I'll navigate to {URL}. Please log in if prompted."
  OPEN URL in new Chrome tab
  WAIT for user confirmation if login required

FOR EACH test case in test context:

  NAVIGATE to target page/form

  VERIFY element visibility:
    → Check component renders
    → Check expected text/labels present

  TEST interactions:
    → Click buttons, links
    → Fill form fields
    → Trigger validation

  CHECK console:
    → Monitor for errors
    → Report any warnings

  IF dark mode test (ADR-021):
    → Toggle dark mode setting
    → Verify colors adapt (no white/black hard-coded)
    → Check semantic tokens used
    → Verify icon colors use currentColor

  CAPTURE evidence:
    → Take screenshots of key states
    → Record GIF for user flows (if requested)

REPORT results after each test

## UI Test Results

**Component**: {PCF control or page name}
**Environment**: {URL}
**Date**: {timestamp}

### Tests Executed

| Test | Status | Notes |
|------|--------|-------|
| Component renders | ✅ Pass | Loaded in 1.2s |
| Dark mode toggle | ✅ Pass | Colors adapted correctly |
| Form validation | ⚠️ Warning | Error message unclear |
| Console errors | ✅ Pass | No errors detected |

### Issues Found

1. **[Warning]** Error message for invalid email is generic
   - Location: Email field validation
   - Expected: "Please enter a valid email address"
   - Actual: "Invalid input"

### Screenshots

- [Light mode](assets/light-mode.png)
- [Dark mode](assets/dark-mode.png)

### Recommendations

1. Update email validation message for clarity
2. Consider adding loading spinner for slow connections

<task id="015" project="my-project">
  <metadata>
    <tags>pcf, deploy, fluent-ui, e2e-test</tags>
  </metadata>

  <!-- ... other sections ... -->

  <ui-tests>
    <test name="Component Renders">
      <url>https://org.crm.dynamics.com/main.aspx?appid=xxx&pagetype=entityrecord&etn=account</url>
      <steps>
        <step>Navigate to Account form</step>
        <step>Verify AISummaryPanel control is visible</step>
        <step>Check console for errors</step>
      </steps>
      <expected>Control renders without console errors</expected>
    </test>

    <test name="Dark Mode Compliance">
      <steps>
        <step>Toggle dark mode in D365 settings</step>
        <step>Verify panel background adapts</step>
        <step>Verify text colors adapt</step>
        <step>Verify no hard-coded white/black colors visible</step>
      </steps>
      <expected>All colors use semantic tokens per ADR-021</expected>
    </test>

    <test name="User Interaction">
      <steps>
        <step>Click "Refresh" button in panel</step>
        <step>Verify loading indicator appears</step>
        <step>Verify new data loads</step>
      </steps>
      <expected>Data refreshes within 3 seconds</expected>
    </test>
  </ui-tests>

  <acceptance-criteria>
    <criterion testable="true">PCF control renders on Account form</criterion>
    <criterion testable="true">Dark mode colors adapt correctly (ADR-021)</criterion>
    <criterion testable="true">No console errors during normal operation</criterion>
  </acceptance-criteria>
</task>

## UI Testing Context

### Environment URLs

| Environment | URL | Notes |
|-------------|-----|-------|
| Development | https://spaarke-dev.crm.dynamics.com | Test account: testuser@dev |
| Staging | https://spaarke-staging.crm.dynamics.com | Requires VPN |
| Production | https://spaarke.crm.dynamics.com | Read-only testing |

### Common Navigation

- **Account form**: `/main.aspx?appid={app-id}&pagetype=entityrecord&etn=account`
- **Contact form**: `/main.aspx?appid={app-id}&pagetype=entityrecord&etn=contact`
- **Custom page**: `/main.aspx?appid={app-id}&pagetype=custom&name=spk_custompage`

### Test Accounts

| Account | Purpose | MFA |
|---------|---------|-----|
| testuser@spaarke-dev | Development testing | No |
| qauser@spaarke | QA validation | Yes (manual) |

### Dark Mode Toggle Location

Settings gear → Personalization → Dark mode

"Test the AISummaryPanel PCF control:
1. Open an account record at https://org.crm.dynamics.com/...
2. Verify the panel shows in the form
3. Toggle dark mode and check colors adapt
4. Click refresh and verify data updates
5. Check console for any errors"

DARK MODE COMPLIANCE (ADR-021):

□ Using Fluent UI v9 components (@fluentui/react-components)
  → NOT @fluentui/react (v8)

□ Using semantic tokens for colors
  → tokens.colorNeutralBackground1 (not #ffffff)
  → tokens.colorNeutralForeground1 (not #000000)

□ Icons use currentColor
  → Icons adapt to theme automatically

□ FluentProvider wrapper with theme
  → Theme context provided to component tree

□ No hard-coded hex colors
  → Search for #fff, #000, rgb(, rgba( in code

□ Test both modes visually
  → Light mode: readable, proper contrast
  → Dark mode: colors invert appropriately

task-execute workflow:
  ...
  Step 9.5: Quality Gates (code-review, adr-check, lint)
  Step 9.6: Conflict Sync Check
  Step 9.7: UI Testing (this skill) ← NEW
  Step 10: Update Task Status

IF all conditions met:
  - Task tags include: pcf, frontend, fluent-ui, e2e-test
  - Claude Code started with --chrome
  - Deployment completed successfully (dataverse-deploy or localhost)
  - Task has <ui-tests> section OR <acceptance-criteria> with UI tests

THEN:
  → PROMPT: "UI tests defined. Run browser-based testing? [Y/n]"
  → IF yes: Execute this skill
  → IF no: Skip with documented reason

"Record a GIF demonstrating the document upload flow:
1. Open the document library
2. Click the upload button
3. Select a file
4. Show the progress indicator
5. Show the success message
Save to projects/{project-name}/assets/upload-demo.gif"

I'll test the AISummaryPanel control in the browser.

1. Opening https://spaarke-dev.crm.dynamics.com/main.aspx?...
   → Please log in if prompted.

[User logs in]

2. Navigating to Account form...
   ✅ AISummaryPanel control is visible

3. Checking console...
   ✅ No errors detected

4. Testing dark mode...
   → Toggling dark mode setting
   ✅ Background color adapted (tokens.colorNeutralBackground1)
   ✅ Text color adapted (tokens.colorNeutralForeground1)
   ✅ No hard-coded colors visible

5. Testing refresh button...
   ✅ Loading indicator appeared
   ✅ Data refreshed in 1.8s

UI Test Results: ✅ All tests passed

Testing contact form validation...

1. Opening contact form...
2. Submitting empty form...
   ✅ "First Name is required" error shown
   ✅ "Email is required" error shown

3. Entering invalid email "notanemail"...
   ✅ "Please enter a valid email" error shown

4. Entering valid data and submitting...
   ✅ Form submitted successfully
   ✅ Success message displayed

Console check:
   ⚠️ Warning: React key prop missing in list
   → Location: ContactList component
   → Recommendation: Add key prop to list items

Recording demo GIF...

1. Starting recording...
2. Clicking "Upload" button
3. Selecting file from dialog (please select a file)
4. Showing upload progress...
5. Showing success state...
6. Stopping recording

✅ Demo saved to: projects/sdap-enhancements/assets/upload-demo.gif

# Start Claude Code with Chrome
claude --chrome

# Check connection
/chrome

# Run UI test
/ui-test

# Enable by default
# Run /chrome → Select "Enabled by default"