En esta gu\u00eda seguiremos los pasos mencionados en la documentaci\u00f3n oficial de Playwright que podr\u00e1s encontrar aqu\u00ed<\/a>. Dicho esto, asumir\u00e9 que tendr\u00e1s instalado Visual Studio Code<\/a>, la extensi\u00f3n de Playwright<\/a> para VS Code y Nodejs<\/a> en tu sistema local. Una vez que tengas todo preparado puedes abrir una terminal en VS Code y comenzaremos el proceso de instalaci\u00f3n.<\/p>\n\n\n\n <\/p>\n\n\n\n Creamos y navegamos al directorio:<\/p>\n\n\n\n Instalamos la versi\u00f3n m\u00e1s reciente de Playwright y sus dependencias:<\/p>\n\n\n\n El proceso de instalaci\u00f3n ser\u00e1 guiado. Para esta gu\u00eda, dejaremos las selecciones por defecto que elegir\u00e1 Playwright durante el proceso (TypeScript <\/strong>y .\/tests<\/strong> como la carpeta por defecto para nuestros casos de prueba.<\/p>\n\n\n\n Utilizaremos los casos de demostraci\u00f3n para verificar que la instalaci\u00f3n funciona correctamente:<\/p>\n\n\n\n La versi\u00f3n 1.33<\/strong> de Playwright a\u00f1adi\u00f3 un m\u00f3dulo llamado UI Mode<\/strong>. Esta funci\u00f3n mejora en gran medida la experiencia del usuario a la hora de ejecutar casos que necesitan debugging, watch mode u otras funcionalidades avanzadas. Para echar un vistazo simplemente ejecuta:<\/p>\n\n\n\n Una vez finalizada la ejecuci\u00f3n de tus casos podr\u00e1s abrir el reporte generado para comenzar a familiarizarte con el Framework. Por defecto, Playwright va a generar un reporte en formato .HTML<\/strong> aunque tambi\u00e9n es posible convertirlo de forma nativa a .JSON<\/strong> o .XML (JUnit)<\/strong>. Puedes configurar los reportes para que sean generados en m\u00faltiples formatos, aunque te recomiendo que tambi\u00e9n le eches una mirada a la reporter\u00eda a trav\u00e9s de integraciones de terceros como Allure<\/a>, Monocart <\/a>o ReportPortal<\/a>.<\/p>\n\n\n\n Familiarizarse con el Framework es lo m\u00e1s importante en este punto, por lo tanto, lo primero que pod\u00e9s hacer es grabar casos utilizando el Code Generator<\/strong> que trae integrado Playwright. A diferencia de otros grabadores, este se encargar\u00e1 de analizar el contenido del sitio web y de proporcionarnos los mejores localizadores para nuestro sitio. Para eso, abriremos la extensi\u00f3n de Playwright desde la barra lateral de VS Code y luego seleccionaremos el bot\u00f3n “Record new”<\/strong> para comenzar a grabar.<\/p>\n\n\n Una vez tengamos los pasos de nuestro caso de prueba grabado, bastar\u00e1 con cerrar el navegador web que hayamos seleccionado para la grabaci\u00f3n y procedemos a ejecutar el caso de prueba para analizar los resultados. <\/p>\n\n\n\n A continuaci\u00f3n podr\u00e1s ver el caso de prueba que grab\u00e9 para esta gu\u00eda:<\/p>\n\n\n\n Por lo tanto, mi c\u00f3digo se ve de la siguiente manera:<\/p>\n\n\n\nmkdir playwright-training<\/code>cd playwright-training<\/code><\/pre>\n\n\n\nnpm init playwright@latest<\/code><\/pre>\n\n\n\nnpx playwright test --headed<\/code><\/pre>\n\n\n\nnpx playwright test --ui<\/code><\/pre>\n\n\n\n\u00bfC\u00f3mo empiezo a automatizar?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/lahumada.com\/wp-content\/uploads\/2023\/05\/2023-05-13-03_37_01.png\")
<\/figure><\/div>\n\n\nAnalizando nuestro primer caso de prueba<\/h2>\n\n\n\n
\n
import { test, expect } from '@playwright\/test';\n\ntest('test', async ({ page }) => {\n await page.goto('https:\/\/lahumada.com\/');\n await page.getByPlaceholder('Nombre completo').click();\n await page.getByPlaceholder('Nombre completo').fill('Luca Ahumada');\n await page.getByPlaceholder('Correo electr\u00f3nico').click();\n await page.getByPlaceholder('Correo electr\u00f3nico').fill('prueba@correodeprueba.com');\n await page.getByPlaceholder('Escribe tu mensaje').click();\n await page.getByPlaceholder('Escribe tu mensaje').fill('Este es un mensaje de prueba.');\n await page.getByRole('button', { name: 'ENVIAR MENSAJE' }).click();\n await page.getByText('Gracias por dejarme tu mensaje!').click();\n});<\/code><\/pre>\n\n\n\n