Getting Started

Create your first shareable demo in just a few minutes.

Step 1: Install the SDK

Add the Midstream Playwright plugin to your project:

npm install @midstream/playwright

Step 2: Add a Checkpoint

Add a checkpoint to one of your existing Playwright tests:

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

test("user dashboard", async ({ page }) => {
  await page.goto("/login");
  await page.fill('[name="email"]', "demo@example.com");
  await page.fill('[name="password"]', "password");
  await page.click('button[type="submit"]');

  // Wait for dashboard to load
  await page.waitForSelector("h1:has-text('Dashboard')");

  // Create a checkpoint here
  await midstreamCheckpoint(page, "user-dashboard", {
    name: "User Dashboard",
    description: "Logged in user viewing their dashboard",
  });
});

Step 3: Create Configuration

Add a midstream.json file to your project root:

{
  "install": "npm install",
  "start": "npm run dev",
  "test": "npx playwright test {{file}} -g {{grep}}"
}

Step 4: Push to GitHub

Commit your changes and push to a branch:

git add .
git commit -m "Add Midstream checkpoint"
git push origin feature/add-demo

Step 5: Open a Pull Request

Create a pull request on GitHub. When your tests run, Midstream will:

1. Detect the checkpoint in your test
2. Capture the application state
3. Comment on your PR with a demo link

Click the link to see your live demo!

Next Steps

• Add more checkpoints to key user journeys
• Set up CI integration for your team
• Explore the SDK Reference for advanced options