Cómo generar código de prueba con Playwright

Hola,

Hoy aprenderás a generar el código para tus pruebas.

En primer lugar, debe ejecutar la aplicación, así que escriba su terminal npm run dev y tendrá su aplicación en funcionamiento en la dirección http://localhost:5173 .

Ahora tienes que ejecutar el generador de código de Playwright. Para hacer eso, debe abrir otra pestaña en su terminal y escribir npx playwright codegen . Este comando abre un nuevo navegador y el inspector de dramaturgos.

Ahora, el navegador muestra una pestaña vacía y el inspector de dramaturgos está en una nueva página, listo para escuchar lo que harás en el navegador. Si ingresa a la barra de direcciones del navegador y escribe http://localhost:5173, puede notar que algo ha cambiado en el Inspector de dramaturgos. El inspector anotó el cambio de página y agregó este paso al cuerpo de prueba.

Ahora, puede hacer clic en un cuadrado y simular un juego entre dos jugadores, puede notar que el inspector registra todos estos pasos y crea el cuerpo de la prueba para usted. El resultado de estas acciones es este

 test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

Como puede ver, el código generado es bueno pero no perfecto, así que use esta herramienta con la cabeza sobre los hombros y verifique el resultado cada vez para garantizar el valor de su prueba.

Ahora es el momento de copiar y pegar el código en nuestro archivo de prueba y mejorar su contenido.

Comencemos cambiando el nombre de la prueba de test a should win the player "X" y cambiando el valor goto de http://localhost:5173/ a / porque nuestra raíz base corresponde a la página de inicio.

Luego, refactorizar el primer clic probablemente sea un buen refactor para mejorar la prueba, por lo que debe cambiar la línea de await page.locator('._Square_pba4r_1').first().click(); para await page.locator("button:nth-child(1)").click(); y por último pero no menos importante, agregue la afirmación. En este caso, si el nombre de la prueba should win the player "X" la mejor afirmación es algo como esto

 const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

Entonces, el código intenta obtener el párrafo con el texto ganador y verifica si el valor contiene el valor X El resultado final es este

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Ahora, puede ejecutar la prueba y verificar el resultado, que debería ser verde.

Ok, creo que eso es todo de la generación de código.

En este artículo, aprendió cómo registrar sus pasos y convertirlos en código para sus pruebas. Por favor, como dije antes, use esta herramienta con responsabilidad y verifique el código generado cada vez.

Eso es todo, gente.

Hasta pronto 👋

pd puedes encontrar el resultado de este artículo aquí