Comment fonctionne un test cross-browser\u00a0?<\/h2>\n
L\u2019objectif premier d\u2019un test cross-browser est d\u2019identifier les erreurs de fonctionnalit\u00e9 sur des clients web sp\u00e9cifiques, avant que les utilisateurs ne les rencontrent.
\nPour r\u00e9aliser cet exercice, vous pouvez noter manuellement les diff\u00e9rences sur divers clients web ou ex\u00e9cuter des scripts de test.<\/p>\n
La m\u00e9thode manuelle pour r\u00e9aliser un test cross-browser<\/h3>\n
Pour r\u00e9aliser un test de navigateur crois\u00e9 manuellement, vous s\u00e9lectionnez les syst\u00e8mes d\u2019exploitation, navigateurs et appareils les plus populaires. Vous pouvez aussi les choisir en fonction des donn\u00e9es de trafic sur votre site.<\/p>\n
Votre \u00e9quipe (ou vous-m\u00eame) affichera votre site ou application sur ces diff\u00e9rents espaces, afin de v\u00e9rifier la compatibilit\u00e9, l\u2019ergonomie et le temps de chargement.<\/p>\n
Cette m\u00e9thode est assez fastidieuse et n\u2019est pas la plus recommand\u00e9e\u2026 N\u00e9anmoins, cela peut vous permettre d\u2019avoir un premier aper\u00e7u et de r\u00e9aliser quelques optimisations rapidement.<\/p>\n
La m\u00e9thode automatis\u00e9e pour r\u00e9aliser un test cross-browser<\/h3>\n
Avec cette m\u00e9thode, les d\u00e9veloppeurs \u00e9crivent des scripts qui lancent p\u00e9riodiquement votre site web dans plusieurs navigateurs. Ces scripts peuvent simuler des visites et des parcours, pour analyser les points bloquants.<\/p>\n
Beaucoup plus efficace, cette m\u00e9thode vous aide \u00e0 d\u00e9tecter rapidement les axes d\u2019am\u00e9lioration, ainsi que les zones o\u00f9 tout fonctionne correctement. Afin de proposer une exp\u00e9rience utilisateur optimale, les param\u00e8tres et fonctionnalit\u00e9s qui peuvent \u00eatre analys\u00e9s sont :<\/p>\n Le test de navigateur crois\u00e9 permet d\u2019\u00e9valuer l\u2019exp\u00e9rience utilisateur sur votre site ou application. Chaque navigateur rend le HTML, le CSS et le JavaScript de mani\u00e8re unique. A cet effet, le d\u00e9bogage minutieux du code source de votre site web ne suffit pas pour garantir un affichage optimal sur chacun d\u2019eux.<\/p>\n Par exemple, certains navigateurs, plus anciens, ne prennent pas en charge le CSS3. Ce qui signifie que les fonctions interactives d’un site web, telles que la possibilit\u00e9 de zoomer et de d\u00e9zoomer, peuvent ne pas fonctionner.<\/p>\n En r\u00e9alisant un test cross-browser, vous rep\u00e9rez les erreurs de compatibilit\u00e9 sp\u00e9cifiques \u00e0 un navigateur et vous les corrigez. Ce qui contribue \u00e0 optimiser l\u2019exp\u00e9rience utilisateur et, directement, \u00e0 augmenter votre taux de conversion. Car c\u2019est bien l\u00e0 l\u2019objectif\u00a0: offrir une navigation fluide qui incite l\u2019internaute \u00e0 poursuivre son parcours jusqu\u2019\u00e0 la transformation. Pour vous assurer un r\u00e9sultat pertinent, vous devez v\u00e9rifier quelques \u00e9l\u00e9ments importants pendant votre test cross-browser.<\/p>\n Pour bien pr\u00e9parer vos tests cross-browser assurez-vous de :<\/p>\n Pour ce premier point, ne faites pas de z\u00e8le : inutile de remonter \u00e0 des versions tr\u00e8s anciennes d’Internet Explorer si votre client ne vous l’a pas demand\u00e9. Cette v\u00e9rification consiste \u00e0 se poser deux questions :<\/p>\n Certains formats de vid\u00e9o ne sont pas support\u00e9s par les navigateurs. Pour \u00e9viter un vilain message d’erreur, passez en revue les pages du site contenant des vid\u00e9os sur tous les navigateurs.<\/p>\n C’est parfois aussi le cas pour les images, vous verrez alors une zone grise comme si cette derni\u00e8re n’\u00e9tait pas h\u00e9berg\u00e9e.<\/p>\n En webdesign, les polices dites web sont souvent utilis\u00e9es pour \u00eatre s\u00fbr que chaque navigateur l’affiche correctement.<\/p>\n Toutefois, vous aurez \u00e9galement \u00e0 afficher des polices plus stylis\u00e9es<\/strong>. V\u00e9rifiez alors leur bon affichage ou si le site propose bien des alternatives \u00e0 la police principale si cette derni\u00e8re ne peut pas s’afficher.<\/p>\n Contr\u00f4lez enfin la bonne prise en compte des gabarits de titre<\/strong> (H1, H2, H3) et l’harmonie<\/strong> de l’ensemble.<\/p>\n Dans le cas o\u00f9 vous utilisez des API pour votre projet, sachez que les appels peuvent plus ou moins bien se d\u00e9rouler d’un navigateur \u00e0 l’autre.<\/p>\n Il pourra arriver qu’un navigateur soit cat\u00e9goriquement incompatible avec votre API<\/strong> et mieux vaut d\u00e9tecter le probl\u00e8me avant la mise en production (c’est le cas de l’API Websocket et du navigateur Opera Mini par exemple).<\/p>\n Les tests cross-browser servent aussi \u00e0 \u00e9viter que du code apparaisse sur votre site \u00e0 cause d’une balise rest\u00e9e ouverte<\/strong>. Utilisez “Code Sniffer pour PHP” ou le test ultime des standards avec le WC3 validator<\/a> dont l’objectif est de vous alerter sur :<\/p>\n Ce n’est parce que votre certificat SSL est valide sur Google, qu’il le sera sur Safari.<\/p>\n Veillez donc \u00e0 bien v\u00e9rifier l’affichage de votre homepage sur chaque navigateur.<\/p>\n Derni\u00e8re partie, mais pas des moindres : le test des interactions.<\/p>\n Cela peut vous sembler fastidieux. Pourtant, en suivant une logique de navigation, vous pourrez faire vos tests cross-browser assez rapidement.<\/p>\n Prenez le temps de remplir cette checklist avant de pousser en production :<\/p>\n Comme nous l\u2019avons dit pr\u00e9c\u00e9demment, la m\u00e9thode manuelle n\u2019est pas la plus pr\u00e9conis\u00e9e pour r\u00e9aliser un test de navigateur crois\u00e9. D\u2019autant plus qu\u2019il existe des outils pour vous aider\u2026<\/p>\n Sauce Labs<\/a> offre des outils pour tester les applications sur divers navigateurs et appareils. Il simplifie les tests gr\u00e2ce \u00e0 des options comme les tests en parall\u00e8le sur un cloud virtuel ou l’utilisation d’appareils r\u00e9els pour une meilleure pr\u00e9cision. Les d\u00e9veloppeurs peuvent \u00e9galement identifier rapidement les bugs gr\u00e2ce \u00e0 des outils int\u00e9gr\u00e9s.<\/p>\n Prix :<\/strong><\/p>\n Browserling<\/a> facilite les tests sur des navigateurs r\u00e9els via des machines virtuelles. Il permet des simulations locales, ajuste facilement les r\u00e9solutions d\u2019\u00e9cran, et offre des tunnels s\u00e9curis\u00e9s pour tester des applications locales.<\/p>\n Prix :<\/strong><\/p>\n TestGrid<\/a> propose une infrastructure cloud pour tester manuellement ou automatiquement vos applications. Il offre une compatibilit\u00e9 \u00e9tendue, des int\u00e9grations CI\/CD, et des rapports analytiques d\u00e9taill\u00e9s.<\/p>\n Prix :<\/strong><\/p>\n
\n![\"test](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2019\/07\/test-cross-browser-1-1.jpg\")
<\/a><\/p>\nQuels param\u00e8tres sont pris en compte dans les tests\u00a0?<\/h2>\n
\n
Pourquoi r\u00e9aliser un test cross-browser\u00a0?<\/h2>\n
\nPar ailleurs, garantir un fonctionnement parfait sur les navigateurs ou appareils am\u00e9liore le r\u00e9f\u00e9rencement naturel de votre site internet. C\u2019est m\u00eame un crit\u00e8re essentiel des Core Web Vitals de Google (des \u00ab signaux web essentiels \u00bb, bas\u00e9s sur l\u2019accessibilit\u00e9 et l\u2019exp\u00e9rience utilisateur, que le c\u00e9l\u00e8bre moteur de recherche analyse pour positionner votre site).<\/p>\n3 choses \u00e0 v\u00e9rifier pendant le cross-browser testing<\/h2>\n
Au pr\u00e9alable<\/h3>\n
\n
\nPour rappel, les navigateurs \u00e0 passer en revue<\/a> sont : Chrome \/ Internet explorer \/ Firefox \/ Edge \/ Safari \/ Opera ;<\/p>\n1. Votre rendu visuel est-il fid\u00e8le \u00e0 votre maquette ?<\/h3>\n
Visuels<\/h4>\n
\n
Vid\u00e9os<\/h4>\n
Polices<\/h4>\n
2. La technique et la s\u00e9curit\u00e9 fonctionnent-elles bien\u00a0?<\/h3>\n
Technique<\/h4>\n
\n
S\u00e9curit\u00e9<\/h4>\n
3. Retrouvez-vous toutes les interactions et animations souhait\u00e9es ?<\/h3>\n
\n
target_blank<\/code>) ;<\/li>\n5 outils pour r\u00e9ussir votre test cross-browser<\/h2>\n
1. Sauce Labs : tester efficacement vos applications web<\/h3>\n
<\/p>\n\n
2. Browserling : simplicit\u00e9 des tests multi-navigateurs<\/h3>\n
<\/p>\n\n
3. TestGrid : performance et flexibilit\u00e9 pour les tests web et mobiles<\/h3>\n
<\/p>\n\n
4. BrowserStack : tests complets sur navigateurs et appareils r\u00e9els<\/h3>\n
<\/p>\n