Expressions and Variables

The Functionize Expression Builder makes adding variables to your tests quick and easy. You can quickly 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 bit 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 anywhere custom input is allowed within the test. For example, the value of an input action, the pre- or post-script code for a test, a selector override, or a verification override. Expressions are explicitly expected on a VerifyVariable action type and the code that gets executed to verify a variable. It 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. The variable 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.

The system has two scopes of variables: Local and Project. Local variables are only accessible within a single test. These are the most common type of variables when you want dynamic data for running the test, but you don't want parallel executions of that or other tests to interfere with the data. Project variables are accessible across all tests within that project. They are scoped to the project's environment.

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 must not have spaces and must be valid JavaScript names, accessible via the '.' notation for object access.

What is a Function?

A Function is one of the fundamental building blocks in JavaScript; a statement that returns specific output based on your input. 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 you:

// 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 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}}

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 our 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 run time.

Supported fields

Expressions are supported in the following locations

• Input text values
• Verification text
• Custom Code Actions
• Selector Override
• Outcome Override
• Prescript
• Postscript

Setting a Variable in Architect

Creating a new variable or editing a variable will create a SetVariable action in the test. This is 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 {x} button at the bottom of the Architect to open the Variables panel.
   
2. Click Add Variable to open the Expression Builder. Project Variables that have been created by you or a teammate within this Project, will be displayed in this 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. Project variables are global to the project so any other test may use or modify that variable at any time.
   
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. Learn about the provided Types below.
   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. Here we have selected "toUpperCase" which alters our Value entered above "tripod" to "TRIPOD" as seen in the Result section. Learn about the provided Operators below.
   
7. The Expression output can be unlocked to customize your expression beyond the provided Operators. Click the lock icon to edit. Click the icon again once finished to re-lock the expression.
   
8. When your Variable is complete, click Save.
   
9. Your new Local Variable is shown in the Variables panel list. Click the X in the upper left to close the Variables panel.
   
10. The SetVariable Action is listed in your test.
    

Using and Modifying Variables in Architect

From this point forward, the variable you've set can be used in different ways throughout your test. These options can be found by opening the Variables panel via the {x} button and then using the More 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. 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 expression and 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 set once.
• 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. 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", 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. 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. The copied text will display in the "Result" field of the 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 upper case.
• 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