No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de tests automáticos con Playwright paso a paso

3/17
Recursos

¿Cómo puedo crear mi primer test sin escribir código?

Hoy en día notarás que la automatización de pruebas es crucial en el desarrollo de software profesional. Pero no te preocupes; incluso si no sabes programar, es posible crear tests de forma efectiva. ¿Cómo se hace? Usaremos la terminal de Visual Studio Code para lograrlo, y no temas: no es necesario escribir una sola línea de código.

¿Cuál es el primer paso para realizar un test?

  1. Abrir la terminal de Visual Studio Code: Inicia abriendo la terminal en Visual Studio Code o cualquier otra terminal.
  2. Ejecutar el comando: Utiliza el comando npx playwright codegen para empezar. Este comando generará un par de ventanas, cruciales para nuestro propósito.

¿Qué ventanas se abren con este comando?

El comando npx playwright codegen genera dos ventanas importantes:

  • Playwright Inspector: Esta ventana comienza con un código base que indica que ya estás listo para grabar tus pruebas.
  • Navegador en modo incógnito: En este caso, se abre una versión de Chromium donde puedes navegar por el sitio web en el que deseas realizar tu test.

¿Cómo navegar e interactuar para grabar un test?

Vamos a poner manos a la obra:

  • Escribe una URL: Digita por ejemplo codepen.io en el navegador. CodePen es un gran lugar para obtener inspiración del código de otros desarrolladores.
  • Interactúa con la página: A medida que navegas y haces clic en la página, Playwright graba cada movimiento. Por ejemplo, al hacer clic en "Search Pens", se genera automáticamente el correspondiente código de prueba en el inspector.

¿Cómo copiar y ejecutar tu primer test?

  1. Copiar el código generado: Una vez que tu interacción ha sido grabada, utiliza el botón de copiar al lado de 'Record' en el inspector para obtener el código generado.
  2. Pegar en tu archivo de prueba: Detén el proceso de generación de código con Control-C. Abre tu archivo llamado example.spec.ts, elimina su contenido anterior y pega el nuevo código copiado.
  3. Ejecutar el test: Guarda el archivo y ejecuta el comando npx playwright test en la terminal. Al hacerlo, verás cómo el test se ejecuta en el navegador de Chromium y comprobarás que ha pasado exitosamente.

¿Qué beneficios adicionales ofrece Playwright?

Playwright permite flexibilidad con lenguajes de código, lo que significa que:

  • Si no estás familiarizado con TypeScript, puedes utilizar JavaScript.
  • Puedes convertir tus tests a Python con un solo clic si vienes de ese ecosistema.
  • Aunque no sepas .NET, Playwright facilita el inicio de pruebas en este lenguaje.

Crear y ejecutar tu primer test es así de sencillo. ¡Felicitaciones! Has dado un paso importante en el camino de la automatización de pruebas. En futuras clases, abordaremos cómo ejecutar tests de maneras diferentes. ¡Anímate a seguir aprendiendo!

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

1° Felicitar a la profesora Lupe por que se toma el tiempo para hablar y explicar de una forma muy claro. Me encanta su pausa al hablar
2° Playwright que nota. Llevo muchos dias batallando con un proyecto que tiene Test con Enzyme, Testing Library. y existen unos componentes que se vuelven muy dificiles de probar. Y que esta herramienta te ayude a escribir los test realmente te resulve muchos problemas al momento de desarrollar.

Generación de Pruebas

📌 Referencia
Test Generator | Playwright

.
Con Playwright, es posible generar pruebas de manera interactiva (siguiendo, en alma, a Selenium). Con ello, podemos agilizar, y de manera sencilla, la creación de pruebas según el lenguaje de nuestra elección.
.

✨ Concepto clave
Playwright, está condicionada su configuración ya sea con TypeScript o JavaScript.
Las pruebas, pueden ser generadas según el lenguaje de nuestra elección disponible.

.
Para disponer de esta herramienta, ejecutamos el binario de Playwright mediante playwright codegen [url] .
.

📌 Referencia
Test Generator | Playwright

.
Por ejemplo, utilizando el sitio de pruebas de Playwright podemos evaluar nuestro ejercicio al ejecutar el binario.
.

  • pnpx playwright codegen demo.playwright.dev/todomvc
  • pnpx playwright codegen example.cypress.io

.

Un cordial saludo. tengo dos preguntas 1. se puede configurar para que el chrome que se apertura al ejecutar npx playwright codegen no sea en el modo incognito (ya que en ese modo no carga las extensiones) 2. Playwright permite grabar las acciones del navegador? (ejemplo darle click a algunas de nuestras extensiones) Quedo atento a sus comentarios
Alguien sabe por qué no me genera los asserts? solo puedo ver los localizadores
```js import { test, expect, chromium } from '@playwright/test'; test('test', async ({ page }) => { // Lanzar el navegador en modo no headless const browser = await chromium.launch({ headless: false }); // Esto abre una ventana de navegador visible const pagee = await browser.newPage(); // Crear una nueva página await pagee.goto('https://co.pinterest.com/'); // Verificar que el logo de Pinterest esté visible await expect(pagee.getByRole('link', { name: 'Pinterest logo' })).toBeVisible(); // Esperar explícitamente que el enlace 'Explorar' esté visible e interactuable const explorarLink = pagee.locator('//*[@id="__PWS_ROOT__"]/div/div/div[1]/div[1]/div[1]/div/div[1]/div[2]/a/div/div/span'); await expect(explorarLink).toBeVisible({ timeout: 20000 }); // Espera hasta 20 segundos await explorarLink.click(); // Realiza el clic en el enlace 'Explorar' // Verificar que el cuadro de búsqueda esté visible await expect(pagee.locator('[data-test-id="search-box-input"]')).toBeVisible(); // Interactuar con el cuadro de búsqueda await pagee.locator('[data-test-id="search-box-input"]').click(); await pagee.locator('[data-test-id="search-box-input"]').fill('gatos'); await pagee.locator('[data-test-id="search-box-input"]').press('Enter'); // Verificar que el valor de búsqueda esté correctamente ingresado await expect(pagee.locator('[data-test-id="search-box-input"]')).toHaveValue('gatos'); }); ```
```js import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://www.kia.com.co/'); await page.getByRole('button', { name: 'Nuestros Modelos' }).click(); await page.getByRole('link', { name: 'All New K3 Cross' }).click(); await page.getByLabel('Azul').click(); }); ```import { test, expect } from '@playwright/test'; test('test', async ({ page }) => {  await page.goto('https://www.kia.com.co/');  await page.getByRole('button', { name: 'Nuestros Modelos' }).click();  await page.getByRole('link', { name: 'All New K3 Cross' }).click();  await page.getByLabel('Azul').click();});

Genial!

Descubrir esta herramienta tan potente de mano de una buena guía siempre será satisfactorio.

Playwright es una biblioteca Node. js para automatizar Chromium, Firefox y WebKit con una sola API. Playwright está diseñado para habilitar la automatización web entre exploradores que es perenne, capaz, confiable y rápida.

Simplemente maravilloso

Saludos amiga Lupe, muy buen cursito para hacer nuestros test.

para que aparezcan los expect y assert debes observar en la parte superios un pequeño banner con 5 iconos , los cuales se explican en la seccion Recording a test de : <https://playwright.dev/docs/codegen-intro>
los assert y expect no salen automaticamente , deben agregarle manualmente, no se porque en el video le aparecen