De manual a automatizado: escribe tu primera prueba con Playwright

Pruebas de automatización con Playwright

Las pruebas de automatización 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.

Playwright 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 JavaScript con ejemplos de código.

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 VScode (es gratis y excelente para crear sus primeras pruebas)

 npm install playwright

Escribiendo nuestra primera prueba 🍾

Caso de prueba

1. Inicie google.com
2. Buscar dramaturgo
3. Marque Dramaturgo en el título después de la búsqueda
4. 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 () => { }); });

beforeAll sucede siempre una vez antes de todas las pruebas. Es bastante útil para configurar los requisitos de prueba antes de las pruebas reales. Por ejemplo, genere datos para pruebas a través de API o inicialice variables que usará en las pruebas.

afterAll tiene la misma idea que beforeAll.

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 beforeAll lanzamos Chrome y navegamos a google.com.

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 ⬆️

1. Encontramos entrada en una página y escribimos Dramaturgo allí. fill es un método que generalmente usará para ingresar el valor en la entrada que desea probar.

 await page.fill('id=input', 'Automation testing');

2. Simulamos presionando Enter mientras estamos dentro de esta entrada.

 await page.press('id=input', 'Enter');

3. 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();

4. Finalmente, usamos la función title para recuperar el título de la página de resultados de búsqueda.

 const title = await page.title();

5. 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 afterAll cerramos el navegador después de todas las pruebas

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 porAI Image Generator de HackerNoon a través del mensaje "un código de escritura de desarrollador".