The Snippet Editor
A breakdown of the different parts of the JavaScript Snippet Editor
You can create and modify snippets in the Snippet Editor. This guide outlines the different components of the Snippet Editor and how to use them.
The Snippet Editor includes the following parts:
Name and description

Name and description fields in the Snippet Editor
All snippets must have a name. The description is optional.
The name and description fields help all users in a workspace understand what the snippet does. If it is a reusable snippet, the name and description help other members of your workspace determine if the snippet is appropriate to import into their own tests.
Parameters

Parameters section in the Snippet Editor
Parameters allow you to input values into your snippet, such as a variable value or a CSS query. If you're not using parameters in your snippet, you can leave this section blank.
Running snippets in Internet Explorer
Internet Explorer does not support the syntax required for snippet parameters. If you intend to run a snippet in Internet Explorer, do not add parameters to the snippet. Instead, reference the variable through the mablInputs object:
mablInputs.variables.user.myCreatedVariable
.
Adding variable values as parameters
You can add the value of a variable as a parameter by using mabl variable syntax. The following table describes the different types of variables you can reference as parameter values.
Type | Description | Example |
---|---|---|
Test-generated variables | Any variable created by a test step in a browser test is a test-generated variable | new_user becomes {{@new_user}} |
Loop index | This variable is available if the snippet is within a loop. | {{@run.loop_index}} |
Flow parameter | These variables are available if the snippet is within a parameterized flow. | A flow parameter named occupation becomes {{@flow.occupation}} |
Credentials | Variables are available if the test or plan is associated with credentials | {{@app.defaults.username}} and {{@app.defaults.password}} |
Application URL | This variable is the URL of the application under test | {{@app.url}} |
Run ID | This variable represents the unique ID associated with the test and is generated for each cloud run. (When run locally, the value is "local-run") | {{@app.test_run_id}} |
The code editor

Add JavaScript code in the code editor.
The code editor is where you write the code that executes on this step. Every snippet consists of a predefined function called mablJavaScriptStep
. This function includes the following parameters:
mablInputs
mablInputs
is an object containing variables for the test.
Use parameters instead of mablInputs
For greater reusability and better documentation of input requirements, we recommend adding variables to a snippet as parameters. (An exception is if you intend to run the snippet on Internet Explorer; snippets run in IE do not support parameters.)
Here is an example of values that can be accessed from the mablInputs object:
mablInputs = {
variables: {
user: {
// variables created during the trained test thus far
myCreatedVariable: "Variable value created earlier"
},
web: {
defaults: {
// URL of the page under test - {{@app.url}}
url: "https://sandbox.mabl.com",
// test run ID - generates a unique ID for cloud runs
test_run_id: "local-run",
credentials: {
// login username associated with test or plan - {{@app.defaults.username}}
username: "[email protected]",
// login password associated with test or plan - {{@app.defaults.password}}
password: "password123"
}
},
runtime: {
// loop index, starts at 1 - {{@run.loop_index}}
flow_run_ordinal_index: "1"
}
}
flow: {
// flow parameters (if the test is within a flow)
myFlowParam: "Flow parameter value"
}
}
}
Callback
The callback function is called to complete the JavaScript step, and it must return a value. Supported types of return to the callback include:
- Booleans
- Strings
- Numbers
When you press the Run button, the value of the callback appears in the Results section.
Maximum run time for a JavaScript snippet
Test execution will wait up to 30 seconds for the callback before failing. Be sure to call this after the completion of any asynchronous code that needs to execute.
Parameters (if using)
If you add parameters to the snippet, they appear as arguments for the mablJavaScriptStep
function.
Asynchronous functions in JavaScript snippets
Although the mablJavaScriptStep
function requires a callback value to complete the step, it is possible to use asynchronous JavaScript, including Promises and async/await in the Snippet Editor. The following JavaScript snippet uses the async
keyword and the Promise
object to return a value from an asynchronous operation.
async function mablJavaScriptStep(mablInputs, callback) {
// enter code here, return result in callback
const augment = async (inVar) => {
return Promise.resolve('I said ' + inVar + ' something');
}
const result = await augment('test');
callback(result);
}
Results section

View the output of your snippet in the Results field
Test out your snippet by clicking on the Run button. The output appears in the Results field.
Expanding results
If the output of the snippet is larger than the Results field, click on the expander icon to see the value in a bigger window.

View longer output in the expanded results view
JavaScript Error messages
If you click Run and the Results output shows Error!
, there is an error with your script. To get more detail on what this error is, save the snippet and run it as a step in the mabl Trainer.

Detailed error message in the Trainer window
Snippets outside the mabl Trainer
It is not possible to run a snippet outside of the mabl Trainer.
If you create a new snippet or open an existing snippet from the Snippets page (outside the mabl Trainer), the Results section is absent.
Save options

Cancel and save buttons in the Snippet Editor
When you save a new snippet in the mabl Trainer, click on the down arrow next to the Save button to see the full range of options.

Save options in the Snippet Editor
Save
The default option for existing snippets.
Save as one-time snippet
Saving as a one-time snippet can be useful if you have no plans of reusing the snippet. If you change your mind later, however, you can always convert a one-time snippet into a reusable snippet by clicking "Save as new reusable snippet."
One-time snippets do not appear on the Snippets page.
Note
It is possible to put a one-time snippet within a reusable flow. In this case, the snippet cannot be imported directly into other tests, but it can still be reused if the flow is imported.
Save as new reusable snippet
If you need to use the same JavaScript step in multiple tests or several times in the same test, save it as a reusable snippet. If the JavaScript needs to be updated later, you can update it in one place. All tests that contain the snippet will use the updated version.
Snippets outside the mabl Trainer
All snippets that appear on the Snippets page (Tests > Snippets) are reusable snippets. When working with snippets from the Snippets page, keep in mind the following:
- New snippets are always saved as reusable snippets.
- While existing snippets can be updated, you cannot create a new snippet from an existing snippet outside of the mabl Trainer.
Updated about 2 months ago