Back to Playground

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`. The trailing slash matters: it lets relative paths without a leading slash — page.goto('login') — resolve inside the Playground. With page.goto('/login') (leading slash) the URL resolves from the domain root and the test would fail with a 404.

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

export default defineConfig({
  use: {
    // La barra final es importante
    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. Note: the exercise texts depend on the page language; this template targets the English version (/en/).

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
  // (scoped to the form: the navbar has its own "Sign in" button)
  await page.locator('form').getByRole('button', { name: 'Sign In' }).click();

  // Login shows the success message on the same page (no navigation)
  await expect(page.getByRole('heading', { name: 'Login Successful!' })).toBeVisible();
  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é