JS Methods & Tutorials

All HTML DOM element properties and methods should work with Preflight's JS step.

Properties and Methods

preflight.element

Access targeted element's properties and methods.

Make sure to target an element with selectors in your step before using element methods or properties.
// get the text content
var text = preflight.element.textContent;

// get the class name
var className = preflight.element.className;

preflight.error

You can throw your own custom exceptions with Preflight. Make sure to use return.

Keep in mind that this will stop the test from going further. If you don't want this to happen set your step as optional under Advanced Settings .
return preflight.error("No User ID");

preflight.networkCalls

You can check your network calls with Preflight like so:

let networkCall = preflight.networkCalls.find(d =>
d.url.indexOf("endpoint_url") > -1 &&
d.requestMethod == "POST");

if (networkCall.responseCode !== 401){
return preflight.error("Endpoint didn't return 401.");
}

Advanced Variables

Advanced variables allow you to use your variables in any other step after you have created one in a JS step:

var pathName = window.location.pathname;

//create a variable for later steps
preflight.variables.userID = pathName.split("/")[2];

//after you have created it you can use it
//in any later steps like so:
{{js.userID}}; 

You can use your advanced variables only in a single test or a single workflow.

{{checkpoint(n)}}

You can access your grabbed checkpoint values via JS. This will be a string type. Your first grabbed checkpoint value would be {{checkpoint(1)}}, and your second would be {{checkpoint(2)}} and so on.

Make sure your checkpoint is grabbed before moving on
var checkpoint = {{checkpoint(1)}};

{{common.variableName}}

You can access your Custom Variables via JS. This will be a string type.

var devPassword = {{common.devPassword}};

console.log()

You can use console.log() to log some actions. Your logs will show up under your video result in your gallery.

console.log('Hello world of testing!');

Tutorials

How to Handle Browser Confirm Dialog

A browser confirm dialog looks like something like this:

To overcome this create a JS Step before dialog is prompted and type this:

window.confirm = function(m) {return true;}

Advanced JS Checkpoint

It can be difficult to check for values when the value changes each test. An example would be a User ID. Now, if the User ID is in a different element or tag, you can grab that value with Checkpoints. But when there is always a preceding text before the actual value in the same element, such as:

User ID: usr_123456890

It gets difficult to grab the actual User ID. Let me explain further. Let's say there was a mistake somewhere so your web app did not output the User ID as it was supposed to. But since there is a preceding text regardless of the output, your element would look like this:

User ID:                                       

When it should have been:

User ID: usr_123456890

Therefore, since User ID is constantly changing, you can't detect the error by normal means. We can prevent this with a simple JS script:

// We expect 'User ID: ' each time
var expectedText = 'User ID: ';

// Get the text content of the element itself: 
var resultText = preflight.element.textContent;
//  resultText = User ID: usr_123456890

// We replace the expected text with nothing so we can focus
// on the User ID itself
resultText = resultText.replace(expectedText, '');
// resultText = usr_123456890

// Finally, we look at the text that is left to see if it
// contains 'usr_' to see if there is a User ID
if (resultText.indexOf('usr_') === -1 ){
    // If we don't find 'usr_' in the text then we throw an error
    return preflight.error("We didn't see User ID");
}

But hey, if your piece of unique text only contains letters, just numbers or the mix of two, without something such as usr_ above, and you are sure that there isn't going to be any other text you can use the example above except for the last part you should switch it out with something like this:

...

resultText = resultText.replace(expectedText, '');

// Get rid of whitespaces 
// This guarantees that there are only letters & numbers
resultText = resultText.replace(/\s+/g, '');

// Check the length of the text to see if there is anything
if (resultText.length <= 0){
    return preflight.error("We didn't see your unique text");
}

Hopefully, this helps you test even faster & more efficiently! We only cover the basics here. So if you need more help, don't be shy to send us a message and, we will help you out.

Updated at Fri, Nov 4, 2022