Automating Dynamic Requests in Hoppscotch: Environment Variables + Pre‑Request Scripts

Problem & Takeaway

When testing APIs that require dynamic data—such as timestamps, signatures, or freshly refreshed tokens—static requests quickly become brittle. Hoppscotch offers two built‑in mechanisms to keep requests up to date without manual copy‑paste: environment variables and pre‑request scripts. Using them together lets you compute values on the fly, persist changes across requests, and create end‑to‑end test flows.

Desired Outcome

By the end of this guide you will:

• Define and reference environment variables in URLs, headers, bodies, and auth fields.
• Write a JavaScript pre‑request script that sets or updates variables.
• Chain two requests so that the first generates a value used by the second.
• Verify that the dynamic data is actually sent by inspecting the Network tab.

Prerequisites

• Hoppscotch web application (the Electron desktop app does not support scripts).
• Basic understanding of JavaScript (variables, functions, Date API).
• Access to an API endpoint that accepts a bearer token and a JSON body containing a timestamp.

Procedure

1. Create an Environment

1. Open Hoppscotch and click Environments in the left sidebar.
2. Click Create Environment, name it dev, and add a variable token with value abc123.

   Environment variables must be case‑sensitive and contain no spaces.

3. Save the environment and activate it by selecting it from the top bar.

2. Reference the Variable in a Request

1. Create a new request (GET or POST). In the Headers section add:

   Authorization: Bearer {{token}}

2. In the Body (JSON) add a placeholder for a timestamp: {"time": {{timestamp}}}. Note that the placeholder is unquoted; Hoppscotch will replace it with a number.

3. Write a Pre‑Request Script

1. Open the Pre‑Request Script editor below the request builder.
2. Insert the following JavaScript:

   // Set current epoch time in milliseconds
   pm.environment.set("timestamp", Date.now());
   
   // Example: increment a counter stored in the environment
   let counter = pm.environment.get("counter") || 0;
   pm.environment.set("counter", counter + 1);
   
   // Log for debugging
   console.log("Timestamp set to", pm.environment.get("timestamp"));
   console.log("Counter is now", pm.environment.get("counter"));

   The pm object is Hoppscotch’s sandbox API that exposes environment helpers and a console for debugging.

4. Send the Request & Verify

1. Click Send.
2. Open the browser’s Network tab (or Hoppscotch’s built‑in inspector). Find the request and expand the Headers section to confirm the Authorization header contains the current {{token}} value.
3. Expand the Payload or Request Body to verify that the time field contains a numeric timestamp (e.g., 1697731234567).

5. Chain Requests with Persisted Variables

1. Create a second request that reads the counter variable. In the URL or body, reference {{counter}}.
2. Send the first request again to increment counter.
3. Send the second request; the {{counter}} placeholder should now show the incremented value.
4. Verify by inspecting the Network tab that the value in the request matches the expected number.

Expected Checks

• Header substitution: Authorization shows Bearer abc123.
• Body substitution: time is a numeric value, not the literal string {{timestamp}}.
• Variable persistence: counter increments across sequential requests.
• Console logs: Open the script console (the terminal icon) to see debug output from console.log statements.

Recovery Options

• If a variable reference fails, double‑check that the name matches exactly (case‑sensitive) and that the variable exists in the active environment.
• Script errors will appear in the console; common mistakes include using pm.environment.get on a non‑existent key, which returns null. Guard against this with a fallback value, as shown in the example.
• To reset a variable, use pm.environment.unset("variableName") or delete it from the Environment tab.
• When working offline or in the Electron app, remember that pre‑request scripts are disabled. In that case, pre‑compute the needed values and store them in the environment manually.

Limitations & Practical Check

• Pre‑request scripts run only in the web version of Hoppscotch; the Electron wrapper disables the editor for security reasons.
• Scripts cannot access external network resources or the DOM, so they are safe but limited to the pm sandbox.
• Variable names cannot contain spaces or unsupported characters; otherwise, Hoppscotch will treat the placeholder as literal text.
• To confirm that a variable is truly dynamic, send a request, note the value, then modify the variable manually in the Environment tab and resend. The change should reflect instantly.

Conclusion

Environment variables and pre‑request scripts give Hoppscotch the flexibility to emulate real‑world API interactions. By automating token refreshes, timestamps, and other dynamic data, you can build reliable, repeatable test flows without manual intervention.