Work around ReactFlow issue. Try making tests more robust.

.gitignore

@@ -16,3 +16,9 @@ joblib-cache
 *.egg-info
 
 lynxkite_crdt_data
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -197,9 +197,10 @@ function LynxKiteFlow() {
         });
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    // TODO: Switch to keydown once https://github.com/xyflow/xyflow/pull/5055 is merged.
+    document.addEventListener("keyup", handleKeyDown);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyDown);
     };
   }, [catalog.data, nodeSearchSettings, state.workspace.env]);
 

lynxkite-app/web/tests/basic.spec.ts

@@ -21,6 +21,9 @@ test("Box creation & deletion per env", async () => {
   const envs = await workspace.getEnvs();
   for (const env of envs) {
     await workspace.setEnv(env);
+    // TODO: Opening the catalog immediately after setting the env can fail.
+    // Let's fix this!
+    await new Promise((resolve) => setTimeout(resolve, 500));
     const catalog = await workspace.getCatalog();
     expect(catalog).not.toHaveLength(0);
     const op = catalog[0];

lynxkite-app/web/tests/examples.spec.ts

@@ -4,44 +4,44 @@ import { Workspace } from "./lynxkite";
 
 test("LynxKite Graph Analytics example", async ({ page }) => {
   const ws = await Workspace.open(page, "NetworkX demo");
-  expect(await ws.isErrorFree(process.env.CI ? 2000 : 1000)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 2000 : 1000);
 });
 
 test("Pytorch example", async ({ page }) => {
   const ws = await Workspace.open(page, "PyTorch demo");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("AIMO example", async ({ page }) => {
   // Fails because of missing OPENAI_API_KEY
   const ws = await Workspace.open(page, "AIMO");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("LynxScribe example", async ({ page }) => {
   // Fails because of missing OPENAI_API_KEY
   const ws = await Workspace.open(page, "LynxScribe demo");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test.fail("Graph RAG", async ({ page }) => {
   // Fails due to some issue with ChromaDB
   const ws = await Workspace.open(page, "Graph RAG");
-  expect(await ws.isErrorFree(process.env.CI ? 2000 : 500)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 2000 : 500);
 });
 
 test.fail("RAG chatbot app", async ({ page }) => {
   // Fail due to all operation being unknown
   const ws = await Workspace.open(page, "RAG chatbot app");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });
 
 test("Airlines demo", async ({ page }) => {
   const ws = await Workspace.open(page, "Airlines demo");
-  expect(await ws.isErrorFree(process.env.CI ? 10000 : 500)).toBeTruthy();
+  await ws.expectErrorFree(process.env.CI ? 10000 : 500);
 });
 
 test("Pillow example", async ({ page }) => {
   const ws = await Workspace.open(page, "Image processing");
-  expect(await ws.isErrorFree()).toBeTruthy();
+  await ws.expectErrorFree();
 });

lynxkite-app/web/tests/lynxkite.ts

@@ -54,7 +54,7 @@ export class Workspace {
 
   async addBox(boxName) {
     //TODO: Support passing box parameters (id, position, etc.)
-    const allBoxes = await this.getBoxes();
+    const allBoxes = await this.getBoxes().all();
     if (allBoxes) {
       // Avoid overlapping with existing nodes
       const numNodes = allBoxes.length || 1;
@@ -66,9 +66,7 @@ export class Workspace {
     await this.page.locator(".ws-name").click();
     await this.page.keyboard.press("/");
     await this.page.locator(".node-search").getByText(boxName).click();
-    await this.page.keyboard.press("Escape");
-    // Workaround to wait for the deselection animation after choosing a box. Otherwise, the next box will not be added.
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await expect(this.getBoxes()).toHaveCount(allBoxes.length + 1);
   }
 
   async getCatalog() {
@@ -78,14 +76,22 @@ export class Workspace {
       .allInnerTexts();
     // Dismiss the catalog menu
     await this.page.keyboard.press("Escape");
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await expect(this.page.locator(".node-search")).not.toBeVisible();
     return catalog;
   }
 
+  async selectBox(boxId: string) {
+    const box = this.getBox(boxId);
+    // Click on the resizer, so we don't click on any parameters by accident.
+    await box.locator(".react-flow__resize-control").click();
+    await expect(box).toHaveClass(/selected/);
+  }
+
   async deleteBoxes(boxIds: string[]) {
     for (const boxId of boxIds) {
-      await this.getBoxHandle(boxId).first().click();
+      await this.selectBox(boxId);
       await this.page.keyboard.press("Backspace");
+      await expect(this.getBox(boxId)).not.toBeVisible();
     }
   }
 
@@ -94,7 +100,7 @@ export class Workspace {
   }
 
   getBoxes() {
-    return this.page.locator(".react-flow__node").all();
+    return this.page.locator(".react-flow__node");
   }
 
   getBoxHandle(boxId: string, pos?: string) {
@@ -143,19 +149,13 @@ export class Workspace {
     await this.page.mouse.up();
   }
 
-  async isErrorFree(executionWaitTime?): Promise<boolean> {
+  async expectErrorFree(executionWaitTime?) {
     // TODO: Workaround, to account for workspace execution. Once
     // we have a load indicator we can use that instead.
     await new Promise((resolve) =>
       setTimeout(resolve, executionWaitTime ? executionWaitTime : 500),
     );
-    const boxes = await this.getBoxes();
-    for (const box of boxes) {
-      if (await box.locator(".error").isVisible()) {
-        return false;
-      }
-    }
-    return true;
+    await expect(this.getBoxes().locator(".error")).not.toBeVisible();
   }
 
   async close() {