Una introducción al marco de prueba de dramaturgos

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 web oficial, te puedes encontrar con estas características:

• 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 npm init playwright@latest (yo uso npm pero si quieres usar yarn o pnpm lee la documentación ). Ok, ahora la instalación te hace algunas preguntas:

1. ¿Dónde poner sus pruebas de extremo a extremo? La opción por defecto es tests pero prefiero usar la carpeta e2e .
2. ¿Agregar un flujo de trabajo de GitHub Actions? La opción predeterminada es false ; en esta demostración, dejo esta opción en false por ahora.
3. ¿Instalar navegadores Playwright (se puede hacer manualmente a través de 'npx playwright install')? La opción predeterminada es true , y usé este valor

4. 
   

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 playwright.config.ts 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.

Ejecute su primera prueba

Es hora de ver a Playwright en acción, así que abre tu terminal nuevamente y ejecuta el siguiente comando npx playwright test . El resultado es algo como esto.

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 playwright.config.ts y agregar la siguiente configuración

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

NB verifique su puerto ejecutando el comando npm run dev , debe usar el mismo puerto expuesto por vite.

Y ahora es el momento de su primera prueba. Abra el archivo e2e/example.spec.ts y cámbiele el nombre a e2e/tit-tac-toe.spec.ts . Luego limpie todo en el archivo y deje solo la línea de importación 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 test . 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.

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 npm run e2e y listo, su prueba se ha ido ✅

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 npm run e2e:report en su navegador, puede ver el resultado de su primera prueba.

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