Files
roa2web-service-auto/reports-app/frontend/tests/ANDROID_TESTING_GUIDE.md
Marius Mutu 6b13ffa183 Initial commit: ROA2WEB - FastAPI + Vue.js + Telegram Bot
Modern ERP Reports Application with microservices architecture

Tech Stack:
- Backend: FastAPI + python-oracledb (Oracle DB integration)
- Frontend: Vue.js 3 + PrimeVue + Vite
- Telegram Bot: python-telegram-bot + SQLite
- Infrastructure: Shared database pool, JWT authentication, SSH tunnel

Features:
- FastAPI backend with async Oracle connection pool
- Vue.js 3 responsive frontend with PrimeVue components
- Telegram bot alternative interface
- Microservices architecture with shared components
- Complete deployment support (Linux Docker + Windows IIS)
- Comprehensive testing (Playwright E2E + pytest)

Repository Structure:
- reports-app/ - Main application (backend, frontend, telegram-bot)
- shared/ - Shared components (database pool, auth, utils)
- deployment/ - Deployment scripts (Linux & Windows)
- docs/ - Project documentation
- security/ - Security scanning and git hooks
2025-10-25 14:55:08 +03:00

24 KiB

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:

# 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):

$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:

# 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:

# 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"

# 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:

# 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):

# 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:

# 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):

# 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:

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:

# 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:

# In WSL
nano ~/.claude.json

Gaseste sau adauga sectiunea chrome-devtools-android:

{
  "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:

# 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:

{
  "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):

# 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):

# 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:

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

Aplicatia va porni:

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:

adb devices -l

Verificare Chrome este pornit pe telefon:

adb shell dumpsys activity activities | Select-String -Pattern "chrome"

Restart ADB server:

adb kill-server
adb start-server
adb devices

Port forwarding manual:

# 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:

adb logcat | Select-String -Pattern "chrome"

Informatii retea:

# 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:

# 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:

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:

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:

# 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:
adb kill-server
adb start-server
adb devices

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

Solutie:

# 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:

# 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
# 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:

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

Sau manual:

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?

netsh interface portproxy show all
# Ar trebui sa vezi forwarding pentru 3000 si 8001
  1. Firewall permite conexiuni?
Get-NetFirewallRule -DisplayName "*ROA2WEB*"
  1. Backend ruleaza pe 0.0.0.0:8001 (nu doar 127.0.0.1)?
# 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:

# 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
# 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:

# 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:
# 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:

# 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


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)