Expressions and Variables Overview

The Functionize Expression Builder makes adding Variables to your tests quick and easy. You can swiftly insert a variety of data, and our app will do the heavy lifting! Variables open up the ability to test your site more thoroughly by allowing dynamic data for each execution.

What is an Expression?

Functionize defines an Expression as an executable piece of JavaScript code encased in double curly {{ }} brackets. For example:

{{console.log('Hello World!')}} 

This will log 'Hello World' into your JavaScript console at runtime. Expressions can be used wherever custom input is allowed within the test. For example, in the value of an Input Action, in the Pre- or Post-Script code for a test, in a Selector Override, or in a Verification Override. Expressions are explicitly expected in a VerifyVariable Action and contain the code that gets executed to verify a variable. They will behave similarly to a Custom JS Action, passing or failing the step based on the response.

What is a Variable?

A Variable, at its most basic, is something that stands in to represent other data. It stands in where you have a piece of data that can be changed for various testing purposes. Variables can be used in place of site credentials, order numbers, cookies, and more.

Scope of Variables

The scope of a Variable determines where it can be referenced. It defines the portion of the program where the variable is valid and accessible.

Here are some common types of variable scope:

1. Local Variables: Variables with local scope are declared within a test case, they are only accessible within a single test and are typically used for temporary storage, these are the most common types of variables for dynamic data when running the test, but you don't want parallel executions of that or other tests to interfere with the data

2. Project Variables: Variables with project scope are declared at the project, global level, they are accessible from anywhere within the project, making them available across all tests within that Project Environment

3. TDM Variables: Variables that provide the capability of passing variables when using TDM Data Sources

Note: Details on the 3 Variables can be found here.

Variables are accessed or set within Expressions as an object called fze.local or fze.project respectively. For example, if you would like to use a project variable to set an email when entering the email, the input value will be:

{{fze.project.yourEmailVariableName}}

Variables cannot have spaces and must be valid JavaScript names, accessible via the '.' notation for object access.

Types of Variables:

• Value: This essentially 'hard-codes' a string to be used in the variable during test execution, whatever value is set by the user gets passed into the variable
  
  
• Previous Action: The Previous Action takes an attribute from a previous test action, as defined by the user at the time of Variable creation, and passes it into the variable, if the attribute from the previous action is dynamic in nature, it will populate the variable with the dynamic value during test execution
  
  
• Cookies Variable: The Functionize cookies variable works as data that a website stores on a user's computer or mobile device through their web browser - Cookies are widely used on the internet to store user preferences, login information, shopping cart items, and other data related to the user's interactions with the website - Functionize can store this cookie data via the Cookies variable to be used with test execution
  
  
• HTML Storage Variable: The HTML storage variable, often referred to as 'Web Storage,' is a web browser feature that allows websites to store data locally on a user's device - it provides a way for web applications to store data persistently across sessions, meaning the data will be retained even if the user closes and reopens the browser or navigates away from the page and Functionize can capture this data via an HTML Storage variable to be used during test execution
  
  
• Page Variable: Typically refers to a variable in the context of web development and programming that stores information specific to a particular page of a website that can be used to hold data or settings related to the content, layout, or functionality of that specific webpage - Developers often use page variables to dynamically manage and control aspects of a webpage, allowing for more flexibility and customization in the behavior and presentation of different pages within a website and Functionize can capture any of this data stored in Page Variables to be used during test execution
  
  
• Resource Variable: Typically used to validate network calls that a page makes and to verify that it loads as expected, for example verify that all network calls are loading as expected and Functionize is able to capture details from these Resource Variables as part of a test execution
  
  
• Clipboard: This refers to a temporary storage area provided by the browser or the operating system where users can temporarily store copied data that could include text, images, or other types of content - Web Developers may use these capabilities to enhance user interactions on a website, such as allowing users to copy specific content with a button click and then storing that clipboard content in a variable, Functionize can use it during test execution
  
  
• Custom Expression: The Functionize Custom Expression Variable is a programming concept used in various applications, frameworks, and languages that enables Web Developers to define custom expressions or functions that can be evaluated at runtime to produce a value, which can then be used during test execution
• Environment Configuration: Environment Configuration in Functionize allows users to define and manage the environments in which their tests will be executed. These environments can represent different stages of the development lifecycle, such as development, staging, production, or custom setups. Proper configuration ensures that tests run in the correct context, providing accurate and meaningful results. 

What is a Function?

A Function is a reusable block of code that performs a specific task or set of tasks and can take in parameters, execute a series of statements, and return a value. We use functions to allow access to certain types of data via predefined methods. In the fze object, in addition to variables, a set of functions are available to users, as follows:

The following are custom Functionize functions
fze.action([action_id]).[attribute]    // allows you to access previously executed actions' data
fze.cookie([cookie_name]).[attribute]  // allows you to access cookie values by name
fze.clipboard()                        // allows you to access current clipboard contents
fze.resource[[url].[attribute]         // allows you to access resource network traffic

The following are supported natively via JavaScript
localStorage.getItem('storage_name')    // allows you to access HTML5 storage data
document.[attribute]                    // page variable (JavaScript data) access

Examples:
Previous Action
{{fze.action('1234124515534_ABCDEFG6KM').url}}
{{fze.action('1642169353534_QWAKSM66KM').positionX}}

Cookie Value
{{fze.cookie('cookieName')}}
{{fze.cookie('google_tracker')}}

Clipboard
{{fze.clipboard}}

HTML5 Storage
{{localStorage.getItem('my_html5_name')}}

Page Variable
{{document.URL}}
{{document.title}}

Resource Variable
{{fze.resource['wikipedia.org/logo.jpg'].method}}

Environment Configuration Variable
{{fze.env.name}}

Live JavaScript Evaluation

Our Variable Expressions are robust snippets of JavaScript code. Each custom expression is evaluated in the JavaScript on the web page, giving you access to test other functions on your website within the expressions you build. With the help of the Functionize Expression Builder, you can truly customize these variables. In most scenarios, we will try to evaluate the expression while you're creating the test so you can see exactly how it will behave at execution time. For certain scenarios, we may not evaluate the code during test creation, but you can run the test with the {{ }} expression syntax to validate it at runtime.

 

Supported Fields

Functionize Expressions are supported in the following locations:

• Input Text Values
• Verification Text
• Custom Code Actions
• Selector Override
• Outcome Override
• Pre-Script
• Post- Script
  

Setting a Variable in Architect

Creating a new Variable or editing a Variable will generate a SetVariable Action in the test. This is done so that these values are set at that moment in time, similar to how they would be set in a line of code.

1. Click the Variables button at the bottom of the Architect to open the Variables panel
   
   
   
2. Click Add Variable to open the Expression Builder sidebar panel, Project Variables that have been created by you or a teammate within this Project, will be displayed in the Variables panel
   
   
   
3. Enter the Name for your variable, in this example, we will use 'searchCriteria'
   
   
   
4. Select the Scope of the Variable: Local or Project - Local Variables exist within the confines of a single test, they must be created and set during test recording to be used at any point in the test case and Project Variables are global to the project, so any other test may use or modify that variable
   
   
   
5. Select the Type of function you will use to help define your Variable, in this example, we will use Value for a predefined number or string
   Note: Different Variable Types will open subsequent fields to enter or select the necessary information.
   
   
   
6. Select an Operator to perform on your data, if applicable, for example, here we have selected ToUpperCase, which alters our value entered above, 'Tripod' to 'TRIPOD' as seen in the Result section - see below to learn about the provided Operators
   
   
   
7. The Expression field can be unlocked to customize your expression beyond the provided operators, click the lock icon to edit the Expression and click the icon again once finished to re-lock the Expression
   
   
   
8. When your Variable is setup, click Save
   
   
   
9. Your new Local Variable is shown in the Variables panel list and click the X in the upper-left to close the Variables panel
   
   
   
10. The SetVariable Action is now a step in your test
    

Using and Modifying Variables in Architect

From this point forward, the Variable you've setup can be used in different ways throughout your test. These options can be found by opening the Variables panel via the button and then using the Action button for the specific variable.

• Insert Value: Enters the Value of the expression into a selected input field
• View Expression: Make changes to your Expression directly without the Expression Builder
• Copy Expression: Copy the Expression to the clipboard and when pasted into an input field, the Expression is evaluated in the JavaScript on the site
• Edit: Opens the Expression Builder to make changes to the Variable
• Verify Value: Opens a modified version of the Expression Builder to create a verification of the variable value - this can be added as a special Verify Action into your test
• Delete: Delete the Variable

Available Variable Types

• Value: Input a specific number or string to be hard coded
• Previous Action: Actions that have already been recorded in Architect can be selected for use as a Variable, a drop-down menu will appear with the steps that are available to select 
• Cookie: A drop-down menu will display the Cookies that are available to select, once a Cookie has been selected, a drop-down menu of available Properties for that Cookie will display and finally once the Property has been selected, the value of the said property will display in the Result field
• HTML Storage: A drop-down menu of available Local Storage keys will display
• Page Variable: Enter a local page JavaScript Variable such as 'location' or 'window' and then select the desired Attribute from the menu
• Resource Variable: A drop-down menu will display Resources attached to a page, such as images, stylesheets, icons, etc and once the Resource is selected, the specific Header can be selected to be used for verification, such as with a specific image
• Clipboard: Creates an Expression based on the text you have selected and copied and the copied text will display in the Result field of the Expression Builder
• Custom Expression: Write your own custom JS Expression including predefined JS Functions, Regular Expressions, common Operators, and more - follow the expression syntax as specified earlier in this document

Available Operator Functions

• SubString: Select a string of a certain amount of characters from the given value
• ToLowerCase: Transform all letters in the value to lowercase
• ToUpperCase: Transform all letters in the value to uppercase
• Extract Numbers: Return all the digits in the value without spaces or other characters
• Extract Float: Return the digits in the value between the first character, whatever the type: alpha, numeric, punctuation and the first or next character of punctuation
• Regex: Use Regular Expression patterns to pull different results from the value

Use Cases

Here are some examples of Expressions for different testing purposes.

// Update your total count of orders in a variable by adding 1 to an existing variable
{{fze.local.orderCount = fze.local.orderCount + 1}}

// Combine existing variables to create specific user emails
{{fze.local.email = fze.local.firstName + '@functionizeapp.com'}}

 

// Set a variable to hold information from an Action recorded earlier in your test
// Select the Previous Action type, select the step, and then select the step attribute
{{fze.local.navigate = fze.action('1645900301653_IYI9Y5RRPM').url}}

// Result: https://www.amazon.co.uk/

// Store the entire value, or use an Operator function to set a specific part of the value
{{fze.local.detection = fze.cookie('session-id')}}

// Result: 261-9164342-6884424

{{fze.local.detection = fze.cookie('session-id').substring(0,4)}}
// Result: abcd