install fonts

Author: EugeniyKiyashko

.github/workflows/demos_visual_tests.yml

@@ -557,13 +557,25 @@ jobs:
         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
@@ -685,11 +697,23 @@ jobs:
         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:
-        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: 4
         TCQUARANTINE: true
@@ -809,12 +833,24 @@ jobs:
           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());
         }
       });
   });