Introducción: En esta segunda parte explico cómo optimicé mis pruebas de la API SSR de Next.js para que Playwright pueda ejecutarse en paralelo usando Mock Service Worker MSW y un servidor puente dinámico. El objetivo es acelerar las pruebas y permitir ejecutar varias instancias de MSW simultáneas, ajustando la cantidad de servidores según la capacidad del equipo.
Resumen de cambios realizados: Primero adapté mock-server.ts para que pueda lanzar dinamicamente varios servidores MSW. Ahora la cantidad de servidores se define mediante la variable de entorno MOCK_SERVER_COUNT en .env en lugar de estar fija. Segundo ajusté playwright.config.ts para habilitar pruebas fullyParallel y leer workers desde .env usando process.env.MOCK_SERVER_COUNT, y en los tests uso test.info().workerIndex para calcular el puerto que corresponde a cada worker. Tercero cambié server.ts handler.ts y page.tsx para aceptar puertos dinamicos en las llamadas API de modo que varias instancias puedan correr sin conflicto. Antes el puerto de la API estaba fijo en 3001. Finalmente ahora puedes aumentar el numero de servidores hasta lo que tu PC aguante simplemente cambiando MOCK_SERVER_COUNT.
Ideas clave para principiantes: Server Side Rendering SSR significa que Next.js renderiza la pagina en el servidor primero y envia HTML al navegador. MSW intercepta las llamadas fetch en el entorno de pruebas y devuelve respuestas simuladas. Para ejecutar pruebas en paralelo es necesario que cada worker use su propio puerto de MSW y que las llamadas fetch apunten al puerto asignado.
Pasos para preparar el entorno: Instalar Next.js crear la aplicacion y copiar el componente de pagina que realiza fetch a la ruta api v2 pokemon. Instalar Playwright con npm init playwright@latest e instalar MSW con npm i msw --save-dev. Instalar tsx para facilitar la ejecucion de TypeScript en entorno de test y dotenv para leer variables de entorno. Crear un archivo .env con MOCK_SERVER_COUNT igual al numero de servidores que quieres levantar por ejemplo 6.
Funcionamiento del servidor puente: mock-server.ts arranca MSW en cada puerto solicitado y expone un endpoint POST api switch-pokemon para que los tests puedan pedir al servidor que cambie la respuesta mock a pikachu eevee error500 u otros pokemons. Cada instancia de MSW escucha en su propio puerto y el servidor puente reenvia solicitudes a MSW usando fetch interno para devolver la respuesta al navegador de prueba.
Ajustes en los tests Playwright: En los tests utilizo una funcion helper setMockPokemon que calcula el puerto sumando 3001 mas test.info().workerIndex de manera que cada worker usa un puerto distinto. La funcion llama a POST https://localhost:PUERTO/api/switch-pokemon para seleccionar el mock y luego navega a /?mockPort=PUERTO para que la pagina SSR haga fetch al puerto correcto. De este modo los tests pueden ejecutarse fullyParallel sin interferencias entre ellos.
Configuracion recomendada: En playwright.config.ts activar fullyParallel true y establecer workers parseInt(process.env.MOCK_SERVER_COUNT || 4) para empatar el numero de workers con el numero de servidores MSW. Comentar proyectos de firefox y webkit si quieres centrarte en chromium y maximizar paralelismo. En el terminal 1 ejecutar npx tsx mock-server.ts que arrancara multiple instancias segun MOCK_SERVER_COUNT. En el terminal 2 ejecutar npm run dev para levantar Next.js. En el terminal 3 ejecutar npx playwright test para lanzar las pruebas en paralelo.
Beneficios: Ejecucion de pruebas significativamente mas rapida y escalable hasta el limite del hardware. Separar MSW por puertos evita estados globales compartidos y reduce flakiness. Este patron es util para proyectos con APIs SSR donde necesitas testear distintas respuestas de forma aislada.
Limitaciones y buenas practicas: Asegurate de no exceder los recursos del sistema al aumentar MOCK_SERVER_COUNT. Limpia handlers y cierra procesos MSW al terminar para evitar puertos ocupados. Mantener handlers simples y predecibles facilita la depuracion. Aprender a usar server.use de MSW y a coordinarlo con Playwright es clave para pruebas robustas.
Sobre Q2BSTUDIO: En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones a medida integrando inteligencia artificial y ciberseguridad. Ofrecemos servicios cloud aws y azure y desarrollamos proyectos de inteligencia de negocio y dashboards con power bi. Si buscas crear una aplicacion personalizada consulta nuestros servicios de software a medida y descubre como podemos ayudarte a transformar ideas en producto.
Si tu proyecto requiere integración de IA para empresas o agentes IA conversacionales visita nuestra pagina de Inteligencia Artificial donde detallamos servicios de consultoria desarrollo e implantacion de modelos y soluciones adaptadas a procesos de negocio.
Palabras clave: aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws azure servicios inteligencia de negocio ia para empresas agentes IA power bi. Con esta aproximacion puedes acelerar tus pipelines de pruebas y a la vez mantener control sobre mocks y respuestas simuladas.
Conclusión: Ejecutar Playwright en paralelo con MSW para pruebas SSR de Next.js es viable si separamos instancias de MSW por puerto y coordinamos workers con test.info().workerIndex. Este metodo reduce tiempos y mejora aislamiento de pruebas. En Q2BSTUDIO podemos ayudar a integrar estas practicas en tus proyectos de software a medida e infraestructura cloud para garantizar calidad y escalabilidad.