Pruebas de automatización con Playwright están ganando popularidad todos los días, y hay muchas herramientas disponibles para ayudarlo a dominarlas. A veces lo más difícil es elegir el correcto. Las pruebas de automatización es una gran herramienta que está ganando popularidad debido a su flexibilidad y facilidad de uso, especialmente con JavaScript. Dramaturgo considerado como uno de los más rápidos para ejecutar pruebas de interfaz de usuario. En este artículo, discutiremos el proceso de escribir su primera prueba con Playwright usando con ejemplos de código. Playwright JavaScript Instalación de dramaturgo Antes de comenzar a escribir nuestro primer caso de prueba, debe instalar Playwright. Puede hacer esto ejecutando el siguiente comando en su terminal dentro de IDE. También recomendaría instalar (es gratis y excelente para crear sus primeras pruebas) VScode npm install playwright Escribiendo nuestra primera prueba 🍾 Caso de prueba Inicie google.com Buscar dramaturgo Marque Dramaturgo en el título después de la búsqueda Cerrar navegador Primero comencemos a escribir la arquitectura de nuestra prueba. const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); }); sucede siempre una vez antes de todas las pruebas. Es bastante útil para configurar los requisitos de prueba antes de las pruebas reales. beforeAll Por ejemplo, genere datos para pruebas a través de API o inicialice variables que usará en las pruebas. tiene la misma idea que beforeAll. afterAll Ocurre después de todas las pruebas solo una vez. Puede usar para cerrar un navegador o realizar algunas acciones para limpiar los datos después de ejecutar las pruebas. Necesitamos estas variables para trabajar con un navegador y una página más adelante. let browser; let page; Este es un cuerpo de prueba, donde escribiremos nuestra prueba real. it('should return result search in google ', async () => { }); Agreguemos abrir un navegador dentro beforeAll beforeAll(async () => { browser = await chromium.launch(); // here you can use any other browser if you want page = await browser.newPage(); await page.goto('https://www.google.com'); }); Dentro de lanzamos Chrome y navegamos a google.com. beforeAll Agreguemos un cuerpo de prueba it('should return search results', async () => { await page.fill('id=input', 'Automation testing'); // you an search any other text here await page.press('id=input', 'Enter'); await page.waitForNavigation(); const title = await page.title(); expect(title).toContain('Automation testing'); }); Nuestro resultado ⬆️ Encontramos entrada en una página y escribimos Dramaturgo allí. es un método que generalmente usará para ingresar el valor en la entrada que desea probar. fill await page.fill('id=input', 'Automation testing'); Simulamos presionando Enter mientras estamos dentro de esta entrada. await page.press('id=input', 'Enter'); Esperamos a que cargue la página. Por lo tanto, no continuaremos probando antes de que la página esté completamente cargada. await page.waitForNavigation(); Finalmente, usamos la función para recuperar el título de la página de resultados de búsqueda. title const title = await page.title(); Usando la afirmación, verificamos si el título contiene Dramaturgo (u otra cadena que estábamos buscando para confirmar que redirigimos a la página correcta) expect(title).toContain('Automation testing'); Agreguemos cerrar el navegador dentro afterAll afterAll(async () => { await browser.close(); }); Dentro de cerramos el navegador después de todas las pruebas afterAll Ejecutando tu prueba Esto ejecutará toda su prueba npx playwright test Si desea ejecutar un archivo de prueba específico npx playwright test your-file.js Cuando ejecuta sus pruebas, Playwright también genera informes HTML, que son muy útiles para la depuración. Divide su prueba en pasos, y si obtuvo una prueba fallida, siempre puede ver dónde ocurrió la falla y depurarla más rápido. Ejecute esto para abrir su informe npx playwright show-report La imagen principal de este artículo fue generada por de HackerNoon a través del mensaje "un código de escritura de desarrollador". AI Image Generator
