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 y tendrá su aplicación en funcionamiento en la dirección . npm run dev 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 . Este comando abre un nuevo navegador y el inspector de dramaturgos. npx playwright codegen 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 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. http://localhost:5173, 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 a y cambiando el valor goto de a porque nuestra raíz base corresponde a la página de inicio. test should win the player "X" http://localhost:5173/ / Luego, refactorizar el primer clic probablemente sea un buen refactor para mejorar la prueba, por lo que debe cambiar la línea de para y por último pero no menos importante, agregue la afirmación. En este caso, si el nombre de la prueba la mejor afirmación es algo como esto await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); should win the player "X" 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 El resultado final es este X 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í
