Le test des applications est d'une importance cruciale, particulièrement quand de nombreuses plateformes et appareils sont supportés. Le nombre de test et leur type dépend du périphérique et de la plateforme qui sera utilisée. Les types de tests sont:
- Vitesse
- Performance et efficience (ndlt: consommation des ressources)
- Vérification des saisies et des résultats
- Contact et interactivité
Ceci est une liste classique, d'autres idées peuvent apparaître durant le test.
Différence des environnements web
Les points suivants sont à garder à l'esprit lorsque l'on travaille avec plusieurs environnements web différents.
Préfixes constructeur (vendor prefixes)
Certaines fonctions avancées de JavaScript, ainsi que de CSS, peuvent être préfixées avec -webkit, -moz, -o, ou -ms. Il est nécessaire de connaitre l'environnement visé par l'application et de préfixer les fonctions en conséquence.
Détection des fonctionnalités
Certains environnements vont supporter des fonctionnalités spéciales, et d'autres non. La détection des fonctionnalités est le meilleur moyen de connaitre quels outils sont disponibles pour une plateforme donnée. Par exemple, pour détecter le support de l'API Géolocalisation vous pouvez écrire le code suivant:
if("geolocation" in navigator) {
// La géolocalisation est disponible, vous pouvez l'utiliser!
}
Le site CanIUse.com fournit une matrice détaillée du support des navigateurs et des périphériques pour une fonctionnalité spécifique. Une bibliothèque de type Modernizr détecte automatiquement les fonctions disponibles au chargement de la page et fournit les informations en conséquence.
Affichage adaptatif (responsive design)
Utiliser les media queries et anticiper la conception des écrans empêchera les problèmes d'affichage. Une erreur courante est de ne pas utiliser les images vectorielles pour des éléments qui peuvent grandir ou rétrécir, utiliser des tailles fixes pour tous les appareils, ne pas tester les différentes orientations et simplement ne pas regarder l'application à différentes résolutions. Les services comme Screenfly et responsivepx aident au test du rendu de l'application aux différentes tailles d'écran, mais ils ne remplace pas de faire manuellement le test sur le materiel supporté.
Il faut aussi prendre en compte les problèmes qui peuvent survenir lorsque des appareils différents ont des résolutions d'écran différentes. Un exemple de ce cas: le problème de page rognée lors qu'Apple a lancé la troisième génération de l'iPad avec son affichage 2048x1536 :
- New York Times: Is The New iPad Screen Too Good For The Web?
- Net Magazine: Web devs battle new iPad's Retina Display
Voir aussi:
- Responsive Web design
- Responsive design for mobile
- Intro to responsive design
- Responsive Design View, un des outils de développement de Firefox
Test unitaire
Le test unitaire est une pratique courante dans tous les développements, et le test des applications web n'est pas différent. Le test unitaire de CSS et JavaScript est très simple quand l'application est développée de façon modulaire. Parmi les outils célèbres de test pour JavaScript on retrouve Jasmine, QUnit, et YUI Test. Chacun de ces sites fournit un exemple d'utilisation de son framework.
Performance
Le test des performances peut être difficile à prescrire vu qu'il est entièrement dépendant du travail effectué par l'application. Les principes de base du développement web comme réduire les requêtes HTTP (la concaténation du JavaScript ou les sprites CSS aident), minifier les fichier JS et CSS, placer les scripts en bas de la page et configurer correctement les en-tête Expires aident à cette tâche. L'équipe YSlow fourni une liste de bonnes pratiques concernant les performances web à suivre, tout ce qui vous permettra d'améliorer votre application web. Le site HTML5Rocks fourni lui aussi une liste des bonnes pratiques concernant la performance.