Test multi-navigateurs : un seul test pour chaque navigateur et appareil

Qu'est-ce que le test multi-navigateurs ?

Le test multi-navigateurs (cross-browser testing) consiste à vérifier qu'un site ou une application web fonctionne et s'affiche correctement dans chaque navigateur qu'ont vos utilisateurs.Le test multi-appareils fait de même d'un écran et d'un mode de saisie à l'autre : téléphones, tablettes et tailles d'écran de bureau, tactile et souris, portrait et paysage.Ensemble, ils répondent à une seule question.La page que votre équipe a construite fonctionne-t-elle pour la personne qui l'ouvre sur un téléphone, dans un autre navigateur, dans une autre langue ?

La question compte, car une page web n'est pas une image figée.Chaque navigateur dessine le même HTML, le même CSS et le même JavaScript avec son propre moteur.Chaque appareil donne à la page un écran différent auquel s'adapter.Une page de paiement qui fonctionne sur un grand écran dans Chrome peut repousser son bouton Payer sous la partie visible sur un petit téléphone.

Le test web mobile est la partie qui examine un site sur les téléphones et les tablettes.Le test responsive est la partie qui vérifie qu'une mise en page s'adapte à chaque taille d'écran.

Ce qui change d'un navigateur et d'un appareil à l'autre

Un test qui réussit dans un navigateur sur un écran ne prouve pas grand-chose pour les autres.Voici les différences qui cassent le plus souvent les pages.

Tester le viewport seul ne couvre que la deuxième ligne.Un vrai test multi-appareils a besoin à la fois de la taille de l'écran, de la saisie tactile et de la densité de pixels.

Comment les équipes font-elles d'habitude les tests multi-navigateurs ?

Les tests manuels viennent d'abord.Un testeur ouvre la page dans chaque navigateur et redimensionne la fenêtre.Cela fonctionne pour une version et ne passe pas à l'échelle de chaque build.

Viennent ensuite les suites automatisées.Leur forme est semblable dans chaque framework : un test écrit en code, puis une configuration qui l'exécute à nouveau pour chaque navigateur ou appareil.

Les projets et appareils de Playwright

Playwright regroupe les tests en projets.Un projet est un groupe de tests qui s'exécute avec une seule configuration, comme un navigateur ou un appareil émulé.Playwright exécute tous les projets par défaut.Son registre d'appareils décrit des téléphones, des tablettes et des ordinateurs de bureau, avec leur taille d'écran, leur user agent et leur prise en charge du tactile.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
  ],
});

Les navigateurs et viewports de Cypress

Cypress prend en charge les navigateurs de la famille Chrome, Firefox et WebKit, choisis avec l'option --browser.Sa commande cy.viewport définit la taille et l'orientation de l'écran, avec des préréglages comme iphone-6 et ipad-2.Sa documentation précise que le ratio de pixels de l'appareil n'est pas simulé.Elle suggère aussi d'exécuter certains navigateurs moins souvent, comme Firefox chaque nuit plutôt qu'à chaque commit, pour économiser du temps et des coûts de CI.

Selenium Grid

Selenium Grid exécute des scripts WebDriver sur des machines distantes, en parallèle, sur différentes versions de navigateurs et plateformes.C'est la façon classique de faire des tests multiplateformes avec Selenium.Votre équipe installe ces machines et maintient leurs navigateurs à jour.

Les clouds d'appareils

Les clouds d'appareils comme BrowserStack, TestMu AI (anciennement LambdaTest) et Sauce Labs hébergent les navigateurs et les appareils pour vous.BrowserStack et TestMu AI répertorient chacun des milliers de combinaisons de navigateurs et de systèmes d'exploitation.Sauce Labs propose des émulateurs, des simulateurs et de vrais appareils.Vos tests codés s'exécutent sur leurs machines, et les offres de BrowserStack Automate se comptent en tests en parallèle.

Pour un regard plus large sur ces outils, consultez l'étude comparative.

Ce que coûte une suite multi-appareils codée

La configuration est la partie facile.Le coût, c'est tout ce que chaque test doit savoir de chaque écran.

test('open the checkout', async ({ page, isMobile }) => {
  if (isMobile)
    await page.getByRole('button', { name: 'Menu' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
});

Multipliez cela par chaque élément qui bouge sur un petit écran.La partie multi-appareils d'une suite devient vite une deuxième suite, avec sa propre maintenance.

Des tests multi-navigateurs à partir d'un seul enregistrement

GUI Test Studio, qui automatise les tests de bout en bout sous Windows, prend un autre chemin.Vous enregistrez un test web une seule fois, en effectuant vous-même le parcours dans le navigateur que vous utilisez tous les jours.Vous cochez les navigateurs, les appareils et les conditions qu'il doit couvrir.GUI Test Runner-Recorder génère ensuite une version du test pour chacun, appelée une branche.

Quand vous enregistrez une application web, cochez Générer aussi ce test pour d'autres navigateurs et appareils sous son adresse.Les navigateurs sont ceux installés sur votre ordinateur : Chrome, Edge et Firefox.Les appareils sont plus de 80 téléphones, tablettes et tailles d'écran de bureau, groupés par fabricant.Chaque téléphone et chaque tablette peut être tenu à la verticale, à l'horizontale ou les deux.

Agrandir

La fenêtre indique combien de tests votre choix crée, combien de temps prend leur génération et l'espace disque qu'ils occupent.Une fois le test sauvegardé, les branches sont générées en arrière-plan.Rien n'est figé au moment de l'enregistrement : vous pouvez ajouter des navigateurs et des appareils plus tard.

Vous débutez avec l'enregistrement ?Enregistrer un test montre tout le parcours.Vous pouvez aussi décrire le test dans une consigne et nommer les navigateurs et les appareils dans la même phrase : voir Créer un test depuis une consigne.

Ce que fait la version de chaque navigateur et appareil

Une branche n'est pas l'enregistrement rejoué aux mêmes coordonnées.Elle est créée en rejouant le test dans ce navigateur et sur cet appareil, étape par étape, à travers les éléments de la page elle-même.

C'est la partie qu'une suite codée écrit à la main.Ici, elle vient de la page elle-même : le menu, le défilement et la nouvelle place de chaque élément.

Chaque assertion d'une branche est relevée sur ce que cet appareil affiche réellement, donc la mise en page propre à un téléphone n'est jamais lue comme un échec, alors qu'une vraie régression sur ce téléphone l'est toujours.

Quand une étape ne peut pas être effectuée sur un appareil, la branche le dit.Elle demande votre attention, et GUI Test Studio marque l'étape et dit pourquoi.

Tests responsive, de localisation et sur réseau lent

Les navigateurs et les écrans ne sont que la moitié de ce qu'apportent les utilisateurs.L'autre moitié, c'est la façon dont leur navigateur est réglé.Une branche peut s'exécuter dans certaines conditions, et chaque condition que vous cochez est combinée avec les navigateurs et les appareils que vous avez choisis.

Agrandir

En mode headless et côte à côte

Une branche peut s'exécuter en mode headless : le navigateur travaille sans fenêtre, donc votre écran et votre ordinateur restent à votre disposition.Les téléphones, les tablettes et les branches avec une condition s'exécutent toujours ainsi.Les branches de bureau aussi quand le test le permet, ce qui est le cas par défaut.Le test enregistré lui-même s'exécute dans une fenêtre, comme il a été enregistré.

Les tests avec un navigateur headless rendent aussi les tests en parallèle simples.Les branches qui n'ont pas besoin de fenêtre s'exécutent côte à côte, jusqu'à quatre à la fois selon votre ordinateur.

Cliquez sur Exécuter le test pour un tel test, et GUI Test Runner-Recorder vous demande quelles versions cette exécution couvre.Chaque branche générée est cochée, et la durée prévue figure sous la liste.Elle vient du temps qu'a pris chacune la dernière fois : une valeur typique, pas une limite.

Agrandir

À la fin, une fenêtre liste le verdict de chaque exécution, chacun avec son rapport.Voir Exécuter un test pour l'exécution elle-même.

Les tests multi-navigateurs en CI/CD

gtr-cli, la ligne de commande de GUI Test Studio, exécute les mêmes branches dans n'importe quel pipeline.--branch all exécute le test enregistré et chaque branche, chacun avec sa propre entrée dans le fichier JUnit et son propre historique.gtr-cli generate crée les branches manquantes ou périmées.

gtr-cli generate Checkout.GTS --branch missing
gtr-cli run Checkout.GTS --branch all --junit results\junit.xml

Exécuter des tests dans votre pipeline liste chaque option.L'exemple TeamCity parcourt un vrai pipeline, étape par étape, et fonctionne de la même façon avec n'importe quel outil de CI/CD.

Un rapport par navigateur et par appareil

Pour ses résultats, chaque branche est un test à part entière : son rapport de confiance, son historique des exécutions et sa vidéo.Ainsi, un échec dit toujours où il s'est produit : dans Firefox, sur un téléphone tenu à l'horizontale, ou en français.

Dans le rapport de confiance, le bouton Navigateurs et appareils liste l'enregistrement et chaque branche avec son dernier verdict.Il ouvre le rapport de votre choix.

Les modifications suivent la même idée.Quand vous sauvegardez une branche après avoir changé ce que fait une étape, GUI Test Studio demande si le changement vaut pour chaque navigateur et appareil, ou pour celui-ci seulement.Quand vous modifiez le test enregistré, il propose de mettre à jour chaque navigateur et chaque appareil à partir de lui.

Ce qu'il faut savoir avant de commencer

Quelques limites, pour que vous puissiez choisir en connaissance de cause.

Vous voulez une vue d'ensemble de ce que GUI Test Studio couvre au-delà du navigateur ?Voir les tests de bout en bout.

Questions

Selenium, Playwright, Cypress, BrowserStack, TestMu AI, LambdaTest, Sauce Labs, Chrome, Edge, Firefox, Safari et iPhone sont des marques de leurs propriétaires respectifs.