Add playwright tests (#65)

* Initial setup for Playwright tests

* Install full networkx dependencies
---------

Co-authored-by: JMLizano <[email protected]>

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       
       - name: Install uv
         uses: astral-sh/setup-uv@v5
@@ -35,10 +35,33 @@ jobs:
 
       - name: Run app tests
         run: |
-            cd lynxkite-app
-            pytest
+          cd lynxkite-app
+          pytest
     
       - name: Run graph analytics tests  
         run: |
-            cd lynxkite-graph-analytics
-            pytest
+          cd lynxkite-graph-analytics
+          pytest
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install frontend dependencies
+        run: |
+          cd lynxkite-app/web
+          npm i
+          npx playwright install --with-deps 
+
+      - name: Run Playwright tests
+        run: |
+          cd lynxkite-app/web
+          npm run test
+      
+      - uses: actions/upload-artifact@v4
+        name: Upload playwright report
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: lynxkite-app/web/playwright-report/
+          retention-days: 30

.gitignore

@@ -13,3 +13,5 @@ dist
 build
 joblib-cache
 *.egg-info
+
+lynxkite-app/crdt_data

lynxkite-app/web/package-lock.json

@@ -32,6 +32,8 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.15.0",
+        "@playwright/test": "^1.50.1",
+        "@types/node": "^22.13.1",
         "@types/react": "^18.3.14",
         "@types/react-dom": "^18.3.2",
         "@vitejs/plugin-react-swc": "^3.5.0",
@@ -1151,6 +1153,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
+      "integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.50.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@reactivedata/react": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@reactivedata/react/-/react-0.2.2.tgz",
@@ -1772,10 +1789,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.10.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
-      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
-      "license": "MIT",
+      "version": "22.13.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz",
+      "integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==",
+      "dev": true,
       "dependencies": {
         "undici-types": "~6.20.0"
       }
@@ -5284,6 +5301,50 @@
         "pathe": "^1.1.2"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
+      "integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.50.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
+      "integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
@@ -6335,6 +6396,7 @@
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
       "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unified": {

lynxkite-app/web/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "test": "playwright test",
     "dev": "npx vite",
     "build": "npx tsc -b && npx vite build",
     "lint": "npx eslint .",
@@ -46,7 +47,9 @@
     "tailwindcss": "^3.4.16",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.11"
+    "vite": "^6.0.11",
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.1"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.28.1"

lynxkite-app/web/playwright.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60000,
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: process.env.CI ? [['github'], ['html']] : 'html',
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://127.0.0.1:8000',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    testIdAttribute: 'data-nodeid' // Useful for easily selecting nodes using getByTestId
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'cd .. && lynxkite',
+    url: 'http://127.0.0.1:8000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

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

@@ -0,0 +1,49 @@
+// Tests some basic operations like box creation, deletion, and dragging.
+import { test, expect } from '@playwright/test';
+import { Workspace } from './lynxkite';
+
+
+let workspace: Workspace;
+
+
+test.beforeEach(async ({ browser }) => {
+  workspace = await Workspace.empty(await browser.newPage());
+  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
+  await workspace.setEnv('LynxKite Graph Analytics');
+});
+
+
+test('Box creation & deletion per env', async () => {
+  const envs = await workspace.getEnvs();
+  for(const env of envs) {
+    await workspace.setEnv(env);
+    const catalog = await workspace.getCatalog();
+    expect(catalog).not.toHaveLength(0);
+    const op = catalog[0];
+    await workspace.addBox(op);
+    await expect(workspace.getBox(`${op} 1`)).toBeVisible();
+    await workspace.deleteBoxes([`${op} 1`]);
+    await expect(workspace.getBox(`${op} 1`)).not.toBeVisible();
+  }
+});
+
+
+test('Delete multi-handle boxes', async () => {
+  await workspace.addBox('Compute PageRank');
+  await workspace.deleteBoxes(['Compute PageRank 1']);
+  await expect(workspace.getBox('Compute PageRank 1')).not.toBeVisible();
+});
+
+
+test ('Drag box', async () => {
+  await workspace.addBox('Import Parquet');
+  const originalPos = await workspace.getBox('Import Parquet 1').boundingBox();
+  await workspace.moveBox('Import Parquet 1', {offsetX: 100, offsetY: 100});
+  const newPos = await workspace.getBox('Import Parquet 1').boundingBox();
+  // Exact position is not guaranteed, but it should have moved
+  expect(newPos.x).toBeGreaterThan(originalPos.x);
+  expect(newPos.y).toBeGreaterThan(originalPos.y);
+});
+
+
+

lynxkite-app/web/tests/data/upload_test.csv

@@ -0,0 +1,5 @@
+"name"
+"Adam"
+"Eve"
+"Bob"
+"Isolated Joe"

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

@@ -0,0 +1,38 @@
+// Tests error reporting.
+import { test, expect } from '@playwright/test';
+import { Workspace } from './lynxkite';
+
+
+let workspace: Workspace;
+
+
+test.beforeEach(async ({ browser }) => {
+  workspace = await Workspace.empty(await browser.newPage());
+  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
+  await workspace.setEnv('LynxKite Graph Analytics');
+});
+
+
+test('missing parameter', async () => {
+  // Test the correct error message is displayed when a required parameter is missing,
+  // and that the error message is removed when the parameter is filled.
+  await workspace.addBox('Create scale-free graph');
+  const graphBox = workspace.getBox('Create scale-free graph 1');
+  await graphBox.locator('input').fill('');
+  expect(await graphBox.locator('.error').innerText()).toBe("invalid literal for int() with base 10: ''");
+  await graphBox.locator('input').fill('10');
+  await expect(graphBox.locator('.error')).not.toBeVisible();
+});
+
+
+test('unknown operation', async () => {
+  // Test that the correct error is displayed when the operation does not belong to
+  // the current environment.
+  await workspace.addBox('Create scale-free graph');
+  await workspace.setEnv('LynxScribe');
+  const csvBox =  workspace.getBox('Create scale-free graph 1');
+  const errorText = await csvBox.locator('.error').innerText();
+  expect(errorText).toBe('Operation "Create scale-free graph" not found.');
+  await workspace.setEnv('LynxKite Graph Analytics');
+  await expect(csvBox.locator('.error')).not.toBeVisible();
+});

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

@@ -0,0 +1,49 @@
+// Test the execution of the example workspaces
+import { test, expect } from '@playwright/test';
+import { Workspace } from './lynxkite';
+
+
+test('LynxKite Graph Analytics example', async ({ page }) => {
+    const ws = await Workspace.open(page, "NetworkX demo");
+    expect(await ws.isErrorFree()).toBeTruthy();
+});
+
+
+test('Pytorch example', async ({ page }) => {
+    const ws = await Workspace.open(page, "PyTorch demo");
+    expect(await ws.isErrorFree()).toBeTruthy();
+});
+
+
+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();
+});
+
+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();
+});
+
+
+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()).toBeTruthy();
+});
+
+
+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();
+});
+
+
+test('Pillow example', async ({ page }) => {
+    const ws = await Workspace.open(page, "Image processing");
+    expect(await ws.isErrorFree()).toBeTruthy();
+});
+

lynxkite-app/web/tests/lynxkite.ts

@@ -0,0 +1,180 @@
+// Shared testing utilities.
+import { expect, Locator, Page } from '@playwright/test';
+
+
+// Mirrors the "id" filter.
+export function toId(x) {
+  return x.toLowerCase().replace(/[ !?,./]/g, '-');
+}
+
+
+export const ROOT = 'automated-tests';
+
+
+export class Workspace {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  // Starts with a brand new workspace.
+  static async empty(page: Page, workspaceName?: string): Promise<Workspace> {
+    const splash = await Splash.open(page);
+    return await splash.openNewWorkspace(workspaceName ?? 'test-example');
+  }
+
+  static async open(page: Page, workspaceName: string): Promise<Workspace> {
+    const splash = await Splash.open(page);
+    const ws = await splash.openWorkspace(workspaceName);
+    await ws.waitForNodesToLoad()
+    await ws.expectCurrentWorkspaceIs(workspaceName);
+    return ws
+  }
+  
+  async getEnvs() {
+    // Return all available workspace environments
+    return await this.page.locator('select[name="workspace-env"] option').allInnerTexts();
+  }
+
+  async setEnv(env: string) {
+    await this.page.locator('select[name="workspace-env"]').selectOption(env);
+    // await this.page.getByRole('combobox', {'name': 'workspace-env'}).selectOption(env);
+  }
+
+  async expectCurrentWorkspaceIs(name) {
+    await expect(this.page.locator('.ws-name')).toHaveText(name);
+  }
+
+  async waitForNodesToLoad() {
+    // This method should be used only on non empty workspaces
+    await this.page.locator('.react-flow__nodes').waitFor({state: 'visible'});
+    let nodes: Locator[] = [];
+    while (nodes.length === 0) {
+      nodes = await this.getBoxes();
+    } 
+  }
+
+  async addBox(boxName) {
+    //TODO: Support passing box parameters (id, position, etc.)
+    const allBoxes = await this.getBoxes();
+    if (allBoxes) {
+      // Avoid overlapping with existing nodes
+      const numNodes = allBoxes.length;
+      await this.page.mouse.wheel(0, numNodes * 500);
+    }
+    
+    // Some x,y offset, otherwise the box handle may fall outside the viewport.
+    await this.page.locator('.react-flow__pane').click({ position: { x: 20, y: 20 }});
+    await this.page.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));
+  }
+
+  async getCatalog() {
+    await this.page.locator('.react-flow__pane').click();
+    const catalog =  await this.page.locator('.node-search .matches .search-result').allInnerTexts();
+    // Dismiss the catalog menu
+    await this.page.keyboard.press('Escape');
+    await new Promise(resolve => setTimeout(resolve, 200));
+    return catalog
+  }
+ 
+  async deleteBoxes(boxIds: string[]) {
+    for (const boxId of boxIds) {
+        await this.getBoxHandle(boxId).first().click();
+        await this.page.keyboard.press('Backspace');
+    }
+  }
+
+  getBox(boxId: string) {
+    return this.page.locator(`[data-id="${boxId}"]`);
+  }
+
+  getBoxes() {
+    return this.page.locator('.react-flow__node').all();
+  }
+
+  getBoxHandle(boxId: string) {
+    return this.page.getByTestId(boxId);
+  }
+
+  async moveBox(boxId: string, offset? : {offsetX: number, offsetY:number}, targetPosition?: {x: number, y: number}) {
+    // Move a box around, it is a best effort operation, the exact target position may not be reached
+    const box = await this.getBox(boxId).boundingBox();
+    if (!box) { 
+      return
+    }
+    const boxCenterX = box.x + box.width / 2;
+    const boxCenterY = box.y + box.height / 2;
+    await this.page.mouse.move(boxCenterX,boxCenterY);
+    await this.page.mouse.down();
+    if (targetPosition) {
+      await this.page.mouse.move(targetPosition.x, targetPosition.y);
+    } else if (offset) {
+      // Without steps the movement is too fast and the box is not dragged. The more steps,
+      // the better the movement is captured
+      await this.page.mouse.move(boxCenterX + offset.offsetX, boxCenterY + offset.offsetY, {steps: 5});
+    }
+    await this.page.mouse.up();
+  }
+
+  async connectBoxes(sourceId: string, targetId: string) {
+    const sourceHandle = this.getBoxHandle(sourceId)
+    const targetHandle = this.getBoxHandle(targetId)
+    await sourceHandle.hover();
+    await this.page.mouse.down();
+    await targetHandle.hover();
+    await this.page.mouse.up();
+  }
+
+  async isErrorFree(): Promise<boolean> {
+    const boxes = await this.getBoxes();
+    for (const box of boxes) {
+      if (await box.locator('.error').isVisible()) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+
+export class Splash {
+  page: Page;
+  root: Locator;
+  
+  constructor(page) {
+    this.page = page;
+    this.root = page.locator('#splash');
+  }
+
+  // Opens the LynxKite directory browser in the root.
+  static async open(page: Page): Promise<Splash> {
+    await page.goto('/');
+    await page.evaluate(() => {
+      window.sessionStorage.clear();
+      window.localStorage.clear();
+    });
+    await page.reload();
+    const splash = new Splash(page);
+    return splash;
+  }
+
+  workspace(name: string) {
+    return this.page.getByRole('link', { name: name });
+  }
+
+  async openNewWorkspace(name: string) {
+    // TODO: Support workspace naming
+    await this.page.getByRole('link', { name: 'New workspace' }).click();
+    const ws = new Workspace(this.page);
+    return ws;
+  }
+
+  async openWorkspace(name: string) {
+    await this.workspace(name).click();
+    return new Workspace(this.page);
+  }
+}

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

@@ -0,0 +1,36 @@
+// Test uploading a file in an import box.
+import { test, expect } from '@playwright/test';
+import { Workspace } from './lynxkite';
+import { join, dirname  } from 'path';
+import { fileURLToPath } from 'url';
+
+
+let workspace: Workspace;
+
+
+test.beforeEach(async ({ browser }) => {
+  workspace = await Workspace.empty(await browser.newPage());
+  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
+  await workspace.setEnv('LynxKite Graph Analytics');
+});
+
+
+test('can upload and import a simple CSV', async () => {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const csvPath = join(__dirname, 'data', 'upload_test.csv');
+
+    await workspace.addBox('Import CSV');
+    const csvBox =  workspace.getBox('Import CSV 1');
+    const filenameInput = csvBox.locator('input.input-bordered').nth(0);
+    await filenameInput.click();
+    await filenameInput.fill(csvPath);
+    await filenameInput.press('Enter');
+    
+    await workspace.addBox('View tables');
+    const tableBox = workspace.getBox('View tables 1');
+    await workspace.connectBoxes('Import CSV 1', 'View tables 1');
+
+    const tableRows = tableBox.locator('table tbody tr');
+    await expect(tableRows).toHaveCount(4);
+});

lynxkite-graph-analytics/pyproject.toml

@@ -9,7 +9,7 @@ dependencies = [
     "joblib>=1.4.2",
     "lynxkite-core",
     "matplotlib>=3.10.0",
-    "networkx>=3.4.2",
+    "networkx[default]>=3.4.2",
     "osmnx>=2.0.1",
     "pandas>=2.2.3",
     "polars[gpu]>=1.14.0",

lynxkite-pillow-example/pyproject.toml

@@ -8,6 +8,8 @@ dependencies = [
     "fsspec>=2025.2.0",
     "lynxkite-core",
     "pillow>=11.1.0",
+    "requests",
+    "aiohttp",
 ]
 
 [tool.uv.sources]