Installing Reflow
Reflow requires node.js installed on the machine it runs on. To install node.js, follow instructions at https://nodejs.org/en/download/. Reflowio is tested against node versions >=12
Once node.js is installed, use npm to install and invoke the reflow cli.
npm install -g reflowio
reflowio dashboard
If you're not using npm, you can use the cloud dashboard at app.reflow.io to view, edit and record new tests. Recording flows require a chromium based browser.
Usage
To get started, start the dashboard instance by running reflowio dashboard.
Once this is running, you can access the dashboard by navigating to http://localhost:3100. Create an account if you don't have one yet, or proceed to login.
Recording your first test
To record a test, click the 'Create Test' button. You will need to configure a name and starting URL, though these can be edited later.
After confirmation, you’ll see your starting URL load up on the center pane of the recording area. On the left hand side the Test Actions [1] are shown, along with the current Cursor [2]. On the right hand side, the chromium developer tools are mounted and connected to the page under test.
As you interact with the central pane, test actions will be recorded in the left hand pane. They can be edited (e.g. to convert a hard coded input into a variable or string template) by interacting with the action in the test pane. When recording a custom action, selecting an element in the developer tools pane will update the element selector in the custom action. If any action is created accidentally, it can be deleted via clicking on the test action to open it up, then clicking the Bin icon and accepting the confirmation.
The page can be refreshed without worry; test state is stored on the server. However, if you close the page and do not return within 2 minutes, the server will abandon the test and close the browser. Multiple users targetting the same server can open a given test at the same time, should they are authorized to view it by being in the same team. In this scenario, the recorded actions and video stream are syncronized between all users.
After you've set up all the desired steps, click the "Save" button at the bottom of the Test Action pane. Confirm the prompt to save the test.
[1] Test Actions are the steps recorded in the test. These can be viewed, edited, deleted, played until or jumped to using the various test action panes. Hover over each button to understand what it does.
[2] The cursor represents where new steps are recorded. Interaction with the center pane will cause a new Action to be created at the cursor location, and the cursor to step forward such that the new action is behind it. Additionally, custom actions, such as Wait, Assert, Extract Variable and Execute JavaScript can added at the current cursor position; please see the Test Actions documentation for more information.
Executing the test
Tests can be triggered as a Run by clicking the "Play" button in the test dashboard.
The most recent test can be viewed via clicking the test status in the test row. To view a historical test run, the history pane can be accessed in the test context menu.
The server will execute action-by-action, utilising and updating Test Variables as it completes.
Upon failure, a possible auto-healing step might be marked. For instance, if the test step failed due to a visual regression, reflow will offer a new screenshot that was captured in the most recent test run to heal the test with. Similarly, if the test failed because the element couldn't be found, but there appears to be an element similar to the original element, reflow will offer an auto-healing step which repairs the element selector.