test(webapp): setup electron tests

.github/workflows/ci.yml

@@ -127,7 +127,7 @@ jobs:
           path: |
             site
             viz
-      - name: Archive Javascript app
+      - name: Archive linux electron app
         uses: actions/upload-artifact@v4
         with:
           name: linux
@@ -193,7 +193,11 @@ jobs:
 
   webapp-playwright-test:
     needs: [cli-and-doc, webapp-ubuntu]
-    if: github.ref == 'refs/heads/master'
+    # run only on master OR when the PR is _not_ a draft
+    # TODO: improve this?
+    if: |
+      github.ref == 'refs/heads/master' ||
+      github.event.pull_request.draft == false
     timeout-minutes: 75
     runs-on: ubuntu-latest
     steps:
@@ -206,6 +210,7 @@ jobs:
         npm ci
         sudo apt-get update
         sudo apt-get install lighttpd
+        sudo apt-get install xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic x11-apps
         sudo npm install -D @playwright/test@latest
         npm install --save-dev @types/node @types/yauzl
     - name: Install Playwright Browsers
@@ -225,14 +230,36 @@ jobs:
           ' > lighttpd.conf
         lighttpd -f lighttpd.conf -D &
         sleep 10 && curl -i http://127.0.0.1:12345/index.html # test 
+    - name: Download electron app
+      uses: actions/download-artifact@v4
+      with:
+        name: linux
+    # - name: Setup electron app
+    #   run: |
+    #     tar xzf Kappapp.tar.gz
+    #     mkdir -p build
+    #     mv Kappapp ./build/
+    #     # pwd
+    #     # ls -R
+    #     # ls -R /home/runner/work/
+    #     Xvfb :99 -ac -screen 0 1920x1080x24 +extension GLX +render > xvfb_log.txt 2>&1 &
+    #     sleep 3
     - name: Run Playwright tests
-      run: DEBUG=pw:webserver npx playwright test --retries=3 --trace retain-on-first-failure 
+      run: |
+        # export DISPLAY=:99 # needed for electron
+        DEBUG=pw:browser* npx playwright test --retries=2 --trace retain-on-first-failure
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:
         name: playwright-report
         path: playwright-report/
         retention-days: 30
+    # - uses: actions/upload-artifact@v4
+    #   if: ${{ !cancelled() }}
+    #   with:
+    #     name: xvfb_log
+    #     path: xvfb_log.txt
+    #     retention-days: 30
 
   deploy:
     needs: [cli-and-doc, webapp-ubuntu, webapp-macos, webapp-windows, webapp-playwright-test]

gui/entry_point/main.js

@@ -1,20 +1,23 @@
 "use strict";
 // Modules to control application life and create native browser window
-const {app, BrowserWindow} = require('electron')
+const { app, BrowserWindow } = require('electron')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
 
-function createWindow () {
+// Don't open the window rightaway (with show:false below)
+// See https://zeke.github.io/electron.atom.io/docs/api/browser-window/#using-ready-to-show-event
+function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
     },
     width: 1024,
-    height: 768
+    height: 768,
+    show: false,
   })
 
   // and load the index.html of the app.
@@ -24,7 +27,7 @@ function createWindow () {
     pathname: require('path').join(__dirname, '../bin/KappaSwitchman'),
     query: { label: 'Local' }
   })
-  mainWindow.loadFile('index.html',{
+  mainWindow.loadFile('index.html', {
     query: {
       host: sim_agent,
       // level: "debug",
@@ -35,24 +38,29 @@ function createWindow () {
   // mainWindow.webContents.openDevTools()
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
+  mainWindow.on('closed', function() {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
     mainWindow = null
   })
+
+  mainWindow.once('ready-to-show', () => {
+    // TODO: put this back conditionnally
+    // mainWindow.show()
+  })
 }
 
 // Quit when all windows are closed.
-app.on('window-all-closed', function () {
+app.on('window-all-closed', function() {
   // On macOS it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
     app.quit()
   }
 })
 
-app.on('activate', function () {
+app.on('activate', function() {
   // On macOS it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {

gui/resources/JsSim.css

@@ -174,7 +174,7 @@ rect { stroke-width: 2; }
 }
 
 .plot-legend-swatch { stroke-width : 1; }
-.plot-tick-proof { }
+/* .plot-tick-proof { } */
 .contact-tooltip { position: fixed;
                    z-index: 10; padding: 2px;
                    border-style: solid;

playwright.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
+import type { TestOptions } from './tests/playwright/project_electron_param';
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -11,7 +13,7 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-export default defineConfig({
+export default defineConfig<TestOptions>({
   testDir: './tests/playwright',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -33,6 +35,7 @@ export default defineConfig({
   },
 
   /* Configure projects for major browsers */
+  // See https://playwright.dev/docs/test-parameterize#parameterized-projects for electron param definition
   projects: [
     {
       name: 'chromium',
@@ -44,6 +47,12 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
+    // TODO: try having electron tests working
+    // {
+    //   name: 'electron',
+    //   use: { run_in_electron: true },
+    // },
+
     // TODO: try making the app work on webkit
     /*
     {

tests/playwright/README.md

@@ -24,3 +24,11 @@ UPDATE_EXPORTS=true npx playwright test --update-snapshots
 UPDATE_EXPORTS=true npx playwright test --update-snapshots --project firefox
 UPDATE_EXPORTS=true npx playwright test procedure.spec.ts:449 --update-snapshots
 ```
+
+### Electron
+
+Local tests with electron need to have access to the actual screen, it seems. 
+So they should be run with `-j 1` to have a single worker, and the electron window has to stay visible at least.
+
+Downloads open a dialog that is not handled by playwright, so there is no testing of electron downloads.
+They may be enabled and completed manually by changing the boolean in `project_electron_param.ts` (untested).