← Volver al listado de tecnologías

Capítulo 3: Primeros Tests

Por: Siempre Listo
playwrighttestingprimeros-pasos

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

  1. Crea el archivo tests/titulo.spec.ts
  2. Escribe un test que navegue a https://playwright.dev
  3. Verifica que el título contiene “Playwright”
  4. 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