El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, exploraremos cómo Playwright permite emular diferentes dispositivos y geolocalizaciones para probar aplicaciones web en condiciones variadas. Esta capacidad es crucial para asegurar que las aplicaciones funcionen correctamente en una amplia gama de dispositivos y ubicaciones geográficas.

Conceptos Clave

Emulación de Dispositivos: Simular diferentes dispositivos móviles y de escritorio para verificar cómo se comporta una aplicación en diferentes tamaños de pantalla y capacidades de hardware.
Geolocalización: Cambiar la ubicación geográfica desde la cual se accede a la aplicación para probar características basadas en la ubicación, como contenido localizado o servicios de geolocalización.

Emulación de Dispositivos

Playwright proporciona una forma sencilla de emular dispositivos mediante la configuración de un contexto de navegador con las características del dispositivo deseado.

Ejemplo de Emulación de Dispositivos

import { chromium, devices } from 'playwright';

(async () => {
  // Cargar el perfil del dispositivo
  const iPhone11 = devices['iPhone 11'];

  // Lanzar el navegador con el contexto del dispositivo
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...iPhone11,
  });

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

  // Realizar acciones en la página
  console.log(await page.title());

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

Explicación del Código

Importación de Dispositivos: Utilizamos devices de Playwright para acceder a perfiles predefinidos de dispositivos.
Configuración del Contexto: Creamos un nuevo contexto de navegador utilizando las configuraciones del dispositivo deseado (iPhone 11 en este caso).
Navegación y Pruebas: Abrimos una nueva página en el contexto del dispositivo emulado y realizamos acciones como navegar a una URL y obtener el título de la página.

Emulación de Geolocalización

La emulación de geolocalización permite simular la ubicación geográfica del usuario. Esto es útil para probar aplicaciones que dependen de la ubicación.

Ejemplo de Emulación de Geolocalización

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    geolocation: { longitude: 12.4924, latitude: 41.8902 }, // Coordenadas de Roma, Italia
    permissions: ['geolocation'],
  });

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

  // Realizar acciones en la página
  console.log('Geolocalización configurada a Roma, Italia');

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

Explicación del Código

Configuración de Geolocalización: Al crear un nuevo contexto de navegador, especificamos las coordenadas de geolocalización deseadas.
Permisos de Geolocalización: Aseguramos que el contexto tenga permiso para acceder a la geolocalización.
Pruebas Basadas en Ubicación: Navegamos a una página y realizamos pruebas que dependen de la ubicación configurada.

Ejercicios Prácticos

Ejercicio 1: Emular un Dispositivo Android

Emula un dispositivo Android utilizando Playwright.
Navega a una página web de tu elección.
Verifica que el userAgent del navegador corresponde al dispositivo emulado.

Solución

import { chromium, devices } from 'playwright';

(async () => {
  const pixel2 = devices['Pixel 2'];

  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...pixel2,
  });

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

  // Verificar el userAgent
  const userAgent = await page.evaluate(() => navigator.userAgent);
  console.log(userAgent);

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

Ejercicio 2: Simular Geolocalización en Nueva York

Configura la geolocalización para simular que estás en Nueva York.
Navega a una página que muestre la ubicación del usuario.
Verifica que la ubicación mostrada sea Nueva York.

Solución

import { chromium } from 'playwright';

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

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

  // Verificar la ubicación
  console.log('Geolocalización configurada a Nueva York, EE.UU.');

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

Conclusión

La emulación de dispositivos y geolocalización en Playwright es una herramienta poderosa para asegurar que las aplicaciones web funcionen correctamente en una variedad de entornos. Al dominar estas técnicas, puedes mejorar significativamente la cobertura de tus pruebas y la calidad de tus aplicaciones.

En el siguiente módulo, exploraremos estrategias de automatización de pruebas, incluyendo la organización de pruebas y la ejecución paralela.

Emulación de Dispositivos y Geolocalización

Conceptos Clave

Emulación de Dispositivos

Ejemplo de Emulación de Dispositivos

Explicación del Código

Emulación de Geolocalización

Ejemplo de Emulación de Geolocalización

Explicación del Código

Ejercicios Prácticos

Ejercicio 1: Emular un Dispositivo Android

Solución

Ejercicio 2: Simular Geolocalización en Nueva York

Solución

Conclusión

Playwright con TypeScript: De Principiante a Avanzado

Módulo 1: Introducción a Playwright y TypeScript

Módulo 2: Comenzando con Playwright

Módulo 3: Fundamentos de Playwright y TypeScript

Módulo 4: Funciones Avanzadas de Playwright

Módulo 5: Estrategias de Automatización de Pruebas

Módulo 6: Técnicas Avanzadas de TypeScript

Módulo 7: Aplicaciones Reales de Playwright

Módulo 8: Conclusión del Curso y Próximos Pasos