Instalación y Configuración

Configuraremos un proyecto de Playwright desde cero con TypeScript y las mejores prácticas.

Instalación

# Crear proyecto nuevo
npm init playwright@latest

# O agregar a proyecto existente
npm install -D @playwright/test
npx playwright install

Estructura del Proyecto

proyecto/
├── tests/
│   ├── example.spec.ts
│   └── helpers/
├── playwright.config.ts
├── package.json
└── tsconfig.json

Configuración Base

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
  ],
});

Comandos Esenciales

Ejercicio Práctico

Objetivo

Crear un proyecto de Playwright configurado correctamente.

Pasos

1. Crea un directorio nuevo para el proyecto
2. Ejecuta npm init playwright@latest
3. Selecciona TypeScript como lenguaje
4. Ejecuta el test de ejemplo: npx playwright test
5. Abre el reporte: npx playwright show-report

mkdir mi-proyecto-playwright
cd mi-proyecto-playwright
npm init playwright@latest
# Selecciona: TypeScript, tests folder, GitHub Actions: No
npx playwright test
npx playwright show-report

Criterios de Éxito

• Proyecto creado con TypeScript
• Tests de ejemplo ejecutados
• Reporte HTML generado

Navegación

• ← Anterior: Introducción
• Índice del Tutorial
• Siguiente: Primeros Tests →