Using JavaScript steps in the Trainer

Parameterized JavaScript

Mabl can execute user-supplied JavaScript snippets inside of a trained test and optionally save the result as a variable. Both synchronous and asynchronous JavaScript code is supported. A number of user-created snippets can be found in our public JavaScript repo.


JavaScript Version Support

Browsers have different levels of JavaScript support. Mabl executes tests using the latest Chrome, Firefox and Safari, which broadly supports ES6 standard features.

On the other hand, Internet Explorer primarily supports up to ES5, notably missing features such as Array.prototype.includes and async/await for asynchronous functions. Please refer to the MDN documentation for details.

Why should I be using JavaScript snippets?

While mabl allows you to easily test many web apps and APIs with ease, there are oftentimes web app-specific use cases that aren't supported out of the box. While we don't allow the ability to import external libraries today, there are still a large number of ways you can improve your testing with JavaScript.

A simple example of a common way to use JavaScript is to grab today's date and turn it into a variable that can be used later. Instead of having a "get date" step in mabl and restricting you to only grabbing the current date, with a JavaScript step you can customize (and parameterize) each instance of the step to mutate the value to exactly what you need in that part of the test. During a loop for example, for each loop iteration you could bump the value by one day at a time using a JavaScript step to cycle through an entire week with ease.

Use cases

Extending your testing

JavaScript snippets allow you to greatly extend your testing beyond the easy-to-use steps mabl already offers today to more advanced use cases. This could be as simple as adding two numbers together to create a new variable or as advanced as setting up data or set of variables for your test. Visit our public JavaScript repo to view some examples.

Greater reusability

It's simple to re-use a single JavaScript snippet in multiple places throughout your workspace, as JavaScript snippets can be reused and also extended through parameterization. This means that one JavaScript snippet can be created in one test and easily be reused in another, with the same values or differing values through parameterization. You can even reuse snippets with different values in the same flow or test.



Note: you must use the mabl desktop app to not only add parameterized snippets to your test, but also to parameterize your existing snippets, as well as to edit any test that uses parameterized snippets.

Learn more about migrating your legacy snippets here.

For example, imagine you have a JavaScript snippet that takes the current URL and converts it to another language by adding a country code to a part of that URL. Without parameterization, you would need one snippet per country code, assuming you never want to change it. With parameterization, you can simply pass the country code in as a parameter to each instance without needing to produce dozens of snippets that ultimately perform the same action just with different data.

No need to be a JS expert to use

Through parameterization, mabl abstracts away the underlying JavaScript code within a snippet. This means a user without knowledge of JavaScript can easily reuse a teammate's complex snippet. Using the example immediately above, instead of having to know how to modify the code itself (and making sure they don't break other instances of the snippet), a user can simply import the snippet above and provide a value for the parameter without ever even seeing the JavaScript that powers it.

Creating a Javascript Step

To insert a generic JavaScript step in the Trainer, click the "Insert step" button and then "JavaScript". On the screen that appears, you'll need to select "New" next to "Configure snippet".


The location of the "New" button.

A code editor window will open on the screen.


mabl Trainer Code Editor

From here, you can give your new snippet a name and description to aid with later identification. You can also add parameters that will supply values to the snippet.

The code editor

A predefined function called mablJavaScriptStep is supplied as the means of running the user-supplied JavaScript.


The mablJavaScriptStep function has two or three arguments:

  • mablInputs:
    • a mabl supplied object containing read-only variables defined in the training session already.
  • callback:
    • a mabl supplied callback function. This function should be called at the end to signify the completion of the JS snippet.
  • zero or more parameters, supplied by the user via the panel on the left
    • these values can only be edited by the panel, and may not update live with changes

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: "",
        // 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"

If you wanted to accessible a variable created in your test, for example, you could reference mablInputs.variables.user.myCreatedVariable.


Callback limitations

The callback must return a value. Supported types of return to the callback are: booleans, strings, and numbers. Other types will cause the snippet to fail or be ignored.

Test execution will wait up to 30 seconds for the callback before failing. Be sure to call this after the completing of any asynchronous code that needs to execute.

Enter your JavaScript code in the editor and add any necessary parameters. Parameters allow you to import values to your test without having to create a new JS snippet each time you want to use a new value. When ready press the "Run" button and the entered JavaScript will be executed inside the console of the page you are on.

If you got the desired result, you can then save it as a non-reusable one-time use snippet, or as a reusable snippet. If you think you'd like to use it elsewhere in your testing, we recommend saving it as a reusable snippet. The only difference between the two is whether you can import them later into another test or flow.


Clicking the v arrow will allow to save either as a one-time snippet or as a new reusable snippet.

Once the step is saved, you will see the JavaScript step show up in the trainer and you can continue creating your test.


Converting one-time snippets to reusable snippets

One-time snippets can be converted to a reusable snippet simply by clicking the v arrow shown above from the code editor and then selecting "Save as new reusable snippet".

Adding saved JavaScript snippets to a test

Create a new test from scratch or find and edit the test in which you wish to add the snippet. Once in the Trainer, click the "Insert step" button and then "JavaScript".

On the screen that appears, you'll need to select the "Select snippet" to choose the snippet you'd like to add.

If there are parameters, you'll have the option to pass in override values here as well.



Creating new snippets from an existing snippet

If you have an existing JavaScript snippet that you'd like to duplicate and/or alter into a new snippet, you can simply import an existing snippet. Before you complete the import, click "Edit code" and give the snippet a new name and description as well as make the necessary changes to the code and parameters. Once you're done, click v arrow next to the "Save" from the code editor and then select "Save as new reusable snippet".

Then, simply click "OK" to continue. Or you can run the snippet to test the result before adding it to your test.


Time saving tips

  • If you need to use the same JavaScript Step in multiple tests, make sure you save it as a reusable snippet. If later the JavaScript needs to be updated, you can update it in one place and all tests will be updated.
  • The more reusable your code is, the better. Having a JavaScript Step that uses a variable that was set previously in the test will allow for more code reuse. e.g. Picking a date from a date picker based off of the value of a variable named "date_to_pick". You would then set the variable "date_to_pick" and execute the JavaScript snippet after to choose the desired date.

Managing your existing snippets in the snippets dashboard

Similar to reusable flows, you'll be able to see your saved JavaScript snippets on the "Snippets" tab of the "Tests" page. Note: you must open the mabl trainer to edit your JavaScript snippets.

Managing existing snippets

You can only delete snippets that are not being used in your tests. Once all instances of a snippet are deleted, you'll be able to click the red "Delete" button on the right.


Important information about JavaScript libraries

External JavaScript libraries cannot be imported as part of a JavaScript step in your mabl tests.

Using JavaScript to define a variable

You can use Javascript snippets to define a variable in the mabl Trainer. A "JavaScript" option is available under the create variable form.

Now, you'll have the option to select the specific JS snippet you'd like to load to generate the variable, or click "New" to create a brand new snippet.


Creating a variable from JS with no snippet selected

If you'd like to make changes to the snippet, click the "Edit code" button to launch the code editor. However, we recommend simply using any parameters, under "Edit Parameters" to make changes to that instance of the snippet rather than every instance of that snippet. With parameters, you can pass in any value, both variables and static.


A parameterized snippet was selected, showing the option to "Edit code" as well as override the value of the dayOffset parameter for that instance of the snippet.

If you do need to edit the snippet, the editor functions just like it does from the "JS" button in the main trainer toolbar with one exception: upon clicking "Save & Run" the output will be saved as the variable. You will still be able to review the output before saving the create variable form and optionally reopen the editor to edit the JavaScript.

Migrating legacy snippets to parameterized snippets

If you have unparameterized snippets, which are those created before December 1st, 2021, or those created from the mabl Trainer chrome extension, you can easily migrate those to the new parameterized snippets. Parameterizing unlocks both greater reusability of your existing snippets as well as simpler ease of use, especially for users who may not be familiar with JS.

To parameterize, simply open a legacy snippet in the mabl desktop app training window. Edit the snippet itself and open the code editor. You'll see a section for parameters on the left, as well as a button asking you to parameterize.

Click the button to parameterize the snippet. Note: this cannot be undone. Once you've parameterized it, we recommend editing the snippet and adding parameters for each of the values used within the test. When adding a parameter, you can also set a default value for that parameter. If converting a widely used snippet to a new parameterized snippet, we recommend assigning the default value of each parameter equal to the variable it is replacing in the snippet. You also need to replace any usage of the variables replacing with parameters in the code itself.

For example, if your legacy snippet was using the date variable created earlier in your test, you'd want to add {{@date}} as the default value for the new theDate parameter in this snippet. Otherwise, your theDate parameter will reference whatever is in the override value of that instance, or the blank default value if there is none added.

Once you've added your parameters on the left and updated the variable usage to use parameters instead within the snippet, simply save the snippet and you're done! We also recommend using the "Run" button in the snippet editor to test before saving.

Did this page help you?