JavaScript snippet examples

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);
}

Assert an expected path in the URL

If you would like to verify that you ended up at the right path during a test, 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 test.

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

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" test. 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).

📘

mabl API Step for Validating 2xx response code and API requests

If you want to validate a 2xx response code or make API calls, you can use the following JavaScript.

If you are an enterprise or trial customer, you have the ability to create and use mabl API Steps.

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 Error(`Unexpected response code of ${apiResponse.status} when retrieving ${url}`);
    }
  });
}

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"
  });
}

Did this page help you?