downsample playwright

.github/workflows/cypress.yml

@@ -20,7 +20,7 @@ jobs:
     strategy:
       max-parallel: 3
       matrix:
-        package: [mesh-io, image-io, transform-io, downsample]
+        package: [mesh-io, transform-io]
 
     steps:
       - name: Checkout

.github/workflows/playwright.yml

@@ -147,7 +147,7 @@ jobs:
     strategy:
       max-parallel: 3
       matrix:
-        package: [compare-images, compare-meshes, compress-stringify, dicom]
+        package: [compare-images, compare-meshes, compress-stringify, dicom, downsample, image-io]
 
     steps:
       - name: Checkout

package.json

@@ -45,7 +45,7 @@
       "esbuild": "^0.25.1",
       "start-server-and-test": "^2.0.12",
       "ava": "^6.1.3",
-      "cypress": "^14.5.0",
+      "cypress": "^14.5.1",
       "shx": "^0.4.0",
       "typescript": "^5.8.3",
       "vite": "^6.2.3"

packages/downsample/typescript/.gitignore

@@ -0,0 +1,2 @@
+playwright-report/
+test-results/

packages/downsample/typescript/package.json

@@ -17,13 +17,8 @@
     "start": "pnpm copyDemoAppAssets && vite",
     "test": "pnpm test:node && pnpm test:browser",
     "test:node": "ava",
-    "test:browser": "pnpm test:browser:chrome && pnpm test:browser:firefox",
-    "test:browser:firefox": "start-server-and-test start http-get://localhost:5179 cypress:runFirefox",
-    "test:browser:chrome": "start-server-and-test start http-get://localhost:5179 cypress:runChrome",
-    "test:browser:debug": "start-server-and-test start http-get://localhost:5179 cypress:open",
-    "cypress:open": "pnpm exec cypress open",
-    "cypress:runChrome": "pnpm exec cypress run --browser chrome",
-    "cypress:runFirefox": "pnpm exec cypress run --browser firefox",
+    "test:browser": "playwright test",
+    "test:browser:debug": "playwright test --debug",
     "build": "pnpm build:tsc && pnpm build:browser:workerEmbedded && pnpm build:browser:workerEmbeddedMin && pnpm build:demo",
     "build:browser:workerEmbedded": "esbuild --loader:.worker.js=dataurl --bundle --format=esm --outfile=./dist/bundle/index-worker-embedded.js ./src/index-worker-embedded.ts",
     "build:browser:workerEmbeddedMin": "esbuild --minify --loader:.worker.js=dataurl --bundle --format=esm --outfile=./dist/bundle/index-worker-embedded.min.js ./src/index-worker-embedded.min.ts",
@@ -49,12 +44,11 @@
     "@itk-wasm/image-io": "workspace:^",
     "@itk-wasm/mesh-io": "workspace:^",
     "@itk-wasm/demo-app": "workspace:*",
+    "@playwright/test": "^1.48.2",
     "@types/node": "^20.2.5",
     "ava": "^6.1.0",
-    "cypress": "^13.6.3",
     "esbuild": "^0.25.0",
     "shx": "^0.3.4",
-    "start-server-and-test": "^2.0.3",
     "typescript": "^5.3.2",
     "vite": "^6.2.7",
     "vite-plugin-static-copy": "^0.17.0"

packages/downsample/typescript/playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./test/browser",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5179",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "pnpm start",
+    url: "http://localhost:5179",
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/downsample/typescript/test/browser/downsample-bin-shrink.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test("downsampleBinShrink", async ({ page }) => {
+  await page.goto("/");
+
+  const testFile = readFileSync("../test/data/input/cthead1.png");
+
+  // Navigate to downsampleBinShrink tab
+  await page.click('sl-tab[panel="downsampleBinShrink-panel"]');
+
+  // Upload file
+  await page.setInputFiles(
+    '#downsampleBinShrinkInputs input[name="input-file"]',
+    {
+      name: "cthead1.png",
+      mimeType: "image/png",
+      buffer: testFile,
+    }
+  );
+
+  // Wait for input details to appear
+  await expect(
+    page.locator("#downsampleBinShrink-input-details")
+  ).toContainText("imageType");
+
+  // Set shrink factors
+  const shrinkFactorsInput = page.locator(
+    '#downsampleBinShrinkInputs sl-input[name="shrink-factors"] input'
+  );
+  await shrinkFactorsInput.clear();
+  await shrinkFactorsInput.fill("[2, 2]");
+
+  // Run the pipeline
+  await page.click('#downsampleBinShrinkInputs sl-button[name="run"]');
+
+  // Wait for results
+  await expect(
+    page.locator("#downsampleBinShrink-downsampled-details")
+  ).toContainText("imageType");
+});

packages/downsample/typescript/test/browser/downsample.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test("downsample", async ({ page }) => {
+  await page.goto("/");
+
+  const testFile = readFileSync("../test/data/input/cthead1.png");
+
+  // Navigate to downsample tab
+  await page.click('sl-tab[panel="downsample-panel"]');
+
+  // Upload file
+  await page.setInputFiles('#downsampleInputs input[name="input-file"]', {
+    name: "cthead1.png",
+    mimeType: "image/png",
+    buffer: testFile,
+  });
+
+  // Wait for input details to appear
+  await expect(page.locator("#downsample-input-details")).toContainText(
+    "imageType"
+  );
+
+  // Set shrink factors
+  const shrinkFactorsInput = page.locator(
+    '#downsampleInputs sl-input[name="shrink-factors"] input'
+  );
+  await shrinkFactorsInput.clear();
+  await shrinkFactorsInput.fill("[2, 2]");
+
+  // Run the pipeline
+  await page.click('#downsampleInputs sl-button[name="run"]');
+
+  // Wait for results
+  await expect(page.locator("#downsample-downsampled-details")).toContainText(
+    "imageType"
+  );
+});

packages/downsample/typescript/test/browser/global.d.ts

@@ -0,0 +1,8 @@
+export {};
+
+declare global {
+  interface Window {
+    downsampleDownsampledFile: any;
+    downsampleBinShrinkDownsampledFile: any;
+  }
+}

packages/image-io/typescript/.gitignore

@@ -1,3 +1,5 @@
 test/browser/demo-app/public
 /demo-app/
 vite.config.js
+playwright-report/
+test-results/