Using JavaScript Steps in the Trainer

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.

Generic Javascript Step

To insert a generic JavaScript step in the Trainer click the "More actions" menu and then "Insert JavaScript" to open the code editor.

Insert JavaScript step

Insert JavaScript step

A code editor window will open on the screen.

mabl Trainer Code Editor

mabl Trainer Code Editor

A predefined function called mablJavaScriptStep is supplied as the means of running the user supplied JavaScript. This function has two arguments:

  • mablInputs:
    • a mabl supplied object containing read-only variables defined in the training session already.
mablInputs = {
  variables: {
    user: {
      // variables created during the trained journey thus far
      myCreatedVariable: "Variable value created earlier"
    }
  }
}
  • callback:
    • a mabl supplied callback function. This function should be called at the end to signify the completion of the JS snippet. Be sure to call this after the completion of any asynchronous code that needs to execute. Test execution will wait up to 30 seconds for the callback before failing. Callback must return a value.

Enter your JavaScript code in the editor. When ready press the "Save & Run" button and the entered JavaScript will be executed inside the console of the page you are on and saved as a step in the mabl Trainer. Any errors or console statements will be viewable from the devtools console for the page you are on.

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.

Create JavaScript Variable

Create JavaScript Variable

From here you can click the "Open code editor" button to launch the code editor. The editor functions just like it does from the "JS" button in the main trainer toolbar except 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.

Examples

Async API Request

Below is an example of how to make an asynchronous API request inside the JavaScript step using the fetch API. This example queries the uinames.com API for fake generated user data and pulls out a credit card number.

function mablJavaScriptStep(mablInputs, callback) {
  
  // define a javascript variable for the uinames.com API endpoint
  let url = 'https://uinames.com/api/?ext';
  
  // perform an asynchronous fetch against the API endpoint that returns JSON responses 
  fetch(url).then(apiResponse => {
    // extract the json value from the response
    return apiResponse.json();
  }).then(jsonResponse => {
    // extract the credit card number and perform callback
    callback(jsonResponse.credit_card.number);  // sample output: "2589-7385-9065-7232"
  });
}

Use your other variables

Below is an example of accessing variables you have defined in your test at an earlier step. This example uses a variable containing a path ('user/profile/settings') and builds a URL with the current document URL and returns the value in the callback to save it as a variable.

function mablJavaScriptStep(mablInputs, callback) {
  
  // pull a previously defined variable out of the built-in mablInputs
  // object to use in the javascript code
  let path = mablInputs.variables.user.myTestPath;
  
  // get the current URL of the document
  let currentURL = document.URL;
  
  // create a new URL combining both javascript variables
  let finalURL = `${currentURL}/${path}`;
  
  // perform the callback with the finalURL value to be saved as a variable
  callback(finalURL);
}

Create a Variable of the Current Date/Time

You can use the JavaScript editor to create a variable that is the current date and or time by using the code editor within the create variable form and the Date object. Please refer to the Date object documentation for other ways to produce the time format.

function mablJavaScriptStep(mablInputs, callback) {
  // create a new Date object
  let today = new Date();
  // get the string representation of the date and time
  let finalDateTime = today.toLocaleString();
  // perform the callback with the result
  callback(finalDateTime);
}

Check for a valid 2xx response code

Normally, it is not possible to validate for a 2xx response code outside of the default "Visit home page" journey. You can, however, use the JavaScript editor to validate the response code and return the code in the test output logs. The example below verifies a 2xx response code on the target URL (https://uinames.com/api/?ext).

function mablJavaScriptStep(mablInputs, callback) {
  // set the URL you want to test as the variable
  let url = 'https://uinames.com/api/?ext';
  // check for the status code while passing credentials to the target website
  fetch(url, {
   method: 'GET',
   credentials: 'include'
 }).then(apiResponse => {
    console.log(apiResponse);
    if (apiResponse.ok) {
      return callback(apiResponse.status);
    } else {
      throw new Error(`Unexpected response code of ${apiResponse.status} when retrieving ${url}`);
    }
  });
}

Assert an expected path in the URL

If you would like to verify that you ended up at the right path during a Journey you can use the custom JavaScript step to verify the path like so. If the path does not match the JavaScript step will fail and so will the Journey.

function mablJavaScriptStep(mablInputs, callback) {
  if (document.location.pathname === '/pricing') {
    callback('pricing path confirmed on page');
  } else {
    throw "incorrect path found on page: " + document.location.pathname;
  }
}