Merge pull request #1417 from thewtex/hello-playwright

hello playwright

Author: thewtex

.github/workflows/javascript-typescript.yml

@@ -35,7 +35,7 @@ jobs:
 
     - uses: actions/setup-node@v4
       with:
-        node-version: '20'
+        node-version: '22'
 
     - name: Install
       uses: pnpm/action-setup@v4

.github/workflows/playwright.yml

@@ -102,13 +102,14 @@ jobs:
           node-version: '22'
           cache: pnpm
 
-      - name: Install Playwright Browsers
-        run: pnpx playwright install --with-deps
-
       - name: Install dependencies for itk-wasm
         run: pnpm install
         working-directory: packages/core/typescript/itk-wasm
 
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+        working-directory: packages/core/typescript/itk-wasm
+
       - name: Build itk-wasm
         run: |
           pnpm run --aggregate-output --filter itk-wasm build
@@ -174,11 +175,9 @@ jobs:
           node-version: '22'
           cache: pnpm
 
-      - name: Install Playwright Browsers
-        run: pnpx playwright install --with-deps
-
       - name: pnpm install
         run: pnpm install --frozen-lockfile
+
       - name: Build itk-wasm
         run: |
           pnpm run --aggregate-output --filter itk-wasm build
@@ -202,6 +201,10 @@ jobs:
         run: |
           pnpm run --aggregate-output --filter "@itk-wasm/${{ matrix.package }}-build" test:data:download
 
+      - name: Install Playwright Browsers
+        working-directory: packages/${{ matrix.package }}/typescript
+        run: pnpm exec playwright install --with-deps
+
       - name: Run Playwright tests
         working-directory: packages/${{ matrix.package }}/typescript
         run: pnpm run test:browser
@@ -212,3 +215,51 @@ jobs:
           name: playwright-report-${{ matrix.package }}
           path: packages/${{ matrix.package }}/typescript/playwright-report/
           retention-days: 30
+
+  test-hello-world-example:
+    defaults:
+      run:
+        working-directory: ./examples/hello-world
+    timeout-minutes: 60
+    runs-on: ubuntu-24.04
+    steps:
+    - uses: actions/checkout@v4
+    - name: Free Disk Space (Ubuntu)
+      uses: jlumbroso/free-disk-space@main
+
+    - name: Pull latest Docker images
+      working-directory: ./
+      run: |
+        ./src/docker/pull.sh --no-debug
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+
+    - name: Install
+      uses: pnpm/action-setup@v4
+      with:
+        run_install: true
+
+    - name: Build itk-wasm
+      run: |
+        pnpm run --aggregate-output --filter itk-wasm build
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Build
+      run: pnpm run build
+
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: pnpm run test
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report-hello-world
+        path: playwright-report/
+        retention-days: 30

examples/hello-world/.gitignore

@@ -1,4 +1,6 @@
 itk-wasm-hello-world
 wasi-build
-cypress/support
-cypress/videos/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/hello-world/cypress.config.js

@@ -11,10 +11,9 @@
     "test": "pnpm run test:wasi && pnpm run test:node && pnpm run test:browser",
     "test:wasi": "pnpx itk-wasm run wasi-build/hello.wasi.wasm",
     "test:node": "node ./index.mjs",
-    "cypress:open": "pnpm exec cypress open",
-    "cypress:run": "pnpm exec cypress run",
     "start": "http-server --cors -p 8083",
-    "test:browser": "start-server-and-test start http://localhost:8083 cypress:run"
+    "test:browser": "playwright test",
+    "test:browser:debug": "playwright test --debug"
   },
   "author": "Matt McCormick <matt@mmmccormick.com>",
   "license": "Apache-2.0",
@@ -23,8 +22,7 @@
     "itk-wasm": "workspace:^"
   },
   "devDependencies": {
-    "cypress": "^14.0.0",
-    "http-server": "^14.1.1",
-    "start-server-and-test": "^2.0.10"
+    "@playwright/test": "^1.48.2",
+    "http-server": "^14.1.1"
   }
 }

examples/hello-world/cypress/e2e/hello_world_spec.js

@@ -0,0 +1,42 @@
+// @ts-check
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * @see https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* 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:8083",
+
+    /* 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:8083",
+    reuseExistingServer: !process.env.CI,
+  },
+});