Hoppscotch

Ecosistema de desarrollo de APIs de código abierto y alternativa ligera a Postman para probar APIs REST, GraphQL, WebSocket y en tiempo real.

Instalación

Web y Escritorio

Comando	Descripción
Navegar a `hoppscotch.io`	Abrir aplicación web de Hoppscotch (sin instalación)
Descargar desde `hoppscotch.io/download`	Instalar aplicación de escritorio (macOS, Windows, Linux)
Iniciar sesión con GitHub, Google o email	Crear cuenta para sincronización de equipo
Opción de instalación PWA del navegador	Instalar como Aplicación Web Progresiva

Instalación de CLI

Comando	Descripción
`npm install -g @hoppscotch/cli`	Instalar CLI globalmente con npm
`npx @hoppscotch/cli`	Ejecutar CLI sin instalar
`hopp --version`	Mostrar versión del CLI
`hopp --help`	Mostrar ayuda del CLI

Instalación Auto-Alojada

Comando	Descripción
`docker pull hoppscotch/hoppscotch`	Descargar imagen Docker
`docker compose up -d`	Iniciar instancia auto-alojada

Docker Compose Auto-Alojado

# docker-compose.yml para Hoppscotch auto-alojado
version: "3"
services:
  hoppscotch:
    image: hoppscotch/hoppscotch:latest
    ports:
      - "3000:3000"   # Interfaz web
      - "3100:3100"   # Panel de administración
      - "3170:3170"   # API del backend
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/hoppscotch
      JWT_SECRET: your-jwt-secret-here
      TOKEN_SALT_COMPLEXITY: 10
      MAGIC_LINK_TOKEN_VALIDITY: 3
      REFRESH_TOKEN_VALIDITY: 604800000
      ACCESS_TOKEN_VALIDITY: 86400000
      VITE_ALLOWED_AUTH_PROVIDERS: GITHUB,GOOGLE,EMAIL
    depends_on:
      - db

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: hoppscotch

volumes:
  postgres_data:

Solicitudes HTTP

Realizar Solicitudes

Comando	Descripción
Seleccionar método (GET, POST, PUT, DELETE, PATCH)	Elegir método HTTP del menú desplegable
Ingresar URL en la barra de direcciones	Establecer endpoint de la solicitud
Hacer clic en “Send”	Ejecutar la solicitud
`Ctrl + Enter`	Enviar solicitud (atajo de teclado)
`Ctrl + G`	Enviar y descargar respuesta
`Ctrl + K`	Abrir paleta de comandos

Cuerpo de la Solicitud

Comando	Descripción
Clic en pestaña “Body” → seleccionar tipo	Establecer formato del cuerpo de solicitud
Seleccionar “application/json”	Cuerpo JSON (más común)
Seleccionar “multipart/form-data”	Carga de archivos
Seleccionar “application/x-www-form-urlencoded”	Datos de formulario
Seleccionar “text/plain”	Cuerpo de texto sin formato
Seleccionar “application/xml”	Cuerpo XML
Seleccionar “Binary”	Datos binarios sin procesar

Cabeceras y Parámetros

Comando	Descripción
Clic en pestaña “Headers” → Agregar cabecera	Agregar cabeceras de solicitud personalizadas
Clic en pestaña “Parameters”	Agregar parámetros de consulta URL
Modo de edición masiva para cabeceras	Pegar múltiples cabeceras a la vez
Alternar cabecera activa/inactiva	Desactivar sin eliminar
Usar `<<variable>>` en valores	Referenciar variables de entorno

Inspección de Respuesta

Comando	Descripción
Ver cuerpo de respuesta	JSON, HTML, XML, binario, imagen
Clic en pestaña “Headers” de la respuesta	Inspeccionar cabeceras de respuesta
Código de estado y tiempo mostrados	Estado HTTP, latencia, tamaño
Clic en “Copy” en la respuesta	Copiar respuesta al portapapeles
Clic en “Download”	Descargar respuesta como archivo
Respuesta JSON auto-formateada	Vista de árbol colapsable
Clic en “Timeline”	Ver línea de tiempo solicitud/respuesta

Ejemplo de Solicitud

Method:  POST
URL:     https://api.example.com/users
Headers:
  Content-Type: application/json
  Authorization: Bearer <<auth_token>>

Body (JSON):
{
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin"
}

Response: 201 Created (145ms, 234 B)
{
  "id": 42,
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin",
  "created_at": "2024-01-15T10:30:00Z"
}

Colecciones

Gestionar Colecciones

Comando	Descripción
Clic en ”+” en panel de Colecciones	Crear nueva colección
Clic derecho en colección → “New Request”	Agregar solicitud a la colección
Clic derecho en colección → “New Folder”	Organizar con subcarpetas
Arrastrar solicitudes entre carpetas	Reordenar elementos de la colección
Clic derecho → “Duplicate”	Clonar una colección
Clic derecho → “Properties”	Editar configuración de la colección
Clic derecho → “Delete”	Eliminar colección
`Ctrl + Shift + P`	Buscar dentro de colecciones

Importar y Exportar

Comando	Descripción
Clic en “Import” → seleccionar archivo	Importar colección
Clic derecho → “Export”	Exportar colección como JSON
Importar desde Postman Collection v2	Compatibilidad con Postman
Importar desde especificación OpenAPI/Swagger	Auto-generar solicitudes
Importar desde Insomnia	Compatibilidad con Insomnia
Importar desde cURL	Pegar comando cURL
Importar desde HAR	Importar HTTP Archive

Ejemplos de Importación

Formatos de importación soportados:
  - Hoppscotch Collection (JSON nativo)
  - Postman Collection v2
  - OpenAPI 3.0 / Swagger 2.0
  - Insomnia v4
  - Comandos cURL
  - HAR (HTTP Archive)

Importar desde cURL:
  Pegar un comando cURL directamente en la barra de URL
  Hoppscotch auto-analiza método, cabeceras, cuerpo y URL

Variables de Entorno

Gestionar Entornos

Comando	Descripción
Clic en “Environments” en la barra lateral	Abrir gestor de entornos
Clic en ”+” para crear entorno	Crear nuevo entorno
Agregar pares `clave: valor`	Definir variables
Usar `<<nombre_variable>>` en solicitudes	Referenciar variable en cualquier campo
Seleccionar entorno del menú desplegable	Activar un entorno
Clic en pestaña “Global”	Establecer variables globales (siempre activas)
Clic derecho → “Export”	Exportar entorno como JSON
Clic derecho → “Duplicate”	Clonar entorno

Tipos de Variables

Tipo	Descripción
Variable regular	Visible en la UI, exportada en colecciones
Variable secreta	Oculta en la UI, no exportada
Variable global	Disponible en todos los entornos
Variable de entorno	Disponible solo cuando el entorno está activo

Ejemplo de Entorno

Entorno: "Production"
┌───────────────┬──────────────────────────────┬──────────┐
│ Clave         │ Valor                        │ Tipo     │
├───────────────┼──────────────────────────────┼──────────┤
│ base_url      │ https://api.example.com      │ Regular  │
│ api_version   │ v2                           │ Regular  │
│ auth_token    │ eyJhbGciOiJIUzI1NiIsIn...    │ Secreto  │
│ timeout       │ 30000                        │ Regular  │
└───────────────┴──────────────────────────────┴──────────┘

Uso en solicitudes:
  URL:    <<base_url>>/<<api_version>>/users
  Header: Authorization: Bearer <<auth_token>>

Autenticación

Tipos de Autenticación

Comando	Descripción
Seleccionar “Bearer Token”	Agregar autenticación con token Bearer
Seleccionar “Basic Auth”	Autenticación con usuario/contraseña
Seleccionar “OAuth 2.0”	Configurar flujo OAuth 2.0
Seleccionar “API Key”	Agregar API key a cabecera o parámetro de consulta
Seleccionar “AWS Signature”	Autenticación AWS Signature V4
Seleccionar “Inherit from parent”	Heredar autenticación de la colección
Seleccionar “None”	Eliminar autenticación
Campos de token soportan `<<variables>>`	Usar variables de entorno en tokens de autenticación

Configuración OAuth 2.0

Configuración OAuth 2.0:
  Grant Type:       Authorization Code
  Auth URL:         https://auth.example.com/authorize
  Token URL:        https://auth.example.com/token
  Client ID:        <<client_id>>
  Client Secret:    <<client_secret>>
  Scope:            read write
  Redirect URI:     Auto-configurado

Tipos de grant soportados:
  - Authorization Code (+ PKCE)
  - Client Credentials
  - Implicit
  - Password Credentials

Pruebas en Tiempo Real

WebSocket

Comando	Descripción
Clic en “Realtime” → “WebSocket”	Abrir cliente WebSocket
Ingresar URL `wss://`	Establecer endpoint WebSocket
Clic en “Connect”	Establecer conexión
Escribir mensaje → clic en “Send”	Enviar mensaje al servidor
Ver mensajes en panel de registro	Monitorear entrantes/salientes
Clic en “Disconnect”	Cerrar conexión
Agregar protocolos/cabeceras	Configurar parámetros de conexión

Server-Sent Events (SSE)

Comando	Descripción
Clic en “Realtime” → “SSE”	Probar Server-Sent Events
Ingresar URL del endpoint SSE	Establecer URL del flujo de eventos
Clic en “Connect”	Comenzar a recibir eventos
Eventos registrados en tiempo real	Monitorear flujo de eventos
Clic en “Disconnect”	Dejar de recibir

MQTT

Comando	Descripción
Clic en “Realtime” → “MQTT”	Probar conexiones MQTT
Ingresar URL `mqtt://` o `wss://`	Establecer URL del broker MQTT
Establecer Client ID, usuario, contraseña	Configurar credenciales
Suscribirse a temas	Escuchar mensajes
Publicar en temas	Enviar mensajes

Socket.IO

Comando	Descripción
Clic en “Realtime” → “Socket.IO”	Probar conexiones Socket.IO
Ingresar URL del servidor	Establecer endpoint Socket.IO
Escuchar en eventos	Suscribirse a eventos nombrados
Emitir eventos con datos	Enviar eventos nombrados
Ver estado de conexión	Monitorear conexión/desconexión

GraphQL

Pruebas GraphQL

Comando	Descripción
Clic en pestaña “GraphQL”	Cambiar a modo GraphQL
Ingresar URL del endpoint GraphQL	Establecer URL del servidor GraphQL
Escribir consulta en panel del editor	Componer consulta GraphQL
Clic en “Schema” para obtener esquema	Cargar esquema del servidor para autocompletado
Agregar variables en panel de Variables	Establecer variables de consulta como JSON
Agregar cabeceras para autenticación	Establecer cabeceras de autenticación
Clic en “Run” o `Ctrl + Enter`	Ejecutar consulta
Usar autocompletado del esquema	Obtener sugerencias de campos

Ejemplo GraphQL

Endpoint: https://api.example.com/graphql

Query:
  query GetUsers($limit: Int!) {
    users(limit: $limit) {
      id
      name
      email
      posts {
        title
        createdAt
      }
    }
  }

Variables:
  {
    "limit": 10
  }

Headers:
  Authorization: Bearer <<auth_token>>

Uso del CLI

Ejecutar Colecciones

Comando	Descripción
`hopp test collection.json`	Ejecutar pruebas de colección
`hopp test collection.json -e environment.json`	Ejecutar con entorno
`hopp test collection.json --delay 500`	Retraso entre solicitudes (ms)
`hopp test collection.json --reporter junit`	Salida de informe de pruebas JUnit
`hopp test collection.json --reporter json`	Salida de informe de pruebas JSON
`hopp test collection.json --bail`	Detenerse en el primer fallo
`hopp test collection.json --env-var KEY=VALUE`	Sobrescribir variable de entorno

Ejemplos de CLI

# Ejecutar colección con entorno
hopp test api-tests.json -e production.json

# Ejecutar con retraso y detenerse en fallo
hopp test api-tests.json --delay 1000 --bail

# Generar informe JUnit para CI/CD
hopp test api-tests.json --reporter junit > results.xml

# Sobrescribir variables específicas
hopp test api-tests.json \
  --env-var "base_url=https://staging.example.com" \
  --env-var "auth_token=test-token-123"

# Ejemplo de pipeline CI/CD
hopp test api-tests.json -e staging.json --bail --reporter junit

Scripts Pre-Solicitud y Post-Solicitud

Scripting

Comando	Descripción
Clic en pestaña “Pre-request”	Agregar script que se ejecuta antes de la solicitud
Clic en pestaña “Tests”	Agregar script que se ejecuta después de la respuesta
`pw.env.set("key", "value")`	Establecer variable de entorno
`pw.env.get("key")`	Obtener variable de entorno
`pw.expect(response.status).toBe(200)`	Verificar código de estado
`pw.expect(response.body).toHaveProperty("id")`	Verificar propiedad del cuerpo

Ejemplos de Scripts de Prueba

// Pre-solicitud: Generar marca de tiempo
pw.env.set("timestamp", Date.now().toString());

// Pre-solicitud: Generar ID aleatorio
pw.env.set("random_id", Math.random().toString(36).slice(2));

// Prueba: Verificar código de estado
pw.test("Status is 200", () => {
  pw.expect(pw.response.status).toBe(200);
});

// Prueba: Verificar cuerpo de respuesta
pw.test("Response has user data", () => {
  const body = pw.response.body;
  pw.expect(body).toHaveProperty("id");
  pw.expect(body).toHaveProperty("name");
  pw.expect(body.name).toBe("Alice");
});

// Prueba: Verificar tiempo de respuesta
pw.test("Response is fast", () => {
  pw.expect(pw.response.status).toBeLessThan(500);
});

// Prueba: Guardar token para la siguiente solicitud
pw.test("Extract auth token", () => {
  const token = pw.response.body.access_token;
  pw.env.set("auth_token", token);
});

Atajos de Teclado

Globales

Atajo	Descripción
`Ctrl + Enter`	Enviar solicitud
`Ctrl + K`	Paleta de comandos
`Ctrl + S`	Guardar solicitud actual
`Ctrl + Shift + P`	Buscar en colecciones
`Ctrl + /`	Alternar barra lateral
`Alt + ↑`	Solicitud anterior en el historial
`Alt + ↓`	Siguiente solicitud en el historial
`F11`	Alternar pantalla completa

Equipos y Colaboración

Comando	Descripción
Crear equipo desde la barra lateral	Configurar espacio de trabajo del equipo
Invitar miembros por email	Agregar colaboradores
Colecciones compartidas	Bibliotecas de solicitudes del equipo
Entornos compartidos	Conjuntos de variables del equipo
Colaboración en tiempo real	Ver ediciones del equipo en vivo
Acceso basado en roles	Roles de propietario, editor y visor

Mejores Prácticas

Organiza colecciones por dominio de API — Agrupa endpoints relacionados en colecciones y usa carpetas para tipos de recursos (usuarios, pedidos, productos) para mantener todo fácil de encontrar.
Usa entornos para staging vs producción — Crea entornos separados para dev, staging y producción con los mismos nombres de variables pero valores diferentes. Cambia con un solo clic.
Almacena secretos como variables secretas — Marca API keys y tokens como tipo “secret” para que estén ocultos en la UI y excluidos de las exportaciones.
Usa scripts pre-solicitud para autenticación — Genera marcas de tiempo, calcula firmas o refresca tokens automáticamente antes de cada solicitud en lugar de copiarlos manualmente.
Escribe pruebas para endpoints críticos — Agrega scripts de prueba para verificar códigos de estado, estructura de respuesta y valores clave. Ejecútalos vía CLI en pipelines CI/CD.
Importa desde especificaciones OpenAPI — Al trabajar con APIs documentadas, importa la especificación OpenAPI/Swagger para auto-generar todos los endpoints con los parámetros correctos.
Usa autenticación a nivel de colección — Establece la autenticación a nivel de colección y usa “Inherit from parent” en solicitudes individuales para evitar duplicar la configuración de autenticación.
Exporta colecciones al control de versiones — Exporta colecciones como JSON y haz commit en tu repositorio para versionado y compartir con el equipo.
Usa el CLI en CI/CD — Agrega hopp test a tu pipeline para ejecutar pruebas de API en cada despliegue, asegurando que los endpoints funcionen antes de salir a producción.
Auto-aloja para APIs sensibles — Si pruebas APIs internas o sensibles, despliega la versión Docker auto-alojada para mantener todos los datos dentro de tu infraestructura.