feat: e2e combined improvements (#1998)

Contains several changes that all touch many snapshots. Combined to
reduce snapshot churn.

The primary goal was to address webkit kerning issues caused by:
microsoft/playwright#20203

Recommend to review using `.` vscode mode and initially collapsing all
snapshot folders.

1. Moves e2e test to execute inside docker container so enviroment is
consitent between ci and local
- changes e2e.yml to build a docker container, then uses that for each
matrix test
- dockerfile remove deja vu stuff, environment is now the same and
grid.tsx
- dockercompose adds service that runs the image from CI with matrix
config via env variables
- Fixes dockerfile and compose to *actually use the node version
installed by nvm* (existing code didn't actually use the version
installed by nvm, only the commands inside the -i interactive session
would)
       - Get rid of interactive mode and make source work
- Sym link nvm node binaries to clobber the version installed by
playwright jammy container
   - Churns snapshots 

  
2. Removes deprecated ButtonOld
   - removed button old component
   - changes to style guide to no longer display that component
   - removed usage in chart filter overlay
   - renames snapshots to by id instead of index for buttons
   - Churns snapshots 
   
3.  Disable kerning and smoothing in webkit playwright tests:
- theory is webkit kerning may be non-deterministic, disabling entirely
may avoid those diffs
- adds Playwright.css dynamically imported based of a env
VITE_PLAYWRIGHT variable to AppRoot
- initially tried using built in
https://playwright.dev/docs/test-snapshots#stylepath however, results
were inconsistent as canvas grids may or may not re-render after
playwright appended the styles
    - Updated playwright version to 1.44
    - Churns snapshots 
   
4.  Optimize ThemeColors section in style guide
    - Makes styleguide section load faster 
- Remove all the ContrastColor() which have poor performance and were
being done of every swatch. Instead text next to swatch
- Move slow NormailzeColors() call in tooltip into props so it doesn't
run unless tooltip is shown
    - Churns snapshots 
    
 5. Run golden-layout tests in parallel
- I don't see a reason why these need to be serial, so might be slightly
faster in parallel
  

BREAKING CHANGE: Removed ButtonOld component, use Button instead.

Author: dsmmcken

.github/workflows/e2e.yml

@@ -14,7 +14,7 @@ on:
       - 'release/**'
       - 'feature/**'
 env:
-  DOCKER_TAG: edge
+  DHC_VERSION: edge
 
 jobs:
   build:
@@ -24,40 +24,19 @@ jobs:
       cancel-in-progress: true
 
     steps:
-      - name: Check installed fonts
-        run: 'fc-list : family'
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - uses: actions/checkout@v4
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      - name: Cache node modules
-        id: cache-node-modules
-        uses: actions/cache@v4
-        with:
-          path: |
-            node_modules
-            packages/*/node_modules
-          key: e2e-node-modules-${{ hashFiles('package-lock.json')}}
-
-      - name: Install dependencies
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm ci --no-audit
-
-      - name: Build
-        run: npm run build
+      - name: Build and Save docker image
+        run: |
+          docker build -t e2e-ci:test -f ./tests/docker-scripts/Dockerfile .
+          docker save e2e-ci -o e2e-ci.tar.gz
 
-      - name: Upload build for test jobs
+      - name: Store docker build for test matrix
         uses: actions/upload-artifact@v4
         with:
-          name: web-build
-          path: |
-            *
-            !node_modules
+          name: image-cache
+          path: e2e-ci.tar.gz
           retention-days: 1
 
   e2e-tests:
@@ -73,65 +52,48 @@ jobs:
         config: [chromium-1-1, firefox-1-1, webkit-1-2, webkit-2-2]
 
     steps:
-      - name: Download build
-        uses: actions/download-artifact@v4
-        with:
-          name: web-build
-
-      - name: Run core server:${{ env.DOCKER_TAG }}
-        run: |
-          docker pull --quiet ghcr.io/deephaven/server:${{ env.DOCKER_TAG }}
-          docker run --detach --publish 10000:10000 --name dh-core-server -v ./tests/docker-scripts/data:/data --env "START_OPTS=-Xmx4g -DAuthHandlers=io.deephaven.auth.AnonymousAuthenticationHandler -Ddeephaven.application.dir=./data/app.d" ghcr.io/deephaven/server:${{ env.DOCKER_TAG }}
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - name: Cache node modules
-        id: cache-node-modules
-        uses: actions/cache@v4
+      - name: Download docker image for test matrix
+        uses: actions/download-artifact@v4
         with:
-          path: |
-            node_modules
-            packages/*/node_modules
-          key: e2e-node-modules-${{ hashFiles('package-lock.json')}}
-
-      - name: Install Playwright dependencies
-        run: PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install --with-deps
-
-      - name: Playwright version
-        run: npx playwright --version
+          name: image-cache
 
-      - name: Install dependencies
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm ci --no-audit
+      - name: Load docker image
+        run: docker load -i e2e-ci.tar.gz
 
       - name: Extract browser config
         id: config
         env:
           MATRIX_CONFIG: ${{ matrix.config }}
         run: |
-          echo "browser=${MATRIX_CONFIG:0:-4}" >> $GITHUB_OUTPUT
-          echo "shard=${MATRIX_CONFIG: -3:1}" >> $GITHUB_OUTPUT
-          echo "shardTotal=${MATRIX_CONFIG: -1:1}" >> $GITHUB_OUTPUT
+          echo "BROWSER=${MATRIX_CONFIG:0:-4}" >> $GITHUB_ENV
+          echo "SHARD=${MATRIX_CONFIG: -3:1}" >> $GITHUB_ENV
+          echo "SHARD_TOTAL=${MATRIX_CONFIG: -1:1}" >> $GITHUB_ENV
 
-      - name: Run Playwright tests
-        run: PLAYWRIGHT_BROWSERS_PATH=0 npx playwright test --config=playwright-ci.config.ts --reporter=blob --project=${{ steps.config.outputs.browser }} --shard=${{ steps.config.outputs.shard }}/${{ steps.config.outputs.shardTotal }}
+      - name: Run tests
+        run: './tests/docker-scripts/run.sh e2e-ci-matrix'
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report-blob-${{ matrix.config }}
           path: blob-report/
           retention-days: 1
 
       - name: Dump server logs
         if: failure()
-        run: docker logs dh-core-server > /tmp/server-log.txt
+        run: docker logs dhc-server > /tmp/server-log.txt
 
       - name: Upload server logs
         if: failure()
         uses: actions/upload-artifact@v4
         with:
           name: server-logs-${{ matrix.config }}
           path: /tmp/server-log.txt
+          retention-days: 14
 
   merge-reports:
     if: ${{ !cancelled() }}
@@ -147,15 +109,15 @@ jobs:
       - name: Merge into HTML Report
         run: |
           mkdir -p all-blob-reports
-          mv playwright-report-blob-chromium-1-1/report-1.zip all-blob-reports/chromium-1-1.zip
-          mv playwright-report-blob-firefox-1-1/report-1.zip all-blob-reports/firefox-1-1.zip
-          mv playwright-report-blob-webkit-1-2/report-1.zip all-blob-reports/webkit-1-2.zip
-          mv playwright-report-blob-webkit-2-2/report-2.zip all-blob-reports/webkit-2-2.zip
+          mv playwright-report-blob-chromium-1-1/report-chromium-1.zip all-blob-reports/chromium-1-1.zip
+          mv playwright-report-blob-firefox-1-1/report-firefox-1.zip all-blob-reports/firefox-1-1.zip
+          mv playwright-report-blob-webkit-1-2/report-webkit-1.zip all-blob-reports/webkit-1-2.zip
+          mv playwright-report-blob-webkit-2-2/report-webkit-2.zip all-blob-reports/webkit-2-2.zip
           npx playwright merge-reports --reporter html,github ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4
         with:
           name: playwright-report
           path: playwright-report
-          retention-days: 90
+          retention-days: 30

package-lock.json

@@ -69,7 +69,7 @@
     "@deephaven/tsconfig": "file:../tsconfig",
     "@deephaven/utils": "file:../utils",
     "@fortawesome/fontawesome-common-types": "^6.1.1",
-    "@playwright/test": "1.37.1",
+    "@playwright/test": "1.44.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.3",
     "@testing-library/react-hooks": "^8.0.1",

package.json

@@ -6,6 +6,11 @@ import { DownloadServiceWorkerUtils } from '@deephaven/iris-grid';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import AppRouter from './main/AppRouter';
 
+// load addional css for playwright docker tests
+if (import.meta.env.VITE_PLAYWRIGHT_CSS === '1') {
+  await import('./Playwright.css');
+}
+
 export function AppRoot(): JSX.Element {
   DownloadServiceWorkerUtils.register(
     new URL(

packages/code-studio/src/AppRoot.tsx

@@ -0,0 +1,18 @@
+/*
+* This stylesheet is only applied during playwright tests.
+
+* Attempting to fix kerning issues with webkit
+* by disabling ligatures, kerning and smoothing for all tests
+* https://github.com/microsoft/playwright/issues/20203
+*
+* In theory this makes it more deterministic and consistent.
+*
+*/
+
+* {
+  -webkit-font-smoothing: none !important;
+  font-variant-ligatures: none !important;
+  font-feature-settings: 'liga' 0 !important;
+  font-kerning: none !important;
+  text-rendering: optimizespeed !important;
+}