Setup Guide

Follow these steps to start writing Playwright tests against the PlayQ Playground.

1. Create or clone a Playwright project

Run this command in your terminal. Choose TypeScript when prompted. This creates playwright.config.ts, a tests/ folder, and example files.

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

2. Configure baseURL in playwright.config.ts

Open playwright.config.ts and add the `baseURL` property inside `use`. This lets you use relative paths like page.goto('/login').

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

export default defineConfig({
  use: {
    baseURL: 'https://playqacademy.com/en/playground',
    // other options...
  },
});

3. First test template

Copy this test into tests/playground.spec.ts. Use getByRole, getByLabel, and getByText — Playwright's recommended locator strategies.

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. Run your tests

Ready! Run your tests against the Playground. Use --ui for the interactive timeline or --headed to see the browser in action.

# 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é