Phase 8 — Tests sur appareils réels

Règle absolue

Les émulateurs ne suffisent pas.

Un site qui fonctionne dans un émulateur peut être inutilisable sur un vrai appareil. Les tests sur appareils réels sont non négociables.

Pourquoi les émulateurs ne suffisent pas

Les différences entre émulateur et réel

Aspect	Émulateur	Appareil réel
Performance	CPU/GPU de votre PC	Processeur mobile (plus lent)
Mémoire	Illimitée	Limitée (2-8 Go)
Tactile	Clic souris	Vrais doigts (imprécis)
Écran	Simulation	Vrai affichage (couleurs, luminosité)
Réseau	Connexion PC	4G/5G variable
Navigateur	Version émulée	Vrai navigateur mobile
Gestes	Simulés	Réels (swipe, pinch, scroll)

Ce que l'émulateur ne peut pas tester

Exemples de problèmes non détectés en émulateur

Problème	Pourquoi invisible en émulateur
Bouton trop petit	La souris est précise, le doigt non
Animation saccadée	PC plus puissant que mobile
Texte illisible au soleil	Écran PC ≠ écran mobile en extérieur
Scroll difficile	Molette souris ≠ swipe tactile
Temps de chargement	Connexion fibre ≠ 4G en mouvement
Formulaire inutilisable	Clavier physique ≠ clavier virtuel

Quand tester sur appareils réels

Moments clés

Étape	Type de test
Maquette fonctionnelle	Affichage basique, navigation
Prototype interactif	Interactions, formulaires
Version beta	Test complet
Avant mise en ligne	Validation finale
Après chaque mise à jour majeure	Non-régression

Dès que possible !

❌ TROP TARD
Développement → Finition → Mise en ligne → Test réel → Bugs !

✅ BONNE APPROCHE
Développement → Test réel → Développement → Test réel → Mise en ligne
     ↑_______________|           ↑_______________|
         Itérations continues

Quels appareils tester

Minimum recommandé

Type	Exemples	Pourquoi
Smartphone iOS récent	iPhone 13/14/15	Part de marché Apple
Smartphone iOS ancien	iPhone SE/11	Utilisateurs qui ne mettent pas à jour
Smartphone Android récent	Samsung Galaxy S23, Pixel 7	Part de marché Android
Smartphone Android entrée de gamme	Samsung A14, Redmi	Performance limitée
Tablette	iPad, Samsung Tab	Taille intermédiaire
Ordinateur	PC Windows, Mac	Différences navigateurs

En pratique pour un projet scolaire

Utilisez ce que vous avez :

• Votre téléphone personnel
• Téléphones de camarades de classe
• Téléphones de la famille
• Tablettes disponibles

Astuce

Demandez à vos camarades de tester sur leurs appareils. La diversité des appareils est plus importante que la quantité.

Parts de marché (2024)

Système	Part mondiale	À tester
Android	~70%	✅ Prioritaire
iOS	~28%	✅ Prioritaire
Autres	~2%	Optionnel

Navigateur	Part mondiale	À tester
Chrome	~65%	✅ Prioritaire
Safari	~18%	✅ Prioritaire
Firefox	~3%	Recommandé
Edge	~5%	Recommandé
Samsung Internet	~2.5%	Si possible

Comment tester efficacement

Accéder à votre site depuis un appareil

Option 1 : URL publique (recommandé)

• Déployez sur GitHub Pages, Vercel, Netlify
• Accédez via l'URL publique

Option 2 : Même réseau Wi-Fi

# Trouvez votre IP locale
# Windows
ipconfig

# Mac/Linux
ifconfig

# Lancez votre serveur de développement sur 0.0.0.0
npm run dev -- --host 0.0.0.0

# Accédez depuis mobile : http://192.168.x.x:5173

Option 3 : ngrok (tunnel)

# Installez ngrok
npm install -g ngrok

# Exposez votre serveur local
ngrok http 5173

# Utilisez l'URL fournie (ex: https://abc123.ngrok.io)

Checklist de test sur appareil

Pour chaque page, vérifiez :

Navigation et structure

• [ ] Le menu fonctionne correctement
• [ ] Les liens sont cliquables facilement
• [ ] Le fil d'Ariane (si présent) est utilisable
• [ ] Le logo ramène à l'accueil
• [ ] La navigation est intuitive

Lisibilité

• [ ] Le texte est lisible sans zoomer
• [ ] Les contrastes sont suffisants (même en extérieur)
• [ ] La taille de police est confortable
• [ ] Les titres sont bien visibles

Interactions

• [ ] Les boutons sont facilement cliquables (44×44px minimum)
• [ ] Les formulaires sont remplissables
• [ ] Le clavier virtuel ne masque pas les champs
• [ ] Les liens sont espacés (pas de clic accidentel)
• [ ] Le scroll est fluide

Performance

• [ ] La page se charge en moins de 3 secondes
• [ ] Les animations sont fluides
• [ ] Pas de saccades au scroll
• [ ] Les images se chargent rapidement

Responsive

• [ ] Pas de scroll horizontal
• [ ] Les images ne débordent pas
• [ ] Le texte ne déborde pas
• [ ] Les tableaux sont lisibles
• [ ] Les formulaires s'adaptent

Grille de test

Utilisez cette grille pour documenter vos tests :

## Tests appareils - [Nom du projet]

### Appareil 1 : iPhone 13 (iOS 17, Safari)
| Page | Navigation | Lisibilité | Interactions | Performance | Bugs |
|------|:----------:|:----------:|:------------:|:-----------:|------|
| Accueil | ✅ | ✅ | ✅ | ✅ | - |
| Produits | ✅ | ✅ | ⚠️ | ✅ | Bouton "Filtrer" trop petit |
| Contact | ✅ | ✅ | ✅ | ✅ | - |

### Appareil 2 : Samsung Galaxy A14 (Android 13, Chrome)
| Page | Navigation | Lisibilité | Interactions | Performance | Bugs |
|------|:----------:|:----------:|:------------:|:-----------:|------|
| Accueil | ✅ | ⚠️ | ✅ | ⚠️ | Texte menu petit, chargement lent |
| Produits | ✅ | ✅ | ✅ | ⚠️ | Images lentes |
| Contact | ✅ | ✅ | ✅ | ✅ | - |

### Bugs à corriger
1. [ ] Agrandir bouton "Filtrer" (page Produits)
2. [ ] Augmenter taille police menu mobile
3. [ ] Optimiser images (compression, lazy loading)

Débogage sur appareil réel

Chrome DevTools sur Android

1. Sur le téléphone :

   • Paramètres → Options développeur → Débogage USB activé
   • Connectez le téléphone au PC via USB

2. Sur Chrome (PC) :

   • Allez sur chrome://inspect
   • Votre appareil apparaît
   • Cliquez "Inspect" sur la page ouverte

3. Déboguez comme sur PC (Console, Elements, Network)

Safari Web Inspector sur iOS

1. Sur l'iPhone/iPad :

   • Réglages → Safari → Avancé → Web Inspector activé

2. Sur Mac :

   • Safari → Préférences → Avancé → "Afficher le menu Développement"
   • Connectez l'appareil via USB

3. Déboguez :

   • Menu Développement → [Votre appareil] → [Page]

Sans câble : Chrome Remote Debugging

Pour Android, si vous ne pouvez pas utiliser USB :

1. Activez "Débogage sans fil" dans les Options développeur
2. Sur le même réseau Wi-Fi
3. chrome://inspect → Configure → Ajoutez IP:port

Tests de conditions réelles

Tester en mobilité

Ne testez pas uniquement assis à votre bureau :

Condition	Ce qu'on découvre
En marchant	Difficulté à cliquer les petits boutons
Dans les transports	Connexion intermittente, vibrations
En plein soleil	Contrastes insuffisants
D'une seule main	Zones inaccessibles en bas d'écran
Avec des gants	Zones tactiles trop petites

Tester avec connexion dégradée

Chrome DevTools permet de simuler des connexions lentes :

1. DevTools → Network → Throttling
2. Testez avec "Slow 3G" ou "Offline"

Temps de chargement acceptables :

Connexion	Temps cible
4G	< 2 secondes
3G	< 5 secondes
2G	< 10 secondes

Services de test à distance

Si vous n'avez pas accès à certains appareils :

Service	Description	Prix
BrowserStack	Appareils réels en cloud	Payant (essai gratuit)
LambdaTest	Tests cross-browser	Payant (gratuit limité)
Sauce Labs	Tests automatisés	Payant

Pour un projet scolaire, les tests sur appareils personnels suffisent généralement.

Checklist de la Phase 8

Avant de valider votre projet, vérifiez :

Tests effectués

• [ ] Testé sur au moins 1 appareil iOS (iPhone)
• [ ] Testé sur au moins 1 appareil Android
• [ ] Testé sur ordinateur (Windows ou Mac)
• [ ] Testé en orientation portrait ET paysage
• [ ] Testé avec différentes tailles d'écran

Résultats validés

• [ ] Navigation fonctionnelle sur tous les appareils
• [ ] Texte lisible sans zoom
• [ ] Boutons/liens facilement cliquables
• [ ] Formulaires utilisables avec clavier virtuel
• [ ] Performance acceptable (< 3s de chargement)
• [ ] Pas de scroll horizontal involontaire
• [ ] Animations fluides (pas de saccades)

Documentation

• [ ] Grille de test remplie
• [ ] Bugs identifiés listés
• [ ] Bugs critiques corrigés
• [ ] Retests effectués après corrections

Étape finale

Les tests sont terminés. Consultez la Checklist finale pour une validation complète avant la mise en ligne.