JavaScript snippet examples

This guide highlights some examples of JavaScript snippets:

• Browser back
• Remove a value from a string
• Get CSS property of an element

If you need to work with dates, check out our guide on the GetDateComponents snippet: Working with dates in mabl. For even more examples, visit our public JavaScript repo.

Browser back

This snippet calls the browserBackButton function, which simulates hitting the back button in a browser window.

function mablJavaScriptStep(mablInputs, callback) {
  browserBackButton();
}

function browserBackButton() {
    setTimeout(function(){ window.history.back() }, 1000);
    callback(true);
}

Try it out

1. In the mabl Trainer, create a JavaScript step.
2. Copy and paste the code above into the code editor.
3. Save the snippet.
4. Click OK. When the snippet runs, it should cause the browser to return to the previous page.

Remove a value from a string

If you want to use a variable value that was extracted from a page element, but the value includes extra characters, you can use JavaScript to remove the characters you don't want.

For example:

• User ID 5489 can become 5489
• $45.87 can become 45.87

This snippet takes two parameters, which you'll need to add in manually: "string" and "remove_value":

• string: represents the full value
• remove_value: represents the characters in the string that you want to remove.

function mablJavaScriptStep(mablInputs, callback, remove_value = '$', string = '$1.97') {
  // Remove value from string
  string = string.replace(remove_value, "");
  // Return string 
  callback(string);
}

Try it out

Save the output of this snippet to a variable and then use the newly formatted variable value as needed in your test.

👍

Explain parameters in the description

Explaining how parameters work in the description input field can help other members of your workspace understand how to use the snippet.

Get CSS property of an element

This snippet returns the value of a CSS property for an element on the page. In order to use this snippet, you need to know how to identify elements with CSS or XPath.

The snippet takes two parameters:

• cssProperty: the specific property you want to return, such as "color"
• selector: a query that correctly identifies the element. You can use CSS or XPath. If you use XPath, your selector should start with "//" to work with this snippet.

function mablJavaScriptStep(mablInputs, callback, cssProperty = 'background-color', selector = 'div.buttons a.w-button') {
  // if the selector is XPath
  if (selector.startsWith("//")) {
    // call a function to get the element by XPath 
    var element = getElementByXpath(selector);
  } else {
    // if the selector is CSS, get the element from the DOM
    var element = document.querySelector(selector);
  }
  // Store the value of the element's CSS property in a variable called "value"
  let value = getComputedStyle(element).getPropertyValue(cssProperty);
  // return the value of the CSS property
  callback(value);
}

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

Asserting on the CSS property of an element

You can use this snippet to assert that the CSS property of a specific element matches a certain value. For example, you might want to assert that the color of this "Start Free Trial" button matches a certain value:

Before getting started, you need to get your parameters ready:

• Create a CSS or XPath query that properly identifies this element on the page. This will be the value for the "selector" parameter.
• Identify the CSS property that stores the value that you want to assert. For example, the color of the button is stored in the "background-color" attribute. This will be the value for the "cssProperty" parameter.

When you have your parameters ready, you can take the following steps:

1. Create a variable that stores the result of the Get CSS property of element snippet:

2. Create a variable assertion for trial_button_color.
   • Click on the check mark icon at the bottom of the mabl Trainer window.
   • Select Variable.
   • Choose the new variable - trial_button_color - from the dropdown.

3. Click OK.

Combined together, these two steps assert that the background color of the "Start Free Trial" button equals "rgb(198, 55, 183)":

Learn more

For more examples, visit our public JavaScript repo.