Configuración de VS Code para Playwright: Extensiones, Ajustes y Productividad

La extensión oficial de Playwright para VS Code añade un botón "Pick locator" que resuelve el locator correcto haciendo clic en un elemento en un navegador en ejecución, lo que elimina la mayor parte del tiempo que se pasa escribiendo selectores manualmente. También conecta el debugger para que puedas pausar en un breakpoint y escribir await page.title() o await page.locator('...').isVisible() directamente en la Debug Console sin volver a ejecutar el test. Este artículo cubre las cinco extensiones que vale la pena instalar, las configuraciones de VS Code que reducen la fricción, y los flujos de trabajo diarios de debugging y grabación de tests.

Extensiones esenciales

1. Playwright Test for VS Code (Oficial)

Esta es la única extensión no negociable. Añade:

• Barra lateral Test Explorer: ver todos tus tests organizados por archivo, ejecutarlos con un clic
• Ejecutar tests individuales: hacer clic en el botón de play junto a cualquier bloque test(...)
• Depurar tests: establecer breakpoints, recorrer el código paso a paso, inspeccionar el estado de page
• Grabar nuevos tests: lanzar Playwright Codegen desde dentro de VS Code
• Mostrar navegador: ejecutar tests con el navegador visible
• Pick locator: hacer clic en un elemento en el navegador, obtener el locator correcto de Playwright

Después de instalar, busca el ícono de Playwright en la barra lateral izquierda (parece una máscara de teatro). Tus tests deberían aparecer automáticamente si tienes un playwright.config.ts en la raíz de tu proyecto.

1. Abre el panel de Testing (Ctrl+Shift+P → "Show Testing")

2. Expande tus archivos de test

3. Haz clic en ▶ para ejecutar, o en el ícono de bug para depurar

2. ESLint

Resalta problemas de código mientras escribes. Para proyectos TypeScript/Playwright, configúralo con:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Crear .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Prettier

Da formato automático a tu código al guardar. Esencial para un estilo de código consistente. Instala:

npm install -D prettier

Crear .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

En la configuración de VS Code, habilita el formato al guardar:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. GitLens

Muestra quién modificó cada línea por última vez, historial completo de git, comparación de ramas. No es específico de Playwright pero es invaluable para cualquier proyecto de equipo. Especialmente útil al depurar: "¿quién cambió este test y por qué?".

5. Error Lens

Muestra los errores de TypeScript/ESLint inline en la línea donde ocurren, en lugar de solo en el panel de Problemas. Detecta errores más rápido.

Configuración de VS Code para proyectos Playwright

Abre Settings JSON (Ctrl+Shift+P → "Open User Settings JSON") y añade:

{
  // Formato al guardar
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // TypeScript
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // Auto-imports
  "typescript.suggest.autoImports": true,
  
  // Editor más limpio
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.rulers": [100],
  
  // Asociaciones de archivos
  "files.associations": {
    "*.spec.ts": "typescript"
  },
  
  // Terminal
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  
  // Explorador
  "explorer.confirmDelete": false
}

Flujos de trabajo específicos de Playwright en VS Code

Ejecutar tests desde el editor

Tienes tres formas de ejecutar un test:

1. Panel Test Explorer: lista completa de tests, ejecutar todos, ejecutar por archivo, ejecutar por tag

2. Botón de play verde: pasa el cursor sobre una línea test(, haz clic en el botón ▶

3. Terminal: npx playwright test (usa flags como --headed, --debug)

El Test Explorer es mejor para ejecutar la suite completa. El botón inline es mejor para ejecutar un test individual rápidamente.

Depurar un test fallido

1. Establece un breakpoint en la línea que está fallando (haz clic en el margen izquierdo)

2. En Test Explorer, haz clic derecho en el test → "Debug Test"

3. VS Code se pausa en tu breakpoint

4. En la Debug Console, puedes escribir comandos de Playwright: await page.title() para ver el título de la página actual, await page.locator('[data-testid="btn"]').isVisible() para verificar el estado del elemento, o page.url() para ver dónde está Playwright.

Esto es mucho más poderoso que añadir console.log y volver a ejecutar.

Usar Playwright Inspector desde VS Code

Haz clic derecho en un test → "Debug Test", o ejecuta PWDEBUG=1 npx playwright test en el terminal.

El Playwright Inspector se abre junto a tu navegador y te permite avanzar por las acciones una por una, ver en tiempo real qué resuelve un locator, y seleccionar nuevos locators haciendo clic en elementos.

Grabar un nuevo test

1. En la barra lateral de la extensión Playwright, haz clic en "Record new"

2. Se abre un navegador

3. Realiza las acciones que quieres automatizar

4. Haz clic en "Copy" para obtener el código generado

5. Pégalo en tu archivo de test, luego refina los selectores

Útil para obtener un punto de partida, pero siempre refina los selectores generados para usar atributos data-testid.

Estructura del proyecto en VS Code

Una estructura de proyecto Playwright limpia que VS Code maneja bien:

my-playwright-project/
├── tests/
│   ├── e2e/
│   │   ├── login.spec.ts
│   │   ├── checkout.spec.ts
│   ├── api/
│   │   ├── users-api.spec.ts
│   ├── fixtures/
│   │   ├── auth.fixture.ts
│   │   └── index.ts
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── .env

El explorador de VS Code colapsa las carpetas bien, así que esta estructura es fácil de navegar.

Atajos de teclado que vale conocer

| Atajo | Qué hace |

|-------|---------|

| Ctrl+Shift+P | Paleta de comandos (buscar cualquier comando) |

| Ctrl+P | Abrir archivo rápidamente |

| Ctrl+Shift+F | Buscar en todos los archivos |

| Ctrl+\ | Alternar terminal |

| F2 | Renombrar símbolo (renombrar una variable en todos lados) |

| F12 | Ir a la definición |

| Alt+F12 | Ver definición inline (sin navegar) |

| Ctrl+D | Seleccionar siguiente ocurrencia de la selección |

| Alt+Shift+F | Formatear documento |

| Ctrl+/ | Alternar comentario de línea |

Los más importantes para depuración en Playwright: F5 inicia la depuración, F10 avanza un paso, F11 entra en la función, F5 nuevamente continúa hasta el siguiente breakpoint.

Nunca commitees secretos. Crea .env para las variables de entorno locales:

BASE_URL=https://staging.yourapp.com
ADMIN_EMAIL=admin@test.com
ADMIN_PASSWORD=TestAdmin1
API_KEY=your-test-api-key

Añade a .gitignore:

.env
.env.local
.env.*.local

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

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

Instala dotenv: npm install -D dotenv

Cambiar a un terminal externo rompe el flujo. El terminal integrado (Ctrl+\) se mantiene en el mismo directorio.

Divide los paneles

Pones tu archivo de test a la izquierda y el page object a la derecha. View → Editor Layout → Two Columns.

Usa tareas para comandos comunes

Crea .vscode/tasks.json para ejecutar npx playwright test con un atajo.

Modo Zen para concentrarte

View → Appearance → Zen Mode oculta todo excepto el editor. Útil para escribir casos de prueba sin distracciones.