feat(e2e): add UI badge assertions + 5 new parallel CI matrix entries (#1041)

rgbkrk · web-flow · commit ef2efce49f77 · 2026-03-21T14:50:46.000-07:00
Add data-testid and data-env-manager/data-kernel-status attributes to
NotebookToolbar for E2E assertions. Each fixture spec now verifies:

- Runtime badge (Python/Deno) appears in toolbar
- Env manager badge (UV/conda) appears after kernel launch
- Trust dialog elements are present before approval

New CI matrix entries (parallel runners):
- UV Inline Deps (uv:inline + trust dialog)
- Conda Inline Deps (conda:inline + trust dialog)
- Trust Dialog (dismiss behavior)
- UV Pyproject (project file detection)

All 5 fixture specs updated to use setCellSource + button click
pattern for WebDriver plugin compatibility.

Note: prewarmed-uv badge assertion uses waitUntil polling since
env-manager syncs from RuntimeStateDoc after kernel launch.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -453,6 +453,30 @@ jobs:
             uv_pool: 0
             conda_pool: 0
             timeout: 8
+          - name: UV Inline Deps
+            spec: "e2e/specs/uv-inline.spec.js"
+            notebook: "crates/notebook/fixtures/audit-test/2-uv-inline.ipynb"
+            uv_pool: 3
+            conda_pool: 0
+            timeout: 12
+          - name: Conda Inline Deps
+            spec: "e2e/specs/conda-inline.spec.js"
+            notebook: "crates/notebook/fixtures/audit-test/3-conda-inline.ipynb"
+            uv_pool: 0
+            conda_pool: 3
+            timeout: 15
+          - name: Trust Dialog
+            spec: "e2e/specs/trust-dialog-dismiss.spec.js"
+            notebook: "crates/notebook/fixtures/audit-test/2-uv-inline.ipynb"
+            uv_pool: 3
+            conda_pool: 0
+            timeout: 12
+          - name: UV Pyproject
+            spec: "e2e/specs/uv-pyproject.spec.js"
+            notebook: "crates/notebook/fixtures/audit-test/pyproject-project/5-pyproject.ipynb"
+            uv_pool: 3
+            conda_pool: 0
+            timeout: 12
     steps:
       - uses: actions/checkout@v6
 
diff --git a/apps/notebook/src/components/NotebookToolbar.tsx b/apps/notebook/src/components/NotebookToolbar.tsx
@@ -261,6 +261,7 @@ export function NotebookToolbar({
             onClick={onToggleDependencies}
             data-testid="deps-toggle"
             data-runtime={runtime}
+            data-env-manager={envManager || undefined}
             className={cn(
               "flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors",
               runtime === "deno"
@@ -311,6 +312,8 @@ export function NotebookToolbar({
           role="status"
           aria-label={`Kernel: ${kernelStatusDescription}`}
           title={envErrorMessage ? undefined : kernelStatusTooltip}
+          data-testid="kernel-status"
+          data-kernel-status={kernelStatus}
         >
           <div
             className={cn(
diff --git a/crates/notebook/fixtures/audit-test/1-vanilla.ipynb b/crates/notebook/fixtures/audit-test/1-vanilla.ipynb
@@ -1,27 +1,35 @@
 {
-  "metadata": {},
   "nbformat": 4,
   "nbformat_minor": 5,
+  "metadata": {
+    "runt": {
+      "schema_version": "1"
+    }
+  },
   "cells": [
     {
-      "cell_type": "code",
       "id": "8b5de5f8-9d57-4008-9c3e-349dc0904a90",
-      "metadata": {},
-      "execution_count": null,
+      "cell_type": "code",
       "source": [
-        "import sys\n",
-        "\n",
-        "print(sys.executable)  # edited!"
+        "import sys; print(sys.executable)"
+      ],
+      "metadata": {},
+      "outputs": [
+        {
+          "output_type": "stream",
+          "name": "stdout",
+          "text": "/Users/kylekelley/.cache/uv/builds-v0/.tmprecQOX/bin/python\n"
+        }
       ],
-      "outputs": []
+      "execution_count": 1
     },
     {
-      "cell_type": "code",
       "id": "d8535959-759a-4c53-af14-bfcb0e4a3345",
-      "metadata": {},
-      "execution_count": null,
+      "cell_type": "code",
       "source": [],
-      "outputs": []
+      "metadata": {},
+      "outputs": [],
+      "execution_count": null
     }
   ]
 }
diff --git a/e2e/specs/conda-inline.spec.js b/e2e/specs/conda-inline.spec.js
@@ -5,62 +5,121 @@
  * environment with those deps installed (via rattler, not the prewarmed pool).
  *
  * Fixture: 3-conda-inline.ipynb (has markupsafe dependency via conda)
+ *
+ * Updated to use setCellSource + explicit button clicks for compatibility
+ * with tauri-plugin-webdriver (synthetic keyboard events don't work).
  */
 
 import { browser } from "@wdio/globals";
 import {
   approveTrustDialog,
-  executeFirstCell,
-  typeSlowly,
+  setCellSource,
   waitForCellOutput,
   waitForKernelReady,
+  waitForNotebookSynced,
 } from "../helpers.js";
 
 describe("Conda Inline Dependencies", () => {
   it("should auto-launch kernel (may need trust approval)", async () => {
-    // Wait for kernel or trust dialog (120s for first startup + conda env creation)
-    await waitForKernelReady(180000);
+    console.log("[conda-inline] Waiting for kernel ready (up to 300s)...");
+    // Wait for kernel or trust dialog (300s for first startup + conda env creation)
+    await waitForKernelReady(300000);
+    console.log("[conda-inline] Kernel is ready");
+  });
+
+  it("should show conda badge in toolbar", async () => {
+    const depsToggle = await $('[data-testid="deps-toggle"]');
+    await depsToggle.waitForExist({ timeout: 10000 });
+
+    // env-manager syncs from RuntimeStateDoc after kernel launch — poll for it
+    await browser.waitUntil(
+      async () => {
+        const mgr = await depsToggle.getAttribute("data-env-manager");
+        return mgr === "conda";
+      },
+      {
+        timeout: 30000,
+        interval: 500,
+        timeoutMsg: "Expected conda badge never appeared",
+      },
+    );
+
+    expect(await depsToggle.getAttribute("data-env-manager")).toBe("conda");
+    expect(await depsToggle.getAttribute("data-runtime")).toBe("python");
+    console.log("[conda-inline] Conda badge verified in toolbar");
   });
 
   it("should have inline deps available after trust", async () => {
-    // Execute the first cell (prints sys.executable)
-    const cell = await executeFirstCell();
+    console.log("[conda-inline] Waiting for notebook to sync...");
+    await waitForNotebookSynced();
+
+    // Find the first code cell
+    const codeCell = await $('[data-cell-type="code"]');
+    await codeCell.waitForExist({ timeout: 10000 });
+    console.log("[conda-inline] Found first code cell");
+
+    // Set the cell source via CodeMirror dispatch (bypasses keyboard events)
+    await setCellSource(codeCell, "import sys; print(sys.executable)");
+    console.log("[conda-inline] Set cell source via setCellSource");
+
+    // Click the execute button
+    const executeButton = await codeCell.$('[data-testid="execute-button"]');
+    await executeButton.waitForClickable({ timeout: 5000 });
+    await executeButton.click();
+    console.log("[conda-inline] Clicked execute button");
 
     // May need to approve trust dialog for inline deps
     const approved = await approveTrustDialog(15000);
     if (approved) {
+      console.log(
+        "[conda-inline] Trust dialog approved, waiting for kernel restart...",
+      );
       // If trust dialog appeared, wait for kernel to restart with deps
-      await waitForKernelReady(180000);
-      // Re-execute after kernel restart
-      await browser.keys(["Shift", "Enter"]);
+      await waitForKernelReady(300000);
+      console.log("[conda-inline] Kernel restarted after trust approval");
+
+      // Re-execute after kernel restart by clicking the button again
+      const reExecuteButton = await codeCell.$(
+        '[data-testid="execute-button"]',
+      );
+      await reExecuteButton.waitForClickable({ timeout: 5000 });
+      await reExecuteButton.click();
+      console.log("[conda-inline] Re-executed cell after kernel restart");
     }
 
     // Wait for output
-    const output = await waitForCellOutput(cell, 120000);
+    const output = await waitForCellOutput(codeCell, 120000);
+    console.log(`[conda-inline] Cell output: ${output}`);
 
     // Should be a cached conda inline env (conda-inline-* path)
     expect(output).toContain("conda-inline-");
   });
 
   it("should be able to import inline dependency", async () => {
-    // Find a cell and type import test
+    // Find the cells — use a second cell if available, otherwise the first
     const cells = await $$('[data-cell-type="code"]');
     const cell = cells.length > 1 ? cells[1] : cells[0];
+    console.log(
+      `[conda-inline] Using cell index ${cells.length > 1 ? 1 : 0} for import test`,
+    );
 
-    const editor = await cell.$('.cm-content[contenteditable="true"]');
-    await editor.click();
-    await browser.pause(200);
+    // Set the cell source directly via CodeMirror dispatch
+    await setCellSource(
+      cell,
+      "import markupsafe; print(markupsafe.__version__)",
+    );
+    console.log("[conda-inline] Set import test source via setCellSource");
 
-    // Select all and type import
-    const modKey = process.platform === "darwin" ? "Meta" : "Control";
-    await browser.keys([modKey, "a"]);
-    await browser.pause(100);
-
-    await typeSlowly("import markupsafe; print(markupsafe.__version__)");
-    await browser.keys(["Shift", "Enter"]);
+    // Click the execute button
+    const executeButton = await cell.$('[data-testid="execute-button"]');
+    await executeButton.waitForClickable({ timeout: 5000 });
+    await executeButton.click();
+    console.log("[conda-inline] Clicked execute button for import test");
 
     // Wait for version output
     const output = await waitForCellOutput(cell, 30000);
+    console.log(`[conda-inline] Import test output: ${output}`);
+
     // Should show a version number (e.g., "1.26.4")
     expect(output).toMatch(/^\d+\.\d+/);
   });
diff --git a/e2e/specs/deno.spec.js b/e2e/specs/deno.spec.js
@@ -24,6 +24,12 @@ describe("Deno Kernel", () => {
     await waitForKernelReady(300000);
   });
 
+  it("should show Deno runtime in toolbar", async () => {
+    const depsToggle = await $('[data-testid="deps-toggle"]');
+    await depsToggle.waitForExist({ timeout: 10000 });
+    expect(await depsToggle.getAttribute("data-runtime")).toBe("deno");
+  });
+
   it("should execute TypeScript and show output", async () => {
     await waitForNotebookSynced();
 
diff --git a/e2e/specs/prewarmed-uv.spec.js b/e2e/specs/prewarmed-uv.spec.js
@@ -26,6 +26,28 @@ describe("Prewarmed Environment Pool", () => {
     await waitForKernelReady(300000);
   });
 
+  it("should show Python runtime with UV badge", async () => {
+    const depsToggle = await $('[data-testid="deps-toggle"]');
+    await depsToggle.waitForExist({ timeout: 10000 });
+    expect(await depsToggle.getAttribute("data-runtime")).toBe("python");
+
+    // env-manager syncs from RuntimeStateDoc after kernel launch — poll for it
+    await browser.waitUntil(
+      async () => {
+        const mgr = await depsToggle.getAttribute("data-env-manager");
+        return mgr === "uv";
+      },
+      {
+        timeout: 30000,
+        interval: 500,
+        timeoutMsg: "UV badge never appeared on deps toggle",
+      },
+    );
+    const envManager = await depsToggle.getAttribute("data-env-manager");
+    console.log(`[prewarmed-uv] env-manager: ${envManager}`);
+    expect(envManager).toBe("uv");
+  });
+
   it("should execute code and show managed env path", async () => {
     await waitForNotebookSynced();
 
diff --git a/e2e/specs/trust-dialog-dismiss.spec.js b/e2e/specs/trust-dialog-dismiss.spec.js
@@ -11,20 +11,37 @@
 
 import { browser, expect } from "@wdio/globals";
 import {
-  executeFirstCell,
   getKernelStatus,
+  setCellSource,
   waitForAppReady,
+  waitForNotebookSynced,
 } from "../helpers.js";
 
 describe("Trust Dialog Dismiss", () => {
   before(async () => {
     await waitForAppReady();
+    console.log("[trust-dialog-dismiss] App ready");
   });
 
   it("should close trust dialog on single click without waiting for kernel", async () => {
-    // Execute a cell to trigger kernel start (which requires trust approval)
-    // This is how other trust-related specs trigger the dialog
-    await executeFirstCell();
+    // Wait for the notebook to sync and render cells
+    await waitForNotebookSynced();
+    console.log("[trust-dialog-dismiss] Notebook synced");
+
+    // Find the first code cell
+    const codeCell = await $('[data-cell-type="code"]');
+    await codeCell.waitForExist({ timeout: 10000 });
+    console.log("[trust-dialog-dismiss] Found code cell");
+
+    // Set cell source via CodeMirror dispatch (bypasses synthetic keyboard events)
+    await setCellSource(codeCell, "import sys; print(sys.executable)");
+    console.log("[trust-dialog-dismiss] Set cell source");
+
+    // Click the execute button to trigger kernel start (which requires trust approval)
+    const executeButton = await codeCell.$('[data-testid="execute-button"]');
+    await executeButton.waitForClickable({ timeout: 5000 });
+    await executeButton.click();
+    console.log("[trust-dialog-dismiss] Clicked execute button");
 
     // Wait for the trust dialog to appear (notebook has untrusted deps)
     const dialog = await $('[data-testid="trust-dialog"]');
@@ -35,17 +52,28 @@ describe("Trust Dialog Dismiss", () => {
       timeoutMsg:
         "Trust dialog did not appear - fixture notebook should have untrusted deps",
     });
+    // The trust dialog should be visible before approval
+    expect(await dialog.isExisting()).toBe(true);
+    console.log("[trust-dialog-dismiss] Trust dialog appeared");
 
     // Record current kernel status before clicking
     const statusBefore = await getKernelStatus();
-    console.log(`Kernel status before trust approval: ${statusBefore}`);
+    console.log(
+      `[trust-dialog-dismiss] Kernel status before trust approval: ${statusBefore}`,
+    );
 
-    // Find and click the approve button
+    // Approve and decline buttons should be present
     const approveButton = await $('[data-testid="trust-approve-button"]');
+    expect(await approveButton.isExisting()).toBe(true);
+    const declineButton = await $('[data-testid="trust-decline-button"]');
+    expect(await declineButton.isExisting()).toBe(true);
+
+    // Click the approve button
     await approveButton.waitForClickable({ timeout: 5000 });
 
     const clickTime = Date.now();
     await approveButton.click();
+    console.log("[trust-dialog-dismiss] Clicked approve button");
 
     // Dialog should close QUICKLY (within 3 seconds) - this is the key assertion
     // If it waited for kernel launch, this would timeout
@@ -58,11 +86,13 @@ describe("Trust Dialog Dismiss", () => {
 
     const closeTime = Date.now();
     const dismissTime = closeTime - clickTime;
-    console.log(`Dialog dismissed in ${dismissTime}ms`);
+    console.log(`[trust-dialog-dismiss] Dialog dismissed in ${dismissTime}ms`);
 
     // Check kernel status - should be starting or have quickly reached idle
     const statusAfter = await getKernelStatus();
-    console.log(`Kernel status after dialog closed: ${statusAfter}`);
+    console.log(
+      `[trust-dialog-dismiss] Kernel status after dialog closed: ${statusAfter}`,
+    );
     expect(["starting", "idle", "busy"]).toContain(statusAfter);
   });
 });
diff --git a/e2e/specs/untitled-pyproject.spec.js b/e2e/specs/untitled-pyproject.spec.js
diff --git a/e2e/specs/uv-inline.spec.js b/e2e/specs/uv-inline.spec.js
diff --git a/e2e/specs/uv-pyproject.spec.js b/e2e/specs/uv-pyproject.spec.js
