TestSprite 3.0: cómo testear tu aplicación web en producción con IA

Hoy en día casi todo el mundo está creando aplicaciones web utilizando inteligencia artificial. Pero crear la app es solo la mitad del trabajo: cuando hablas de un proyecto serio —uno que realmente has desplegado y del que dependes— necesitas comprobar de forma continua que las funcionalidades sigan funcionando como esperas. Cobros, autenticación, roles de usuario… todas esas piezas tienen que estar siempre activas y comportándose correctamente.

En este artículo te muestro cómo funciona TestSprite en su versión 3.0, una herramienta que permite revisar aplicaciones en producción usando una IA que se encarga de todo el proceso de pruebas. Básicamente, una inteligencia artificial entra en tu web, hace clic por aquí y por allá, intenta testear cada funcionalidad y al final te entrega reportes detallados. Es como ejecutar un test moderno, solo que apoyado por IA.

Lo mejor es que puedes probar TestSprite gratuitamente, sin tarjeta de crédito. Por eso, en lugar de quedarnos en la teoría, vamos a construir un proyecto completo desde cero hasta el despliegue, y luego le pasaremos tests automáticos con TestSprite.

Qué vamos a construir

El proyecto de ejemplo es una aplicación de reserva y pedido de platos de restaurante. Estas son las características principales:

• Aplicación web full stack con Next.js en el frontend y MongoDB como base de datos (vía MongoDB Atlas).
• Autenticación mediante login, con diferenciación de roles entre cliente y cocinero.
• El cliente puede explorar el menú, seleccionar platos, indicar una dirección y completar el pedido pagando.
• PayPal como pasarela de pago (puedes cambiarlo luego por cualquier otro proveedor).
• Un dashboard tipo kanban para el cocinero, donde puede mover los pedidos entre estados: en preparación, listo y entregado.
• Actualizaciones en tiempo real mediante WebSockets, con un servidor Node separado del frontend.

Paso 1: planificar el proyecto con el agente

Empezamos creando una carpeta en el escritorio (en este caso la llamé plato) y la arrastramos dentro de Cursor. A partir de ahí abrimos un agente y escribimos la descripción del proyecto.

Un detalle muy importante: antes de pedirle que escriba código, cambia el agente al modo plan. Si le pides todo de golpe, simplemente empezará a escribir código sin estructura. Como este proyecto tiene varias fases, conviene analizar primero el plan que propone.

Durante la planificación surgió una decisión clave sobre el tiempo real. El agente preguntó cómo implementarlo: ¿una plataforma externa, consultar datos cada pocos segundos, o WebSockets? Lo ideal es WebSockets con un servidor Node separado, así que se lo indicamos. Esto significa que desplegaremos frontend y backend por separado: Next.js solo como front, y un backend de Node aparte.

Consejo: revisar la planificación antes de construir evita reescrituras y vueltas innecesarias. Aunque muchos prefieren el vibe coding de "que lo haga ya", leer el plan ahorra mucho tiempo. En este caso ajustamos el plan para centralizar toda la API y los WebSockets en un único backend de Node, en lugar de dejar las API routes dentro de Next.

El stack final quedó así: Next.js en el navegador haciendo peticiones a una API backend en Express (Node), los sockets en ese mismo backend, y conexiones externas a MongoDB Atlas y PayPal. Con eso, le damos a build y el agente comienza a generar todo el proyecto (este proceso tomó alrededor de 10 minutos).

Tip para mejorar la UI: si quieres que el frontend que genera la IA luzca más profesional y consistente, puedes apoyarte en skills y plugins de diseño. El skill de frontend-design de Anthropic aporta criterios de diseño visual, y el plugin interface-design ayuda a mantener decisiones de diseño coherentes (espaciado, colores, profundidad) entre sesiones de Claude Code.

Paso 2: configurar MongoDB Atlas

Una vez generado el código, faltan algunas variables de entorno para que la app funcione. Si no sabes cuáles necesitas, puedes pedírselo directamente al agente: "dame la lista de variables de entorno que debo darte para que funcione".

Para la base de datos usamos MongoDB Atlas, que ofrece cuentas gratuitas:

1. Regístrate con Google o GitHub y dale a Get Started.
2. Crea una organización (ponle el nombre que quieras) y selecciona MongoDB Atlas como producto.
3. Crea un proyecto (lo llamé plato) y dentro de él genera un clúster (la base de datos).
4. Elige la opción gratuita (Free). Si no te deja crear el deployment directamente, entra en Avanzado, selecciona Free de nuevo y dale a Create Cluster.
5. Importante: no marques "Preload sample dataset". La configuración de seguridad automática puedes dejarla o desmarcarla, según prefieras.

Para conectarte, ve a Get Connection String. Aquí puedes permitir tu IP actual o añadir 0.0.0.0/0 para permitir cualquier conexión (útil en desarrollo; en producción conviene restringirlo a IPs específicas). Luego crea un usuario y contraseña con Create Database User, elige el método de conexión Driver y copia la URL.

Finalmente, le pasas esa URL al agente: "Esta es la URL de MongoDB y mi contraseña es [tu contraseña]". Cursor actualizará automáticamente la variable de entorno correspondiente. Mantén estas credenciales seguras y cámbialas o elimínalas cuando termines las pruebas.

Alternativa: si prefieres una base de datos SQL en lugar de MongoDB, Supabase (PostgreSQL) también tiene un plan gratuito y un CLI para desarrollo local. Puedes seguir su guía de getting started con la CLI y pedirle al agente que adapte el proyecto a ese stack.

Paso 3: configurar las credenciales de PayPal

Con PayPal el proceso es similar:

1. Entra en developer.paypal.com e inicia sesión con tu cuenta.
2. En el entorno Sandbox, ve a Apps & Credentials.
3. Crea una aplicación (la llamé plato), elige Merchant y créala.
4. Obtendrás un Client ID y un Secret. Cópialos y pásaselos al agente: "Este es el Client ID de PayPal… y este es el Secret…" para que actualice el entorno.

Crear una cuenta de prueba (sandbox) para los pagos

Para probar pagos necesitas un usuario de prueba. En tu cuenta de developer de PayPal, ve a Testing Tools → Sandbox Accounts y crea una cuenta Personal (por ejemplo, de Estados Unidos). Eso te dará un correo y una contraseña de prueba que usarás en el checkout de PayPal cuando aparezca el sandbox.

Paso 4: ejecutar y probar localmente

Ahora le decimos al agente: "ejecuta el proyecto". El frontend arranca en el puerto 3000. Al entrar, la aplicación nos da unas credenciales de prueba.

Probamos el flujo completo como cliente: exploramos el menú, añadimos platos al carrito, continuamos al checkout, colocamos una dirección y le damos a confirmar y pagar. Se lanza la ventana de PayPal (verás sandbox en la URL), iniciamos sesión con la cuenta de prueba y completamos el pago.

Luego salimos y entramos como cocinero: ahí aparece el pedido con todos sus datos, y podemos moverlo entre las columnas del kanban. Para comprobar el tiempo real, abrimos otra ventana del navegador: al mover una tarjeta, se actualiza instantáneamente en la otra. Ese es justamente el motivo por el que pedimos un backend separado.

Los datos que vamos generando se guardan en MongoDB Atlas. Si vamos a Collections, veremos el clúster con las colecciones de platos, órdenes y usuarios, todo funcionando.

Paso 5: desplegar en Railway

Para el despliegue uso Railway, porque tiene un CLI y un skill que permiten al propio agente desplegar la aplicación de forma casi automática. A diferencia de otras plataformas, es mucho más sencillo y cómodo.

Si te registras por primera vez, obtienes créditos gratuitos para desplegar. El proceso:

1. Instala el CLI de Railway (disponible para Windows, Linux y Mac) con el comando que aparece en su documentación. Ábrelo en una terminal de Cursor.
2. Ejecuta railway login, autoriza el acceso en el navegador, y tu consola quedará conectada a tu cuenta.
3. Instala el skill de Railway para que la IA sepa qué comandos puede ejecutar. Recomiendo usar el comando npx skill add, porque funciona en cualquier agente (Cursor, VS Code, Windsurf, Trae, Kiro, Claude Code, Codex, etc.). Instálalo a nivel de proyecto.

Esto crea una carpeta con el skill use railway. Desde Cursor escribes /use railway, presionas Tab para autocompletar y le dices: "despliega este proyecto en Railway". El agente subirá todo el código y generará los archivos de configuración.

Dentro del proyecto en Railway tendrás los servicios de backend y web desplegados (la base de datos no hace falta desplegarla porque está en MongoDB Atlas). En las variables del backend verás la conexión con MongoDB Atlas, y la web tendrá su propia URL pública lista para usar.

Recomendación: en Railway, selecciona tu proyecto y usa Connect Repo para conectarlo con GitHub. Así tendrás el código de tu proyecto en un solo lugar y los despliegues se actualizarán automáticamente.

Paso 6: testear en producción con TestSprite 3.0

Con el proyecto ya desplegado, podríamos probar manualmente todas las características… o dejar que TestSprite lo haga por nosotros. La gran ventaja: como el proyecto ya está en producción, la IA puede entrar como un usuario real, navegar por el sitio y probar las funcionalidades. Solo tenemos que decirle qué debería funcionar.

Puedes crear una cuenta gratuita en TestSprite sin necesidad de tarjeta. Una vez dentro, dale a Create Test. Hay dos formas de usarlo:

• MCP: para probar localmente en tu propia máquina.
• Live Web App: para probar una aplicación ya desplegada en producción, pasándole las credenciales.

Usaremos la opción Live Web App.

Crear el PRD

TestSprite te pide cargar un PRD (Product Requirements Document): un archivo que resume de qué trata el proyecto, cómo debe funcionar, cuáles son las características principales y cómo debería lanzar errores cuando algo no va según lo esperado.

Puedes generarlo fácilmente con el agente: "crea un PRD y guárdalo en el root" (la raíz del proyecto). Cursor analizará el proyecto y generará el archivo con un resumen del proyecto, el problema que resuelve, los objetivos y demás. Aunque es opcional, es muy recomendable, porque le sirve a TestSprite para crear mejores tests. Sube ese archivo en la configuración.

Configurar los tests

TestSprite analiza la aplicación y organiza las características en flujos. Por ejemplo, detecta el flujo de autenticación con roles: debería abrirse el registro, ingresar un nombre, enviar el formulario y acceder a la aplicación; y cuando se colocan credenciales erróneas, debería lanzar errores. Lo mismo con el menú, el carrito y la compra, las órdenes, los pagos y el tiempo real del board.

Puedes añadir características nuevas con el botón Add Feature. Por ejemplo, añadí una sección de onboarding para mostrar a los usuarios nuevos. (Este test fallará a propósito porque el código aún no existe, lo cual es útil: la idea es que la prueba lo detecte y luego actualicemos el código.)

Después, configuras:

• Qué testear: API o frontend. Elegimos frontend para que navegue por el sitio.
• La URL: la del servicio web que nos da Railway.
• Contexto adicional: qué páginas priorizar o saltar, en texto simple.
• Una cuenta para acceder: usuario y contraseña de prueba (revísalos bien para no introducir errores).

TestSprite empezará a escanear las páginas, igual que haríamos nosotros: entrar al sitio, colocar credenciales, intentar registrarse y ver si funciona. Tras la exploración, dale a Continue Test y comenzará el testing automático.

Revisar los resultados

Obtendrás un listado de todos los tests con su prioridad, nombre y descripción (que también puedes editar o ampliar con instrucciones extra). Al darle a Generar, la IA ejecuta cada prueba que normalmente tendrías que hacer tú como usuario: el pago, el flujo de autenticación, recordar contraseña… todo automatizado.

En los resultados, la gran mayoría de los tests pasaron. De cada test obtienes no solo el resultado, sino el paso a paso de cómo se ejecutó, e incluso un video que muestra exactamente lo que hizo la IA: hacer clic en un input, pasar al siguiente, completar el login y comprobar, por ejemplo, que el acceso basado en roles funciona (un cliente puede entrar pero no abrir el historial de órdenes de otro usuario).

Puedes interrumpir o entrar en cualquier sección del test. Si quieres cambiar una credencial, das clic, la modificas y vuelves a ejecutar.

Lo que más interesa son los tests que fallan. Por ejemplo, uno detectó que un visitante no puede llegar a la página del menú porque lo redirige directamente al dashboard de cocina. Para corregirlo:

1. Entra en el test fallido y dale a Copy Prompt.
2. Pega ese prompt en el chat de Cursor (puedes usar el del PRD) y dale Enter.
3. Cursor revisará el código, identificará dónde falla y lo corregirá.
4. Vuelve a ejecutar TestSprite para confirmar que los tests pasan.

Secciones adicionales de TestSprite

• AI Actions: una galería con cada uno de los tests que hizo la IA, con su video dedicado.
• Datos de exploración: un resumen de las partes de la aplicación que navegó (pagos, órdenes, etc.).
• Autenticación: donde puedes actualizar la URL o las credenciales si cambiaste de dominio o de usuario.
• Integration Test: el resumen de todos los tests.
• Use Case Flow: el mapa con todos los tests creados.

El flujo completo: mejorar, desplegar, testear

Una vez Cursor termina las correcciones, puedes encadenar tareas: decirle que despliegue en Railway (use railway) y, en cola, que vuelva a hacer el testing con TestSprite. El despliegue se actualizará automáticamente.

Cuando vuelvas a entrar a la web verás los cambios (en mi caso, apareció el onboarding que había pedido). Para volver a testear, solo entras en Rerun All y le das a Run.

Y básicamente ese es el proceso: un ciclo en el que vas mejorando el sitio, desplegándolo y testeándolo continuamente. Esto lo puedes aplicar como un test de postproducción: cuando el sitio ya está funcionando y quieres que la IA compruebe que todo sigue en orden.

Conclusión

Como ves, usar TestSprite 3.0 es relativamente simple y no interrumpe tu flujo de desarrollo. En la versión Live no añade archivos a tu proyecto: todo lo hace en la nube, así que es muy fácil incorporar testing adicional sin estorbar tu trabajo.

Si quieres aprender a usarlo en tus propios proyectos, puedes empezar a probar TestSprite gratis.

¿Qué otras cosas te gustaría probar con esta herramienta? Déjamelo en los comentarios. Si quieres conocer más, te dejo mis enlaces sociales y mi web fazt.dev, donde puedes reservar asesorías personalizadas sobre cualquier tema. ¡Nos vemos en el próximo video!