¿Qué es un sitio de pruebas? Aprende cómo crear uno

Imagina asistir a un musical de Broadway: ves una producción impecable, pero detrás del escenario, los actores y el equipo de producción han dedicado cientos de horas a audiciones, lecturas de guión, ensayos de vestuario y más. Todo lo que ves es el resultado de una preparación cuidada al mínimo detalle.

De manera similar, en el desarrollo web, un sitio de pruebas actúa como un “ensayo general” para tu sitio web real. En lugar de implementar actualizaciones directamente en un sitio web en vivo, los desarrolladores utilizan un sitio de pruebas para realizar pruebas y revisiones hasta que están listos para mostrar su trabajo a la audiencia.

Descubre más sobre los beneficios de usar un sitio de pruebas para tu tienda de comercio electrónico, incluyendo cómo crear un sitio de pruebas en Shopify.

¿Qué es un sitio de pruebas?

Un sitio de pruebas es un entorno privado de pruebas donde puedes revisar actualizaciones o rediseños sin modificar el sitio web actual. Simula una versión en vivo de un sitio para que los desarrolladores y las partes interesadas puedan navegar por él como lo haría un usuario si estuviera en línea.

Uno de los objetivos fundamentales de un entorno de preproducción es detectar fallos y realizar revisiones o correcciones. Generalmente, en el proceso de preproducción participan todas las partes interesadas, como los equipos de marketing o ejecutivos, para su evaluación. Una vez hayan revisado a fondo el sitio de prueba y se hayan estudiado sus comentarios, las actualizaciones se implementan en el entorno en vivo.

Una actualización crítica, como una nueva sección de imágenes de productos, podría perjudicar las conversiones si el sitio no funciona correctamente como resultado del cambio. Al simular la experiencia del usuario, desde hacer clic en la página del producto hasta agregar artículos al carrito, puedes descubrir y corregir errores sin que lleguen a afectar a los clientes.

Sitios de desarrollo vs. pruebas vs. publicación

El desarrollo web consta de 3 etapas principales: desarrollo, pruebas y publicación. Primero, se escribe el código en un sitio de desarrollo, luego se envía a un sitio de pruebas para evaluar la calidad (QA), y finalmente, se actualiza el sitio en vivo para todos los usuarios.

Sitio de desarrollo

El sitio de desarrollo es un entorno donde los desarrolladores escriben el código y dan vida a ideas. Generalmente, es un entorno local accesible solo para el equipo de desarrollo. 

Esta etapa implica agregar imágenes, texto, videos y código para funcionalidades personalizadas, como filtros de productos interactivos. Aunque se realizan algunas pruebas iniciales aquí, el entorno de desarrollo suele ser poco refinado.

Sitio de pruebas

Una vez completado el desarrollo, el código se publica en un nuevo sitio de pruebas. Este es el ensayo general, donde se solucionan todos los problemas como si estuvieras frente a una audiencia en vivo. Los sitios de están en línea, típicamente en un dominio de pruebas que utiliza una URL como test.tunombredelsitio.com.

Asegúrate de que tu sitio de pruebas no sea indexable, para que los motores de búsqueda no los muestren en los resultados. Puedes ocultar tu sitio rápidamente añadiendo algunas líneas de código. Considera proteger con contraseña el sitio de pruebas si contiene información que no estás listo para que los clientes vean, como una venta próxima.

Una vez que el sitio de pruebas está en línea, las partes interesadas lo revisan y proponen cambios. A continuación, el código regresa al sitio de desarrollo, donde los desarrolladores abordan cualquier inquietud y envían los cambios al sitio de pruebas nuevamente. Este proceso continúa hasta que todas las partes interesadas aprueban la versión final.

Sitios publicados online

Un sitio publicado online (live) es la versión pública final, también conocido como entorno de producción o sitio de producción. La publicación es el momento en el que se levantan las cortinas para el público y las actualizaciones son visibles para todos los usuarios. 

Pueden realizar compras, interactuar con tu contenido y relacionarse con tu marca. Una vez que un cambio está publicado, todos pueden acceder a él, por lo que una evaluación exhaustiva de calidad en la fase de pruebas es crucial.

¿Por qué usar un sitio de pruebas para tu tienda de comercio electrónico?

Publicar una actualización con errores puede molestar a los clientes y afectar las ventas, por lo que es especialmente importante para las tiendas de comercio electrónico utilizar sitios de pruebas. Un sitio de pruebas puede ayudarte a:

• Probar elementos sin perjudicar la experiencia del usuario. Experimenta con diseños y nuevas funciones sin degradar la experiencia de tus clientes.
• Detectar errores antes del lanzamiento público. Encuentra errores como problemas en el carrito, botones que no funcionan o imágenes de productos rotas.
• Probar integraciones sin interrumpir el funcionamiento del sitio. Prueba integraciones de terceros como APIs o calculadoras de envío sin afectar el sitio online.
• Colaborar con las partes interesadas. Invita a varios equipos, diseñadores y otras partes interesadas, a revisar y colaborar en revisiones.
• Simular la experiencia del usuario. Prueba el sitio tal como lo harán tus clientes, lo que te permite encontrar deficiencias en la experiencia de compra. Esta es una simulación más completa que limitarse a usar archivos de diseño interactivo en una herramienta como Figma.
• Probar el rendimiento del sitio web. ¿Tus actualizaciones están ralentizando tu sitio? Un sitio de pruebas te permite probar el impacto en el rendimiento de la web (lo que también puede afectar las clasificaciones de búsqueda orgánica).

3 formas de crear un sitio de pruebas en Shopify

Los sitios web estándar de Shopify no vienen con un sitio de pruebas, así que necesitarás crear uno. Hay tres formas de hacerlo:

1. Duplicar tu tema

Esta es la forma más fácil de crear un entorno de preproducción con un plan estándar de Shopify. Es un proceso de configuración rápido que solo requiere unos pocos clics. Además, no necesitas instalar aplicaciones de terceros porque tu entorno de preproducción estará integrado en el panel de administración de Shopify.

Aquí te explicamos cómo crear un sitio de pruebas en Shopify mediante la duplicación de temas:

• Ve a Tienda online > Temas en tu panel de administración de Shopify.
• En Tema actual > Acciones, selecciona Duplicar.
• Ahora tienes una copia idéntica de tu tema, que puedes editar libremente sin afectar tu sitio publicado. Puedes hacer clic en Vista previa para generar una instancia de preproducción.
• Una vez que hayas terminado de probarlo, puedes aplicar los cambios en tu sitio publicado.

Esta opción es mejor para cambios de diseño, como ajustes de diseño o nuevas secciones de página. 

Sin embargo, no proporciona un entorno de prueba para integraciones o cambios de funcionalidad. También ten en cuenta que necesitarás añadir manualmente los elementos que ya has puesto en tu sitio existente.

2. Crear una tienda de desarrollo

Este método requiere que crees una nueva cuenta de partner de Shopify, que te permite construir una tienda completa para pruebas. Las cuentas de partner están diseñadas para desarrolladores, diseñadores y agencias que construyen y gestionan tiendas para clientes. 

Son gratuitas y te dan acceso a una tienda de desarrollo, lo que te permite reflejar todo sobre tu sitio principal, incluyendo el diseño y la funcionalidad del sitio, en un entorno privado.

Aquí te explicamos cómo crear un sitio de pruebas utilizando una tienda de desarrollo:

• Regístrate para obtener una cuenta de socio de Shopify.
• Ve a Tiendas > Crear tienda.
• Selecciona Desarrollo como tipo de tienda.
• Ponle un nombre como “test-tunombredelsitio” para que sea fácil de diferenciar de tu tienda en vivo.
• Añade productos, instala tu tema y configura todos los ajustes para reflejar tu tienda en vivo.

Ahora puedes simular la experiencia completa del usuario sin arriesgar tu sitio real. Esta es la mejor opción para realizar cambios de funcionalidad, incluyendo código personalizado o integraciones de terceros. 

Aunque las tiendas de desarrollo son gratuitas para pruebas, tienen algunas limitaciones. Solo puedes instalar aplicaciones gratuitas para partners y solo puedes generar etiquetas de envío de prueba, por ejemplo.

Si deseas probar aplicaciones adicionales o crear etiquetas de envío funcionales, puedes configurar una nueva tienda de pago en un plan básico. Igual que hiciste al duplicar tu tema, necesitarás copiar manualmente los elementos de tu sitio web añadidos a tu sitio de pruebas.

3. Usar una aplicación

Algunas herramientas de pruebas como Duplify (que ofrece un plan gratuito limitado) te permiten crear un entorno de preproducción que replica todo tu sitio. De este modo, puedes probar las páginas y productos existentes antes de ir en vivo. 

Rewind Staging es una aplicación similar (con una prueba gratuita) que incluye copias de seguridad de temas, para que puedas volver a la versión anterior si algo no funciona. Solo debes ir a la Tienda de aplicaciones de Shopify y buscar aplicaciones de preproducción para comenzar.

Aquí te explicamos cómo crear un sitio de pruebas con Rewind Staging:

• Instala Rewind Copy en tu sitio en vivo desde la Tienda de aplicaciones de Shopify.
• Elige tu tienda en vivo como Tienda de origen.
• Instala Rewind Copy en tu Tienda de desarrollo.
• Elige tu tienda de desarrollo como Tienda de destino.
• Copia la clave de tu tienda de origen a tu tienda de destino para asociar las tiendas.
• Elige la información para copiar al sitio de pruebas, para que refleje tu sitio en vivo.
• Marca Continuamente para verificar cambios en la copia y mantener la sincronización entre ambas tiendas.
• Haz clic en Comenzar tarea para iniciar la copia.

A veces, duplicar manualmente tu sitio web puede comportar que se pierdan algunas cosas, por lo que usar una aplicación de pruebas puede garantizar una copia exacta, especialmente si tienes un tema complicado.