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.

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:

AssertionDescription
ExistsElement can be found on page
Not ExistsNo element can be found on the page
EqualsThe element attribute exactly matches the evaluated variable
Not EqualsThe element attribute can be found, and does not match the evaluated variable
ContainsThe element attribute contains the evaluated variable as a substring
Not ContainsThe element attribute value can be found, and does not contain the evaluated variable as a substring
MatchesThe evaluated variable is parsed as a regular expression, and matches the page element attribute
Not MatchesThe 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 DOM to the configuration provided in the custom action. If it does not match, the action fails.

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.

© 2021 Resilient Software Ltd