roa2web-service-auto/reports-app/frontend/tests/ANDROID_TESTING_GUIDE.md

# Ghid Testare pe Telefon Android Real cu Chrome DevTools MCP

Ghid complet pentru configurarea testării aplicației ROA2WEB pe telefon Android real folosind ADB WiFi și Chrome DevTools MCP server.

## De ce Chrome DevTools MCP?

**Avantaje fata de emulare Playwright:**
- [OK] Testezi pe hardware real (touch, senzori, performanta reala)
- [OK] Vezi exact cum arata pe telefonul tau
- [OK] Claude Code poate controla direct telefonul prin MCP
- [OK] Performance profiling real
- [OK] Network throttling real
- [OK] Screenshot-uri de pe dispozitiv real

## Cerinte

- Telefon Android (versiune 10+) pentru ADB WiFi
- Windows 10/11 cu PowerShell
- WSL/Linux pentru development
- Chrome instalat pe telefon
- Telefon si calculator in aceeasi retea WiFi

## Arhitectura Retea

```
Android Phone           Windows Host            WSL Environment
(10.0.20.114)          (10.0.20.144)           (172.18.251.234)
     |                       |                       |
     |--- ADB WiFi ----------|                       |
     |                       |                       |
     |                       |--- Port Proxy --------|
     |                       |   (9222, 3000, 8001)  |
     |                       |                       |
     |<-- http://localhost:3000 (reverse proxy) --> App (Vite)
     |                                               |
     |<-- http://localhost:8001 (reverse proxy) --> API (FastAPI)
     |
Claude Code (WSL) --> MCP --> http://10.0.20.144:9222 --> ADB Forward --> Chrome on Phone
```

**IP-uri importante:**
- Phone WiFi IP: 10.0.20.114 (variaza)
- Windows physical IP: 10.0.20.144 (variaza)
- WSL IP: 172.18.251.234 (WSL internal network)
- WSL gateway: 172.18.240.1

---

## Pas 1: Instalare ADB (Android Debug Bridge) pe Windows

**IMPORTANT:** ADB trebuie instalat pe Windows, NU in WSL! WSL2 nu poate vedea dispozitivele USB conectate la Windows, iar chiar si cu ADB WiFi exista probleme de networking intre WSL2 si dispozitivele Android.

### Metoda 1: Winget (Recomandat)

**Windows PowerShell:**

```powershell
# Instalare ADB Platform Tools
winget install Google.PlatformTools

# Verifica instalarea
adb version
```

**Daca adb version nu returneaza nimic:**

ADB poate fi instalat de winget dar nu adaugat automat in PATH. Locatie posibila:
```
C:\Users\[USERNAME]\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools\
```

**Adauga temporar in PATH (sesiunea curenta):**
```powershell
$env:Path += ";C:\Users\$env:USERNAME\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools"

# Verifica
adb version
```

**Adauga permanent in PATH:**
```powershell
# Windows PowerShell (Administrator)
[Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\Users\$env:USERNAME\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools", "Machine")
```

### Metoda 2: Download Manual

Download de pe site oficial:
```
https://developer.android.com/tools/releases/platform-tools
```

1. Download "SDK Platform-Tools for Windows"
2. Extrage in `C:\platform-tools`
3. Adauga `C:\platform-tools` in PATH (System Environment Variables)

---

## Pas 2: Configurare Telefon Android

### 1. Activeaza "Developer Options"

```
Setari -> Despre telefon -> Apasa de 7 ori pe "Numar compilare" (Build number)
```

Vei vedea un mesaj: "Esti acum developer!"

### 2. Activeaza USB Debugging si Wireless Debugging

```
Setari -> System -> Optiuni pentru dezvoltatori
  -> Activeaza "USB debugging"
  -> Activeaza "Wireless debugging"
```

**Pe unele telefoane:**
- Samsung: Setari -> Optiuni dezvoltator -> USB debugging + Wireless debugging
- Xiaomi: Setari -> Setari suplimentare -> Optiuni pentru dezvoltatori
- Huawei: Setari -> System & updates -> Developer options

**IMPORTANT:** Android 10+ este necesar pentru Wireless debugging.

### 3. Conectare ADB WiFi

**Pe telefon:**
```
Setari -> Developer options -> Wireless debugging -> "Pair device with pairing code"
```

Vei vedea un dialog cu:
- **Pairing code:** 6 cifre (ex: 123456)
- **IP address & Port:** ex: 10.0.20.114:37639

**NOTA IMPORTANTA:** Exista doua porturi diferite:
- **Pairing port:** Pentru asociere initiala (ex: 37639)
- **Wireless debugging port:** Pentru conexiune permanenta (diferit de pairing port!)

**In Windows PowerShell:**

```powershell
# Pas 1: Pair (prima data, foloseste pairing port)
adb pair 10.0.20.114:37639
# Introdu codul de 6 cifre cand este cerut

# Pas 2: Verifica portul wireless debugging (MAIN PORT)
# Pe telefon: Wireless debugging screen -> IP address & Port (diferit de pairing!)
# Exemplu: 10.0.20.114:38261

# Pas 3: Connect (foloseste wireless debugging port, NU pairing port!)
adb connect 10.0.20.114:38261

# Verifica conexiunea
adb devices
```

**Output asteptat:**
```
List of devices attached
10.0.20.114:38261       device
```

**Daca vezi `unauthorized`:**
- Deblocheaza telefonul
- Accepta prompt-ul "Allow wireless debugging"
- Bifeaza "Always allow from this computer"

### 4. Troubleshooting Conexiune

**Error: "failed to connect"**
```powershell
# Restart ADB server
adb kill-server
adb start-server

# Reincearca pairing si connect
```

**Pairing sau connect nu raspunde:**
- Verifica telefonul si PC-ul sunt pe aceeasi retea WiFi
- Dezactiveaza si reactiveaza "Wireless debugging" pe telefon
- Verifica nu exista restrictii WiFi (guest network, isolation)

---

## Pas 3: Configurare Port Forwarding Complet

Port forwarding este necesar la TREI niveluri pentru ca totul sa functioneze:
1. **ADB forward** - Phone Chrome -> Windows localhost
2. **Windows port proxy** - Windows -> WSL (pentru MCP si acces aplicatie)
3. **Firewall rules** - Permite conexiuni pe porturile necesare

### A) ADB Port Forwarding (Chrome DevTools)

**Windows PowerShell:**

```powershell
# Forward Chrome DevTools Protocol de pe telefon la Windows
adb forward tcp:9222 localabstract:chrome_devtools_remote

# Verifica port forwarding
adb forward --list
```

**Output asteptat:**
```
10.0.20.114:38261 tcp:9222 localabstract:chrome_devtools_remote
```

**Testeaza conexiunea:**

Deschide in browser Windows desktop:
```
http://localhost:9222/json/version
```

Ar trebui sa vezi informatii despre Chrome de pe telefon (versiune, WebSocket URL, etc.)

### B) Windows Port Proxy (pentru WSL/MCP Access)

**Windows PowerShell (Administrator):**

```powershell
# Port proxy pentru Chrome DevTools (WSL -> Windows -> Phone)
netsh interface portproxy add v4tov4 listenport=9222 listenaddress=0.0.0.0 connectport=9222 connectaddress=127.0.0.1

# Port proxy pentru aplicatie (Phone -> Windows -> WSL)
# Inlocuieste 172.18.251.234 cu IP-ul tau WSL!
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.18.251.234
netsh interface portproxy add v4tov4 listenport=8001 listenaddress=0.0.0.0 connectport=8001 connectaddress=172.18.251.234

# Verifica configurarea
netsh interface portproxy show all
```

**Cum afli IP-ul WSL:**

```bash
# In WSL bash
ip route show | grep default | awk '{print $3}'  # Gateway IP
hostname -I | awk '{print $1}'                    # WSL IP direct
```

### C) Configurare Firewall

**Windows PowerShell (Administrator):**

```powershell
# Firewall rule pentru Chrome DevTools
New-NetFirewallRule -DisplayName "Chrome-DevTools-Android" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

# Firewall rules pentru aplicatie ROA2WEB
New-NetFirewallRule -DisplayName "ROA2WEB-Frontend-WSL" -Direction Inbound -LocalPort 3000 -Protocol TCP -Action Allow
New-NetFirewallRule -DisplayName "ROA2WEB-Backend-WSL" -Direction Inbound -LocalPort 8001 -Protocol TCP -Action Allow

# Verifica rules
Get-NetFirewallRule -DisplayName "*ROA2WEB*" | Select-Object DisplayName, Enabled, Direction
Get-NetFirewallRule -DisplayName "Chrome-DevTools-Android" | Select-Object DisplayName, Enabled, Direction
```

### D) Script Automatizat pentru Setup Complet

In loc de comenzi manuale, foloseste scriptul automatizat:

**Windows PowerShell:**

```powershell
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
```

Scriptul:
- Verifica ADB si telefon conectat
- Configureaza ADB forward pentru Chrome DevTools
- Configureaza Windows port proxy (9222, 3000, 8001)
- Testeaza conexiunea la Chrome pe telefon
- Afiseaza informatii de retea si configurare MCP

### E) Testare Completa

**In WSL:**

```bash
# Testeaza acces Chrome DevTools de la WSL
# Inlocuieste 10.0.20.144 cu IP-ul tau Windows!
curl http://10.0.20.144:9222/json/version
```

**Pe telefon Chrome:**

```
http://localhost:3000
```

Daca aplicatia se incarca, port forwarding functioneaza corect!

### F) Verificare chrome://inspect (Optional)

Pe calculatorul tau, in Chrome desktop Windows:
```
chrome://inspect#devices
```

Ar trebui sa vezi telefonul tau listat si tab-urile deschise in Chrome pe telefon.

---

## Pas 4: Instalare si Configurare Chrome DevTools MCP Server

### 1. Configurare MCP in Claude Code (WSL)

**IMPORTANT:** Pentru Claude Code care ruleaza in WSL, trebuie sa folosim IP-ul FIZIC al Windows, NU localhost!

**Editare fisier de configurare:**

```bash
# In WSL
nano ~/.claude.json
```

**Gaseste sau adauga sectiunea chrome-devtools-android:**

```json
{
  "mcpServers": {
    "chrome-devtools-android": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url",
        "http://10.0.20.144:9222"
      ]
    }
  }
}
```

**NOTA CRITICA:** Inlocuieste `10.0.20.144` cu IP-ul FIZIC al calculatorului tau Windows!

**Cum afli IP-ul fizic Windows:**

```powershell
# Windows PowerShell
ipconfig | findstr "IPv4"
```

Output exemplu:
```
   IPv4 Address. . . . . . . . . . . : 10.0.20.144
```

**De ce NU localhost:9222?**

In WSL, `localhost` se refera la WSL intern, NU la Windows host. Deoarece ADB forward asculta pe Windows localhost, trebuie sa accesam prin IP-ul fizic Windows cu Windows port proxy configurat.

### 2. Alternativ: Chrome DevTools pentru Browser Desktop (Optional)

Daca vrei sa controlezi atat Chrome desktop CAT si Chrome Android:

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url",
        "http://localhost:9222"
      ]
    },
    "chrome-devtools-android": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url",
        "http://10.0.20.144:9222"
      ]
    }
  }
}
```

### 3. Reload Claude Code

Dupa salvarea configuratiei:

**VSCode (Claude Code):**
```
Ctrl+Shift+P -> "Developer: Reload Window"
```

Sau restart complet VSCode.

### 4. Verificare MCP Functioneaza

**In WSL bash (pentru debugging):**

```bash
# Testeaza ca MCP poate ajunge la Chrome pe telefon
curl http://10.0.20.144:9222/json/version
```

**In Claude Code:**

Cere Claude Code:
```
"Folosind chrome-devtools-android, fa un screenshot de pe telefonul Android"
```

Daca totul este configurat corect, Claude Code va putea controla Chrome pe telefon!

---

## Pas 5: Testare pe Telefon Android

### Workflow Complet de Testare

#### 1. Setup Initial (Prima Data)

**Windows PowerShell (Administrator):**

```powershell
# A) Conectare telefon WiFi
adb pair 10.0.20.114:PAIRING_PORT     # Cu pairing code
adb connect 10.0.20.114:MAIN_PORT     # Wireless debugging port

# B) Setup complet port forwarding si firewall
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1

# Scriptul configureaza automat:
# - ADB forward pentru Chrome DevTools (9222)
# - Windows port proxy pentru WSL access
# - Firewall rules pentru porturile necesare
# - Reverse port forwarding pentru acces localhost pe telefon
```

#### 2. Porneste Aplicatia ROA2WEB

**In WSL:**

```bash
cd /mnt/e/proiecte/roa2web/roa2web
./start-dev.sh
```

Aplicatia va porni:
- Backend (FastAPI): http://localhost:8001
- Frontend (Vite): http://localhost:3000

#### 3. Acceseaza Aplicatia pe Telefon

**Pe telefon Chrome:**

Opțiunea 1 (Recomandat - cu reverse proxy):
```
http://localhost:3000
```

Opțiunea 2 (Alternativ - IP Windows direct):
```
http://10.0.20.144:3000
```

**Important:** Daca folosesti localhost pe telefon, trebuie sa fi rulat scriptul `android-test-setup.ps1` care configureaza reverse port forwarding automat!

#### 4. Control Chrome pe Telefon prin Claude Code

In Claude Code (WSL), poti cere:

```
"Folosind chrome-devtools-android, fa un screenshot de pe telefonul Android"
"Navigheaza la pagina de facturi pe telefon"
"Verifica performanta dashboard-ului pe telefon"
"Analizeaza console errors de pe Chrome Android"
```

Claude Code poate:
- [OK] Captura screenshot-uri de pe telefon
- [OK] Naviga intre pagini
- [OK] Analiza performance
- [OK] Inspectie DOM
- [OK] Citire console logs
- [OK] Network request monitoring

---

## Comenzi Utile ADB (Windows PowerShell)

### Verificare conexiune:
```powershell
adb devices -l
```

### Verificare Chrome este pornit pe telefon:
```powershell
adb shell dumpsys activity activities | Select-String -Pattern "chrome"
```

### Restart ADB server:
```powershell
adb kill-server
adb start-server
adb devices
```

### Port forwarding manual:
```powershell
# Forward Chrome DevTools
adb forward tcp:9222 localabstract:chrome_devtools_remote

# Reverse port forwarding (pentru acces localhost pe telefon)
adb reverse tcp:3000 tcp:3000
adb reverse tcp:8001 tcp:8001

# Verifica forwarding
adb forward --list
adb reverse --list
```

### Logcat in timp real:
```powershell
adb logcat | Select-String -Pattern "chrome"
```

### Informatii retea:
```powershell
# IP Windows fizic
ipconfig | findstr "IPv4"

# Verifica port proxy Windows
netsh interface portproxy show all

# Verifica firewall rules
Get-NetFirewallRule -DisplayName "*ROA2WEB*" | Select-Object DisplayName, Enabled
Get-NetFirewallRule -DisplayName "Chrome-DevTools-Android" | Select-Object DisplayName, Enabled
```

---

## Workflow Zilnic de Testare

### Dimineata (Setup Rapid):

**Windows PowerShell:**

```powershell
# 1. Conectare telefon WiFi (daca s-a deconectat)
adb connect 10.0.20.114:38261  # Inlocuieste cu IP:PORT-ul tau

# 2. Verifica conexiune
adb devices

# 3. Setup port forwarding complet
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
```

### Pornire Aplicatie:

**In WSL:**

```bash
cd /mnt/e/proiecte/roa2web/roa2web
./start-dev.sh
```

### Testare pe Telefon:

**Pe telefon Chrome:**
```
http://localhost:3000
```

**In Claude Code:**
```
"Folosind chrome-devtools-android, fa un screenshot de pe telefon"
"Testeaza dashboard-ul pe telefonul Android"
"Verifica performanta paginii de facturi pe telefon"
```

### Seara (Cleanup):

**In WSL:**

```bash
cd /mnt/e/proiecte/roa2web/roa2web/reports-app/frontend
./scripts/android-disconnect.sh
```

Script cleanup:
- Sterge toate ADB forward rules
- Sterge toate ADB reverse rules
- Cleanup complet pentru deconectare sigura

---

## Troubleshooting

### Problema: `adb: no devices/emulators found`

**Cauze posibile:**
1. Telefonul nu este conectat WiFi la aceeasi retea
2. Wireless debugging nu este activat
3. ADB server nu ruleaza

**Solutie:**

```powershell
# Windows PowerShell
# 1. Verifica ADB server ruleaza
adb devices

# 2. Restart ADB server
adb kill-server
adb start-server

# 3. Reconnect telefon WiFi
adb connect 10.0.20.114:38261  # Inlocuieste cu IP:PORT-ul tau
```

### Problema: `device unauthorized`

**Solutie:**
1. Deblocheaza telefonul
2. Ar trebui sa apara prompt-ul de autorizare
3. Bifeaza "Always allow from this computer"
4. Restart ADB:

```powershell
adb kill-server
adb start-server
adb devices
```

### Problema: Nu pot accesa http://localhost:9222 din Windows

**Solutie:**

```powershell
# Verifica port forwarding
adb forward --list

# Re-forward portul
adb forward --remove-all
adb forward tcp:9222 localabstract:chrome_devtools_remote

# Deschide Chrome pe telefon si incearca din nou
curl http://localhost:9222/json/version
```

### Problema: Nu pot accesa http://10.0.20.144:9222 din WSL

**Cauza:** Windows port proxy nu este configurat sau firewall blocheaza.

**Solutie:**

```powershell
# Windows PowerShell (Administrator)

# 1. Configureaza port proxy
netsh interface portproxy add v4tov4 listenport=9222 listenaddress=0.0.0.0 connectport=9222 connectaddress=127.0.0.1

# 2. Adauga firewall rule
New-NetFirewallRule -DisplayName "Chrome-DevTools-Android" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

# 3. Verifica din WSL
```

```bash
# WSL
curl http://10.0.20.144:9222/json/version  # Inlocuieste cu IP-ul tau Windows
```

### Problema: Pe telefon nu se incarca aplicatia (http://localhost:3000)

**Cauza:** Reverse port forwarding nu este configurat.

**Solutie:**

```powershell
# Windows PowerShell
# Ruleaza scriptul care configureaza automat reverse forwarding
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
```

Sau manual:
```powershell
adb reverse tcp:3000 tcp:3000
adb reverse tcp:8001 tcp:8001

# Verifica
adb reverse --list
```

### Problema: Pe telefon "ERR_EMPTY_RESPONSE" sau "This site can't be reached"

**Verificari:**

1. **Telefonul si PC-ul sunt in aceeasi retea WiFi?**

2. **Windows port proxy este configurat?**
```powershell
netsh interface portproxy show all
# Ar trebui sa vezi forwarding pentru 3000 si 8001
```

3. **Firewall permite conexiuni?**
```powershell
Get-NetFirewallRule -DisplayName "*ROA2WEB*"
```

4. **Backend ruleaza pe 0.0.0.0:8001 (nu doar 127.0.0.1)?**
```bash
# In WSL
netstat -tulpn | grep 8001
# Ar trebui: 0.0.0.0:8001
```

### Problema: Chrome DevTools MCP nu se conecteaza din Claude Code

**Cauze posibile:**
1. MCP configurat cu localhost in loc de IP fizic Windows
2. Port proxy nu este configurat
3. Chrome nu ruleaza pe telefon

**Solutie:**

```bash
# 1. Verifica configuratie MCP in WSL
cat ~/.claude.json | grep browser-url
# Ar trebui sa fie: http://10.0.20.144:9222 (IP fizic Windows, NU localhost!)

# 2. Testeaza manual din WSL
curl http://10.0.20.144:9222/json/version

# 3. Daca nu functioneaza, verifica Windows port proxy
```

```powershell
# Windows PowerShell (Administrator)
netsh interface portproxy show all
# Ar trebui sa vezi: 9222 -> 127.0.0.1:9222

# 4. Reload Claude Code
# VSCode: Ctrl+Shift+P -> "Developer: Reload Window"
```

### Problema: "adb pair" nu raspunde sau timeout

**Solutie:**
1. Verifica telefonul si PC sunt pe aceeasi retea WiFi (nu guest network!)
2. Dezactiveaza si reactiveaza "Wireless debugging" pe telefon
3. Incearca alt port (genereaza un nou pairing code)
4. Verifica nu exista WiFi isolation (router settings)

### Problema: MCP screenshot deschide Chrome pe calculator, nu pe telefon

**Cauza:** MCP configurat cu `http://localhost:9222` in loc de IP fizic Windows.

**Solutie:**

```bash
# WSL - Editeaza configuratie MCP
nano ~/.claude.json

# Schimba localhost cu IP fizic Windows:
# "http://localhost:9222" -> "http://10.0.20.144:9222"

# Afla IP Windows:
```

```powershell
# Windows PowerShell
ipconfig | findstr "IPv4"
```

### Problema: WSL nu poate accesa serviciile (3000, 8001)

**Cauza:** Port proxy inversat (WSL -> Windows in loc de Windows -> WSL).

Port proxy corect:
- **Pentru MCP (WSL -> Windows -> Phone):** Listen pe 0.0.0.0:9222, connect la 127.0.0.1:9222
- **Pentru aplicatie (Phone -> Windows -> WSL):** Listen pe 0.0.0.0:3000, connect la 172.18.x.x:3000

**Solutie:**

```powershell
# Windows PowerShell (Administrator)
# Sterge port proxy gresit
netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=0.0.0.0

# Adauga port proxy corect (Phone -> WSL)
# Inlocuieste 172.18.251.234 cu IP-ul tau WSL!
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.18.251.234
netsh interface portproxy add v4tov4 listenport=8001 listenaddress=0.0.0.0 connectport=8001 connectaddress=172.18.251.234
```

---

## Comparatie: Playwright Emulation vs Chrome DevTools MCP

| Aspect | Playwright Emulation | Chrome DevTools MCP (Real Device) |
|--------|---------------------|----------------------------------|
| **Setup** | [OK] Simplu, zero config | [WARN] Necesita ADB WiFi + port forwarding |
| **Viteza** | [OK] Foarte rapid | [WARN] Mai lent (network latency) |
| **Acuratete vizuala** | [WARN] Nu exact ca pe telefon | [OK] 100% real |
| **Touch gestures** | [ERROR] Simulate | [OK] Touch real |
| **Performance** | [ERROR] Hardware desktop | [OK] Performance reala telefon |
| **CI/CD** | [OK] Perfect | [ERROR] Nu se poate (necesita device fizic) |
| **Debug interactiv** | [WARN] Limitat | [OK] Excelent |
| **Cost** | [OK] Gratis, instantaneu | [WARN] Timp + configurare |
| **Platform** | [OK] Orice OS | [WARN] Necesita Windows + WSL |

**Recomandare:**
- **Development zilnic:** Playwright emulation (rapid, suficient)
- **Final testing:** Chrome DevTools MCP pe telefon real (asigura calitate)
- **CI/CD:** Playwright emulation

---

## De ce WSL ADB nu functioneaza?

**Limitare tehnica:** WSL2 nu poate accesa dispozitive USB conectate la Windows host.

**Explicatie:**
- WSL2 ruleaza intr-un lightweight VM (Hyper-V)
- USB passthrough nu este suportat complet in WSL2
- Chiar si cu ADB WiFi, exista probleme de networking intre WSL si Android device

**Solutia:** Foloseste ADB din Windows PowerShell direct, apoi Windows port proxy pentru a permite WSL (Claude Code) sa acceseze Chrome DevTools prin IP fizic Windows.

---

## Scripturi Disponibile

| Script | Platform | Descriere |
|--------|----------|-----------|
| **android-test-setup.ps1** | Windows PowerShell | Setup complet: ADB forward, port proxy, firewall |
| **android-disconnect.sh** | Bash/WSL | Cleanup: sterge port forwarding |

**Screenshot-uri:** Nu mai este nevoie de script! Claude Code face screenshot-uri prin MCP (chrome-devtools-android) inline, fara salvare fisiere.

**Locatie scripturi:**
```
E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts\
```

**Documentatie scripturi:** Vedere `scripts/README_ANDROID.md`

---

## Next Steps

Dupa configurare completa:

1. **Testeaza manual** aplicatia pe telefon (http://localhost:3000)
2. **Cere Claude Code** sa faca screenshot-uri si sa analizeze layout-ul
3. **Verifica performance** pe hardware real
4. **Identifica probleme** care nu apar in emulare desktop
5. **Optimizeaza** pentru experienta mobile reala
6. **Documenteaza** probleme si solutii gasite

---

## Resurse Utile

- **Chrome DevTools MCP:** https://github.com/ChromeDevTools/chrome-devtools-mcp
- **Chrome Remote Debugging:** https://developer.chrome.com/docs/devtools/remote-debugging/
- **ADB Documentation:** https://developer.android.com/tools/adb
- **ADB WiFi Debugging:** https://developer.android.com/studio/command-line/adb#wireless
- **Playwright Mobile Testing:** https://playwright.dev/docs/emulation
- **Windows Port Proxy:** https://docs.microsoft.com/en-us/windows-server/networking/technologies/netsh/netsh-interface-portproxy

---

## Summary

**Arhitectura completa:**
- **Phone (Android 10+):** ADB WiFi -> Chrome DevTools Protocol
- **Windows Host:** ADB forward (9222) + Windows port proxy (9222, 3000, 8001) + Firewall rules
- **WSL (Claude Code):** MCP client -> http://WINDOWS_IP:9222 -> Chrome on Phone

**Componente cheie:**
1. ADB WiFi pairing and connection (Windows PowerShell)
2. ADB forward pentru Chrome DevTools (9222)
3. Windows port proxy pentru WSL access
4. Firewall rules pentru porturile necesare
5. MCP configurat cu IP fizic Windows (NU localhost!)
6. Reverse port forwarding pentru acces localhost pe telefon

**Workflow zilnic:**
1. Connect phone WiFi (adb connect)
2. Run setup script (android-test-setup.ps1)
3. Start app (./start-dev.sh in WSL)
4. Test on phone (http://localhost:3000)
5. Control via Claude Code (screenshots, testing)
6. Cleanup (android-disconnect.sh)

---

**Autor:** ROA2WEB Development Team
**Data:** 2025-10-20
**Versiune:** 2.0 (ADB WiFi + Windows Port Forwarding)