cec967f953
- Surse complete web (React/Vite) + mobil (React Native/Expo) + extensie (MV3) - Documentație de livrare: ghid utilizare, matrice trasabilitate cerințe, raport testare furnizor - Artefacte binare: imagine Docker didi-frontend:lot3-1.0, APK, extensie v3.2.6 + SHA256SUMS - Configurare adresă platformă externalizată (build args / .env / config.js) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
207 lines
4.6 KiB
Markdown
207 lines
4.6 KiB
Markdown
# 🧪 DIDI Extension - Testing Guide
|
|
|
|
## 📦 Instalare Extensie
|
|
|
|
1. Deschide Chrome/Edge
|
|
2. Navighează la `chrome://extensions`
|
|
3. Activează **Developer mode** (toggle în dreapta sus)
|
|
4. Click **Load unpacked**
|
|
5. Selectează folderul `browser-extension`
|
|
|
|
## ✅ Test 1: Enhanced Post Extraction
|
|
|
|
### Pași:
|
|
|
|
1. **Mergi pe Facebook** (https://facebook.com)
|
|
2. **Deschide extensia** (click pe icon în toolbar)
|
|
3. **Click pe "📋 Extract Post Content"**
|
|
4. **Hover peste un post** - ar trebui să vezi bordură albastră
|
|
5. **Click pe post**
|
|
|
|
### Ce ar trebui să vezi:
|
|
|
|
✅ **Notificare pe pagină** (colț dreapta sus):
|
|
```
|
|
✓ Extracted: text+image
|
|
📝 Text: 250 chars
|
|
🖼️ Images: 2
|
|
🔗 Links: 1
|
|
|
|
Click extension icon to view details
|
|
```
|
|
|
|
✅ **În extensie** (când o redeschizi):
|
|
- Tab-ul Facebook activ
|
|
- Preview cu tot conținutul extras:
|
|
```
|
|
📝 Type: text+image
|
|
👤 Author: Numele Autorului
|
|
|
|
💬 Text:
|
|
Textul postării... (primele 200 caractere)
|
|
|
|
🖼️ Images: 2 found
|
|
1. 1200x800px
|
|
2. 800x600px
|
|
|
|
🔗 External Links: 1 found
|
|
1. https://example.com/...
|
|
|
|
🔗 Post URL: https://facebook.com/...
|
|
⏰ 2h ago
|
|
```
|
|
|
|
✅ **Butoane disponibile**:
|
|
- 🚀 Send to Analysis
|
|
- 💾 Save
|
|
- 🗑️ Clear
|
|
|
|
### Debug (dacă nu merge):
|
|
|
|
1. **Deschide Console** (F12) pe Facebook
|
|
2. Caută logging de tip:
|
|
```
|
|
[DIDI] Content script initialized
|
|
[FB] Starting Facebook extraction...
|
|
[FB] Extraction complete: {...}
|
|
[DIDI] Content stored in chrome.storage
|
|
```
|
|
|
|
3. **Verifică chrome storage**:
|
|
- În Console scrie:
|
|
```javascript
|
|
chrome.storage.local.get(null, (data) => console.log(data))
|
|
```
|
|
|
|
---
|
|
|
|
## ✂️ Test 2: Snipping Tool
|
|
|
|
### Pași:
|
|
|
|
1. **Mergi pe orice site** (inclusiv Facebook)
|
|
2. **Deschide extensia**
|
|
3. **Click pe "✂️ Snipping Tool (Screenshot)"**
|
|
4. **Click și drag** pentru a selecta o zonă
|
|
|
|
### Ce ar trebui să vezi:
|
|
|
|
✅ **Overlay semi-transparent** peste toată pagina
|
|
✅ **Dreptunghi de selecție** (bordură teal) când tragi mouse-ul
|
|
✅ **Notificare**: "📸 Screenshot captured! Coordinates: {...}"
|
|
✅ **ESC** pentru cancel
|
|
|
|
### Debug (dacă nu merge):
|
|
|
|
1. **Console logging**:
|
|
```
|
|
[DIDI] Snipping mode activating...
|
|
[DIDI] Snip complete: {left: 100, top: 200, width: 500, height: 300}
|
|
[DIDI] Snip sent to background: {...}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Test 3: Send to Backend
|
|
|
|
### Pași:
|
|
|
|
1. **Extrage conținut** (Test 1)
|
|
2. **Click "🚀 Send to Analysis"**
|
|
|
|
### Ce ar trebui să vezi:
|
|
|
|
✅ Status message: "Sending to analysis..."
|
|
❌ Apoi error (normal, backend nu e pornit):
|
|
```
|
|
❌ Failed to send: Backend returned 404
|
|
sau
|
|
❌ Failed to send: Failed to fetch
|
|
```
|
|
|
|
### Pentru ca să meargă:
|
|
|
|
Trebuie să ai backend pornit la:
|
|
```
|
|
POST http://localhost:3001/api/analyze
|
|
|
|
Body:
|
|
{
|
|
"platform": "facebook",
|
|
"data": {
|
|
"platform": "facebook",
|
|
"type": "text+image",
|
|
"author": "...",
|
|
"text": "...",
|
|
"images": [...],
|
|
"links": [...],
|
|
...
|
|
},
|
|
"timestamp": "2025-01-15T..."
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 Common Issues
|
|
|
|
### "Please refresh the page"
|
|
- **Fix**: Refresh Facebook după ce instalezi extensia
|
|
|
|
### "No content found"
|
|
- **Verifică**: Click exact pe zona postării, nu pe butonul Like/Comment
|
|
- **Verifică**: Console pentru erori
|
|
|
|
### Popup-ul nu arată conținutul
|
|
- **Fix**: Click din nou pe icon extensie
|
|
- **Verifică**: Chrome storage (instrucțiuni mai sus)
|
|
|
|
### Snipping nu apare overlay-ul
|
|
- **Fix**: Refresh pagina
|
|
- **Verifică**: Console pentru erori
|
|
|
|
---
|
|
|
|
## 📊 Chrome DevTools Tips
|
|
|
|
### Debugging Popup:
|
|
1. Click dreapta pe icon extensie
|
|
2. "Inspect popup"
|
|
3. Console pentru logging
|
|
|
|
### Debugging Content Script:
|
|
1. F12 pe Facebook
|
|
2. Console tab
|
|
3. Caută `[DIDI]`, `[FB]`
|
|
|
|
### View Storage:
|
|
```javascript
|
|
// Get all storage
|
|
chrome.storage.local.get(null, console.log)
|
|
|
|
// Clear storage
|
|
chrome.storage.local.clear()
|
|
|
|
// Get specific key
|
|
chrome.storage.local.get(['facebook_content'], console.log)
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Checklist Complet
|
|
|
|
- [ ] Extensia se încarcă fără erori
|
|
- [ ] Logo "didi" apare corect în header
|
|
- [ ] Butonul "Extract Post Content" funcționează
|
|
- [ ] Butonul "Snipping Tool" funcționează
|
|
- [ ] Notificări apar pe pagină
|
|
- [ ] Content-ul apare în popup
|
|
- [ ] Toate imaginile sunt extrase
|
|
- [ ] Link-urile externe sunt extrase
|
|
- [ ] "Send to Analysis" trimite request (chiar dacă fail)
|
|
- [ ] "Save" salvează în storage
|
|
- [ ] Tab "Saved" arată extractions
|
|
|
|
---
|
|
|
|
**Întrebări? Issues? Check Console logging!** 🔍
|