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.
Fundamentos
Automatización de pruebas con Playwright: Domina tests en múltiples navegadores
Instalación de Playwright en Visual Studio Code
Creación de tests automáticos con Playwright paso a paso
Ejecución de Test con Playwright en Visual Studio Code
Estructura de un test
Uso de Locators y Selectors en Playwright para Tests Efectivos
Selectores CSS efectivos para UI Testing
Validaciones con Assertions en Testing Automatizado
Reto #1
Técnicas básicas de testing con Selenium
Automatización de pruebas en tiendas online con Playwright
Debug de un test
Debugging de Tests con Playwright Inspector
Uso de DevTools y Selectores en Playwright
Depuración avanzada de APIs en la terminal con Playwright
Uso de Playwright Tracing para Debugging de Tests
Reto #2
Reparación de Tests en Playwright: Guía Práctica para Principiantes
Depuración de errores comunes en tests de Playwright
Playwright: Testeo de Inputs con Atributos y Valores
Recomendaciones finales
Automatización de Pruebas con Playwright: Guía Completa
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Creación de tests automáticos con Playwright paso a paso
3/17Recursos
¿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?
- Abrir la terminal de Visual Studio Code: Inicia abriendo la terminal en Visual Studio Code o cualquier otra terminal.
- Ejecutar el comando: Utiliza el comando
npx playwright codegenpara 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.ioen 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?
- 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.
- Pegar en tu archivo de prueba: Detén el proceso de generación de código con
Control-C. Abre tu archivo llamadoexample.spec.ts, elimina su contenido anterior y pega el nuevo código copiado. - Ejecutar el test: Guarda el archivo y ejecuta el comando
npx playwright testen 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:
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/todomvcpnpx 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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?