The 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
• Parameters
• The code editor
• Results section
• Save options

Name and description

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 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.

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.

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.

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. If the callback function is not run, the step will fail. 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 five minutes 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

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.

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.

📘

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

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

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.