En el último período, en el ecosistema frontend, ha surgido una nueva herramienta e2e y ha comenzado a hacerse famosa; su nombre es Dramaturgo. En esta breve serie, quiero dejarles información sobre esto y consejos sobre cómo empezar. ¿Qué es? Comencemos con lo que es Dramaturgo. Playwright es un marco de prueba para manejar las pruebas e2e. Con Playwright podemos escribir pruebas e2e y ejecutarlas en diferentes navegadores, como Chrome, Firefox y Webkit. Podemos ejecutar nuestras pruebas en muchas plataformas como Windows, Mac, Linux o CI, y podemos escribir pruebas en Typescript, Javascript, Java, Phyton o .Net. Si abres la oficial, te puedes encontrar con estas características: web Cualquier navegador Cualquier plataforma Una API Resistente Sin pruebas escamosas Sin compensaciones Sin límites Aislamiento completo Ejecución rápida Herramientas poderosas En mi opinión, la herramienta refleja todas estas características. aplicación tres en raya Quiero usar una aplicación TicTacToe creada con vite + reaccionar en esta serie. Y puedes encontrarlo . aquí Como puede ver, la aplicación es sencilla, pero con ella podemos comenzar a dar los primeros pasos con Playwright. Instalar Dramaturgo El primer paso para usar Playwright es instalarlo, eso es fácil. Abre tu terminal y escribe (yo uso npm pero si quieres usar yarn o pnpm lee la ). Ok, ahora la instalación te hace algunas preguntas: npm init playwright@latest documentación ¿Dónde poner sus pruebas de extremo a extremo? La opción por defecto es pero prefiero usar la carpeta . tests e2e ¿Agregar un flujo de trabajo de GitHub Actions? La opción predeterminada es ; en esta demostración, dejo esta opción en false por ahora. false ¿Instalar navegadores Playwright (se puede hacer manualmente a través de 'npx playwright install')? La opción predeterminada es , y usé este valor true y ahora tienes que esperar hasta que finalice la instalación. Cuando se complete la instalación... ¡felicidades, estará listo para ensuciarse las manos con Playwright! Primera vista La instalación creó en su repositorio 3 nuevos archivos: dramaturgo.config.ts e2e/ejemplo.spec.ts pruebas-ejemplos/demo-todo-app.spec.ts Comencemos con el último, el más fácil 😊 Este archivo contiene una lista de ejemplos de cómo puedes escribir pruebas con Playwright. Utiliza una aplicación creada por el equipo de dramaturgos (una aplicación simple para hacer) e ilustra cómo puede interactuar con su página. Continuando con el segundo. Este archivo es un ejemplo rápido de algunas pruebas en el sitio web del dramaturgo, pero está aquí solo como marcador de posición para sus pruebas. Y ahora, la primera, la más importante. Playwright usa el archivo para comprender su configuración. En su interior, puede encontrar configuraciones sobre la carpeta de prueba, el tiempo de espera utilizado por la función de expectativa, las configuraciones de los navegadores utilizados por Playwright para ejecutar las pruebas y más. playwright.config.ts Ejecute su primera prueba Es hora de ver a Playwright en acción, así que abre tu terminal nuevamente y ejecuta el siguiente comando . El resultado es algo como esto. npx playwright test Dramaturgo en este informe te muestra el resultado de su ejecución, y puedes comprobar si todo ha ido bien. El informe muestra el resultado para cada navegador indicado en la configuración, en este caso: Chromium, Firefox y Webkit. Escribe tu primera prueba Bien, genial, pero ahora es el momento de que escribas tu primera prueba con Playwright. Antes de hacer esto, debe configurar Playwright para poder ejecutar su aplicación antes de comenzar con las pruebas. Para hacer eso, debe abrir y agregar la siguiente configuración playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; , debe usar el mismo puerto expuesto por vite. NB verifique su puerto ejecutando el comando npm run dev Y ahora es el momento de su primera prueba. Abra el archivo y cámbiele el nombre a . Luego limpie todo en el archivo y deje solo la línea de importación . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts import { expect, test } from "@playwright/test"; Ahora agrega tu primera prueba test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); ok, veamos esta prueba juntos. En primer lugar, puede indicarle a Playwright que se trata de una prueba utilizando la función . Como en todo marco de prueba, el primer parámetro de la función de prueba es el nombre de la prueba. El segundo parámetro es la función para probar nuestra aplicación. Usando Playwright, esta función siempre es una función asíncrona porque sus pruebas en estos casos siempre son asíncronas. El primer comando en este ejemplo es un comando para decirle a Dramaturgo que navegue a la página de inicio de nuestra aplicación. Como puede ver, este comando ya es asíncrono. Ahora, si la prueba puede navegar a esta página, desea probar si el título de la página es "Tic Tac Toe". Sí, es elemental, pero un excelente ejemplo de cómo mover tu primer paso. test Ahora es el momento de verificar si la prueba se ejecuta en Playwright, pero antes de hacerlo, puede simplificar la interacción con Playwright agregando un nuevo script en el paquete.json, como se muestra aquí. .... "scripts": { ... "e2e": "playwright test" }, Ahora en su terminal, puede escribir y listo, su prueba se ha ido ✅ npm run e2e Al agregar otro script en su paquete.json, puede abrir el resultado del informe en su navegador .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" }, Y ahora, si ejecuta el comando en su navegador, puede ver el resultado de su primera prueba. npm run e2e:report Bien, creo que eso es todo por ahora. En esta publicación, aprendiste: Cómo instalar Dramaturgo Cómo ejecutar su prueba Cómo escribir tu primera prueba con Playwright En la próxima publicación, continuaremos nuestro viaje en el mundo de los dramaturgos, pero por ahora, ¡eso es todo! Nos vemos pronto, amigos. Adiós pd Puede encontrar el resultado de esta publicación en este enlace
