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"
});
}
Updated about 2 months ago