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 input value of an input action, the prehook or posthook 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 similar 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.

In the system, there are two scopes of variables: Local and Project. Local variables are only accessible within the test. These are the most common type of variable when you want dynamic data in a test, but you don't want parallel executions of the tests, or other tests to interfere with the data. Project variables are accessible across 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 which 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.actions('1234124515534_ABCDEFG6KM').url}}
{{fze.actions('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 have the ability to 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.

variables.gif

Expression Builder

Although expressions can be manually entered throughout the system, we have provided expression builders to quickly build more complex expressions within Architect or the Web Application. 

Supported fields

Expressions are supported in the following locations

  • Input text values
  • Verification text
  • JS Override
  • 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.
    AV1.png
  2. Existing variables will display in this panel grouped by Project or Local. Click Add Variable to open the Expression Builder.
    ARCvar2.png
  3. Enter the Name for your variable. In this example we will use "searchCriteria" AV2.png
  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.
    AV3.png
  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.
    AV4.png
  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.
    AV5.png
  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.
    AV7.png
  8. When your Variable is complete, click Save.
    AV6.png
  9. Your new Local Variable is shown in the Variables panel list. Click the X in the upper left to close the Variables panel.
    AV8.png
  10. The SetVariable Action is listed in your test.
    AV12.png

 

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. 
AV10.png

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 with 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 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 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 lower case.
  • 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'}}

EmailVariable.png

 

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

Variables in the Slider View

When a variable is used within a test, the test result footer will show the current state of all stored variables in the system. 

mceclip0.png

Because variables are stored and verified against using expressions, the expression builder and variables will always show more details about how they are stored and evaluated against, with JS Custom Script Evaluations. If there is an error in syntax if the expression has been customized or the value is unexpected, it will display within the step so updates can be made as needed.