El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com Playwright pot emular diferents dispositius i geolocalitzacions per provar aplicacions web en condicions diverses. Aquesta funcionalitat és especialment útil per assegurar que les aplicacions funcionin correctament en una àmplia gamma de dispositius i ubicacions geogràfiques.

Conceptes Clau

Emulació de Dispositius:
- Simulació de diferents dispositius com telèfons mòbils, tauletes i escriptoris.
- Ajustament de la resolució de pantalla, l'agent d'usuari i altres característiques específiques del dispositiu.
Geolocalització:
- Simulació de la ubicació geogràfica de l'usuari.
- Útil per provar funcionalitats basades en la ubicació, com ara serveis de mapes o contingut localitzat.

Emulació de Dispositius

Playwright proporciona una manera senzilla d'emular dispositius mitjançant la configuració de paràmetres específics. A continuació, es mostra com es pot emular un dispositiu mòbil:

Exemple de Codi: Emulant un iPhone 11

import { chromium, devices } from 'playwright';

(async () => {
  // Obtenim la configuració del dispositiu iPhone 11
  const iPhone11 = devices['iPhone 11'];

  // Iniciem el navegador amb la configuració del dispositiu
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...iPhone11,
  });

  const page = await context.newPage();
  await page.goto('https://example.com');

  // Realitzem accions de prova aquí

  await browser.close();
})();

Explicació del Codi

Importació de Dispositius: Utilitzem devices de Playwright per accedir a configuracions predefinides de dispositius.
Configuració del Context: Creem un nou context de navegador amb la configuració del dispositiu desitjat.
Navegació i Proves: Naveguem a la pàgina web i realitzem les proves necessàries.

Emulació de Geolocalització

Per emular la geolocalització, podem establir la latitud i longitud desitjades en el context del navegador.

Exemple de Codi: Emulant Geolocalització a Barcelona

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    geolocation: { latitude: 41.3851, longitude: 2.1734 }, // Coordenades de Barcelona
    permissions: ['geolocation'],
  });

  const page = await context.newPage();
  await page.goto('https://example.com');

  // Realitzem accions de prova aquí

  await browser.close();
})();

Explicació del Codi

Configuració de Geolocalització: Establim les coordenades de latitud i longitud per emular la ubicació.
Permisos de Geolocalització: Assegurem que el navegador tingui permís per accedir a la geolocalització.

Exercici Pràctic

Objectiu: Emular un dispositiu Android i una ubicació a Nova York per provar una aplicació web.

Instruccions

Utilitza Playwright per emular un dispositiu Android.
Estableix la geolocalització a Nova York (latitud: 40.7128, longitud: -74.0060).
Navega a una pàgina web de la teva elecció i verifica que la configuració s'aplica correctament.

Solució

import { chromium, devices } from 'playwright';

(async () => {
  const androidDevice = devices['Pixel 5'];

  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...androidDevice,
    geolocation: { latitude: 40.7128, longitude: -74.0060 }, // Coordenades de Nova York
    permissions: ['geolocation'],
  });

  const page = await context.newPage();
  await page.goto('https://example.com');

  // Verifica la configuració aquí

  await browser.close();
})();

Conclusió

L'emulació de dispositius i geolocalització amb Playwright és una eina poderosa per assegurar que les aplicacions web funcionin correctament en diferents entorns. Aquestes tècniques permeten als desenvolupadors simular una àmplia gamma de condicions d'usuari, millorant així la qualitat i la cobertura de les proves. En el següent tema, explorarem com intercepció de xarxa i simulació poden millorar encara més les nostres proves.

Emulant Dispositius i Geolocalització

Conceptes Clau

Emulació de Dispositius

Exemple de Codi: Emulant un iPhone 11

Explicació del Codi

Emulació de Geolocalització

Exemple de Codi: Emulant Geolocalització a Barcelona

Explicació del Codi

Exercici Pràctic

Instruccions

Solució

Conclusió

Dramaturg amb TypeScript: De Principiant a Avançat

Mòdul 1: Introducció a Playwright i TypeScript

Mòdul 2: Començant amb Playwright

Mòdul 3: Fonaments de Playwright i TypeScript

Mòdul 4: Funcions Avançades de Playwright

Mòdul 5: Estratègies d'Automatització de Proves

Mòdul 6: Tècniques Avançades de TypeScript

Mòdul 7: Aplicacions Reals de Playwright

Mòdul 8: Conclusió del Curs i Propers Passos