27 - Claude in Chrome, Desktop and Computer Use: End-to-End Automation

# Passo 1: Accedi al sito ufficiale
Visita: https://claude.ai/chrome

# Passo 2: Aggiungi a Chrome
Clicca "Add to Chrome" → Conferma permessi

# Passo 3: Autenticazione
Claude ti chiede di autenticarti nel browser
(usa account Anthropic già collegato)

# Passo 4: Grant permissions
Scegli quali siti possono usare Claude:
- "Ask on each site" (default, chiede sempre)
- "Allow on this site" (autopermesso per dominio)
- "Don't allow" (blocca completamente)

# Nel browser, accanto alla barra degli indirizzi:
# Clicca icona Claude for Chrome (estensione)

# Scrivi il prompt:
"Vai su analytics.google.com, estrai i dati delle
ultime 7 giorni (sessioni, conversion rate, top pages).
Poi vai su hubspot.com e raccogli i lead generati.
Infine, componi una bozza email per il team con
il summary."

# Claude esegue:
1. Naviga analytics.google.com
2. Clicca filtri data (ultime 7 giorni)
3. Legge tabelle metriche
4. Naviga HubSpot
5. Estrae numero lead
6. Torna a Gmail, scrive bozza
7. Mostra bozza finito per conferma

# Tu click "Send" e il report è inviato

# macOS
1. Scarica da https://code.claude.com
2. Apri .dmg e trascina nella cartella Applications
3. Lancia da Spotlight (Cmd+Space → "Claude Code")

# Windows
1. Scarica installer .exe da https://code.claude.com
2. Esegui installer (next, next...)
3. Lancia da Start Menu

# Linux (Ubuntu/Debian)
wget https://code.claude.com/releases/linux/claudecode-latest.deb
sudo dpkg -i claudecode-latest.deb
claudecode

# Primo avvio: autenticazione browser automatica

# Lancia Desktop App e seleziona cartella progetto
/open ~/projects/my-app

# Clicca pulsante "Plan Mode" (o Shift+Tab)
# Scrivi prompt:
"Refactor tutto il layer di API HTTP da Axios a Fetch"

# Plan Mode mostra:
┌─────────────────────────────────────┐
│ 📋 PIANO DI ESECUZIONE               │
├─────────────────────────────────────┤
│ 1. Analizzare pattern Axios attuali │
│ 2. Creare wrapper Fetch              │
│ 3. Aggiornare 23 service file        │
│ 4. Aggiornare 15 test file           │
│ 5. Verificare build e test           │
│                                     │
│ ⚠️  File coinvolti: 38              │
│ ⏱️  Tempo stimato: 15 min           │
│                                     │
│          [Procedi] [Modifica]        │
└─────────────────────────────────────┘

# Clicca Procedi e Claude esegue passo per passo

# Nella sessione Claude Code:
> /mcp

# Visualizza lista MCP server disponibili:
[✓] computer-use (LOCAL) - Computer use MCP server
[✓] filesystem (LOCAL) - File operations
[✓] bash (LOCAL) - Shell commands
...

# Abilita computer-use se disabilitato:
> /mcp
> toggle computer-use

# Verifica stato:
[✓] computer-use        ENABLED

# Ora puoi chiedere a Claude:
> Apri il simulatore iOS, esegui onboarding step 1-3,
> cattura screenshot di ogni step

# Nel terminal di progetto iOS:
> cd ~/projects/MyApp && claude

# Chiedi a Claude (con Computer Use abilitato):
> Apri Simulator, tappa attraverso onboarding,
> screenshot di ogni schermata, salva in /tmp/screenshots/

# Claude esegue:
[computer-use] Opening iOS Simulator...
[screenshot] Step 1 Welcome screen → /tmp/screenshots/01-welcome.png
[click] Tapping "Get Started" button
[wait] 500ms
[screenshot] Step 2 Email input → /tmp/screenshots/02-email.png
[click] Tapping email field, typing test@example.com
[screenshot] Step 3 Password → /tmp/screenshots/03-password.png
...

# Output finale:
✅ Onboarding flow verified. Screenshots saved:
   - /tmp/screenshots/01-welcome.png
   - /tmp/screenshots/02-email.png
   - /tmp/screenshots/03-password.png

# Tu verifichi screenshot e clicchi "Done"

{
  "name": "get_database_schema",
  "description": "Restituisce schema database completo (tabelle, campi, indici)",
  "inputSchema": {
    "type": "object",
    "properties": {
      "database": { "type": "string" }
    }
  },
  "_meta": {
    "anthropic/maxResultSizeChars": 500000
  }
}

# Senza override, Claude avrebbe perso dati se schema > 50KB
# Con override, schema fino a 500KB rimane inline nel contesto

#!/bin/bash
# scripts/regression-test.sh - Esegui test visuale notturno

echo "=== Visual Regression Test ==="

# 1. Avvia app locale
npm run dev &
DEV_PID=$!
sleep 5

# 2. Chiedi a Claude (con Computer Use) di testare
claude --print "
Apri http://localhost:3000 nel browser.
Naviga queste pagine:
1. Homepage (homepage)
2. Product list (/products)
3. Product detail (/products/123)
4. Cart (/cart)

Per ogni pagina:
- Cattura full-page screenshot
- Salva in /tmp/regression/page-name.png
- Mostra qualsiasi avviso di layout break

Dopo tutti test, compare con baseline in /tmp/baseline/
Se ci sono differenze > 2%, report quale elemento è cambiato.
" \
  --output-format json \
  --max-iterations 20 > regression-report.json

# 3. Parsa il report e crea summary
jq '.result' regression-report.json > summary.txt

# 4. Invia su Slack
if grep -q "layout break\|CSS change" summary.txt; then
  curl -X POST $SLACK_WEBHOOK \
    -H 'Content-type: application/json' \
    -d @<(jq -n "{
      text: \"🚨 Visual Regression Detected\",
      attachments: [$(jq -R -s . < summary.txt)]
    }")
  exit 1
else
  echo "✅ All visual tests passed"
fi

# Cleanup
kill $DEV_PID

# Metodo 1: Web interface
Accedi https://claude.ai/design
(Pro, Max, Team, Enterprise subscribers)

# Metodo 2: Upload codebase per brand sync
Clicca "Upload Design System" e fornisci:
- Design file Figma (link shareable)
- Codebase repo (GitHub link)
Claude estrae:
  - Color palette da CSS variables
  - Typography (font family, sizes, weights)
  - Component library structure
  - Brand guidelines da README/docs

# Metodo 3: Screenshot + Manual Design
Carica screenshot di design existing
Claude lo replica e genera codice HTML/CSS

# FASE 1: Design in Claude Design (iterativo)
Prompt: "Progetta una landing page per un tool di developer
 - Hero section con gradient
 - Feature showcase 3 colonne
 - CTA button prominente
 - Footer con links sociali
 - Dark theme, color scheme blue-gray"

Claude Design mostra mockup interattivo.
Tu commenti inline, aggiungi feedback:
"Più spazio verticale tra hero e features"
"CTA button più grande, usa hover effect"

Claude aggiorna design in tempo reale.

# FASE 2: Export HTML + Handoff a Claude Code
Claude Design esporta:
- HTML structure
- Inline CSS
- Asset guide (images, icons)

# FASE 3: Implementazione in Claude Code
Tu copi il file HTML in Claude Code:
> Prendi questo HTML design e converti in
> componente Angular 21 standalone con:
> - Input per testi (hero title, feature descriptions)
> - CSS-in-component con CSS variables per tema
> - Responsive breakpoints (mobile 320px, tablet 768px, desktop 1024px)
> - TypeScript types per data
> - Unit test skeleton

Claude Code genera componente production-ready.

# FASE 4: Integration & Polish
> Integra nel progetto, testa su mobile, aggiungi animazioni

# Nel tuo codebase, salva design system in formato standard:
# frontend/src/styles/design-system.json
{
  "colors": {
    "primary": "#0969da",
    "primary_light": "#54aeff",
    "primary_dark": "#033d8b",
    "neutral_bg": "#0d1117",
    "neutral_text": "#e6edf3"
  },
  "typography": {
    "headings": {
      "family": "JetBrains Mono",
      "sizes": { "h1": 48, "h2": 36, "h3": 24 }
    },
    "body": {
      "family": "Inter",
      "sizes": { "base": 16, "sm": 14 }
    }
  },
  "spacing": {
    "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32
  }
}

# Upload in Claude Design:
Upload → Design System
Select: frontend/src/styles/design-system.json

# Ora ogni design Claude crea usa tuoi colori,
# tipografia, spaziatura automaticamente

// development.ts (Angular) o test setup
if (!isPlatformBrowser(platformId)) {
  // Override alert/confirm/prompt con noop
  window.alert = () => {};
  window.confirm = () => true;  // Sempre "Sì"
  window.prompt = (msg) => 'automated-response';
}

// Alternativa: Custom dialog service che Claude può handle
class DialogService {
  confirm(message: string): Promise<boolean> {
    // In test/automation: return Promise.resolve(true)
    // In prod: mostra UI dialog
    return new Promise(resolve => {
      if (isTestingMode) {
        resolve(true);
      } else {
        // normal UI
      }
    });
  }
}

// Pagina web - invece di alert/confirm:
button.addEventListener('click', async () => {
  console.log('[automated-test] Delete initiated. User confirm needed.');
  const confirmed = confirm('Sei sicuro?');
  if (confirmed) {
    console.log('[automated-test] User confirmed. Deleting...');
    deleteUser();
  } else {
    console.log('[automated-test] User cancelled.');
  }
});

// In Claude Code with Computer Use:
> Leggi console per messaggi [automated-test]
> Se vedi 'Delete initiated', significa dialog bloccato
> Chiedi manuale confirm al user

// Claude output:
[computer-use] Reading browser console...
[console] "[automated-test] Delete initiated. User confirm needed."
ℹ️ Dialog blocker detected. Awaiting manual confirmation from user.
Ready to continue? (y/n)

#!/bin/bash
# scripts/nightly-ui-tests.sh
# Eseguire via cron: 0 2 * * * cd /home/app && ./scripts/nightly-ui-tests.sh

set -e

echo "[$(date)] Starting nightly UI tests..."
TEST_DIR="/tmp/ui-tests/$(date +%Y%m%d)"
mkdir -p "$TEST_DIR"

# 1. Start app
cd /home/app
npm run build >/dev/null 2>&1
npm run serve:ssr:portfolio &
SERVER_PID=$!
sleep 5

# 2. Run Claude Code with Computer Use
export ANTHROPIC_API_KEY="sk-ant-api03-xxx"

claude --print "
Apri http://localhost:4000 nel browser.
Verifica queste pagine e cattura screenshot:
1. Homepage (/)
2. Blog list (/blog)
3. Article /articles/889 (Claude UI article)
4. Services (/servizi)
5. Dev tools (/dev-tools/iban-generator)

Per ogni pagina:
- Carica completamente (attendi 2 sec)
- Cattura full-page screenshot
- Salva in $TEST_DIR/pageName.png
- Se layout è broken (elementi fuori posto, testo overlap), report 'BROKEN'
- Se è normale, report 'OK'

Dopo tutti test, mostra summary:
- Pagine OK: N
- Pagine BROKEN: N
- Lista di broken pages (se any)
" \
  --output-format json \
  --max-iterations 25 \
  > "$TEST_DIR/report.json" 2>&1

# 3. Parse report
REPORT=$(jq -r '.result' "$TEST_DIR/report.json")
BROKEN=$(echo "$REPORT" | grep -c "BROKEN" || true)

# 4. Compare with baseline (optional)
BASELINE_DIR="/tmp/ui-tests/baseline"
if [ -d "$BASELINE_DIR" ]; then
  echo "[$(date)] Comparing with baseline..."
  # Pseudocode: perceptual diff con Python + scipy
  python3 << 'PYTHON'
import os, cv2
from scipy.spatial.distance import euclidean

baseline_dir = "/tmp/ui-tests/baseline"
test_dir = "$TEST_DIR"

for file in os.listdir(baseline_dir):
    baseline_img = cv2.imread(f"{baseline_dir}/{file}")
    test_img = cv2.imread(f"{test_dir}/{file}")
    if baseline_img is None or test_img is None:
        continue

    # Resize to same size
    test_img = cv2.resize(test_img, baseline_img.shape[:2])

    # Compute histogram difference (simple metric)
    hist_diff = cv2.compareHist(
        cv2.calcHist([baseline_img], [0], None, [256], [0, 256]),
        cv2.calcHist([test_img], [0], None, [256], [0, 256]),
        cv2.HISTCMP_BHATTACHARYYA
    )

    if hist_diff > 0.1:
        print(f"DIFF: {file} ({hist_diff:.2f})")
PYTHON
fi

# 5. Send Slack notification
SLACK_WEBHOOK="${SLACK_WEBHOOK_URL}"

if [ "$BROKEN" -gt 0 ]; then
  SLACK_MSG="🚨 *UI Tests FAILED*
Pages broken: $BROKEN
Report: $TEST_DIR/report.json"
  SLACK_COLOR="#E74C3C"
else
  SLACK_MSG="✅ *UI Tests PASSED*
All pages rendered correctly
Report: $TEST_DIR/report.json"
  SLACK_COLOR="#2ECC71"
fi

curl -X POST "$SLACK_WEBHOOK" \
  -H 'Content-type: application/json' \
  -d @<(jq -n "{
    attachments: [{
      color: \"$SLACK_COLOR\",
      text: \"$SLACK_MSG\",
      ts: $(date +%s)
    }]
  }")

# 6. Cleanup
kill $SERVER_PID
echo "[$(date)] Nightly UI tests completed. Status: $([ "$BROKEN" -eq 0 ] && echo "PASS" || echo "FAIL")"

# Aggiungi a crontab (crontab -e)
# Esegui ogni notte alle 02:00 UTC (02:00 AM)
0 2 * * * cd /home/app && ./scripts/nightly-ui-tests.sh >> /var/log/ui-tests.log 2>&1

# Esegui 2x a week (lunedì e giovedì alle 03:00)
0 3 * * 1,4 cd /home/app && ./scripts/nightly-ui-tests.sh >> /var/log/ui-tests.log 2>&1

# Verifica cron eseguito correttamente
grep "nightly-ui-tests" /var/log/syslog

// e2e/checkout.spec.ts
import { test } from '@playwright/test';

test('Checkout flow end-to-end', async ({ page }) => {
  await page.goto('http://localhost:3000/products');

  try {
    // Tentativo 1: Playwright standard
    await page.click('[data-testid=add-to-cart]');
    await page.goto('http://localhost:3000/cart');
    await page.click('[data-testid=checkout]');

    // Verifica con screenshot
    const screenshot = await page.screenshot();
    // Compare con baseline
    expect(screenshot).toMatchSnapshot('checkout-page.png');
  } catch (error) {
    // Fallback: chiedi a Claude di rifare via Computer Use
    console.log('Playwright test failed, attempting Computer Use verification...');

    const claudeVerified = await verifyWithComputerUse({
      url: 'http://localhost:3000/products',
      steps: [
        'Click add to cart button',
        'Navigate to /cart',
        'Click checkout button',
        'Screenshot order confirmation'
      ]
    });

    if (!claudeVerified) {
      throw new Error('Both Playwright and Computer Use verification failed');
    }
  }
});

// Helper function
async function verifyWithComputerUse(config: any): Promise {
  const { execSync } = require('child_process');

  const prompt = `
Vai a ${config.url} nel browser.
Esegui questi step:
${config.steps.map((s, i) => `${i + 1}. ${s}`).join('\n')}

Dopo ogni step, attendi 1 secondo e cattura screenshot.
Se qualcosa non funziona come atteso, report "FAILED: [motivo]"
Se tutto OK, report "SUCCESS: Order confirmed"
  `;

  try {
    const result = execSync(`claude --print "${prompt}" --output-format json`, {
      encoding: 'utf-8',
      timeout: 60000
    });

    return result.includes('SUCCESS');
  } catch (e) {
    return false;
  }
}