Skip to main content

Data manipulation with JavaScript snippets

Molly Exten
  • Updated

When creating tests for your application, you might realize that your testing data isn't in the right format. For example, maybe you have a user's full name, but you need to input their first and last name in separate input boxes. Or perhaps you want to validate that the math output in a table is correct, but the values on the page contain non-numerical characters.

To address this common testing challenge, you can use JavaScript. This article explains how to manipulate data with JavaScript snippets. Each step is accompanied by an example from a sample scenario to put the steps in context.

You can apply the actions in this workflow to other testing scenarios that require data manipulation, such as:

  • Removing or adding a currency symbol or comma from a price
  • Formatting a number for a different country
  • Generating and formatting dates
  • Replacing or removing text in strings, such as extracting IDs
  • Extracting values from JSON response bodies
Sample snippets

Check out the mabl JavaScript snippet GitHub repo for JavaScript examples that you can use in your tests.

Step 1: Store the raw data in a variable

Capture the raw data and store it in a variable. The method you use to capture this data depends on the source. If the raw data is on the page, create a new variable from an element property. If the raw data comes from the backend, use an API step or a database query step to get the data and store it in a variable.

In the sample scenario, the goal is to validate that the number of items displayed at the top of a page in an ecommerce app matches the actual number of items on the page. For example, if the page displays "(16 items)" at the top, there should be 16 items on the page.

main_page.png

The raw data is the text "(16 items)", and steps to store it in a variable are as follows:

  1. Click on the {x} > Create a variable.
  2. Set the variable source to "Element property".
  3. Give the variable a name, such as raw_value.
  4. Click OK.

get_raw_data.png

Storing the text "(16 items)" in a variable

Step 2: Use a snippet to manipulate the data

Reformat the data so that you can use it in subsequent steps. To accomplish this, create a variable using JavaScript. Write a new snippet that passes in the raw data as a parameter and outputs the data in the desired format. Run your snippet to make sure it works, and give the variable a name.

javascript_var.png

Create a variable using JavaScript

In the sample scenario, the task is to extract "16" from "(16 items)" and store it in a variable:

  1. Click on the {x} > Create a variable.
  2. Set the variable source to "JavaScript".
  3. Click New to create a new snippet.
  4. Add a parameter and use mabl variable syntax to set the default value to the variable that you created in the first step. In this example, the parameter is item_count and the default value is {{@raw_value}}.
  5. Write code to output your data in the desired format.
  6. Save the snippet.
  7. Give the variable a name - items.
  8. Click OK.

Here is an example that uses the extractNumbersFromString.js snippet from the mabl-javascript-snippets GiHub repo:

function mablJavaScriptStep(mablInputs, callback, item_count = '{{@raw_value}}') {
  const result = extractNumbersFromString(item_count);
  callback(result[0]);
}

/** Function from mabl-javascript-snippets GitHub Repo **
*
* Extracts all numbers found in the provided value
* @param {String} value - The string you want to extract numbers from
* @returns {Array<Number>} - Returns an array of all numbers found in "value"
*/
function extractNumbersFromString(value) {
  let matches = value.match(/\d+\.*\d*/g);
  return matches.map(Number);
}

Step 3: Use the manipulated data in subsequent steps

After you store the manipulated data in a new variable, use it in subsequent test steps to accomplish your testing goals. Use it for assertions, input values, Configure Find, or any other way that you can use variables in the mabl Trainer.

In the sample scenario, the goal is to validate that the value of the variable items, which was created in step 2, matches the number of items on the page. The steps to accomplish this require a custom find assertion:

  1. Click on the plus sign to add a new step.
  2. Select Find elements.
  3. Set the Find type to "Number of elements"
  4. Write a CSS query that counts the number of items for sale on the page.
  5. Set the Action to "Make assertion."

items_on_page.png

Using CSS to find the number of items for sale on the page

  1. On the next page, configure the assertion to compare the number of items for sale to the items variable created in step 2.
  2. Click OK to create the assertion.

custom_assertion.png

Comparing the total number of items for sale to the variable items

 

Learn more

For more information on the topics highlighted in this workflow, check out the following articles:

Related articles