Overview

Tests are sequences of browser interactions. These are defined in reflow's Web Interface.

The recording interface only works in chromium powered browsers. This includes both desktop and mobile variants of chrome.

Defining a new test

1. Once authenticated, click on the "New Test" button in the left navigation panel or at the top of the Test List dashboard
2. You will be asked to give 3 things:
   • A Test Name. This is used both to identify a test in the Test List dashboard, and to reference a test in the CLI. This should be unique.
   • A Test Description. This is an optional supplemental field to the test name, and rendered in the Test List dashboard as well as when viewing test runs.
   • A Starting URL. This is used to determine the starting page for the test. This can be parameterized later.
   • A Device Emulation Profile. This can be used to emulate a specific device (e.g. an iPad) whilst recording the test. This is an optional field, but important for tests which are designed to perform visual assertions in a specific device.
3. Click the "Begin Recording" button. This will launch a recording process.
4. In the cloud, if no other recording process is running, it may take up to one minute to start the recording process. A loading bar will demonstrate how long left.
5. Record Browser Interactions
   1. There are 3 panes -- on the left the Test pane, in the center the Browser pane, and on the right the Devtools pane. Each pane can be resized via dragging/dropping the seperator
   2. As you interact with the Browser pane, test actions will be recorded in the Test pane.
   3. Test actions can be edited and supplemented by interacting with the action in the Test pane.
   4. To record a custom action, click on the "Custom Action" button in the Test pane. This will open a custom action dialog. If the custom action depends on an Element (e.g. assertions, variable extraction), select the element in the Devtools pane element window. Once done, click "Add" to save the action.
6. Click the "Save Test" button.

Approve Auto Healing in a test

1. Navigate to the test run via clicking the test status, or via the "View History" button in the test action pane, then selecting the appropriate run status from the historical runs list.
2. Navigate to the test action to autoheal via the left hand side Test pane.
3. Inspect the "Element Expected" image. This was what was captured when the test was recorded (or last healed).
4. Inspect the "Element Actual" image. This is the current state of the element in this test run.
5. Click the "Auto Heal" button. This will open a dialog with the new selector layout and element image. Validate the change is as desired.
6. Click the "Confirm" button to update the test.

Default Variables

When a test action is parameterized, a set of default variables are requested to be entered. These are the variables used when the test is edited.

Default Device Emulation Profile

When a device is specified in the "Create Test" UI, the test recording UI will be appropriately configured with that device's details to emulate. However, the recording UI only runs on Chrome, not Safari or Firefox. As such, visual differences may be found between the initial recording and the first test run.

These visual differences come from rendering variations between different web browsers.

To alleviate this issue, on the first creation of such a test, configure all visual assertions to raise Warnings rather than errors. Then, when the test is executed for its first run, navigate to each of the raised visual assertions and approve the changes to the appropriate rendering from the desired browser.