recorder-exports.md

Use DevTools Recorder exports to run user flows

If you are not familiar with the Chrome Devtools Recorder, please make sure you are aware of the following content:

• Record, replay, and measure user flows
• Recorder features reference
• How to edit and extend user flows with Recorder and Puppeteer Replay

In this document we will learn:

• How to recode a user flow with chrome devtools recorder
• How to export it
• How to use it in @push-based/user-flow

Initial Setup

You can find information on how to do a basic setup in the docs.

We start with a basic setup of a user-flow.

import {
  UserFlowContext,
  UserFlowInteractionsFn,
  UserFlowProvider,
} from '@push-based/user-flow';

const interactions: UserFlowInteractionsFn = async (
  ctx: UserFlowContext
): Promise<any> => {
  const { flow, page, browser } = ctx;

  await flow.startTimespan({ name: 'Checkout order' });
  
  //... Interactions

  await flow.endTimespan();
};

export default {
  flowOptions: { name: "Order Coffee" },
  interactions,
} satisfies UserFlowProvider;

Using Recorder Replay files in Userflow

1. Use the Chrome Devtools Recorder to create a user-flow recording for a specific website.

2. Export the recording as a JSON file.

3. Store the json files in the related project e.g. under recordings

coffee-app-userflows
📦my-app
 ┣ ...
 ┣ 📂src 
 ┃  ┗ 📂my-app-user-flows
 ┃    ┣ ... 
 ┃    ┣ 📂user-flows 
 ┃    ┗ 📂recordings
 ┃      ┗ 📄recording.json
 ┗ 📜.user-flowrc.json

Using the file in your user-flow

To execute the replay recording you need to

• Create and runner over createUserFlowRunner inside a timespan
• Run the runner inside a timespan measurement

Create and runner over createUserFlowRunner inside a timespan

const interactions: UserFlowInteractionsFn = async (
  ctx: UserFlowContext
): Promise<any> => {
  // ...

  await flow.startTimespan({ name: 'Checkout order' });
  
  // Use the create function to instanciate a the user-flow runner.
  const runner = await createUserFlowRunner('./recordings/order-coffee.replay.json', ctx)
  await runner.run();

  await flow.endTimespan();
};

Run the runner inside a timespan measurement

Now you can execute it with npx @push-based/user-flow. You should see the browser opening a report.

Separating the recording into multiple timespan's

Now that we have a basic user flow running we can add actions to get more detailed information about the different interactions.

We can add the a set of @push-based/user-flow actions as simple object to the steps array:

The available types are:

• navigation
• startTimespan
• endTimespan
• snapshot

[
  { "type": "startTimespan" },
  { 
    "type": "click",
    ...
  },
  { "type": "endTimespan" },
  { "type": "snapshot" }
]

Now that we have added the timespans in the json we need to remove the surrounding timespans:

const interactions: UserFlowInteractionsFn = async (
  ctx: UserFlowContext
): Promise<any> => {

  const runner = await createUserFlowRunner('./recordings/order-coffee-2.replay.json', ctx);
  await runner.run();
};

Combine it with custom code

We can also pass additional options to each step, such as a name the report:

[
  { 
    "type": "startTimespan",
    "stepOptions": {
      "name": "Select coffee"
    }
  },
  { 
    "type": "click",
    ...
  },
  { "type": "endTimespan" },
]

Advanced architecture

Resources

• User-flow Replay Example

// Compare programmatic vs recorded

// TODO add resource link

---

made with ❤ by push-based.io