← Volver al listado de tecnologías
Capítulo 3: Primeros Tests
Primeros Tests
Aprenderás a escribir tests básicos y entender la estructura de un archivo de test.
Anatomía de un Test
import { test, expect } from '@playwright/test';
test('descripción del test', async ({ page }) => {
await page.goto('https://ejemplo.com');
await expect(page).toHaveTitle(/Ejemplo/);
});
Estructura Básica
import { test, expect } from '@playwright/test';
test.describe('Grupo de tests', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('test 1', async ({ page }) => {
// código del test
});
test('test 2', async ({ page }) => {
// código del test
});
});
Ejemplo: Test de Login
import { test, expect } from '@playwright/test';
test('login exitoso', async ({ page }) => {
await page.goto('/login');
await page.fill('[name="email"]', '[email protected]');
await page.fill('[name="password"]', 'password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('/dashboard');
await expect(page.locator('h1')).toContainText('Bienvenido');
});
Modos de Ejecución
# Ejecutar todos los tests
npx playwright test
# Ejecutar archivo específico
npx playwright test login.spec.ts
# Ejecutar test por nombre
npx playwright test -g "login exitoso"
# Modo debug
npx playwright test --debug
# Modo UI
npx playwright test --ui
Ejercicio Práctico
Objetivo
Crear un test que verifique el título de una página web.
Pasos
- Crea el archivo
tests/titulo.spec.ts - Escribe un test que navegue a
https://playwright.dev - Verifica que el título contiene “Playwright”
- Ejecuta el test y verifica que pasa
Ver solución
// tests/titulo.spec.ts
import { test, expect } from '@playwright/test';
test('página de Playwright tiene título correcto', async ({ page }) => {
await page.goto('https://playwright.dev');
await expect(page).toHaveTitle(/Playwright/);
});
Criterios de Éxito
- Test creado correctamente
- Test ejecutado sin errores
- Assertion verificada