Configuración de Playwright en SvelteKit
Instale y configure Playwright para un proyecto de SvelteKit con la integración oficial.
Configuración de Playwright en SvelteKit es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Qué es Playwright
Playwright es un framework moderno de tests end-to-end compatible con Chromium, Firefox y WebKit.
Instalación
El asistente create-svelte de SvelteKit puede añadir Playwright; de lo contrario, instálelo manualmente.
npm init playwright@latestConfiguración
El asistente crea un playwright.config.js con la configuración de los navegadores, el directorio de tests y un hook webServer para iniciar su aplicación.
Configuración de webServer
Playwright puede iniciar automáticamente npm run build && npm run preview antes de los tests.
webServer: { command: "npm run build && npm run preview", port: 4173 }Estructura de carpetas
Los tests se encuentran en tests/ o e2e/. Lo habitual es usar un archivo por funcionalidad.
Ejecutar tests
Use el script de npm para ejecutarlos.
npm run test:e2eModo UI
El modo UI de Playwright proporciona depuración con viaje en el tiempo.
npx playwright test --uiGenerar tests
El comando codegen graba las interacciones y escribe los tests por usted.
npx playwright codegen http://localhost:5173Multinavegador
Los tests se ejecutan en varios navegadores en paralelo para ofrecer una cobertura amplia.
Visor de trazas
Los tests fallidos generan trazas que puede ver con playwright show-trace para depurar rápidamente.
Integración con CI
Playwright se ejecuta en GitHub Actions, GitLab CI y otros entornos, con imágenes oficiales de contenedor.
Comprobación rápida
¿Qué hace webServer de Playwright?
Resumen
Configure Playwright con el asistente. Configure webServer para iniciar automáticamente su aplicación y ejecute los tests con npm run test:e2e.
Preguntas frecuentes
¿La lección «Configuración de Playwright en SvelteKit» es gratis?
Sí — el texto completo de «Configuración de Playwright en SvelteKit» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Configuración de Playwright en SvelteKit»?
Instale y configure Playwright para un proyecto de SvelteKit con la integración oficial. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Configuración de Playwright en SvelteKit»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Playwright en SvelteKit
- Escritura de pruebas de interacción de páginas
- Pruebas de formularios y navegación
- Integración con CI