Émulation d'appareils et de navigateurs Playwright

Ce chapitre explique comment simuler des paramètres d'environnement du navigateur tels que les appareils mobiles, la géolocalisation, le fuseau horaire, la langue et le schéma de couleurs dans Playwright.

Émulation d'appareils mobiles

Playwright dispose d'un grand nombre de préréglages d'appareils intégrés qui peuvent simuler le viewport, l'User-Agent et le comportement tactile de divers téléphones et tablettes.

Utilisation du préréglage devices

En utilisant ladevicesobjet, vous pouvez rapidement simuler un appareil spécifique.

Exemple

import { chromium, devices } from 'playwright';

// Simuler l'iPhone 15
const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();

await page.goto('https://www.example.com/');
// La page sera rendue avec le viewport et l'UA de l'iPhone 15

Utilisation de préréglages d'appareils dans le fichier de configuration :

Exemple

// Chemin du fichier : playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'mobile',
      use: { ...devices['Pixel 7'] },
    },
  ],
});

Configuration manuelle du viewport

Si vous n'avez pas besoin d'un préréglage d'appareil complet, vous pouvez spécifier manuellement la taille du viewport.

Exemple

const context = await browser.newContext({
  viewport: { width: 375, height: 812 },     // Taille du viewport
  deviceScaleFactor: 3,                       // Rapport de pixels de l'appareil (écran Retina)
  isMobile: true,                             // Activer le mode mobile
  hasTouch: true,                             // Activer l'émulation tactile
  userAgent: 'Mozilla/5.0 ... Mobile ...',    // UA personnalisé
});

Émulation de géolocalisation

Playwright peut simuler les informations de localisation GPS de l'appareil.

Exemple

test('Simuler la localisation de Pékin', async ({ context, page }) => {
  // Accorder l'autorisation de géolocalisation
  await context.grantPermissions(['geolocation']);

  // Définir une latitude et une longitude spécifiques (coordonnées de Pékin)
  await context.setGeolocation({
    latitude: 39.9042,
    longitude: 116.4074,
  });

  await page.goto('https://www.example.com/map');
  // La page obtiendra les informations de localisation de Pékin
});

Émulation du fuseau horaire et de la langue

Vérifier les fonctionnalités liées à l'internationalisation et au fuseau horaire en définissant les paramètres régionaux et le fuseau horaire.

Exemple

const context = await browser.newContext({
  locale: 'zh-CN',                // Définir la langue du navigateur sur le chinois simplifié
  timezone: 'Asia/Shanghai',      // Définir le fuseau horaire sur Shanghai (UTC+8)
});

// Définir globalement dans le fichier de configuration
export default defineConfig({
  use: {
    locale: 'en-US',
    timezone: 'America/New_York',
  },
});

Valeurs de locale courantes :

localeLangue/Région
'zh-CN'Chinois simplifié (Chine)
'zh-TW'Chinois traditionnel (Taïwan)
'en-US'Anglais (États-Unis)
'ja-JP'Japonais
'ko-KR'Coréen

Émulation du schéma de couleurs

Émuler le mode clair ou sombre pour testerprefers-color-schemel’effet des requêtes média.

Exemple

// Tester le mode sombre
const darkContext = await browser.newContext({
  colorScheme: 'dark',
});

// Valeurs possibles : 'light', 'dark', 'no-preference'

Définissez différents schémas de couleurs pour différents projets dans le fichier de configuration :

Exemple

// Chemin du fichier : playwright.config.ts
export default defineConfig({
  projects: [
    {
      name: 'chromium-light',
      use: { colorScheme: 'light' },
    },
    {
      name: 'chromium-dark',
      use: { colorScheme: 'dark' },
    },
  ],
});

Émulation des autorisations

Utilisercontext.grantPermissions()pour accorder des autorisations au navigateur.

Exemple

await context.grantPermissions([
  'geolocation',        // Géolocalisation
  'notifications',      // Notifications
  'camera',             // Caméra
  'microphone',         // Microphone
  'clipboard-read',     // Lire le presse-papiers
  'clipboard-write',    // Écrire dans le presse-papiers
]);

// Effacer toutes les permissions
await context.clearPermissions();

Opérations sur les cookies

Via BrowserContext, vous pouvez lire, ajouter et effacer des cookies.

Exemple

// Ajouter un cookie
await context.addCookies([
  {
    name: 'example_session',
    value: 'session_token_value',
    domain: 'www.example.com',
    path: '/',
    httpOnly: true,
    secure: true,
    sameSite: 'Lax',
  },
]);

// Obtenir tous les cookies
const cookies = await context.cookies();
console.log(cookies);

// Obtenir les cookies pour une URL spécifique
const siteCookies = await context.cookies('https://www.example.com');

// Effacer tous les cookies
await context.clearCookies();

Description des paramètres de cookie

ChampTypeDescription
namestringNom du cookie
valuestringValeur du cookie
domainstringDomaine pour lequel il prend effet
pathstringChemin pour lequel il prend effet, par défaut'/'
expiresnombreHeure d'expiration (horodatage Unix)
httpOnlybooléenS'il est uniquement HTTP
securebooléenS'il est transmis uniquement via HTTPS
sameSitestringPolitique SameSite :'Strict' | 'Lax' | 'None'

Opérations sur localStorage et SessionStorage

Viapage.evaluate()opèrent sur le stockage dans le contexte de la page.

Exemple

// Définir localStorage
await page.evaluate(() => {
  localStorage.setItem('example_key', 'example_value');
});

// Lire localStorage
const value = await page.evaluate(() => {
  return localStorage.getItem('example_key');
});
console.log(value); // 'example_value'

// Effacer localStorage
await page.evaluate(() => {
  localStorage.clear();
});

Les opérations sur les cookies et le stockage doivent être effectuées avantpage.goto()pour garantir que ces données sont disponibles au chargement de la page.

Autres extensions