Volver al Playground

Guía de Configuración

Sigue estos pasos para empezar a escribir tests de Playwright contra el PlayQ Playground.

1. Crea o clona un proyecto Playwright

Ejecuta este comando en tu terminal. Elige TypeScript cuando pregunte. Esto crea playwright.config.ts, una carpeta tests/ y archivos de ejemplo.

npm init playwright@latest
# or in existing project:
npm install -D @playwright/test
npx playwright install

2. Configura baseURL en playwright.config.ts

Abre playwright.config.ts y añade la propiedad `baseURL` dentro de `use`. La barra final (`/`) es imprescindible: permite que las rutas relativas sin barra inicial — page.goto('login') — resuelvan dentro del Playground. Con page.goto('/login') (barra inicial) la URL se resuelve desde la raíz del dominio y el test fallaría con 404.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // La barra final es importante
    baseURL: 'https://playqacademy.com/es/playground/',
    // other options...
  },
});

3. Plantilla de tu primer test

Copia este test en tests/playground.spec.ts. Usa getByRole, getByLabel y getByText — las estrategias de localización recomendadas por Playwright. Ojo: los textos del ejercicio dependen del idioma de la página; esta plantilla apunta a la versión en español (/es/).

import { test, expect } from '@playwright/test';

test('login con credenciales válidas', async ({ page }) => {
  await page.goto('login');

  // Localiza los campos por su etiqueta accesible
  await page.getByLabel('Email').fill('student@playq.test');
  await page.getByLabel('Password').fill('Playwright123!');

  // Localiza el botón por su rol y nombre accesible
  // (acotado al formulario: el navbar tiene otro botón "Iniciar sesión")
  await page.locator('form').getByRole('button', { name: 'Iniciar Sesión' }).click();

  // El login muestra el mensaje de éxito en la misma página (no navega)
  await expect(page.getByRole('heading', { name: '¡Inicio de sesión exitoso!' })).toBeVisible();
  await expect(page.getByText('Bienvenido de nuevo')).toBeVisible();
});

4. Ejecuta tus tests

¡Listo! Ejecuta tus tests contra el Playground. Usa --ui para ver el timeline interactivo o --headed para ver el navegador en acción.

# Ejecutar todos los tests
npx playwright test

# Ejecutar un archivo específico
npx playwright test tests/playground.spec.ts

# Modo UI (recomendado para desarrollo)
npx playwright test --ui

# Modo headed (ver el navegador)
npx playwright test --headed

# Generar reporte HTML
npx playwright show-report
Invítame un café