tests(CI): configure testcafe runner and pipelines

wdevfx · alexslavr · commit 8b3769529e6c · 2025-03-03T13:11:33.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
+        fi
diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/demos_visual_tests.yml
@@ -66,7 +66,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
@@ -124,7 +124,7 @@ jobs:
 
     - name: Sanitize job name
       if: ${{ failure() }}
-      run: echo "JOB_NAME=$(echo "${{ matrix.ARGS.name }}" | tr '/' '-')" >> $GITHUB_ENV
+      run: echo "JOB_NAME=$(echo "${{ matrix.CONSTEL }}-${{ matrix.THEME }}" | tr '/' '-')" >> $GITHUB_ENV
 
     - name: Copy screenshots artifacts
       if: failure() && matrix.STRATEGY == 'screenshots'
diff --git a/.github/workflows/demos_visual_tests_frameworks.yml b/.github/workflows/demos_visual_tests_frameworks.yml
@@ -303,7 +303,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '121.0.6167.184'
+        chrome-version: '133.0.6943.53'
 
     - name: Restore npm cache
       uses: actions/cache@v4
@@ -385,7 +385,7 @@ jobs:
 
     - name: Sanitize job name
       if: ${{ failure() }}
-      run: echo "JOB_NAME=$(echo "${{ matrix.ARGS.name }}" | tr '/' '-')" >> $GITHUB_ENV
+      run: echo "JOB_NAME=$(echo "${{ matrix.CONSTEL }}-${{ matrix.THEME }}" | tr '/' '-')" >> $GITHUB_ENV
 
     - name: Copy screenshots artifacts
       if: ${{ failure() }}
diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml
@@ -20,7 +20,7 @@ jobs:
       fail-fast: false
 
     runs-on: devextreme-shr2
-    timeout-minutes: 15
+    timeout-minutes: 30
 
     steps:
     - name: Get sources
@@ -77,7 +77,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
@@ -50,7 +50,7 @@ jobs:
             - name: Setup Chrome
               uses: ./devextreme/.github/actions/setup-chrome
               with:
-                chrome-version: '121.0.6167.184'
+                chrome-version: '133.0.6943.53'
 
             - name: DevExtreme - Install packages
               working-directory: devextreme
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
@@ -64,11 +64,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" },
@@ -87,32 +89,39 @@ jobs:
           { componentFolder: "common", name: "common - material", theme: 'material.blue.light' },
           { componentFolder: "common", name: "common - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "treeList", name: "treeList", concurrency: 1 },
-          { componentFolder: "dataGrid", name: "dataGrid (1/2)", indices: "1/2" },
-          { componentFolder: "dataGrid", name: "dataGrid (2/2)", indices: "2/2" },
+          { 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: "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 },
@@ -141,7 +150,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
@@ -13,7 +13,7 @@ env:
 jobs:
   test:
     runs-on: devextreme-shr2
-    timeout-minutes: 30
+    timeout-minutes: 60
 
     steps:
       - name: Get sources
diff --git a/e2e/testcafe-devextreme/package.json b/e2e/testcafe-devextreme/package.json
@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "devextreme": "~24.1.10",
+    "glob": "^10.4.5",
     "testcafe": "2.5.0"
   }
 }
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,9 @@ 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 +80,40 @@ 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] ?? [];
+
+            /* eslint-disable no-console */
+            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');
+            /* eslint-enable no-console */
+
+            filters.push((testName, fixtureName, fixturePath) => {
+                // TODO: improve performance
+                return targetFixtureChunk.some((path) => fixturePath.includes(path));
             });
         }
+
         if(testName) {
             filters.push(name => name === testName);
         }
@@ -117,13 +142,16 @@ createTestCafe({
 
         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 +186,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/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`},`
`9`	`9`	`"devDependencies": {`
`10`	`10`	`"devextreme": "~24.1.10",`
	`11`	`+ "glob": "^10.4.5",`
`11`	`12`	`"testcafe": "2.5.0"`
`12`	`13`	`}`
`13`	`14`	`}`