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
| Aspect | Émulateur | Appareil réel |
|---|---|---|
| Performance | CPU/GPU de votre PC | Processeur mobile (plus lent) |
| Tactile | Clic souris précis | Vrais doigts (imprécis) |
| Écran | Simulation | Vrai affichage (couleurs, luminosité, soleil) |
| Réseau | Connexion PC | 4G/5G variable, mouvements |
| Clavier | Clavier physique | Clavier virtuel (masque les champs) |
| Gestes | Simulés | Réels (swipe, pinch, scroll inertiel) |
Problèmes invisibles en émulateur
| Problème | Pourquoi invisible |
|---|---|
| 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 ≠ swipe tactile |
| Temps de chargement | Fibre ≠ 4G en mouvement |
| Formulaire inutilisable | Clavier virtuel masque les champs |
Quels appareils tester
Pour un projet scolaire, utilisez ce que vous avez : votre téléphone, ceux de vos camarades, de votre famille. La diversité prime sur la quantité.
| Système | Part mondiale | Priorité |
|---|---|---|
| Android | ~70% | 🔴 Prioritaire |
| iOS | ~28% | 🔴 Prioritaire |
| Autres | ~2% | Optionnel |
| Navigateur | Part mondiale | Priorité |
|---|---|---|
| Chrome | ~65% | 🔴 Prioritaire |
| Safari | ~18% | 🔴 Prioritaire (iOS uniquement) |
| Edge | ~5% | 🟠 Recommandé |
| Firefox | ~3% | 🟠 Recommandé |
Configuration minimale recommandée
1 smartphone iOS récent + 1 Android entrée de gamme + 1 ordinateur. La diversité des performances est plus importante que celle des marques.
Quand tester ?
| É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 |
Testez dès que possible, pas uniquement avant la mise en ligne.
Comment accéder à votre site depuis un appareil
Option 1 — URL publique (recommandé)
Déployez sur GitHub Pages, Vercel ou Netlify. Accédez via l'URL publique sur n'importe quel appareil.
Option 2 — Même réseau Wi-Fi
# Trouvez votre IP locale
# Windows
ipconfig
# Mac/Linux
ifconfig
# Lancez votre serveur sur 0.0.0.0
npm run dev -- --host 0.0.0.0
# Sur mobile : http://192.168.x.x:5173Option 3 — Tunnel ngrok
npm install -g ngrok
ngrok http 5173
# Utilisez l'URL fournie (ex: https://abc123.ngrok.io)Débogage à distance
Chrome DevTools sur Android
- Sur le téléphone : Paramètres → Options développeur → Débogage USB activé
- Connectez le téléphone au PC via USB
- Sur Chrome (PC) : ouvrir
chrome://inspect - Cliquez Inspect → DevTools complet (Console, Elements, Network)
Safari Web Inspector sur iOS (nécessite un Mac)
- Sur l'iPhone : Réglages → Safari → Avancé → Web Inspector activé
- Sur Mac : Safari → Préférences → Avancé → « Afficher le menu Développement »
- Connectez via USB
- Menu Développement → [Votre appareil] → [Page]
Tester en conditions réelles
Ne testez pas uniquement assis à votre bureau.
| Condition | Ce qu'on découvre |
|---|---|
| En marchant | Boutons trop petits |
| 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 |
Simuler une connexion lente
Chrome DevTools → Network → Throttling → Slow 3G ou Offline.
| Connexion | Temps cible |
|---|---|
| 4G | < 2 secondes |
| 3G | < 5 secondes |
| 2G | < 10 secondes |
Documenter les tests
Une grille simple suffit pour tracer les résultats.
Modèle de grille de test
## Tests appareils — [Nom du projet]
### Appareil 1 : iPhone 13 (iOS 17, Safari)
| Page | Navigation | Lisibilité | Interactions | Performance | Bugs |
|------|:----------:|:----------:|:------------:|:-----------:|------|
| Accueil | ✅ | ✅ | ✅ | ✅ | - |
| Produits | ✅ | ✅ | ⚠️ | ✅ | Bouton « Filtrer » trop petit |
### Appareil 2 : Samsung Galaxy A14 (Android 13, Chrome)
| Page | Navigation | Lisibilité | Interactions | Performance | Bugs |
|------|:----------:|:----------:|:------------:|:-----------:|------|
| Accueil | ✅ | ⚠️ | ✅ | ⚠️ | Texte menu petit, chargement lent |
### Bugs à corriger
1. [ ] Agrandir bouton « Filtrer »
2. [ ] Optimiser images (compression, lazy loading)Services de test à distance
Pour les appareils que vous n'avez pas physiquement :
| Service | Caractéristique | Prix |
|---|---|---|
| BrowserStack | Appareils réels en cloud | Payant (essai gratuit) |
| LambdaTest | Tests cross-browser | Freemium |
| Sauce Labs | Tests automatisés | Payant |
Pour un projet scolaire, les tests sur appareils personnels suffisent généralement.
Checklist de la Phase 8
Checklist détaillée par page
La Checklist finale regroupe tous les critères de test (navigation, lisibilité, interactions, performance, responsive). Cette page se concentre sur la diversité d'appareils.
- Testé sur au moins 1 smartphone iOS
- Testé sur au moins 1 smartphone Android
- Testé sur ordinateur (Windows ou Mac)
- Testé en portrait ET paysage
- Testé avec une connexion lente (Slow 3G)
- Testé en conditions réelles (soleil, mobilité, une main)
- Grille de test remplie
- Bugs critiques corrigés et retestés
Étape finale
Les tests sont terminés. Consultez la Checklist finale pour la validation complète avant mise en ligne.