Las pruebas de rendimiento son esenciales para garantizar que las aplicaciones web funcionen de manera eficiente bajo diferentes condiciones de carga. En esta sección, aprenderás cómo utilizar Playwright para realizar pruebas de rendimiento, identificar cuellos de botella y optimizar el rendimiento de tus aplicaciones.
Conceptos Clave de las Pruebas de Rendimiento
Antes de sumergirnos en Playwright, es importante entender algunos conceptos básicos:
- Tiempo de Carga de la Página: El tiempo que tarda una página en estar completamente cargada y lista para interactuar.
- Tiempo de Respuesta del Servidor: El tiempo que tarda el servidor en responder a una solicitud.
- Rendimiento del Cliente: Cómo se comporta la aplicación en el navegador del usuario, incluyendo la ejecución de scripts y la representación de la interfaz de usuario.
- Cuellos de Botella: Partes del sistema que limitan el rendimiento general.
Configuración de Pruebas de Rendimiento con Playwright
Instalación de Herramientas Necesarias
Para realizar pruebas de rendimiento, asegúrate de tener Playwright instalado. Si aún no lo has hecho, sigue estos pasos:
Creación de un Script de Prueba de Rendimiento
A continuación, crearemos un script básico para medir el tiempo de carga de una página web.
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
// Inicia el cronómetro
const start = Date.now();
// Navega a la página deseada
await page.goto('https://ejemplo.com');
// Detiene el cronómetro
const end = Date.now();
// Calcula el tiempo de carga
const loadTime = end - start;
console.log(`Tiempo de carga: ${loadTime} ms`);
await browser.close();
})();Explicación del Código
- Importación de Chromium: Utilizamos el navegador Chromium para nuestras pruebas.
- Lanzamiento del Navegador: Iniciamos una instancia del navegador.
- Medición del Tiempo: Usamos
Date.now()para medir el tiempo antes y después de cargar la página. - Cálculo del Tiempo de Carga: Restamos el tiempo de inicio del tiempo de finalización para obtener el tiempo de carga total.
Análisis de Resultados
Una vez que hayas ejecutado el script, analiza los resultados:
- Comparación de Tiempos: Ejecuta el script varias veces para obtener un promedio del tiempo de carga.
- Identificación de Cuellos de Botella: Si el tiempo de carga es alto, investiga qué recursos están tardando más en cargarse.
Consejos para Optimizar el Rendimiento
- Minimiza el Tamaño de los Recursos: Comprime imágenes y archivos CSS/JS.
- Usa Carga Diferida (Lazy Loading): Carga recursos solo cuando sean necesarios.
- Optimiza el Código del Lado del Cliente: Reduce el uso de scripts pesados y optimiza el DOM.
Ejercicio Práctico
Objetivo: Crear un script que mida el tiempo de carga de varias páginas y compare los resultados.
Instrucciones
- Modifica el script anterior para incluir un array de URLs.
- Itera sobre cada URL, midiendo y registrando el tiempo de carga.
- Calcula el promedio de tiempo de carga para todas las páginas.
Solución
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
const urls = ['https://ejemplo1.com', 'https://ejemplo2.com', 'https://ejemplo3.com'];
let totalLoadTime = 0;
for (const url of urls) {
const start = Date.now();
await page.goto(url);
const end = Date.now();
const loadTime = end - start;
console.log(`Tiempo de carga para ${url}: ${loadTime} ms`);
totalLoadTime += loadTime;
}
const averageLoadTime = totalLoadTime / urls.length;
console.log(`Tiempo de carga promedio: ${averageLoadTime} ms`);
await browser.close();
})();Conclusión
En esta sección, aprendiste a utilizar Playwright para realizar pruebas de rendimiento básicas. Medir el tiempo de carga de las páginas es un primer paso crucial para identificar áreas de mejora en el rendimiento de tu aplicación. En el siguiente módulo, exploraremos cómo aplicar estas técnicas en un contexto de pruebas más amplio y cómo integrar Playwright en un flujo de trabajo de pruebas automatizadas.
Playwright con TypeScript: De Principiante a Avanzado
Módulo 1: Introducción a Playwright y TypeScript
- ¿Qué es Playwright?
- Configuración de tu Entorno de Desarrollo
- Introducción a TypeScript
- Sintaxis Básica de TypeScript
Módulo 2: Comenzando con Playwright
- Instalando Playwright
- Creando tu Primer Script de Playwright
- Entendiendo los Conceptos Básicos de Playwright
- Ejecutando Pruebas de Playwright
Módulo 3: Fundamentos de Playwright y TypeScript
- Escribiendo Pruebas en TypeScript
- Usando Interfaces y Tipos de TypeScript
- Depurando Pruebas de Playwright
- Manejando Código Asíncrono
Módulo 4: Funciones Avanzadas de Playwright
- Trabajando con Selectores
- Manejando Múltiples Páginas y Marcos
- Intercepción de Red y Simulación
- Emulación de Dispositivos y Geolocalización
Módulo 5: Estrategias de Automatización de Pruebas
- Organización de Pruebas y Suites de Pruebas
- Uso de Fixtures y Hooks
- Ejecución Paralela de Pruebas
- Integración Continua con Playwright
Módulo 6: Técnicas Avanzadas de TypeScript
- Genéricos en TypeScript
- Tipos Avanzados de TypeScript
- Decoradores de TypeScript
- Mejores Prácticas de TypeScript y Playwright
Módulo 7: Aplicaciones Reales de Playwright
- Pruebas de Extremo a Extremo con Playwright
- Pruebas Visuales con Playwright
- Pruebas de Rendimiento con Playwright
- Estudio de Caso: Implementación de Playwright en un Proyecto