Tutos & formations
Tests de compatibilité navigateurs

Tests de compatibilité navigateurs

Guide pour tester votre thème Shopify sur différents navigateurs et appareils, et résoudre les problèmes de compatibilité courants.

Vue d'ensemble

Les tests de compatibilité navigateurs permettent de :

  • Assurer une expérience cohérente pour tous les utilisateurs
  • Identifier les bugs spécifiques à certains navigateurs
  • Respecter les standards web
  • Optimiser pour les navigateurs les plus utilisés

Navigateurs à tester

Navigateurs desktop

  • Chrome (dernière version et version -1)
  • Firefox (dernière version et version -1)
  • Safari (dernière version et version -1)
  • Edge (dernière version)
  • Opera (optionnel, basé sur Chromium)

Navigateurs mobile

  • Safari iOS (dernière version et version -1)
  • Chrome Android (dernière version)
  • Samsung Internet (sur Android)

Versions obsolètes (selon audience)

  • Internet Explorer 11 (si nécessaire, mais déprécié par Microsoft)
  • Safari iOS 12+ (selon votre audience)

Outils de test

Outils en ligne

BrowserStack

Service cloud pour tester sur de vrais appareils et navigateurs :

LambdaTest

Alternative à BrowserStack :

Can I Use

Vérifier la compatibilité des fonctionnalités CSS/JS :

Outils de développement

Chrome DevTools

  • Device Mode : Simuler différents appareils
  • Console : Détecter les erreurs JavaScript
  • Network : Analyser les requêtes
  • Lighthouse : Audit de performance et compatibilité

Firefox Developer Tools

  • Responsive Design Mode : Simuler différents viewports
  • Web Console : Erreurs JavaScript
  • Network Monitor : Analyser les requêtes

Safari Web Inspector

  • Responsive Design Mode : Simuler iOS
  • Console : Erreurs JavaScript
  • Storage : Vérifier cookies/localStorage

Outils locaux

Emulateurs iOS

# Sur Mac, utiliser Simulator (Xcode requis)
# Ouvrir Simulator depuis Xcode
# Sélectionner un appareil iOS
# Ouvrir Safari et tester votre site

Android Emulator

# Via Android Studio
# Créer un AVD (Android Virtual Device)
# Lancer l'émulateur
# Ouvrir Chrome et tester

Checklist de tests

Tests fonctionnels

  • Navigation du menu
  • Recherche de produits
  • Ajout au panier
  • Modifications de quantité
  • Suppression d'articles
  • Processus de checkout
  • Filtres de collection
  • Tri de produits
  • Formulaire de contact
  • Inscription newsletter
  • Liens externes
  • Vidéos (si présentes)
  • Carrousels/sliders
  • Modals/popups

Tests visuels

  • Layout général
  • Typographie
  • Couleurs
  • Images (chargement et affichage)
  • Espacements
  • Alignements
  • Boutons et formulaires
  • Animations/transitions
  • Responsive design

Tests de performance

  • Temps de chargement
  • Rendu initial
  • Interactions fluides
  • Scroll performance
  • Chargement des images
  • JavaScript non bloquant

Problèmes courants et solutions

1. Flexbox et Grid

Problème : Layout cassé sur Internet Explorer

Solution :

/* Utiliser des fallbacks pour IE11 */
.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
 
/* Grid avec fallback */
.grid-container {
  display: grid; /* Support moderne */
}
 
@supports not (display: grid) {
  .grid-container {
    display: flex; /* Fallback pour anciens navigateurs */
  }
}

2. Variables CSS (Custom Properties)

Problème : Variables CSS non supportées sur IE11

Solution :

/* Définir une valeur de fallback */
.button {
  background-color: #007bff; /* Fallback pour IE11 */
  background-color: var(--primary-color, #007bff);
}
 
/* Ou utiliser PostCSS avec autoprefixer */

3. JavaScript moderne

Problème : Syntaxe ES6+ non supportée

Solution : Utiliser Babel pour transpiler

// Code moderne
const addToCart = async (variantId) => {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: JSON.stringify({ id: variantId })
  });
  return response.json();
};
 
// Transpilé avec Babel pour compatibilité

Configuration Babel (.babelrc) :

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 11"]
      }
    }]
  ]
}

4. Fetch API

Problème : Fetch non supporté sur IE11

Solution : Utiliser un polyfill ou une alternative

// Polyfill fetch
if (!window.fetch) {
  // Charger le polyfill
  const script = document.createElement('script');
  script.src = 'https://polyfill.io/v3/polyfill.min.js?features=fetch';
  document.head.appendChild(script);
}
 
// Ou utiliser XMLHttpRequest comme fallback
function makeRequest(url, options = {}) {
  if (window.fetch) {
    return fetch(url, options);
  } else {
    // Fallback XMLHttpRequest
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(options.method || 'GET', url);
      xhr.onload = () => resolve({
        ok: xhr.status >= 200 && xhr.status < 300,
        json: () => Promise.resolve(JSON.parse(xhr.responseText))
      });
      xhr.onerror = reject;
      xhr.send(options.body);
    });
  }
}

5. Intersection Observer

Problème : Intersection Observer non supporté

Solution : Polyfill ou fallback

// Charger le polyfill si nécessaire
if (!window.IntersectionObserver) {
  const script = document.createElement('script');
  script.src = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
  document.head.appendChild(script);
}
 
// Ou utiliser une alternative
function observeElement(element, callback) {
  if (window.IntersectionObserver) {
    const observer = new IntersectionObserver(callback);
    observer.observe(element);
    return observer;
  } else {
    // Fallback : vérifier manuellement
    const checkVisibility = () => {
      const rect = element.getBoundingClientRect();
      const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
      if (isVisible) callback([{ isIntersecting: true, target: element }]);
    };
    window.addEventListener('scroll', checkVisibility);
    checkVisibility();
  }
}

6. Touch Events sur desktop

Problème : Événements tactiles sur navigateurs desktop

Solution : Utiliser des événements universels

// Détecter si l'appareil supporte le touch
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
// Utiliser les bons événements
const startEvent = isTouchDevice ? 'touchstart' : 'mousedown';
const moveEvent = isTouchDevice ? 'touchmove' : 'mousemove';
const endEvent = isTouchDevice ? 'touchend' : 'mouseup';
 
element.addEventListener(startEvent, handleStart);
element.addEventListener(moveEvent, handleMove);
element.addEventListener(endEvent, handleEnd);

Tests de régression

Automatiser les tests visuels

Utiliser des outils comme :

  • Percy : Tests visuels automatisés
  • BackstopJS : Tests de régression visuelle
  • Chromatic : Tests de composants visuels

Configuration BackstopJS

{
  "scenarios": [
    {
      "label": "Homepage",
      "url": "https://votre-boutique.myshopify.com/",
      "viewports": [
        {
          "width": 1920,
          "height": 1080,
          "label": "Desktop"
        },
        {
          "width": 375,
          "height": 667,
          "label": "Mobile"
        }
      ]
    }
  ]
}

Feature Detection

Détecter les fonctionnalités disponibles

// Détecter si une fonctionnalité est supportée
function supportsFeature(feature) {
  const features = {
    flexbox: CSS.supports('display', 'flex'),
    grid: CSS.supports('display', 'grid'),
    customProperties: CSS.supports('color', 'var(--test)'),
    fetch: typeof fetch !== 'undefined',
    intersectionObserver: 'IntersectionObserver' in window,
    serviceWorker: 'serviceWorker' in navigator
  };
  
  return features[feature] || false;
}
 
// Utilisation
if (supportsFeature('grid')) {
  // Utiliser CSS Grid
} else {
  // Utiliser un fallback (flexbox, floats, etc.)
}

Polyfills conditionnels

// Charger des polyfills seulement si nécessaires
async function loadPolyfills() {
  const polyfills = [];
  
  if (!window.fetch) {
    polyfills.push(import('whatwg-fetch'));
  }
  
  if (!window.IntersectionObserver) {
    polyfills.push(import('intersection-observer'));
  }
  
  if (!CSS.supports('display', 'grid')) {
    // CSS Grid n'a pas de polyfill JS, utiliser un fallback CSS
  }
  
  await Promise.all(polyfills);
}
 
// Charger avant d'initialiser l'application
loadPolyfills().then(() => {
  initializeApp();
});

Tests sur appareils réels

Checklist mobile

  • Test sur iPhone (Safari)
  • Test sur Android (Chrome)
  • Test sur tablette iPad
  • Test sur tablette Android
  • Vérifier les gestes tactiles
  • Vérifier le zoom
  • Vérifier le scroll
  • Vérifier les formulaires (clavier virtuel)
  • Vérifier les performances

Tests de connectivité

  • Test sur connexion 4G/5G
  • Test sur connexion WiFi
  • Test en mode offline
  • Test avec connexion lente (throttling)

Documentation des problèmes

Template de rapport de bug

## Problème de compatibilité
 
**Navigateur/Appareil** : Safari iOS 14.0
**Version** : 14.0
**Description** : Le menu ne s'ouvre pas au clic
 
**Steps to reproduce** :
1. Ouvrir le site sur Safari iOS
2. Cliquer sur le bouton menu
3. Rien ne se passe
 
**Comportement attendu** : Le menu devrait s'ouvrir
 
**Screenshot** : [lien vers screenshot]
 
**Solution proposée** : 
- Vérifier les événements touch
- Ajouter preventDefault si nécessaire

Bonnes pratiques

✅ À faire

  • Tester sur les navigateurs les plus utilisés par votre audience
  • Utiliser des feature detection plutôt que browser detection
  • Fournir des fallbacks pour les fonctionnalités modernes
  • Documenter les problèmes et solutions
  • Tester régulièrement (tests de régression)

❌ À éviter

  • Supposer qu'un navigateur fonctionne comme un autre
  • Utiliser des hacks spécifiques à un navigateur
  • Ignorer les versions mobiles
  • Ne tester que sur votre navigateur favori
  • Oublier de tester les interactions tactiles

Ressources

Gestion des erreurs JavaScriptDébogage Liquid