Content slides

Introduction à BrowserStack¶

BrowserStack est un service cloud permettant d'exécuter des tests automatisés sur une infrastructure distante

Accès à plus de 3000 combinaisons de navigateurs et appareils réels
Support de Selenium, Cypress, Playwright et Appium
Idéal pour garantir une expérience utilisateur (UX) uniforme
Intégration native dans les pipelines CI/CD

Real Devices vs Emulators¶

La force majeure de BrowserStack est l'utilisation de vrais terminaux mobiles :

Fidélité totale : Contrairement aux simulateurs, on teste sur du vrai matériel (iPhone, Samsung Galaxy, Pixel)
Bugs matériels : Détection des problèmes liés à la mémoire, au CPU mobile ou aux surcouches constructeurs
iOS : Indispensable pour tester Safari sur de vrais iPhone/iPad sans posséder de Mac

Moteurs de rendu vs Navigateurs¶

Le rendu visuel dépend du moteur utilisé par le navigateur :

Chromium : Chrome, Edge, Brave, Opera (Le standard dominant)
WebKit : Safari macOS et tous les navigateurs sur iOS (contrainte Apple)
Gecko : Firefox (Le moteur indépendant de Mozilla)

Outil de référence : caniuse.com

Valeur ajoutée du Cross Browser Testing¶

Cohérence UI : Éviter les éléments mal alignés ou les polices illisibles
Interactivité : S'assurer que les scripts JS (animations, formulaires) fonctionnent partout
Accessibilité : Vérifier que les lecteurs d'écran et les styles s'adaptent correctement
Confiance : Réduire le risque de bugs critiques signalés par des utilisateurs sur des navigateurs minoritaires

Tester en environnement privé (Tunnel Local)¶

Comment tester une application en staging ou sur localhost non exposée sur internet ?

BrowserStack Local : Un binaire qui crée un tunnel sécurisé entre votre réseau et le cloud BrowserStack
Indispensable pour le Shift Left : tester avant même que le code soit en production
Se configure via une variable ou un flag dans le script de test

Exemple de test Selenium (Best Practices)¶

On utilise les variables d'environnement pour ne jamais exposer les clés :

const { Builder } = require('selenium-webdriver')

const USER = process.env.BROWSERSTACK_USERNAME
const KEY = process.env.BROWSERSTACK_ACCESS_KEY
const URL = `https://${USER}:${KEY}@hub-cloud.browserstack.com/wd/hub`

const capabilities = {
  'browserName': 'Safari',
  'browserVersion': 'latest',
  'os': 'OS X',
  'osVersion': 'Sonoma',
  'bstack:options': {
    'sessionName': 'My First Cross-Browser Test',
    'local': 'true' // Activation du tunnel local
  }
}

async function runTest() {
  const driver = await new Builder().usingServer(URL).withCapabilities(capabilities).build()
  await driver.get('http://localhost:3000')
  // ... logique de test
  await driver.quit()
}

Intégration GitLab CI¶

browserstack-tests:
  image: node:20
  stage: test
  variables:
    # Variables stockées dans les réglages CI/CD du projet
    BROWSERSTACK_USERNAME: $BS_USER
    BROWSERSTACK_ACCESS_KEY: $BS_KEY
  script:
    - npm ci
    - node tests/browserstack.js
  only:
    - merge_requests
    - main

Conclusion¶

Le Cross Browser Testing garantit que personne n'est laissé de côté (inclusion technique)
BrowserStack supprime la douleur de maintenir une flotte de serveurs et d'appareils
L'utilisation de Real Devices est le seul moyen de garantir un rendu mobile fiable
Le Tunnel Local permet d'intégrer ces tests dès les premières phases du développement

☕️ Si tu souhaites soutenir mon travail, tu peux m'offrir un café ici.