Test Actions

Reflow will record most interactions with web pages automatically as that webpage is interacted with. These actions can be supplemented to allow tests to be driven by variables, and to provide assertions on page state.

Navigate

A test should always start with a navigation action. This action can be recorded by editing the navigation bar at the top of the recording pane to a hardcoded URL.

A recorded navigation action can be edited to use a Variable or String Template URL instead. This can be used to enable the test to be delineated by development environment. For example, the string template below would navigate the browser to localhost:8080 when ENVIRONMENT is configured as local, or for any other string such as staging it would navigate the browser to https://staging.myapp.com.

${ENVIRONMENT === "local" ? "http://localhost:8080" : `https://${ENVIRONMENT}.myapp.com`}

The navigate action will validate the provided input such that it produces a URL that is valid, and has protocol http or https. An invalid URL may cause the test to terminate prematurely.

Each action is limited to a maximum size of 400Kb. This (high) size limit can enable special authentication pathways for use in testing. For example, a common pattern for enabling Reflow to access an authenticated area of a site without passing through a CAPTCHA would be embedding a pre-signed JWT into the navigation URL as a query parameter, and having custom logic to use that JWT to authenticate the browser as a test user.

Click

Click actions are recorded by clicking any browser element. A click action can be recorded against a Selector, and an offset [x, y] vector from the top-left corner of the element. This enables click elements to be recorded against dynamic canvas elements.

Click / Drag

Click and drag actions are recorded by clicking and dragging a browser element a distance of at least 10 px. Click/Drag actions are very similar to click actions -- they start and finish at a recorded [x, y] offset to the clicked element.

Fill

A fill element is recorded by entering any text into a browser element. This action can be edited such that the text can be provided by a variable or string template (for example, using multiple variables or a random constant).

On replay, the browser will ensure that the element text value will match the recorded value. It does this in multiple stages, to try to handle most text entry scenarios:

1. Validate that such an entry is possible (such as asserting that the element is on the page, and not disabled).
2. Directly type the action text value using keyboard emulation, regardless of if the element is focused or not (this step is due to some element interactions directly using keyboard capture)
3. Should the element.value not match the expected text entry, it will directly replace it using JavaScript.
4. Validate that the element.value now matches the expected text entry.

Check / Uncheck

These actions are specialised for checkboxes, and have additional steps to just directly clicking the element. They are recorded upon a check/uncheck interaction with a checkbox or radio input.

On replay, the browser will:

1. Ensure that element is a checkbox or a radio input. If not, the action will fail. If the element is already in the expected state, no further action is taken.
2. Ensure the element is actionable (not animating, can receive events, enabled).
3. Emulate mouse input to click in the center of the element.
4. Wait for any navigation side-effect.
5. If no side effect, and the element still mounted, validate the checkbox is now appropriately checked or unchecked.

Reload Page

A Reload Page action is recorded by clicking the reload icon in the central pane. When replayed, it will complete after the new page has loaded (the window.onload event).

Press

A Press action is recorded on any single keyboard input, assuming there is no other keyboard event being captured. A press action will automatically transition to a Fill action if multiple keyboard events are captured.

When replayed, it emulates the keyboard pressing the same input as that which was recorded.

Select

A select action is recorded when a javascript input event is captured from a select element. Both the selected value and label are captured.

When replayed, the element with the same value is selected.

Wait

A wait action is possible for scenarios where an explicit wait is desired. Given element interactions utilize actionability checks, it is not expected to use the wait function unless an element interaction is expected to take over the minimum timeout (generally configured as 120s) to become actionable.

The wait action can be recorded and edited in the Custom Action menu.

Assert

An Assert action allows for explicit assertions to be set against element data. An assert can be configured in the Custom Action menu.

When creating an assert, select an element using the developer tools pane on the right hand side. Either select using the Elements page, or by using the Select-On-Page item and selecting an element in the recording pane in the top-left hand corner.

Assertions can be made between any element attribute, or on the inner text (node.textContent) of that element, and a variable, string template or hardcoded value.

Assertions operator:

Assertion	Description
Matches Visually	Element visually looks the same (SSIM +- 1%) as when the test was recorded
Exists	Element can be found on page
Not Exists	No element can be found on the page
Equals	The element attribute exactly matches the evaluated variable
Not Equals	The element attribute can be found, and does not match the evaluated variable
Contains	The element attribute contains the evaluated variable as a substring
Not Contains	The element attribute value can be found, and does not contain the evaluated variable as a substring
Matches	The evaluated variable is parsed as a regular expression, and matches the page element attribute
Not Matches	The evaluated variable is parsed as a regular expression, and does not match the page element attribute

When replaying, an assert action compares information in the replayed browser to the configuration provided in the custom action. If it does not match, and the assertion is configured to raise an error, the action fails and the test stops execution. An auto healing option will be automatically raised to fix failing visual assertions at a single click.

If the assertion is configured to only raise a warning, the test will continue. In this scenario, should the rest of the test continue successfully, the test will be marked with a WARNING status in the dashboard UI.

Extract Variable

An Extract Variable action can be used to update a variable using information that's stored in the page. It can be created in the custom action menu

When creating an extract variable action, select an element using the developer tools pane on the right hand side. Either select using the Elements page, or by using the Select-On-Page item and selecting an element in the recording pane in the top-left hand corner. The element in the custom action form will update as you do this.

Any element attribute, or the inner text (node.textContent) of that element can be captured.

When replaying, should the variable be referenced prior to the extract variable action execution, it will utilise the provided default value, or the empty string if nothing provided.

Execute Browser JavaScript

An Execute Browser JavaScript action can be used to execute arbitrary JavaScript in the browser. It can be created in the custom action menu.

This action is configured with TypeScript code, that will be compiled and executed in the browser.

This code can be anything, but must satisfy these constraints:

1. Must be valid TypeScript.
2. Must export a handler function that returns a Promise. The type of this should be (event: {variables: Record<string, string>}) => Promise<void>.
3. May contain a dependsOn array (string[]). This will be used to define variables that are passed into the function. For example export const dependsOn = ['darkMode']. When edited, click Test Execute to ensure the default values of these variables are prompted.

When editing, there is a Test Execute button. Click this to execute the code in the connected browser. Any console.log statements will be visible in the developer tools pane, and the result of the execution will be displayed in the bottom-left of the UI.

The code will be prefilled with type completion and examples of the handler and dependsOn array.

When replaying, the javascript will be executed in the browser, waiting for the returned promise before continuing. If the promise is rejected, the test will be failed.