He estado probando y escribiendo código durante diez años, y durante los últimos cuatro años he estado probando informes en el comité del programa de la conferencia de Heisenbug. Hoy hablaré sobre las pruebas de extremo a extremo, la accesibilidad entre navegadores y la emoción de usar Playwright versión 0.10.0.De extremo a extremo
¿Por qué necesitamos pruebas de extremo a extremo? Controlan el navegador y simulan acciones del usuario. Por ejemplo, he descrito scripts personalizados y quiero que se prueben con cada versión del producto. Comprobar todos los scripts para todas las versiones de forma manual es más costoso y más largo que el automático.Hay diferentes herramientas: selenio, titiritero, transportador, ciprés y otros. Hace dos semanas, se lanzó una nueva herramienta: Playwright, en la que trabajó Andrey Lushnikov, el desarrollador de Puppeteer. Esta biblioteca resuelve completamente el problema de escribir pruebas de navegador cruzado.
El tweet original de Andrey Lushnikov con el anuncio.Titiritero vs. Dramaturgo
Usé Puppeteer en varios proyectos, y en general no estuvo mal. Además, recordé que a fines del año pasado, Puppeteer tuvo un lanzamiento importante de la versión 2.0 . Pero cuando miré en su repositorio , vi una imagen interesante:
parece que no soy daltónico, pero sí demasiado rojo.Me preguntaba por qué Playwright es mejor: una nueva herramienta que se basa perfectamente en GitHub en una organización de Microsoft.¿Por qué es bueno Titiritero? Lanza un navegador sin cabeza y utiliza el protocolo DevTools , por lo que las pruebas son más rápidas y más estables que Selenium, y puede escribirlas en JavaScript agradable .¿Qué tiene de bueno Dramaturgo? En primer lugar, tiene todos los bollos de Titiritero. Y en segundo lugar, le permite escribir pruebas de navegador cruzado: puede seleccionar cualquier navegador en el código de prueba : WebKit , Chromium y Firefox.Un momento de autoeducación: motores de navegador ¿Qué se necesita para escribir una prueba de navegador cruzado en Playwright? Necesitaba npm , Habr experimental, inglés escolar para leer documentación, una taza de café y 15 minutos y medio.Instalar dramaturgo . Escribimos en la consola:npm i playwrightCaptura de pantalla Habr. Copie el ejemplo de la documentación:const playwright = require('playwright');
(async () => {
for (const browserType of ['chromium', 'firefox', 'webkit']) {
const browser = await playwright[browserType].launch();
const context = await browser.newContext();
const page = await context.newPage('http://habr.com/');
await page.screenshot({ path: `screenshots/example-${browserType}.png` });
await browser.close();
}
})();
El código en Titiritero sería casi el mismo:const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://habr.com');
await page.screenshot({path: 'screenshots/example.png'});
await browser.close();
})();
La prueba del primer ejemplo se ejecutará en tres navegadores. Es cierto que no está claro en qué versiones particulares y cuáles están generalmente disponibles. La documentación dice que Playwright descarga automáticamente el controlador para el navegador. También puede especificar un navegador específico: const browser = await chromium.launch();
const context = await browser.newContext();
Para seleccionar la versión del navegador en Puppeteer, debe especificar la ruta al controlador. No existe tal posibilidad en PlayWright. Según tengo entendido, siempre se utilizará la última versión del motor, que ya se está discutiendo en GitHub.Por cierto, si te gustan las pruebas de captura de pantalla, ten cuidado. Dramaturgo y titiritero toman diferentes capturas de pantalla en Chromium:
por alguna razón, las fuentes son de diferentes tamaños. Empecé un boleto en GitHub.Playwright admite WebKit, lo que significa pruebas en navegadores móviles. Pero todos los teléfonos inteligentes y tabletas tienen resoluciones diferentes: ¿cómo elegir los que necesita cuando realiza pruebas? Encontré 76 dispositivos en el código deviceDescriptors.ts , incluidos los modelos popularesBlackBerry y JioPhone 2. Desde útil: puede elegir iPhone 8 y iPhone 8 en modo horizontal. El código de prueba es casi el mismo que el de un navegador normal:const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];
(async () => {
const browser = await webkit.launch();
const context = await browser.newContext({
viewport: deviceType.viewport,
userAgent: deviceType.userAgent
});
const page = await context.newPage('http://habr.com');
await page.screenshot({ path: `example-${deviceType.name}.png`});
await browser.close();
})();
Una característica interesante de Playwright es la capacidad de cambiar la geolocalización, será útil al probar mapas. Al inicializar el contexto del navegador, debe especificar las coordenadas:const context = await browser.newContext({
viewport: iPhone11.viewport,
userAgent: iPhone11.userAgent,
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});
Este no es mi primer año en las pruebas y, a veces, me gusta ver cómo pasa la prueba. Titiritero tenía una opción headless: falseque lanzaba una ventana del navegador. Exactamente la misma opción es con Playwright:puppeteer.launch({headless: false});
playwright.launch({headless: false});
Dado que el código de prueba en ambas bibliotecas es asíncrono, no puede simplemente tomarlo. Hay un párrafo completo en la documentación del Titiritero , pero nada en la documentación del Dramaturgo. Además, no hay ejemplos de código en la documentación de Playwright, pero hay un ticket en GitHub. Parece una buena razón para participar en un proyecto de código abierto. Y los ejemplos de este artículo sobre Playwright y Jest los puse en mi repositorio .¿Es hora de moverse?
Parece que los desarrolladores de Playwright están listos para agregar rápidamente funciones y corregir errores. Por ejemplo, descargar archivos no funciona en este momento, pero los desarrolladores escriben que lo arreglarán y que no será peor que Puppeteer’s. Si desea transferir pruebas a Dramaturgo, prepárese para comenzar las entradas.Parece que el equipo de Dramaturgos quiere reunir lo mejor de esta biblioteca. En los tickets de GitHub, encontré varias ideas para mejorar la API, por ejemplo, agregar características como en Cypress .Playwright admite múltiples navegadores, y es más conveniente escribir pruebas de navegador cruzado con él. Es cierto que ahora tiene la versión 0.10.0, no mucha documentación, y SlackOverflow solo tiene seis preguntas. Te recomiendo que mires de cerca los lanzamientos de Playwright, pero no te apresures a usarlo aún en producción, ya que la API puede cambiar.Desarrollador dramaturgo en Heisenbug
Comparto la noticia: Andrei Lushnikov dará una charla sobre Dramaturgo en la conferencia Heisenbug 2020 Piter, que se realizará del 8 al 9 de abril en San Petersburgo. Hay muchas preguntas para él:- ¿Por qué la nueva biblioteca se llama Dramaturgo y de dónde viene el drama?
- cuándo aparecerán los ejemplos en la documentación y cuánto tiempo esperará para el lanzamiento de la versión 1.0
- ¿Cuál es la probabilidad de que las insignias en el repositorio de Puppeteer se vuelvan verdes?
UPD: Se acaba de publicar una entrevista con Andrei Lushnikov "Si los sitios web funcionan mejor, será perfecto" . En él, hablamos mucho sobre protocolos, motores de navegador e integraciones externas.Las entradas están en el sitio web de Heisenbug . Opiniones sobre dramaturgo y titiritero - escriba en los comentarios.
Y si lees la publicación hasta el final, pero por alguna razón no estás familiarizado con Puppeteer, mira el informe de Andrey de la última conferencia de Heisenbug, donde habló sobre Puppeteer durante 55 minutos.