Using a template engine for handling dynamic variables

The code to insert the template engine can only be used with the Firefox agent.

When creating and building Recorder scripts for mobile native applications, it is typically required to use the Reply Handler to capture dynamic values from response content, and then later insert those variables into subsequent requests. When inserting dynamic data into a POST body, you can use the JavaScript in a Custom action to build a string that will then replace the POST body with new values. This process typically works fine, but when building a string for a request with a large POST body or with a lot of variables this process can quickly become tedious. Your POST body string can quickly begin to look like something like this:

Example POST content

To simplify and organize this process, incorporate a template engine in your script.

A number of JavaScript template engines are available. The problem with many of these template engines is that they utilize curly brackets for variable delimiters: . When you use a template engine for Recorder scripts, you will need to insert variables into JSON text. JSON syntax uses curly brackets {} to declare objects; mixing variable delimiters and JSON syntax will create conflicts.

We recommend using the Underscore template engine because it uses ERB-style delimiters: <%= variable_name %>. This style of delimiter is safer and more reliable when replacing content that is contained in JSON text.

Customer Support cannot guarantee support for operations that involve third-party products.

Underscore (http://underscorejs.org) is an open-source JavaScript library that contains useful utilities and helpers that simplify many commonly used functions when scripting in JavaScript. It is commonly used in browser-side and Node.js programming. One of the utilities included in Underscore is a template engine. The template function allows variable placeholders to be inserted into plain-text fields, and then later to be evaluated and replaced with dynamic variable data.

Complete the following procedure to use the Underscore template engine in your script.

Inject the Underscore library.

The first step in the process is to import the Underscore library into the script so it can be used during playback.

Create a Custom action at the very beginning of the script.

Set the Target Window field to control.

Insert the following code into the Code field.
Underscore template engine code

Capture the dynamic value.

Use the Reply Handler in an HTTP action request to parse the desired dynamic value from the response body, and then assign the value to the Parameters global object. See HTTP action for more information.

This example uses a script that uses the native JavaScript JSON parser to extract the authToken attribute parsing JSON text from the response. That value is assigned to a new attribute in the global parameters object named parameters.authToken.

HTTP action reply handler

Interpolate the dynamic value into the POST body request.

In this example, the authToken variable is interpolated into a POST request with a JSON body on the very next step.

POST body

The value to replace is the authToken value, which in this instance is "00000000A5654A8E1E7DBC6198DD64F579F306453084B093". Replace this value with the attribute created in the global parameters object in the Reply Handler: "<%= authToken %>". This tells the template engine to print the value from the authToken variable when the template compiles.

The POST body now looks like this:

POST body with dynamic attribute

Render the template.

So far you have determined what dynamic value from a response you want to parse, and have identified where in the request body to inject that value. Perform the following steps to enable the Underscore template engine to render the body text:

At the beginning of the step that contains the HTTP action with the request, add a new Custom action.

Set the Target Window to control.

In the Code field, add the following code as one line:

var source = window.atob(script.steps[external.currentStepIdx].actions[1].requestList[0].body);

where actions[n] is the index of the action in the step, and requestList[n] is the index of the request in the HTTP action's request list.

This code gets the body text from the request, and creates a source variable that the template engine will eventually interpret.

Initialize the template engine with the source text:

var compiled = _.template(source);

Render the template to replace the template variables:

var body = compiled(parameters);

Replace the old request body with the new compiled request body. The following code should be one line:

script.steps[external.currentStepIdx].actions[1].requestList[0].body = window.btoa(body);

Otherwise, the uncompiled request body will still be sent along with the request.

The custom code block looks like this:

Custom action template code

When you play back the edited script, you should see the authToken automatically replaced by the dynamic value in the playback results.

What to do next

You can use this templating method on virtually any text field within a script. For more information, refer to the Underscore template reference at http://underscorejs.org/#template.