Recording

To-Dos Before Recording

Since we use your browser to record tests, sometimes it's hard to remember that these tests will run in the cloud without your state. Here are a few things to make sure tests will be successful when they run for the first time in the cloud.

So we need to clear the state you are in and make it the same as the cloud's state which is no state.

Log out on your web app
Clear cookies if you show any modals to the first time users
If you are going to record localhost, you'll need ngrok
Don't start recording inputs in a filled state

Starting the Recorder

In order to record tests, you need to install the chrome extension. Click here to install it.

The Preflight recorder works on any Chrome-based Browsers on any Operating System. It's super easy to record a test.

Preflight Chrome Extension Icon on Browser

There are two ways to start recording a test:

1. From Preflight's dashboard

On Preflight's Dashboard, you'll see buttons with + New Test. It'll open up and ask you to which URL to start the testing on.

New test button

When you type where you'd like to start your testing, the recorder will open the tab and start recording your actions.

Extension after clicking on New Test Button

After clicking on Start Test:

Extension Started Recording on YourWeb.App
If you haven't recorded your Login test, the extension will open your dashboard with a logged-in state. Make sure you cancel the recording and log out and then start recording your login test.

2. Start Recording on your Web App

You can start extension on your web application and start recording right away.

Preflight Chrome Extension Icon on Browser Preflight Extension after clicking on Extension Icon

Checking your values

Visual Checkpoint

To create a visual Checkpoint, hover over the flag symbol on your recorder and drag the visual checkpoint flag to your desired element. Preflight will check your image and let you know if the difference between the original and the result is too great. You can change the Max Allowed Difference % under Advanced Editor.

Text Checkpoint

To create a Text Checkpoint, hover over the flag symbol on your recorder and drag the text checkpoint flag to your desired element. Preflight will check your text and let you know if the difference between the original and the result is different. You can change your value under Advanced Editor.

Add Log-in flow

After you click Finish Test, you can choose to add a Log-in flow. Doing so will run your Login test prior to your new test so you don't have to re-record your login each time.

You can also add your Log-out flow. In order to do that, check here

Updated at Thu, Jan 20, 2022