From ee38ae78361ea09b2525e1ecee8d831f1a7134be Mon Sep 17 00:00:00 2001
From: emranemran <emran.mah@gmail.com>
Date: Mon, 20 Apr 2026 13:08:02 -0700
Subject: [PATCH 1/2] fix(e2e): update cloud-streaming test for graph-mode UI
 redesign
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The redesign in #886 replaced the streaming-first landing with a
Workflow/Perform toggle and removed the "Daydream Scope" heading the
test was polling for. The test has been dead since then.

Updates:
- Wait on the Perform-mode toggle appearing instead of the missing heading
- Explicitly switch to Perform mode before the cloud/pipeline/stream
  steps — default is now Workflow (graph mode) where those controls
  aren't rendered
- Find the cloud button by title attribute (covers all three states:
  "Connect to cloud", "Connecting to cloud...", "Cloud connected")
- Bump the cloud-connect timeout to 180s so fal cold-starts have room
- Verify frame flow by polling any <video> element rather than locating
  the old "Video Output" card wrapper
- Stop uses the start-stream-button toggle (PlayOverlay changes role
  when streaming) with a text-based fallback

Verified locally: full flow passes in ~3 minutes against a warm fal
deploy with the passthrough pipeline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: emranemran <emran.mah@gmail.com>
---
 e2e/tests/cloud-streaming.spec.ts | 197 ++++++++++++++++--------------
 1 file changed, 103 insertions(+), 94 deletions(-)

diff --git a/e2e/tests/cloud-streaming.spec.ts b/e2e/tests/cloud-streaming.spec.ts
index c7360f333..950b5359b 100644
--- a/e2e/tests/cloud-streaming.spec.ts
+++ b/e2e/tests/cloud-streaming.spec.ts
@@ -4,22 +4,29 @@ import { test, expect, Page } from "@playwright/test";
  * E2E tests for Scope cloud streaming via fal.ai.
  *
  * The app is started with:
- *   VITE_DAYDREAM_API_KEY=... → handles auth (shows as logged in)
- *   SCOPE_CLOUD_APP_ID=scope-pr-<N> → configures cloud endpoint
+ *   VITE_DAYDREAM_API_KEY=... → baked into the frontend, makes the app
+ *                              behave as signed-in so the cloud toggle
+ *                              is enabled
+ *   SCOPE_CLOUD_APP_ID=daydream/<app>/ws → points scope at a fal deploy
  *
- * These tests verify the full flow:
- * 1. App loads (already logged in via API key)
- * 2. Enable cloud mode
- * 3. Start a stream with the passthrough model
- * 4. Verify frames are being processed
+ * Flow:
+ * 1. App loads (already logged in via baked-in API key)
+ * 2. Switch to Perform mode (default is Workflow/graph mode after the
+ *    graph-mode redesign)
+ * 3. Toggle Remote Inference on from the settings dialog
+ * 4. Wait for cloud connection (Connection ID rendered)
+ * 5. Select the passthrough pipeline
+ * 6. Click the play overlay to start the stream
+ * 7. Verify the output <video> is actually playing
+ * 8. Stop the stream
  */
 
 test.describe("Cloud Streaming", () => {
   test("connects to cloud and runs passthrough stream", async ({ page }) => {
-    // Increase timeout for this test
-    test.setTimeout(180000); // 3 minutes
+    // Increase timeout for this test — cold-start on fal can take ~2min
+    test.setTimeout(240000);
 
-    // Mock the onboarding status API to skip onboarding in e2e tests
+    // Mock the onboarding status API to skip onboarding.
     await page.route("**/api/v1/onboarding/status", async (route) => {
       if (route.request().method() === "GET") {
         await route.fulfill({
@@ -32,31 +39,37 @@ test.describe("Cloud Streaming", () => {
       }
     });
 
-    // Navigate to the app (running at localhost:8000)
     await page.goto("/");
-    await expect(
-      page.getByRole("heading", { name: "Daydream Scope", exact: true })
-    ).toBeVisible({ timeout: 15000 });
+    await page.waitForLoadState("domcontentloaded");
 
-    // Take screenshot after initial load — app loads directly into the streaming interface
+    // App is loaded once the Workflow/Perform mode toggle is present.
+    const performToggle = page.locator('[aria-label="Perform Mode"]');
+    await expect(performToggle).toBeVisible({ timeout: 15000 });
     await page.screenshot({ path: "test-results/01-initial-load.png" });
 
-    // Step 1: Enable cloud mode (endpoint is pre-configured via SCOPE_CLOUD_APP_ID)
+    // Step 1: Switch to Perform mode. Default after the graph-mode
+    // redesign is Workflow; Perform is where the cloud toggle,
+    // pipeline selector, and start button live.
+    await performToggle.click();
+    await page.waitForTimeout(1000);
+    await page.screenshot({ path: "test-results/02-perform-mode.png" });
+
+    // Step 2: Enable cloud mode via settings dialog
     await enableCloudMode(page);
 
-    // Step 2: Wait for cloud connection
+    // Step 3: Wait for cloud connection (cold-start can be slow)
     await waitForCloudConnection(page);
 
-    // Step 3: Select passthrough model
+    // Step 4: Select passthrough pipeline
     await selectPassthroughModel(page);
 
-    // Step 4: Start streaming
+    // Step 5: Start streaming
     await startStream(page);
 
-    // Step 5: Verify frames are being processed
+    // Step 6: Verify frames are being processed
     await verifyStreamProcessing(page);
 
-    // Step 6: Stop stream
+    // Step 7: Stop stream
     await stopStream(page);
 
     console.log("✅ Cloud streaming test passed");
@@ -64,28 +77,31 @@ test.describe("Cloud Streaming", () => {
 });
 
 /**
- * Enable cloud mode by opening settings and toggling Remote Inference.
+ * Open settings via the cloud button in the header and toggle the
+ * Remote Inference switch on.
  */
 async function enableCloudMode(page: Page) {
   console.log("Enabling cloud mode...");
 
-  // Open settings dialog via the cloud icon in the header
-  const cloudIcon = page.locator('button[title*="cloud" i], button[title*="remote inference" i]');
-  await expect(cloudIcon).toBeVisible({ timeout: 10000 });
-  await cloudIcon.click();
-
+  // The cloud button in the header has title "Connect to cloud" (or
+  // "Cloud connected" once active). Match by title so we find it in
+  // any state.
+  const cloudButton = page.locator(
+    'button[title="Connect to cloud"], button[title="Cloud connected"], button[title="Connecting to cloud..."]'
+  );
+  await expect(cloudButton).toBeVisible({ timeout: 10000 });
+  await cloudButton.click();
+  await page.waitForTimeout(500);
   await page.screenshot({ path: "test-results/03-settings-opened.png" });
 
-  // Find the Remote Inference switch inside the settings dialog
+  // The Remote Inference switch lives inside the settings dialog's
+  // account tab.
   const cloudToggle = page.locator('[data-testid="cloud-toggle"]');
   await expect(cloudToggle).toBeVisible({ timeout: 10000 });
-
-  // Wait for the toggle to be enabled (auth may still be initializing)
   await expect(cloudToggle).toBeEnabled({ timeout: 30000 });
 
-  // Toggle on if not already enabled
-  const isEnabled = await cloudToggle.getAttribute("aria-checked");
-  if (isEnabled !== "true") {
+  const checked = await cloudToggle.getAttribute("aria-checked");
+  if (checked !== "true") {
     await cloudToggle.click();
     await expect(cloudToggle).toHaveAttribute("aria-checked", "true", {
       timeout: 10000,
@@ -93,83 +109,81 @@ async function enableCloudMode(page: Page) {
   }
 
   await page.screenshot({ path: "test-results/04-cloud-toggled.png" });
-  console.log("✅ Cloud mode enabled");
+  console.log("✅ Cloud mode toggled on");
 }
 
 /**
- * Wait for the cloud connection to be established.
- * The Connection ID element only appears when status.connected is true.
+ * Connection ID text only renders once `status.connected` is true.
+ * Cold starts on fal can take ~2 minutes.
  */
 async function waitForCloudConnection(page: Page) {
   console.log("Waiting for cloud connection...");
 
-  // The Connection ID text only renders when connected, so wait for it
   await expect(page.getByText(/connection id/i)).toBeVisible({
-    timeout: 120000,
+    timeout: 180000,
   });
-
   await page.screenshot({ path: "test-results/05-cloud-connected.png" });
   console.log("✅ Cloud connection established");
 
-  // Close the settings dialog
+  // Close the settings dialog so the Perform UI is fully interactive.
   await page.keyboard.press("Escape");
   await page.waitForTimeout(500);
 }
 
 /**
- * Select the passthrough pipeline in the Settings panel.
- * The pipeline selector is a Radix Select with heading "Pipeline ID".
+ * Select the passthrough pipeline from the Pipeline ID selector in
+ * the Settings panel (Perform mode).
  */
 async function selectPassthroughModel(page: Page) {
   console.log("Selecting passthrough model...");
 
-  // The pipeline selector trigger shows the current pipeline name.
-  // Find it via the "Pipeline ID" heading's sibling combobox.
-  const pipelineSection = page.locator("text=Pipeline ID").locator("..");
+  // "Pipeline ID" is an <h3>; its Radix <Select> trigger is the
+  // combobox in the same surrounding container.
+  const pipelineSection = page
+    .locator("h3")
+    .filter({ hasText: /^Pipeline ID$/ })
+    .locator("..");
   const selectTrigger = pipelineSection.getByRole("combobox");
 
   await expect(selectTrigger).toBeVisible({ timeout: 10000 });
   await selectTrigger.click();
 
-  // Wait for dropdown and select passthrough
   const passthroughOption = page.getByRole("option", {
     name: /passthrough/i,
   });
   await expect(passthroughOption).toBeVisible({ timeout: 5000 });
   await passthroughOption.click();
 
+  // Wait a moment for the pipeline to swap in the UI (loading state,
+  // config form refresh).
+  await page.waitForTimeout(1500);
   await page.screenshot({ path: "test-results/06-model-selected.png" });
   console.log("✅ Passthrough model selected");
 }
 
 /**
- * Start the video stream, retrying if the input video hasn't loaded yet.
- * If the play button is still visible after clicking (i.e. we didn't
- * transition to a connecting/loading state), try again.
+ * Start button is a PlayOverlay rendered with
+ * data-testid="start-stream-button". Retry a few times — the overlay
+ * can intercept clicks while the input video is still loading.
  */
 async function startStream(page: Page) {
   console.log("Starting stream...");
 
-  const startButton = page
-    .locator('[data-testid="start-stream-button"]')
-    .or(page.getByRole("button", { name: /start stream/i }));
+  const startButton = page.locator('[data-testid="start-stream-button"]');
 
   const MAX_ATTEMPTS = 5;
   for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
     await expect(startButton).toBeVisible({ timeout: 10000 });
     await startButton.click();
-
-    // Give the app a moment to react
     await page.waitForTimeout(2000);
 
-    // If the play button disappeared, the stream is starting
     const stillVisible = await startButton.isVisible().catch(() => false);
     if (!stillVisible) {
       break;
     }
 
     console.log(
-      `⚠️ Play button still visible after click (attempt ${attempt}/${MAX_ATTEMPTS}), retrying...`
+      `⚠️ Start button still visible after click (attempt ${attempt}/${MAX_ATTEMPTS}), retrying...`
     );
     await page.screenshot({
       path: `test-results/07-stream-retry-${attempt}.png`,
@@ -180,8 +194,6 @@ async function startStream(page: Page) {
         "Start stream button still visible after max retries — input video may not have loaded"
       );
     }
-
-    // Wait before retrying
     await page.waitForTimeout(3000);
   }
 
@@ -191,61 +203,58 @@ async function startStream(page: Page) {
 }
 
 /**
- * Verify that frames are being processed by the cloud.
- * The output video is inside the "Video Output" card and only renders
- * when a remoteStream is active.
+ * Verify a playing video appears. There's always 1 input <video> on
+ * the page; when the stream produces frames, a second output <video>
+ * appears. Poll until at least one <video> is actively playing.
  */
 async function verifyStreamProcessing(page: Page) {
   console.log("Verifying stream processing...");
 
-  // The output <video> element is inside the "Video Output" card
-  const outputCard = page.locator("text=Video Output").locator("../..");
-  const outputVideo = outputCard.locator("video");
-
-  // Wait for the video element to appear (stream needs to produce frames)
-  await expect(outputVideo).toBeVisible({ timeout: 30000 });
-
-  // Poll until the video is actually playing (may take a few seconds for
-  // WebRTC negotiation and first frame to arrive)
-  const MAX_WAIT_MS = 30000;
+  const MAX_WAIT_MS = 60000;
   const POLL_MS = 2000;
   const start = Date.now();
-  let isPlaying = false;
 
   while (Date.now() - start < MAX_WAIT_MS) {
-    isPlaying = await outputVideo.evaluate((el) => {
-      const v = el as HTMLVideoElement;
-      return !v.paused && v.readyState >= 2;
+    const playing = await page.evaluate(() => {
+      const vids = Array.from(
+        document.querySelectorAll("video")
+      ) as HTMLVideoElement[];
+      return vids.some(
+        (v) => !v.paused && v.readyState >= 2 && v.currentTime > 0
+      );
     });
-    if (isPlaying) break;
+    if (playing) {
+      await page.screenshot({ path: "test-results/08-frames-flowing.png" });
+      console.log("✅ Frames flowing");
+      return;
+    }
     await page.waitForTimeout(POLL_MS);
   }
 
-  await page.screenshot({ path: "test-results/08-stream-running.png" });
-
-  if (!isPlaying) {
-    throw new Error("Stream does not appear to be processing frames");
-  }
-
-  console.log("✅ Stream is processing frames");
+  await page.screenshot({ path: "test-results/08-no-frames.png" });
+  throw new Error(
+    `No playing video element after ${MAX_WAIT_MS}ms — frames not flowing`
+  );
 }
 
 /**
- * Stop the stream.
+ * Click the start-stream-button again to stop (it's a toggle — the
+ * PlayOverlay turns into a stop overlay when the stream is running),
+ * with a fallback to a button with a stop-like aria-label.
  */
 async function stopStream(page: Page) {
   console.log("Stopping stream...");
 
-  const stopButton = page
-    .getByRole("button", { name: /stop|end|pause/i })
-    .or(page.locator('[data-testid="stop-stream-button"]'));
-
-  if (await stopButton.isVisible({ timeout: 5000 }).catch(() => false)) {
-    await stopButton.click();
-    await page.waitForTimeout(1000);
-    await page.screenshot({ path: "test-results/09-stream-stopped.png" });
-    console.log("✅ Stream stopped");
+  const stopOverlay = page.locator('[data-testid="start-stream-button"]');
+  if (await stopOverlay.isVisible().catch(() => false)) {
+    await stopOverlay.click();
   } else {
-    console.log("⚠️ Stop button not found, stream may auto-stop");
+    const stopButton = page.getByRole("button", { name: /stop/i });
+    if (await stopButton.isVisible().catch(() => false)) {
+      await stopButton.click();
+    }
   }
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: "test-results/09-stream-stopped.png" });
+  console.log("✅ Stream stopped");
 }

From 2527830cf4408b056d369e6c4b624b6939e73726 Mon Sep 17 00:00:00 2001
From: emranemran <emran.mah@gmail.com>
Date: Mon, 20 Apr 2026 15:22:49 -0700
Subject: [PATCH 2/2] fix(e2e): actually exercise the livepeer trickle path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous iteration of this test false-positively passed. It polled
any <video> for playback, which always finds the local input preview
playing even when the browser↔local-scope WebRTC never completes and
no frames ever reach the cloud. The result: ClickHouse saw only
websocket_connected / pipeline_loaded / websocket_disconnected —
nothing that requires a real round-trip through the livepeer runner.

Two fixes:

1. Feed the browser a synthetic camera via
   --use-fake-device-for-media-stream (plus the Camera input toggle in
   the UI). This lets getUserMedia() succeed and a real WebRTC peer
   connection between browser and local scope complete end to end,
   which triggers CloudTrack._start() → LivepeerClient.start_media()
   and the "start_stream" trickle control message the runner needs.

2. Assert on the video inside the "Video Output" card, not any
   <video>. That element only renders when a remoteStream is set,
   so waiting on its visibility and currentTime > 0 is a true
   round-trip signal. After frames start flowing, idle 15s so
   stream_heartbeat events (~every 10s on the runner side) have
   a chance to fire.

Verified locally: test passes in ~2.8 min against scope-livepeer-emran
with passthrough. Full event set lands in ClickHouse when paired with
the parity PR (#969).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: emranemran <emran.mah@gmail.com>
---
 e2e/playwright.config.ts          | 15 +++++-
 e2e/tests/cloud-streaming.spec.ts | 86 ++++++++++++++++++++++++-------
 2 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 4913edc2d..44f694de5 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -29,9 +29,12 @@ export default defineConfig({
     // Longer timeout for cloud operations
     actionTimeout: 30000,
     navigationTimeout: 60000,
+    // Grant camera/mic so getUserMedia() succeeds without a UI prompt
+    // (the browser launch flags below provide a synthetic feed).
+    permissions: ["camera", "microphone"],
   },
   // Global timeout per test
-  timeout: 180000, // 3 minutes for cloud streaming tests
+  timeout: 300000, // 5 minutes (cold-start fal containers can run long)
   expect: {
     timeout: 30000,
   },
@@ -40,6 +43,16 @@ export default defineConfig({
       name: "chromium",
       use: {
         ...devices["Desktop Chrome"],
+        launchOptions: {
+          // Feed getUserMedia a synthetic video source so a real WebRTC
+          // peer connection can complete end-to-end — without these
+          // flags, headless Chromium has no camera and ICE stalls.
+          args: [
+            "--use-fake-device-for-media-stream",
+            "--use-fake-ui-for-media-stream",
+            "--auto-select-desktop-capture-source=fake",
+          ],
+        },
       },
     },
   ],
diff --git a/e2e/tests/cloud-streaming.spec.ts b/e2e/tests/cloud-streaming.spec.ts
index 950b5359b..e16ecb8a1 100644
--- a/e2e/tests/cloud-streaming.spec.ts
+++ b/e2e/tests/cloud-streaming.spec.ts
@@ -63,13 +63,24 @@ test.describe("Cloud Streaming", () => {
     // Step 4: Select passthrough pipeline
     await selectPassthroughModel(page);
 
-    // Step 5: Start streaming
+    // Step 5: Switch input source to Camera so getUserMedia() fires.
+    // Combined with the --use-fake-device-for-media-stream launch flag
+    // (see playwright.config.ts), this gives the browser a real
+    // MediaStreamTrack, which lets the browser↔local-scope WebRTC
+    // actually deliver frames — which is what triggers CloudTrack
+    // to call start_webrtc() and send the start_stream trickle
+    // message to the runner.
+    await selectCameraInput(page);
+
+    // Step 6: Start streaming
     await startStream(page);
 
-    // Step 6: Verify frames are being processed
-    await verifyStreamProcessing(page);
+    // Step 7: Verify the OUTPUT video is actually playing (frames
+    // round-tripped through the livepeer runner). Checking only
+    // "any video is playing" would false-positive on the input.
+    await verifyOutputStreamProcessing(page);
 
-    // Step 7: Stop stream
+    // Step 8: Stop stream
     await stopStream(page);
 
     console.log("✅ Cloud streaming test passed");
@@ -203,37 +214,72 @@ async function startStream(page: Page) {
 }
 
 /**
- * Verify a playing video appears. There's always 1 input <video> on
- * the page; when the stream produces frames, a second output <video>
- * appears. Poll until at least one <video> is actively playing.
+ * Switch the input source to Camera. Combined with the
+ * --use-fake-device-for-media-stream browser flag, this gives the
+ * browser a synthetic MediaStreamTrack via getUserMedia(), which is
+ * what enables a real WebRTC peer connection between the browser and
+ * local scope — the trigger for CloudTrack.start_webrtc() and the
+ * runner's start_stream control message in Livepeer mode.
  */
-async function verifyStreamProcessing(page: Page) {
-  console.log("Verifying stream processing...");
+async function selectCameraInput(page: Page) {
+  console.log("Switching input source to Camera...");
+  const cameraToggle = page.locator('[aria-label="Camera"]');
+  await expect(cameraToggle).toBeVisible({ timeout: 10000 });
+  await cameraToggle.click();
+  // Give the app a moment to request getUserMedia and attach the
+  // resulting stream to the input video element.
+  await page.waitForTimeout(2000);
+  await page.screenshot({ path: "test-results/06b-camera-selected.png" });
+  console.log("✅ Camera input selected");
+}
+
+/**
+ * Verify the *output* video inside the "Video Output" card is actually
+ * playing — i.e., frames round-tripped through the livepeer runner and
+ * came back to the browser. Checking any <video> would false-positive
+ * on the local input preview.
+ */
+async function verifyOutputStreamProcessing(page: Page) {
+  console.log("Verifying output stream processing...");
+
+  // The Video Output card owns the output <video>. The element is
+  // only rendered when `remoteStream` is set, so waiting for it to be
+  // visible implicitly waits for the stream to come up.
+  const outputCard = page
+    .locator("text=Video Output")
+    .locator("..")
+    .locator("..");
+  const outputVideo = outputCard.locator("video");
 
+  await expect(outputVideo).toBeVisible({ timeout: 120000 });
+  await page.screenshot({ path: "test-results/08a-output-rendered.png" });
+
+  // Poll until the output video is actually playing with a non-zero
+  // currentTime (frames arriving, not just the element attached).
   const MAX_WAIT_MS = 60000;
   const POLL_MS = 2000;
   const start = Date.now();
 
   while (Date.now() - start < MAX_WAIT_MS) {
-    const playing = await page.evaluate(() => {
-      const vids = Array.from(
-        document.querySelectorAll("video")
-      ) as HTMLVideoElement[];
-      return vids.some(
-        (v) => !v.paused && v.readyState >= 2 && v.currentTime > 0
-      );
+    const playing = await outputVideo.evaluate((el) => {
+      const v = el as HTMLVideoElement;
+      return !v.paused && v.readyState >= 2 && v.currentTime > 0;
     });
     if (playing) {
-      await page.screenshot({ path: "test-results/08-frames-flowing.png" });
-      console.log("✅ Frames flowing");
+      await page.screenshot({ path: "test-results/08b-frames-flowing.png" });
+      console.log("✅ Output frames flowing");
+      // Let the stream run briefly so stream_heartbeat events fire
+      // on the runner side (frame_processor.py:707 emits roughly
+      // every ~10s while the FrameProcessor is running).
+      await page.waitForTimeout(15000);
       return;
     }
     await page.waitForTimeout(POLL_MS);
   }
 
-  await page.screenshot({ path: "test-results/08-no-frames.png" });
+  await page.screenshot({ path: "test-results/08c-no-output-frames.png" });
   throw new Error(
-    `No playing video element after ${MAX_WAIT_MS}ms — frames not flowing`
+    `Output <video> element present but not playing after ${MAX_WAIT_MS}ms — frames not round-tripping`
   );
 }