test(webapp): cover decentralized browser training across browsers

.github/workflows/_test.yml

@@ -145,7 +145,7 @@ jobs:
           working-directory: webapp
           install: false
           start: >-
-            node --experimental-strip-types cypress/support/federated.ts,
+            node --experimental-strip-types cypress/support/training/federated/peer.ts,
             pnpm exec vite --mode test --port 1351 --strictPort
           wait-on: "http://localhost:8080, http://localhost:1351"
           spec: cypress/e2e/training/federated/${{ matrix.task }}.cy.ts
@@ -156,6 +156,24 @@ jobs:
           path: webapp/cypress/screenshots
           if-no-files-found: ignore
 
+  test-e2e-decentralized:
+    name: decentralized webapp (mnist)
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v7
+      - uses: ./.github/actions/setup-node
+      - uses: ./.github/actions/pull-dataset-artifacts
+      - uses: actions/download-artifact@v8
+        with: { name: all-builds }
+      - run: xvfb-run --auto-servernum pnpm -F webapp run test:e2e:decentralized
+      - uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: decentralized-mnist-screenshots
+          path: webapp/cypress/screenshots
+          if-no-files-found: ignore
+
   test-cli:
     runs-on: ubuntu-latest
     steps:

.knip.json

@@ -7,7 +7,9 @@
     "webapp": {
       "entry": [
         "cypress/e2e/training/federated/*.cy.ts",
-        "cypress/support/federated.ts"
+        "cypress/support/training/federated/peer.ts",
+        "cypress/e2e/training/decentralized/*.cy.ts",
+        "cypress/support/training/decentralized/browsers.ts"
       ],
       "ignoreDependencies": ["buffer"]
     },

discojs/src/default_tasks/mnist.ts

@@ -43,7 +43,7 @@ export const mnist: TaskProvider<"image", "decentralized"> = {
             beta: 0.9,
           },
         },
-        minNbOfParticipants: 3,
+        minNbOfParticipants: 4,
         maxShareValue: 100,
         tensorBackend: "tfjs",
         maxConnectionRetry: 3,

docs/CONTRIBUTING.md

@@ -120,10 +120,12 @@ the workspace with `pnpm -r run build`, and fetch the datasets with
 
 ```sh
 pnpm -F webapp run test:e2e:local
+pnpm -F webapp run test:e2e:decentralized
 ```
 
-This runs both Titanic and LUS COVID with a mocked server. The command starts
-and stops Vite itself; port 1351 must be available.
+The local command runs both Titanic and LUS COVID with a mocked server.
+The decentralized command runs MNIST across Chrome and Firefox participants with a real server; install Chrome and Firefox (plus `xvfb` and `xauth` on headless Linux).
+Both commands start and stop their servers and Vite automatically.
 
 Federated training tests run in separate CI jobs for Titanic and LUS COVID.
 Each job starts a real server and a Node participant configured for its task;

webapp/cypress/e2e/training/decentralized/mnist.cy.ts

@@ -0,0 +1,43 @@
+import {
+  assertNoErrorToast,
+  goToTaskOverview,
+} from "../../../support/training";
+
+describe("decentralized webapp training", () => {
+  it("trains MNIST across Chrome, Edge, and Firefox participants", () => {
+    cy.env(["expectedBrowser"])
+      .its("expectedBrowser")
+      .should("equal", Cypress.browser.name);
+
+    goToTaskOverview("mnist");
+    cy.contains("button", "next").click();
+
+    cy.contains("button", "group").click();
+    cy.task<string[]>("readdir", "../datasets/CIFAR10").then((files) =>
+      cy
+        .contains("h4", "Group label: 0") // dummy labels for now
+        .parents()
+        .eq(1)
+        .find('[data-testid="select-image-button"]')
+        .selectFile(files),
+    );
+    cy.contains("button", "next").click();
+    cy.contains("button", "collaboratively").click();
+    cy.contains("button", "Start training").click();
+    assertNoErrorToast();
+
+    cy.env(["numberOfParticipants"]).then(({ numberOfParticipants = 4 }) => {
+      cy.contains("h6", "number of participants")
+        .next({ timeout: 120_000 })
+        .should("have.text", `${numberOfParticipants}`);
+    });
+    cy.contains("h6", "epochs")
+      .next({ timeout: 270_000 })
+      .should("have.text", "20 / 20");
+    cy.contains("h6", "Collaborative model sharing")
+      .next({ timeout: 60_000 })
+      .should("have.text", "10");
+    cy.contains("Training successfully completed", { timeout: 30_000 });
+    assertNoErrorToast();
+  });
+});

webapp/cypress/e2e/training/local/lus_covid.cy.ts

@@ -4,9 +4,9 @@ import { setupServerWith } from "../../../support/e2e";
 import {
   assertNoErrorToast,
   goToTaskOverview,
-  trainLocallyAndSave,
   withTrainingConfig,
 } from "../../../support/training";
+import { trainLocallyAndSave } from "../../../support/training/local";
 
 const numEpochs = 4;
 const lusCovidTask = withTrainingConfig(defaultTasks.lusCovid, {

webapp/cypress/e2e/training/local/titanic.cy.ts

@@ -1,10 +1,8 @@
 import { defaultTasks } from "@epfml/discojs";
 
 import { setupServerWith } from "../../../support/e2e";
-import {
-  goToTaskOverview,
-  trainLocallyAndSave,
-} from "../../../support/training";
+import { goToTaskOverview } from "../../../support/training";
+import { trainLocallyAndSave } from "../../../support/training/local";
 
 it("completes local Titanic training and saves the model", () => {
   const titanicTask = defaultTasks.titanic;

webapp/cypress/support/training/decentralized/browsers.ts

@@ -0,0 +1,87 @@
+import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
+import { createInterface } from "node:readline";
+
+const browsers = ["chrome", "chrome", "edge", "firefox"];
+
+const children: ChildProcessWithoutNullStreams[] = [];
+
+function stopChildren(): void {
+  for (const child of children) {
+    if (child.pid === undefined || child.exitCode !== null) continue;
+    try {
+      process.kill(-child.pid, "SIGTERM"); // minus sign means kill both cypress and its browser
+    } catch (error) {
+      if (
+        !(error instanceof Error && "code" in error && error.code === "ESRCH")
+      )
+        throw error;
+    }
+  }
+}
+
+for (const signal of ["SIGINT", "SIGTERM"])
+  process.once(signal, () => {
+    stopChildren();
+    process.exitCode = 1;
+  });
+
+let firstFailedBrowser: string | undefined;
+
+const results = browsers.map((browser, index) => {
+  const label = `${browser}-${index + 1}`;
+  const child = spawn(
+    "pnpm",
+    [
+      "exec",
+      "cypress",
+      "run",
+      "--e2e",
+      "--browser",
+      browser,
+      "--spec",
+      "cypress/e2e/training/decentralized/mnist.cy.ts",
+      "--config",
+      `screenshotsFolder=cypress/screenshots/${label}`,
+      "--env",
+      `expectedBrowser=${browser},numberOfParticipants=${browsers.length}`,
+    ],
+    {
+      detached: true,
+      stdio: "pipe",
+      env: {
+        ...process.env,
+        DISCO_TRAINING_E2E: "1",
+      },
+    },
+  );
+  child.stdin.end();
+  children.push(child);
+  for (const output of [child.stdout, child.stderr])
+    createInterface({ input: output }).on("line", (line) =>
+      console.log(`[${label}] ${line}`),
+    );
+
+  return new Promise<boolean>((resolve) => {
+    child.once("error", (error) => {
+      firstFailedBrowser ??= label;
+      console.error(`[${label}] ${error}`);
+      stopChildren();
+      resolve(false);
+    });
+    child.once("exit", (code, signal) => {
+      const passed = code === 0;
+      if (!passed) {
+        firstFailedBrowser ??= label;
+        console.error(`[${label}] exited with ${code ?? signal}`);
+        stopChildren();
+      }
+      resolve(passed);
+    });
+  });
+});
+
+if ((await Promise.all(results)).some((passed) => !passed)) {
+  if (firstFailedBrowser !== undefined)
+    console.error(`First browser to fail: ${firstFailedBrowser}`);
+  process.exitCode = 1;
+}

webapp/cypress/support/federated.ts → webapp/cypress/support/training/federated/peer.ts

@@ -12,7 +12,7 @@ import type { DataFormat, DataType, TaskProvider } from "@epfml/discojs";
 import { loadCSV, loadImage } from "@epfml/discojs-node";
 import { Repeat } from "immutable";
 import { Server } from "server";
-import { withTrainingConfig } from "./training.ts";
+import { withTrainingConfig } from "../index.ts";
 
 const taskName = process.env.DISCO_E2E_FEDERATED_TASK ?? "titanic";
 if (taskName !== "titanic" && taskName !== "lus_covid") {
@@ -64,13 +64,16 @@ try {
     await train(
       defaultTasks.titanic,
       loadCSV(
-        path.join(import.meta.dirname, "../../../datasets/titanic_train.csv"),
+        path.join(
+          import.meta.dirname,
+          "../../../../../datasets/titanic_train.csv",
+        ),
       ),
     );
   } else {
     const folder = path.join(
       import.meta.dirname,
-      "../../../datasets/lus_covid",
+      "../../../../../datasets/lus_covid",
     );
     const positive = (await nodeHalfOfImages(path.join(folder, "COVID+"))).zip(
       Repeat("COVID-Positive"),

webapp/cypress/support/training/index.ts

@@ -0,0 +1,42 @@
+import type {
+  DataType,
+  Network,
+  TaskProvider,
+  TrainingInformation,
+} from "@epfml/discojs";
+
+export function withTrainingConfig<D extends DataType, N extends Network>(
+  provider: TaskProvider<D, N>,
+  trainingConfig: Pick<TrainingInformation<D, N>, "epochs" | "roundDuration">,
+): TaskProvider<D, N> {
+  return {
+    modelCard: provider.modelCard,
+    async getTask() {
+      const task = await provider.getTask();
+      return {
+        ...task,
+        trainingInformation: {
+          ...task.trainingInformation,
+          ...trainingConfig,
+        },
+      };
+    },
+  };
+}
+
+export function goToTaskOverview(taskId?: string): void {
+  cy.visit("/");
+  cy.contains("a", "Start training").click();
+  cy.get(".driver-popover-close-btn").click();
+  if (taskId !== undefined) {
+    cy.get(`#${taskId}`, { timeout: 30_000 })
+      .contains("button", "participate")
+      .click();
+  } else {
+    cy.contains("button", "participate").click();
+  }
+}
+
+export function assertNoErrorToast(): void {
+  cy.get(".v-toast__item--error", { timeout: 1_000 }).should("not.exist");
+}

webapp/cypress/support/training/local/index.ts

@@ -0,0 +1,26 @@
+import { assertNoErrorToast } from "../index";
+
+export function trainLocallyAndSave(
+  title: string,
+  epochs: number,
+  trainingTimeout = 120_000,
+): void {
+  cy.contains("button", "next").click();
+  cy.contains("button", "locally").click();
+  cy.contains("button", "Start training").click();
+  assertNoErrorToast();
+  cy.contains("Training successfully completed", {
+    timeout: trainingTimeout,
+  }).should("be.visible");
+  assertNoErrorToast();
+  cy.contains("h6", "epochs")
+    .next()
+    .should("have.text", `${epochs} / ${epochs}`);
+  cy.contains("button", "Start training").should("be.visible");
+  cy.contains("button", "next").click();
+  cy.contains("button", "save model").click();
+  cy.contains(`The trained ${title} model has been saved.`, {
+    timeout: 30_000,
+  }).should("be.visible");
+  assertNoErrorToast();
+}

webapp/package.json

@@ -10,6 +10,7 @@
     "test:e2e": "VITE_SERVER_URL=http://server start-server-and-test \"vite\" http://localhost:1351 'pnpm exec cypress run --e2e'",
     "test:e2e:local": "DISCO_TRAINING_E2E=1 VITE_SERVER_URL=http://server start-server-and-test 'vite --mode test --port 1351 --strictPort' http://localhost:1351 'pnpm exec cypress run --e2e --spec \"cypress/e2e/training/local/*.cy.ts\"'",
     "test:e2e:scripted": "DISCO_SCRIPTED_SERVER_E2E=1 VITE_SERVER_URL=http://server:8080 start-server-and-test 'vite --mode test --port 1351 --strictPort' http://localhost:1351 'pnpm exec cypress run --e2e --spec \"cypress/e2e/training/scripted/*.cy.ts\"'",
+    "test:e2e:decentralized": "DISCO_TRAINING_E2E=1 VITE_SERVER_URL=http://localhost:8080 start-server-and-test 'node ../server/dist/main.js' http://localhost:8080 'vite --mode test --port 1351 --strictPort' http://localhost:1351 'node --experimental-strip-types cypress/support/training/decentralized/browsers.ts'",
     "test:e2e-interactive": "VITE_SERVER_URL=http://server start-server-and-test \"pnpm start\" http://localhost:1351 'pnpm exec cypress open --e2e'"
   },
   "dependencies": {