Escribir pruebas con Playwright
Automatizar flujos del navegador con Playwright
Escribir pruebas con Playwright es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Su primera prueba de Playwright
Una prueba de Playwright es una función asíncrona que recibe elementos auxiliares como page. Importe test y expect desde @playwright/test y describa un escenario de usuario.
import { test, expect } from '@playwright/test';
test('opens the home page', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveURL(/.*localhost/);
});El elemento auxiliar page
El objeto page representa una pestaña individual del navegador. Cada prueba obtiene un page nuevo y aislado en un contexto limpio, por lo que las pruebas nunca comparten cookies ni almacenamiento accidentalmente.
Navegar con goto
page.goto(url) carga una URL y espera a que la página esté lista. Al combinarlo con baseURL en la configuración, puede utilizar rutas relativas.
await page.goto('/login'); // resolves against baseURL
await page.goto('https://example.com'); // absolute also worksBuscar elementos con localizadores
Un localizador es una referencia diferida a un elemento que espera automáticamente. Prefiera localizadores semánticos como getByRole, getByLabel y getByText en lugar de selectores CSS frágiles.
const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');Escribir y hacer clic
Use fill para establecer los valores de entrada y click para pulsar botones. Playwright espera automáticamente a que los elementos sean visibles y estén habilitados antes de actuar.
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();La espera automática elimina las pausas inestables
A diferencia de las herramientas antiguas, Playwright espera automáticamente a que los elementos estén listos y a que las aserciones se cumplan. Casi nunca necesita tiempos de espera manuales, lo que hace que las pruebas sean estables.
// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();Agrupar pruebas con describe
Use test.describe para agrupar escenarios relacionados y compartir la preparación con beforeEach.
test.describe('Login flow', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/login');
});
test('shows the form', async ({ page }) => {
await expect(page.getByLabel('Email')).toBeVisible();
});
});Probar un recorrido de usuario completo
Encadene acciones para representar un flujo completo. Cada paso se lee como un guion del comportamiento del usuario.
test('user can log in and see dashboard', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page).toHaveURL(/.*dashboard/);
});Ejecutar las pruebas
Ejecute todas las especificaciones desde la CLI. Añada --headed para observar el navegador o --ui para abrir el ejecutor de pruebas interactivo de Playwright.
npx playwright test
npx playwright test --headed
npx playwright test --uiDepurar errores
Cuando se produce un error, Playwright puede capturar capturas de pantalla, vídeos y una traza que puede reproducir paso a paso. El visor de trazas muestra el DOM en cada acción, lo que facilita el diagnóstico de errores inestables.
npx playwright test --trace on
npx playwright show-trace trace.zipEl aislamiento de las pruebas es importante
Como cada prueba obtiene su propio contexto de navegador, no dependa del orden ni del estado compartido entre pruebas. Configure los datos que necesita cada prueba en su propio beforeEach o dentro de la propia prueba.
Comprobación rápida
¿Por qué debe evitar waitForTimeout?
Resumen
Una prueba de Playwright utiliza el elemento auxiliar page: goto para navegar, localizadores semánticos (getByRole, getByLabel) para encontrar elementos y fill/click para interactuar. La espera automática elimina las pausas inestables. Agrupe con describe, ejecute con npx playwright test y depure con trazas.
Preguntas frecuentes
¿La lección «Escribir pruebas con Playwright» es gratis?
Sí — el texto completo de «Escribir pruebas con Playwright» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Escribir pruebas con Playwright»?
Automatizar flujos del navegador con Playwright Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Escribir pruebas con Playwright»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a las pruebas E2E
- Escribir pruebas con Playwright
- Selectores y aserciones
- Integración con CI