Fix Playwright tests to properly launch JupyterLab Desktop and capture distinct UI screenshots

.github/workflows/test.yml

@@ -0,0 +1,75 @@
+name: Automated Testing
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+
+      - name: Setup conda
+        uses: conda-incubator/setup-miniconda@v3
+        with:
+          auto-update-conda: true
+          python-version: '3.12'
+          mamba-version: "*"
+          channels: conda-forge,defaults
+          channel-priority: strict
+
+      - name: Install conda environment for tests
+        shell: bash -l {0}
+        run: |
+          set -eux
+          conda env create -f env_installer/jlab_server.yaml
+          conda activate jlab_server
+          which python
+          python --version
+          pip list | grep jupyterlab
+
+      - name: Install dependencies
+        run: |
+          npm install --global yarn --prefer-offline
+          yarn install
+
+      - name: Build application
+        run: |
+          yarn build
+
+      - name: Run tests
+        shell: bash -l {0}
+        run: |
+          set -eux
+          conda activate jlab_server
+          export JUPYTERLAB_DESKTOP_PYTHON_PATH="$(conda info --base)/envs/jlab_server/bin/python"
+          xvfb-run -a yarn test
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: |
+            test-results/
+            tests/snapshots/
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: screenshots
+          path: tests/snapshots/

.gitignore

@@ -27,3 +27,8 @@ __pycache__
 env_installer/jlab_server/
 env_installer/jlab_server.tar.gz
 
+# Test artifacts (but not screenshots)
+test-env/
+test-results/
+playwright-report/
+/playwright/.cache/

package.json

@@ -5,7 +5,9 @@
   "main": "./build/out/main/main.js",
   "scripts": {
     "start": "electron .",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
     "clean": "rimraf build dist",
     "watch:tsc": "tsc -w",
     "watch:assets": "node ./scripts/extract.js && node ./scripts/copyassets.js watch",
@@ -107,7 +109,7 @@
       "base": "core22",
       "environment": {
         "SHELL": "/bin/bash",
-        "GTK_USE_PORTAL":"1"
+        "GTK_USE_PORTAL": "1"
       },
       "hooks": "build/snap-hooks"
     },
@@ -182,9 +184,10 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@jupyter-notebook/web-components": "0.9.1",
+    "@leeoniya/ufuzzy": "1.0.14",
+    "@playwright/test": "^1.55.0",
     "@types/ejs": "^3.1.0",
     "@types/js-yaml": "^4.0.3",
-    "@types/node": "^14.14.31",
     "@types/node-fetch": "~2.5.12",
     "@types/react": "~17.0.2",
     "@types/react-dom": "^17.0.1",
@@ -193,7 +196,6 @@
     "@types/yargs": "^17.0.18",
     "@typescript-eslint/eslint-plugin": "~5.28.0",
     "@typescript-eslint/parser": "~5.28.0",
-    "@leeoniya/ufuzzy": "1.0.14",
     "electron": "^27.0.2",
     "electron-builder": "^24.9.1",
     "electron-notarize": "^1.2.2",
@@ -206,6 +208,7 @@
     "meow": "^6.0.1",
     "mini-css-extract-plugin": "^1.3.9",
     "node-watch": "^0.7.4",
+    "playwright": "^1.55.0",
     "prettier": "~2.1.1",
     "read-package-tree": "^5.1.6",
     "rimraf": "~3.0.0",

playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: false, // Disable parallel for Electron tests
+  /* 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 ? 1 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: 1, // Use single worker for Electron
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html'],
+    ['json', { outputFile: 'test-results/results.json' }]
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    // Increase timeouts for Electron app startup
+    actionTimeout: 15000,
+    navigationTimeout: 15000,
+  },
+
+  /* Global timeout for each test */
+  timeout: 30000,
+
+  /* Configure projects for Electron */
+  projects: [
+    {
+      name: 'electron-tests',
+      testMatch: '**/*.spec.ts',
+    },
+  ],
+});

tests/README.md

@@ -0,0 +1,34 @@
+# Test Screenshots
+
+This directory contains screenshots generated by Playwright tests that replicate the screenshots shown in the documentation.
+
+## Structure
+
+The tests capture the following screenshots that correspond to the documentation:
+
+- `welcome-page.png` - Captures the welcome page interface (corresponds to `media/welcome-page.png`)
+- `start-session.png` - Captures the start session controls (corresponds to `media/start-session.png`)
+- `recent-sessions.png` - Captures the recent sessions interface (corresponds to `media/recent-sessions.png`)
+- `desktop-app-frame.png` - Captures the main desktop app frame (corresponds to `media/desktop-app-frame.png`)
+- `python-env-status.png` - Captures the Python environment status (corresponds to `media/python-env-status.png`)
+- `start-session-connect.png` - Captures the connect to server interface (corresponds to `media/start-session-connect.png`)
+
+## Running Tests
+
+To generate the screenshots:
+
+1. First build the application:
+   ```bash
+   yarn build
+   ```
+
+2. Run the tests:
+   ```bash
+   yarn test
+   ```
+
+The tests wait for specific UI elements to be ready instead of using arbitrary timeouts, ensuring consistent screenshot capture.
+
+## Note
+
+These screenshots are committed to git to track visual changes over time. They serve as both test artifacts and visual documentation of the application's interface.