tests(CI): configure testcafe runner and pipelines

wdevfx · wdevfx · commit 775da04c08a0 · 2025-03-02T23:07:54.000+04:00
diff --git a/.github/actions/run-qunit-tests/action.yml b/.github/actions/run-qunit-tests/action.yml
@@ -54,7 +54,7 @@ runs:
       if: ${{ inputs.browser == 'chrome' }}
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Setup Firefox profile
       if: ${{ inputs.browser == 'firefox' }}
diff --git a/.github/actions/setup-chrome/action.yml b/.github/actions/setup-chrome/action.yml
@@ -31,17 +31,10 @@ runs:
         if [ -n "$CHROME_VERSION" ]; then
           sudo apt-get update
           sudo apt-get -y install libu2f-udev
-        
-          mkdir google-chrome-setup 
-          pushd google-chrome-setup
-          npm init -y
-          npm set //npm.pkg.github.com/:_authToken="${{ github.token }}"  
-          npm i @devexpress/devextreme-google-chrome-image@1.0.0 --registry=https://npm.pkg.github.com
-          sudo dpkg -i node_modules/@devexpress/devextreme-google-chrome-image/google-chrome-stable_121.0.6167.184-1_amd64.deb
+          curl -L "https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_${CHROME_VERSION}-1_amd64.deb" > /tmp/chrome.deb
+          sudo dpkg -i /tmp/chrome.deb
+          unlink /tmp/chrome.deb
           google-chrome-stable --version
-          popd
-        
-          rm -rf google-chrome-setup  
         else
           echo "Skip Chrome upgrade"
         fi
diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/demos_visual_tests.yml
@@ -73,7 +73,7 @@ jobs:
 
     runs-on: ubuntu-22.04
     name: ${{ matrix.CONSTEL }}-${{ matrix.STRATEGY }}-${{ matrix.THEME }}
-    timeout-minutes: 30
+    timeout-minutes: 180
 
     steps:
     - name: Get sources
@@ -82,7 +82,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
diff --git a/.github/workflows/demos_visual_tests_frameworks.yml b/.github/workflows/demos_visual_tests_frameworks.yml
@@ -364,7 +364,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml
@@ -92,7 +92,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
diff --git a/.github/workflows/run-testcafe-on-gh-pages.yml b/.github/workflows/run-testcafe-on-gh-pages.yml
@@ -54,7 +54,7 @@ jobs:
             - name: Setup Chrome
               uses: ./devextreme/.github/actions/setup-chrome
               with:
-                chrome-version: '121.0.6167.184'
+                chrome-version: '133.0.6943.53'
 
             - uses: pnpm/action-setup@v3
               with:
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
@@ -79,11 +79,13 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          { componentFolder: "accessibility", name: "accessibility (1/5)", indices: "1/5" },
-          { componentFolder: "accessibility", name: "accessibility (2/5)", indices: "2/5" },
-          { componentFolder: "accessibility", name: "accessibility (3/5)", indices: "3/5" },
-          { componentFolder: "accessibility", name: "accessibility (4/5)", indices: "4/5" },
-          { componentFolder: "accessibility", name: "accessibility (5/5)", indices: "5/5" },
+          { componentFolder: "accessibility", name: "accessibility (1/7)", indices: "1/7" },
+          { componentFolder: "accessibility", name: "accessibility (2/7)", indices: "2/7" },
+          { componentFolder: "accessibility", name: "accessibility (3/7)", indices: "3/7" },
+          { componentFolder: "accessibility", name: "accessibility (4/7)", indices: "4/7" },
+          { componentFolder: "accessibility", name: "accessibility (5/7)", indices: "5/7" },
+          { componentFolder: "accessibility", name: "accessibility (6/7)", indices: "6/7" },
+          { componentFolder: "accessibility", name: "accessibility (7/7)", indices: "7/7" },
           { componentFolder: "accessibility", name: "accessibility - material (1/7)", theme: "material.blue.light", indices: "1/7" },
           { componentFolder: "accessibility", name: "accessibility - material (2/7)", theme: "material.blue.light", indices: "2/7" },
           { componentFolder: "accessibility", name: "accessibility - material (3/7)", theme: "material.blue.light", indices: "3/7" },
@@ -105,35 +107,42 @@ jobs:
           { componentFolder: "chat", name: "chat - material", theme: 'material.blue.light' },
           { componentFolder: "chat", name: "chat - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "treeList", name: "treeList", concurrency: 1 },
-          { componentFolder: "dataGrid", name: "dataGrid (1/5)", indices: "1/5" },
-          { componentFolder: "dataGrid", name: "dataGrid (2/5)", indices: "2/5" },
-          { componentFolder: "dataGrid", name: "dataGrid (3/5)", indices: "3/5" },
-          { componentFolder: "dataGrid", name: "dataGrid (4/5)", indices: "4/5" },
-          { componentFolder: "dataGrid", name: "dataGrid (5/5)", indices: "5/5" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (1/5)", indices: "1/5" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (2/5)", indices: "2/5" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (3/5)", indices: "3/5" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (4/5)", indices: "4/5" },
+          { componentFolder: "dataGrid/common", name: "dataGrid / common (5/5)", indices: "5/5" },
+          { componentFolder: "dataGrid/stickyColumns", name: "dataGrid / sticky (1/3)", indices: "1/3" },
+          { componentFolder: "dataGrid/stickyColumns", name: "dataGrid / sticky (2/3)", indices: "2/3" },
+          { componentFolder: "dataGrid/stickyColumns", name: "dataGrid / sticky (3/3)", indices: "3/3" },
           { componentFolder: "pivotGrid", name: "pivotGrid", concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - material", theme: 'material.blue.light', concurrency: 1 },
           { componentFolder: "pivotGrid", name: "pivotGrid - fluent", theme: 'fluent.blue.light', concurrency: 1 },
-          { componentFolder: "scheduler", name: "scheduler (1/5)", indices: "1/5" },
-          { componentFolder: "scheduler", name: "scheduler (2/5)", indices: "2/5" },
-          { componentFolder: "scheduler", name: "scheduler (3/5)", indices: "3/5" },
-          { componentFolder: "scheduler", name: "scheduler (4/5)", indices: "4/5" },
-          { componentFolder: "scheduler", name: "scheduler (5/5)", indices: "5/5" },
-          { componentFolder: "scheduler/timezones", name: "scheduler (Europe/Berlin)", timezone: "Europe/Berlin" },
-          { componentFolder: "scheduler/timezones", name: "scheduler (America/Los_Angeles)", timezone: "America/Los_Angeles" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (1/6)", indices: "1/6" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (2/6)", indices: "2/6" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (3/6)", indices: "3/6" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (4/6)", indices: "4/6" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (5/6)", indices: "5/6" },
+          { componentFolder: "scheduler/common", name: "scheduler / common (6/6)", indices: "6/6" },
+          { componentFolder: "scheduler/viewOffset/common", name: "scheduler / offset" },
+          { componentFolder: "scheduler/viewOffset/markup", name: "scheduler / offset markups" },
+          { componentFolder: "scheduler/timezones", name: "scheduler / timezones (Europe/Berlin)", timezone: "Europe/Berlin" },
+          { componentFolder: "scheduler/timezones", name: "scheduler / timezones (America/Los_Angeles)", timezone: "America/Los_Angeles" },
           { componentFolder: "form", name: "form (1/2)", indices: "1/2" },
           { componentFolder: "form", name: "form (2/2)", indices: "2/2" },
-          { componentFolder: "form", name: "form - material (1/4)", theme: 'material.blue.light', indices: "1/4" },
-          { componentFolder: "form", name: "form - material (2/4)", theme: 'material.blue.light', indices: "2/4" },
-          { componentFolder: "form", name: "form - material (3/4)", theme: 'material.blue.light', indices: "3/4" },
-          { componentFolder: "form", name: "form - material (4/4)", theme: 'material.blue.light', indices: "4/4" },
+          { componentFolder: "form", name: "form - material (1/2)", theme: 'material.blue.light', indices: "1/2" },
+          { componentFolder: "form", name: "form - material (2/2)", theme: 'material.blue.light', indices: "2/2" },
           { componentFolder: "form", name: "form - fluent (1/2)", theme: 'fluent.blue.light', indices: "1/2" },
           { componentFolder: "form", name: "form - fluent (2/2)", theme: 'fluent.blue.light', indices: "2/2" },
-          { componentFolder: "editors", name: "editors (1/2)", indices: "1/2" },
-          { componentFolder: "editors", name: "editors (2/2)", indices: "2/2" },
-          { componentFolder: "editors", name: "editors - material (1/2)", theme: 'material.blue.light', indices: "1/2" },
-          { componentFolder: "editors", name: "editors - material (2/2)", theme: 'material.blue.light', indices: "2/2" },
-          { componentFolder: "editors", name: "editors - fluent (1/2)", theme: 'fluent.blue.light', indices: "1/2" },
-          { componentFolder: "editors", name: "editors - fluent (2/2)", theme: 'fluent.blue.light', indices: "2/2" },
+          { componentFolder: "editors", name: "editors (1/3)", indices: "1/3" },
+          { componentFolder: "editors", name: "editors (2/3)", indices: "2/3" },
+          { componentFolder: "editors", name: "editors (3/3)", indices: "3/3" },
+          { componentFolder: "editors", name: "editors - material (1/3)", indices: "1/3", theme: 'material.blue.light' },
+          { componentFolder: "editors", name: "editors - material (2/3)", indices: "2/3", theme: 'material.blue.light' },
+          { componentFolder: "editors", name: "editors - material (3/3)", indices: "3/3", theme: 'material.blue.light' },
+          { componentFolder: "editors", name: "editors - fluent (1/3)", indices: "1/3", theme: 'fluent.blue.light' },
+          { componentFolder: "editors", name: "editors - fluent (2/3)", indices: "2/3", theme: 'fluent.blue.light' },
+          { componentFolder: "editors", name: "editors - fluent (3/3)", indices: "3/3", theme: 'fluent.blue.light' },
           { componentFolder: "htmlEditor", name: "htmlEditor", concurrency: 1 },
           { componentFolder: "htmlEditor", name: "htmlEditor - material", theme: 'material.blue.light', concurrency: 1 },
           { componentFolder: "htmlEditor", name: "htmlEditor - fluent", theme: 'fluent.blue.light', concurrency: 1 },
@@ -147,7 +156,8 @@ jobs:
           { componentFolder: "filterBuilder", name: "filterBuilder - material", theme: 'material.blue.light' },
           { componentFolder: "filterBuilder", name: "filterBuilder - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "pagination", name: "pagination" },
-          { componentFolder: "pagination", name: "pagination - material", theme: 'material.blue.light' },
+#         TODO Chrome133: skipped during chrome update
+#         { componentFolder: "pagination", name: "pagination - material", theme: 'material.blue.light' },
           { componentFolder: "pagination", name: "pagination - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "gantt", name: "gantt" },
         ]
@@ -176,7 +186,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Use Node.js
       uses: actions/setup-node@v4
diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Setup Chrome
         uses: ./.github/actions/setup-chrome
         with:
-          chrome-version: '121.0.6167.184'
+          chrome-version: '133.0.6943.53'
 
       - name: Use Node.js
         uses: actions/setup-node@v4
diff --git a/e2e/testcafe-devextreme/package.json b/e2e/testcafe-devextreme/package.json
@@ -14,6 +14,7 @@
     "devextreme": "workspace:~",
     "devextreme-screenshot-comparer": "2.0.17",
     "devextreme-testcafe-models": "workspace:*",
+    "glob": "10.4.5",
     "minimist": "1.2.8",
     "mockdate": "3.0.5",
     "nconf": "0.12.1",
diff --git a/e2e/testcafe-devextreme/runner.js b/e2e/testcafe-devextreme/runner.js
@@ -5,18 +5,19 @@ const createTestCafe = require('testcafe');
 const fs = require('fs');
 const process = require('process');
 const parseArgs = require('minimist');
+const { globSync } = require('glob');
 const testPageUtils = require('./helpers/clearPage');
 require('nconf').argv();
 
-const changeTheme = async(themeName) => createTestCafe.ClientFunction(() => new Promise((resolve) => {
+const changeTheme = async(t, themeName) => createTestCafe.ClientFunction(() => new Promise((resolve) => {
     // eslint-disable-next-line no-undef
     window.DevExpress.ui.themes.ready(resolve);
     // eslint-disable-next-line no-undef
     window.DevExpress.ui.themes.current(themeName);
 }),
-{ dependencies: { themeName } })();
+{ dependencies: { themeName } }).with({ boundTestRun: t })();
 
-const addShadowRootTree = async function() {
+const addShadowRootTree = async(t) => {
     await createTestCafe.ClientFunction(() => {
         const root = document.querySelector('#parentContainer');
         const childNodes = root.childNodes;
@@ -29,7 +30,7 @@ const addShadowRootTree = async function() {
         shadowContainer.append.apply(shadowContainer, Array.from(childNodes));
 
         root.shadowRoot.appendChild(shadowContainer);
-    })();
+    }).with({ boundTestRun: t })();
 };
 
 let testCafe;
@@ -62,8 +63,8 @@ createTestCafe({
         const browsers = args.browsers
             .split(' ')
             .map((browser) => expandBrowserAlias(browser, args.componentFolder.trim()));
-        // eslint-disable-next-line no-console
-        console.log('Browsers:', browsers);
+
+        console.info('Browsers:', browsers);
 
         const runner = testCafe.createRunner()
             .browsers(browsers)
@@ -78,17 +79,38 @@ createTestCafe({
 
         runner.concurrency(args.concurrency || 3);
 
+        const split = (array, chunkCount) => {
+            const fixturesInChunkCount = Math.ceil(array.length / chunkCount);
+            const [...arr] = array;
+            const res = [];
+
+            while(arr.length) {
+                res.push(arr.splice(0, fixturesInChunkCount));
+            }
+
+            return res;
+        };
+
         const filters = [];
+
         if(indices) {
             const [current, total] = indices.split(/_|of|\\|\//ig).map(x => +x);
-            let testIndex = 0;
-            filters.push(() => {
-                const result = (testIndex % total) === (current - 1);
-                testIndex += 1;
-                return result;
-
+            const fixtures = globSync([`./tests/${componentFolder}/*.ts`]);
+            const fixtureChunks = split(fixtures, total);
+            const targetFixtureChunk = fixtureChunks[current - 1] ?? [];
+
+            console.info(' === test run config ===');
+            console.info(` > indices: current = ${current} | total = ${total}`);
+            console.info(' > glob: ', [`./tests/${componentFolder}/*.ts`]);
+            console.info(' > all fixtures: ', fixtureChunks);
+            console.info(' > fixtures: ', targetFixtureChunk, '\n');
+
+            filters.push((testName, fixtureName, fixturePath) => {
+                // TODO: improve performance
+                return targetFixtureChunk.some((path) => fixturePath.includes(path));
             });
         }
+
         if(testName) {
             filters.push(name => name === testName);
         }
@@ -112,18 +134,21 @@ createTestCafe({
         }
 
         const runOptions = {
-            quarantineMode: { successThreshold: 1, attemptLimit: 5 },
+            quarantineMode: { successThreshold: 1, attemptLimit: 10 },
         };
 
         runOptions.hooks = {
             test: {
-                before: async() => {
+                before: async(t) => {
+                    // TODO: Move to a single const (look at restoreBrowserSize helper module)
+                    await t.resizeWindow(1200, 800);
+
                     if(args.shadowDom) {
-                        await addShadowRootTree();
+                        await addShadowRootTree(t);
                     }
 
                     if(args.theme) {
-                        await changeTheme(args.theme);
+                        await changeTheme(t, args.theme);
                     }
                 },
                 after: async() => {
@@ -158,7 +183,7 @@ function setShadowDom(args) {
 function expandBrowserAlias(browser, componentFolder) {
     switch(browser) {
         case 'chrome:devextreme-shr2':
-            return 'chrome:headless --disable-gpu --window-size=1200,800';
+            return 'chrome:headless --no-sandbox --disable-gpu --window-size=1200,800 --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';
         case 'chrome:docker':
             return 'chromium:headless --no-sandbox --disable-gpu --window-size=1200,800';
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
