Checkpoint API

The midstreamCheckpoint function captures the current state of your application, creating a shareable demo point.

Basic Usage

import { midstreamCheckpoint } from "@midstream/playwright";

await midstreamCheckpoint(page, "checkout-page", {
  name: "Checkout Page",
  description: "User is ready to complete purchase",
});

Parameters

page (required)

The Playwright Page object from your test.

slug (required)

A unique identifier for this checkpoint. Use kebab-case:

await midstreamCheckpoint(page, "user-dashboard");
await midstreamCheckpoint(page, "settings-privacy-tab");

options (optional)

Configuration options for the checkpoint:

Option	Type	Description
name	string	Human-readable name for the demo
description	string	Markdown description shown in the UI
folder	string	Organize checkpoints into folders

Organizing Checkpoints

Use folders to group related checkpoints:

// These appear under "Onboarding" in the dashboard
await midstreamCheckpoint(page, "welcome-screen", {
  name: "Welcome Screen",
  folder: "onboarding",
});

await midstreamCheckpoint(page, "profile-setup", {
  name: "Profile Setup",
  folder: "onboarding",
});

Best Practices

1. Choose meaningful slugs - They appear in URLs and should be descriptive
2. Add descriptions - Help your team understand what the demo shows
3. Use folders - Group related checkpoints for easier navigation
4. Place strategically - Add checkpoints at key user journey moments