install fonts

Author: EugeniyKiyashko

.github/actions/run-qunit-tests/action.yml

@@ -101,7 +101,6 @@ runs:
       env:
         CONSTEL: ${{ inputs.constel }}
         JQUERY: ${{ inputs.useJQuery }}
-        MOBILE_UA: ${{ inputs.userAgent }}
         SHADOW_DOM: ${{ inputs.useShadowDom }}
         TZ: ${{ inputs.timezone }}
         NO_HEADLESS: ${{ inputs.headless == 'false' && 'true' || 'false' }}

.github/workflows/demos_visual_tests.yml

@@ -550,20 +550,44 @@ jobs:
     - name: DevExtreme - Build
       run: pnpx nx build devextreme
 
+    - name: Install Roboto font for Material theme
+      run: |
+        if [ ! -d "/usr/share/fonts/truetype/roboto" ]; then
+          echo "Installing Roboto font..."
+          sudo apt-get update -qq
+          sudo apt-get install -y -qq fonts-roboto fonts-roboto-unhinted
+          sudo fc-cache -f -v > /dev/null 2>&1
+          echo "Roboto font installed"
+        else
+          echo "Roboto font already installed"
+        fi
+
     - name: Run Web Server
       run: |
         python -m http.server 8080 &
         python -m http.server 8081 &
         python -m http.server 8082 &
         python -m http.server 8083 &
 
+    - name: Set Chrome flags
+      id: chrome-flags
+      run: |
+        BASE_FLAGS="chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=\"swiftshader\" --disable-features=PaintHolding --js-flags=--random-seed=2147483647"
+        
+        # For Material theme, enable better font rendering to avoid instability
+        if [[ "${{ matrix.THEME }}" != *"material"* ]]; then
+          BASE_FLAGS="$BASE_FLAGS --font-render-hinting=none --disable-font-subpixel-positioning"
+        fi
+        
+        echo "flags=$BASE_FLAGS" >> $GITHUB_OUTPUT
+
     - name: Run TestCafe tests
       shell: bash
       working-directory: apps/demos
       env:
         STRATEGY: ${{ matrix.STRATEGY }}
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+        BROWSERS: ${{ steps.chrome-flags.outputs.flags }}
         #DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true
@@ -802,19 +826,43 @@ jobs:
           name: changed-demos
           path: apps/demos
 
+      - name: Install Roboto font for Material theme
+        run: |
+          if [ ! -d "/usr/share/fonts/truetype/roboto" ]; then
+            echo "Installing Roboto font..."
+            sudo apt-get update -qq
+            sudo apt-get install -y -qq fonts-roboto fonts-roboto-unhinted
+            sudo fc-cache -f -v > /dev/null 2>&1
+            echo "Roboto font installed"
+          else
+            echo "Roboto font already installed"
+          fi
+
       - name: Run Web Server
         run: |
           python -m http.server 8080 &
           python -m http.server 8081 &
           python -m http.server 8082 &
           python -m http.server 8083 &
 
+      - name: Set Chrome flags
+        id: chrome-flags
+        run: |
+          BASE_FLAGS="chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=\"swiftshader\" --disable-features=PaintHolding --js-flags=--random-seed=2147483647"
+          
+          # For Material theme, enable better font rendering to avoid instability
+          if [[ "${{ matrix.THEME }}" != *"material"* ]]; then
+            BASE_FLAGS="$BASE_FLAGS --font-render-hinting=none --disable-font-subpixel-positioning"
+          fi
+          
+          echo "flags=$BASE_FLAGS" >> $GITHUB_OUTPUT
+
       - name: Run TestCafe tests
         shell: bash
         working-directory: apps/demos
         env:
           CHANGEDFILEINFOSPATH: changed-files.json
-          BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+          BROWSERS: ${{ steps.chrome-flags.outputs.flags }}
           # DEBUG: hammerhead:*,testcafe:*
           CONCURRENCY: 1
           TCQUARANTINE: true

apps/demos/testing/common.test.ts

@@ -1,7 +1,7 @@
 import { glob } from 'glob';
 import { join } from 'path';
 import { existsSync } from 'fs';
-import { compareScreenshot } from 'devextreme-screenshot-comparer';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { axeCheck, createReport } from '@testcafe-community/axe';
 import {
   getPortByIndex,
@@ -180,23 +180,25 @@ Object.values(FRAMEWORKS).forEach((approach) => {
         } else {
           const testTheme = process.env.THEME;
 
-          let comparisonResult;
+          const consoleMessages = await t.getBrowserConsoleMessages();
+          const errors = [...consoleMessages.error, ...consoleMessages.warn]
+            .filter((e) => !knownWarnings.some((kw) => e.startsWith(kw)));
+          await t.expect(errors).eql([]);
+
+          const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
           if (isGitHubDemos) {
-            comparisonResult = await compareScreenshot(t, `${testName}${getThemePostfix(testTheme)}.png`, undefined, comparisonOptions && {
+            await takeScreenshot(`${testName}${getThemePostfix(testTheme)}.png`, undefined, comparisonOptions && {
               ...comparisonOptions,
               looksSameComparisonOptions: { antialiasingTolerance: 10 },
             });
           } else {
-            comparisonResult = await compareScreenshot(t, `${testName}${getThemePostfix(testTheme)}.png`, undefined, comparisonOptions);
+            await takeScreenshot(`${testName}${getThemePostfix(testTheme)}.png`, undefined, comparisonOptions);
           }
 
-          const consoleMessages = await t.getBrowserConsoleMessages();
-
-          const errors = [...consoleMessages.error, ...consoleMessages.warn]
-            .filter((e) => !knownWarnings.some((kw) => e.startsWith(kw)));
-
-          await t.expect(errors).eql([]);
-          await t.expect(comparisonResult).ok('INVALID_SCREENSHOT');
+          await t
+            .expect(compareResults.isValid())
+            .ok(compareResults.errorMessages());
         }
       });
   });