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`. Esto te permite usar rutas relativas en page.goto('/login').

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

export default defineConfig({
  use: {
    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.

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

test('login with valid credentials', async ({ page }) => {
  await page.goto('/login');

  // Find elements by their accessible label
  await page.getByLabel('Email').fill('student@playq.test');
  await page.getByLabel('Password').fill('Playwright123!');

  // Find the submit button by its role and accessible name
  await page.getByRole('button', { name: 'Sign In' }).click();

  // Assert the URL changed to the dashboard
  await expect(page).toHaveURL(/\/login\/dashboard/);

  // Assert the welcome message is visible
  await expect(page.getByText('Welcome back')).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é