The Snippet Editor

A breakdown of the different parts of the JavaScript Snippet Editor

When you open a new or existing snippet, you will be presented with the Snippet Editor, where you can create or modify your snippet. This window includes the following parts:

Name and description

19901990

All snippets are required to have a name. The description is optional. These fields can help all users in a workspace understand what the snippet does and, if it is a reusable snippet, figure out if it's something that they want to import into their own tests.

Parameters

19901990

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

The syntax required for snippet parameters is not supported by Internet Explorer. If you intend to run a snippet in Internet Explorer, you should not add parameters to the snippet. Instead, if you want to access variable values in the snippet, you should 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.

Type

Description

Example

Test-generated variables

Any variable that is created by a test step in a browser test

new_user becomes {{@new_user}}

Loop index

This variable can be accessed if the snippet is within a loop.

{{@run.loop_index}}

Flow parameter

These variables can be accessed if the snippet is within a parameterized flow.

A flow parameter named occupation becomes {{@flow.occupation}}

Credentials

Variables that can be accessed if the test or plan is associated with credentials

{{@app.defaults.username}}and {{@app.defaults.password}}

Application URL

URL of the application under test

{{@app.url}}

Run ID

Unique ID associated with the test. Generated for each cloud run. (When run locally, the value is "local-run")

{{@app.test_run_id}}

The code editor

19901990

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 will appear as arguments for the mablJavaScriptStep function.

Results section

19901990

You can test out your snippet by hitting the Run button. The output will appear in the results field.

Expanding results

If the output of the snippet is larger than the results field, you can click on the expander icon to see the value in a bigger window.

640640

JavaScript Error messages

If you click Run and the Results output shows Error!, there is an error with your script. One way to get more detail on this error is by saving the snippet and running it as-is in the mabl Trainer.

348348

📘

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

19901990

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.

802802

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, you can save it as a reusable snippet. If the JavaScript needs to be updated later, you can update it in one place and all tests will be updated.

📘

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.

Did this page help you?