Chaque navigateur suit les mêmes standards du Web. Cependant, chaque navigateur ne transmet pas les codes HTML, CSS et JavaScript de la même manière.
Les différences d'interprétation des navigateurs obligent les développeurs de logiciels à orchestrer des tests multi-navigateurs afin de garantir une expérience utilisateur homogène quel que soit le navigateur utilisé.
Dans cet article, nous expliquerons ce que sont les tests multi-navigateurs, qui les font, pourquoi ils sont importants, et comment les faire.
Qu'est-ce que les tests multi-navigateurs ?
Les tests multi-navigateurs/cross browser sont un type de test fonctionnel qui vous permet de vérifier si votre site Web fonctionne comme prévu lorsqu'il est consulté via :
Différentes combinaisons navigateur-OS sur les navigateurs populaires comme Firefox, Chrome, Edge, Safari et sur l'un des systèmes d'exploitation populaires comme Windows, macOS, iOS et Android.
Différents appareils : Smartphones, tablettes, ordinateurs de bureau et portables, etc.
Outils d'accessibilité : Technologies d'assistance comme les lecteurs d'écran pour les personnes qui ont besoin de ces aides.
Qui effectue les tests cross browser ?
Les équipes QA exécutent généralement des scénarios de test sur plusieurs navigateurs pour s'assurer que la version répond aux critères de base.
Les équipes UX effectuent des tests multi-navigateurs pour découvrir comment le site Web fonctionne sur différents appareils et orientations.
Quelles fonctionnalités sont analysées dans les tests multi-navigateurs ?
Les fonctionnalités qui subiront des tests cross browser sont généralement classées dans les catégories suivantes :
Fonctionnalité de base
Garantit que les fonctionnalités de base fonctionnent sur la plupart des combinaisons navigateur OS. Par exemple, vous pourriez tester pour vérifier que :
- Les menus fonctionnent comme prévu
- Les champs de formulaire acceptent les entrées après les avoir validées correctement
- Le site Web gère correctement les cookies propriétaires (et les fonctionnalités telles que la personnalisation qui en dépendent).
- Saisie tactile fonctionne comme prévu pour mobiles ou tablettes
Design
Cela garantit que l'apparence du site Web (polices, images et mise en page) correspond aux spécifications partagées par l'équipe design.
Accessibilité
Assure que le site ou application est accessible à tous.
Comment sélectionner les navigateurs à tester ?
Le grand nombre de navigateurs, d'appareils et de systèmes d'exploitation existants rend pratiquement impossible la création et le test sur chaque combinaison navigateur OS.
Un objectif plus réaliste consiste à concentrer vos efforts de test sur la maximisation de la portée de votre site Web au sein de votre marché cible. Pour cela, vous devrez choisir les navigateurs et versions les plus pertinents :
En se basant sur la popularité
Sélectionnez les navigateurs les plus populaires ou les plus couramment utilisés et choisissez les deux principales plateformes, comme Android et iOS, afin de maximiser votre portée sur n'importe quel marché cible.
Les navigateurs les plus populaires incluent :
- Firefox
- Edge
- Chrome
- Safari
En se basant sur l'analyse
Examinez les statistiques de trafic de votre site Web telles qu'elles sont capturées par des outils d'analyse (comme Google Analytics).
Le but est de découvrir :
- Quelles combinaisons de navigateurs OS sont les plus couramment utilisées par votre public cible
- Sur quels appareils votre site Web est généralement consulté
Quand les tests cross browser sont-ils effectués ?
Les tests multi-navigateurs sont effectués :
Pendant le développement : Les développeurs testent les nouvelles fonctionnalités pour s'assurer qu'elles sont compatibles avec tous les navigateurs avant de mettre les modifications en production.
Staging/Pre-Release : Les équipes QA font des tests cross browser pour chaque Release afin de s'assurer qu'aucun problème de compatibilité de navigateur n'apparaît dans la dernière version d’un site web ou application.
Comment se déroulent les tests multi-navigateurs ?
1. Établir une base
Avant de commencer les tests multi-navigateurs, exécutez tous les tests de design et de fonctionnalité sur votre navigateur principal, qui est généralement Chrome. Cela vous donnera une référence de base.
2. Créez un plan de test et choisissez les navigateurs sur lesquels tester
Créez un plan de test pour décrire exactement ce que vous allez tester.
Ensuite, choisissez les combinaisons navigateur OS à tester en fonction de la popularité et de l'analyse de votre trafic actuel.
3. Exécution | Tests multi-navigateurs automatisés vs manuels
Les tests manuels nécessitent des testeurs humains pour exécuter séquentiellement les scénarios de test, tandis que les tests automatisés automatisent les interactions humaines.
Un seul script de test écrit par des QA professionnels à l'aide d'outils d'automatisation comme Mr Suricate peut exécuter vos :
- Tests automatisés Firefox
- Tests automatisés Edge
- Tests automatisés Chrome
- Tests automatisés Safari
Avec un rapport d'erreur précis, les bugs sont plus faciles à trouver et à corriger tandis que les tests manuels laissent place à l'erreur humaine.
4. Infrastructure
Il existe plusieurs façons de configurer votre infrastructure de tests multi-navigateurs :
Émulateurs et simulateurs
Vous pouvez utiliser des machines virtuelles et y installer des navigateurs à des fins de test. Bien que cette approche soit peu coûteuse, elle présente quelques inconvénients :
- Ce n'est pas facilement évolutif.
- Les résultats des tests ne sont pas fiables sur les plateformes mobiles (Android et iOS)
Ferme d'appareils en interne
Si vous avez les ressources nécessaires pour vous procurer de vrais appareils et maintenir leur intégrité au fil du temps, vous pouvez créer votre propre ferme d'appareils.
C'est évidemment l'option la plus coûteuse et la plus laborieuse.
Ferme de devices externes
Les navigateurs de ces dernières années sont conformes à la norme W3C de livraison continue. Cela signifie qu'ils publient de nouvelles versions à un rythme rapide, parfois même plusieurs versions par semaine.
Les principaux navigateurs adoptent et s'appuient également sur la base de code Chromium. Cela rend ces navigateurs très similaires, à l'exception de la partie rendue - qui est toujours spécifique au navigateur. Ce changement doit être pris en compte dans toute stratégie de test multi-navigateurs.
Ce type de configuration de test permet d'exécuter vos tests sur un laboratoire distant d'appareils et de navigateurs sécurisés à une fraction du coût de la configuration de votre propre laboratoire d'appareils.
Avec une solution appelée Browserstack, vous pouvez exploiter le même script unique pour différentes combinaisons d'appareils pour vous donner les résultats des tests fonctionnels et visuels sur la variété de combinaisons spécifiées.
Il n'est pas nécessaire de dupliquer les scénarios, mais de penser les parcours utilisateurs pour qu'ils se croisent et un ainsi répartir les navigateurs sur différents scénarios.
Principaux avantages des tests automatisés multi-navigateur :
- Créez des scripts d'automatisation à des fins différentes - tests fonctionnels, visuels, multi-navigateurs, en une seule fois.
- Pas besoin de créer différentes configurations pour différents types de tests
- Tirez parti de la solution pour le Web, le Web mobile et les applications natives
- Pas besoin d'entretenir les appareils
- Tests automatisés no-code = n’importe qui peut les effectuer
Mr Suricate | Une solution de tests automatisés multi-navigateur
La solution no-code de tests automatisés cross browser de Mr Suricate vous permet de facilement tester les applications et sites Web sur les différents navigateurs, systèmes d'exploitation et plateformes mobiles.
Avec Mr Suricate, vous n’avez pas besoin de savoir coder ni dépenser une fortune pour vérifier que vos utilisateurs ont une navigation fluide et sans bug, peu importent leurs moyens d’accès !
