Cuando pensamos en las pruebas de rendimiento, generalmente imaginamos grandes herramientas con grandes números: JMeter, Gatling, Locust o Google Lighthouse, martillando servidores de backend con usuarios virtuales o analizando puntajes de auditoría estática. Estas herramientas son geniales, sin duda. Pero aquí está el giro: ¿qué pasaría si pudiera evaluar el rendimiento de su aplicación? Como un usuario actual lo experimentaría?
Ahí es donde interviene el dramaturgo, y no, ya no es solo para pruebas de extremo a extremo.
¿Es el dramaturgo para las pruebas de rendimiento?
Sí, eso es correcto. Probablemente ya conozca el dramaturgo como el marco de automatización del navegador elegante de Microsoft para probar la UIS. Se ejecuta en Chromium, Firefox y WebKit, sin cabeza o encabezado, y hace que las pruebas funcionales entre los navegadores sean muy fáciles.
Pero aquí está la parte genial: el dramaturgo también puede actuar como su ventana al mundo del rendimiento frontal. Ejecuta navegadores reales, ejecuta flujos reales de usuarios y le permite medir los tiempos de carga, la capacidad de respuesta y el uso de recursos.
Vamos a sumergirnos en cómo puedes convertir a dramaturgo en un laboratorio de rendimiento liviano para tu aplicación.
¿Playwright para pruebas de rendimiento?
El rendimiento se trata que tan rápido y Que suave Su aplicación se siente, no solo lo rápido que responde su servidor. El dramaturgo te ayuda a capturar esa “sensación”, gracias a algunas superpotencias clave:
Navegadores reales, experiencia actual
El dramaturgo no lo finge. Gira las instancias reales del navegador, carga su sitio, ejecuta scripts, obtiene recursos e interactúa con la interfaz de usuario, al igual que sus usuarios.
Eso significa que puedes:
- Capturar la carga de la página y los tiempos de recursos
- Mida cuán receptiva es su interfaz de usuario con los clics y la entrada
- Simule las malas condiciones de pink o dispositivo para ver cómo funciona su aplicación en la naturaleza
Cobertura de navegador cruzado
¿Probar solo Chrome? Eso no es suficiente. El dramaturgo le permite comparar el rendimiento entre Chromium, Firefox y WebKit, que puede descubrir la desaceleración específica del navegador o los problemas de representación.
Reducción de la pink y la CPU
¿Quiere saber cómo funciona su aplicación en una conexión 3G o en un dispositivo de rango medio? Soporte de dramaturgo:
- Emulación de pink (por ejemplo, lento 3G, fuera de línea)
- Aceleración de la CPU (en cromo) para simular procesadores más lentos
Fusionar las pruebas funcionales + de rendimiento
Esta es la salsa secreta. Puede extender sus pruebas funcionales existentes para incluir métricas de rendimiento, sin mantener un conjunto de pruebas separado o aprender una nueva herramienta.
Antes de que nos emocionemos demasiado, seamos claros sobre lo que dramaturgo no hacer:
Prueba de carga a escala – Ejecuta un navegador por prueba. No simulará a 1,000 usuarios que martilen su servidor.
Métricas de again -end -No hay CPU del lado del servidor, memoria o información DB.
Paneles elegantes – Deberá rodar sus propios informes o exportar a herramientas externas.
Dicho esto, el dramaturgo no está tratando de reemplazar a JMeter o Lighthouse. Es una herramienta complementaria, y brilla cuando se usa correctamente.
Medir tiempos de carga de la página
Aquí hay una forma rápida de calcular cuánto tiempo lleva su página para cargar completamente:
tsCopyEditimport { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch();
const web page = await browser.newPage();
await web page.goto('
const timing = JSON.parse(await web page.consider(() => JSON.stringify(window.efficiency.timing)));
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`Web page load time: ${loadTime} ms`);
await browser.shut();
})();
O usar el moderno PerformanceNavigationTiming API:
tsCopyEditconst navTiming = await web page.consider(() => {
const [entry] = efficiency.getEntriesByType('navigation');
return {
domContentLoaded: entry.domContentLoadedEventEnd,
loadEvent: entry.loadEventEnd,
};
});
Medir los tiempos de carga de recursos
Seguimiento de imágenes, scripts o estilos de carga lenta:
tsCopyEditconst assets = await web page.consider(() =>
efficiency.getEntriesByType('useful resource').map(r => ({
title: r.title,
sort: r.initiatorType,
length: r.length,
dimension: r.transferSize,
}))
);
console.desk(assets);
Esto le ayuda a identificar activos hinchados arrastrando su UX.
Medir las interacciones de usuario
¿Quiere saber qué tan rápido responde la interfaz de usuario después de hacer clic en un botón?
tsCopyEditconst begin = Date.now();
await web page.click on('#submitBtn');
await web page.waitForSelector('.consequence');
const length = Date.now() - begin;
console.log(`UI response time: ${length} ms`);
Excelente para medir solicitudes de AJAX o transiciones de spa.
Simular condiciones del mundo actual
Acelera la pink como es 2010:
tsCopyEditconst context = await browser.newContext();
const shopper = await context.newCDPSession(web page);
await shopper.ship('Community.emulateNetworkConditions', {
offline: false,
downloadThroughput: 400 * 1024 / 8,
uploadThroughput: 400 * 1024 / 8,
latency: 400,
});
Reduzca la velocidad de la CPU para el realismo:
tsCopyEditawait shopper.ship('Emulation.setCPUThrottlingRate', { fee: 4 }); // 4x slower
Capturas de pantalla y rastreo
Registre la retroalimentación visible mientras se prueba:
tsCopyEditawait web page.screenshot({ path: 'earlier than.png' });
await context.tracing.begin({ screenshots: true });
await web page.goto('
await context.tracing.cease({ path: 'hint.zip' });
Analíelo con el espectáculo Hint Viewer.
Conéctelo a su tubería CI/CD
Aquí le mostramos cómo hornear las verificaciones de rendimiento en las acciones de GitHub:
yamlCopyEditjobs:
performance_test:
runs-on: ubuntu-latest
steps:
- makes use of: actions/checkout@v3
- makes use of: actions/setup-node@v3
with:
node-version: '18'
- run: npm set up
- run: node performance-test.js
Incluso puede establecer umbrales y fallas en las compilaciones si su aplicación comienza a disminuir.
Las mejores prácticas para pruebas de rendimiento con dramaturgo
- Rodar modo sin cabeza Para acelerar las pruebas
- Crimson de acelerador y CPU para reflejar usuarios del mundo actual
- Medir varias veces y resultados promedio
- Almacenar métricas y monitorear las tendencias con el tiempo
- Integrarse en su Tubería CI/CD
- Úselo con Lighthouse o K6 para cobertura completa
Conclusión
El dramaturgo no es una bala plateada: no reemplazará sus pruebas de estrés de backend o paneles de rendimiento. Pero hace Déle una forma poderosa y versatile de medir cómo los usuarios reales experimentan su aplicación, y eso es invaluable.
Ya sea que sea un ingeniero de management de calidad que busque nivelar sus pruebas o un desarrollador que se preocupe por el rendimiento tanto como las características, agregar dramaturgo a su equipment de herramientas lo lleva un paso más cerca de ofrecer experiencias de usuario rápidas, receptivas y deliciosas.
