e2e demos tests: switch on native automation (DevExpress#31362)

Co-authored-by: Andrei Kharitonov <pharret31@gmail.com>

Author: EugeniyKiyashko

.github/workflows/demos_visual_tests.yml

@@ -30,7 +30,7 @@ jobs:
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
   build:
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     name: Build devextreme
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
@@ -78,7 +78,8 @@ jobs:
       fail-fast: false
       matrix:
         STRATEGY: [screenshots, accessibility]
-        THEME: ['material.blue.light', 'fluent.blue.light']
+        # THEME: ['material.blue.light', 'fluent.blue.light']
+        THEME: ['fluent.blue.light']
         CONSTEL: [jquery(1/4), jquery(2/4), jquery(3/4), jquery(4/4), jquery]
         exclude:
           - STRATEGY: accessibility
@@ -94,7 +95,7 @@ jobs:
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     name: ${{ matrix.CONSTEL }}-${{ matrix.STRATEGY }}-${{ matrix.THEME }}
     timeout-minutes: 30
 
@@ -105,7 +106,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '133.0.6943.53'
+        chrome-version: '141.0.7390.122'
         runner-type: 'github-hosted'
 
     - name: Use Node.js
@@ -151,7 +152,7 @@ jobs:
       env:
         STRATEGY: ${{ matrix.STRATEGY }}
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --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: 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
         #DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true

.github/workflows/demos_visual_tests_frameworks.yml

@@ -30,10 +30,12 @@ jobs:
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
   build-devextreme:
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     name: Build DevExtreme
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
     timeout-minutes: 40
 
     steps:
@@ -93,7 +95,7 @@ jobs:
           retention-days: 1
 
   build-demos:
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     name: Build Demos
     timeout-minutes: 20
     needs: [check-should-run, build-devextreme]
@@ -149,12 +151,14 @@ jobs:
     - name: Prepare bundles
       if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
       working-directory: apps/demos
+      env:
+        NODE_OPTIONS: "--max-old-space-size=8192"
       run: pnpx nx prepare-bundles
 
     - name: Demos - Run tsc
       if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
       working-directory: apps/demos
-      run: tsc --noEmit
+      run: pnpm exec tsc --noEmit
 
     - name: Copy build artifacts
       uses: actions/upload-artifact@v4
@@ -165,7 +169,7 @@ jobs:
         retention-days: 1
 
   get-changes:
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     needs: check-should-run
     if: github.event_name == 'pull_request' && needs.check-should-run.outputs.should-run == 'true'
     name: Get changed demos
@@ -263,7 +267,7 @@ jobs:
     needs: [check-should-run, build-devextreme]
     if: needs.check-should-run.outputs.should-run == 'true'
 
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     timeout-minutes: 60
 
     steps:
@@ -349,7 +353,7 @@ jobs:
 
   check_generated_demos:
     name: ${{ matrix.name }}
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     timeout-minutes: 10
     needs: [check-should-run, build-devextreme]
     if: needs.check-should-run.outputs.should-run == 'true'
@@ -444,7 +448,7 @@ jobs:
         CONSTEL: [react(1/4), react(2/4), react(3/4), react(4/4), vue(1/4), vue(2/4), vue(3/4), vue(4/4), angular(1/4), angular(2/4), angular(3/4), angular(4/4)]
         THEME: ['fluent.blue.light']
 
-    runs-on: ubuntu-22.04
+    runs-on: devextreme-shr2
     name: testcafe-${{ matrix.CONSTEL }}-${{ matrix.THEME }}
     timeout-minutes: 60
 
@@ -455,7 +459,7 @@ jobs:
     - name: Setup Chrome
       uses: ./.github/actions/setup-chrome
       with:
-        chrome-version: '133.0.6943.53'
+        chrome-version: '141.0.7390.122'
         runner-type: 'github-hosted'
 
     - name: Use Node.js
@@ -523,7 +527,7 @@ jobs:
       working-directory: apps/demos
       env:
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --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
+        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
         # DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true

apps/demos/Demos/Calendar/MultipleSelection/test-code.js

@@ -1,7 +1,8 @@
 testUtils.importAnd(() => 'devextreme/ui/calendar', () => DevExpress.ui.dxCalendar, (dxCalendar) => testUtils
-  .postponeUntilFound('.dx-calendar', 100, 10000)
+  .postponeUntilFound('.dx-calendar', 100, 5000)
   .then(() => {
     const instance = dxCalendar.getInstance(document.querySelector('.dx-calendar'));
     instance.option('value', [new Date('2023/08/19'), new Date('2023/08/20')]);
   })
-  .then(() => testUtils.postpone(2000)));
+  .then(() => testUtils.postpone(1000)),
+);

apps/demos/Demos/Calendar/Overview/test-code.js

@@ -1,7 +1,8 @@
 testUtils.importAnd(() => 'devextreme/ui/calendar', () => DevExpress.ui.dxCalendar, (dxCalendar) => testUtils
-  .postponeUntilFound('.dx-calendar', 100, 10000)
+  .postponeUntilFound('.dx-calendar', 100, 5000)
   .then(() => {
     const instance = dxCalendar.getInstance(document.querySelector('.dx-calendar'));
     instance.option('value', new Date('Mon Oct 10 2014 14:18:19'));
   })
-  .then(() => testUtils.postpone(2000)));
+  .then(() => testUtils.postpone(1000)),
+);

apps/demos/Demos/Charts/AxisCustomPosition/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Charts/AxisCustomPosition/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Charts/AxisCustomPosition/test-code.js

@@ -243,12 +243,11 @@ testUtils.importAnd(() => 'devextreme/viz/chart', () => DevExpress.viz.dxChart,
   ];
 
   return testUtils
-    .postponeUntilFound('#chart', 100, 10000)
+    .postponeUntilFound('#chart', 100, 5000)
     .then(() => {
       const instance = dxChart.getInstance(document.querySelector('#chart'));
       instance.option('dataSource', dataSource);
 
       testUtils.mockOptionMethod(instance);
-    })
-    .then(() => testUtils.postpone(2000));
+    });
 });

apps/demos/Demos/Charts/LegendMarkersCustomization/test-code.js

@@ -7,10 +7,9 @@ testUtils.importAnd(() => ['devextreme/viz/chart', 'devextreme/data/data_source'
   const dataSource = new DataSource(dataSourceItems);
 
   return testUtils
-    .postponeUntilFound('#chart', 100, 10000)
+    .postponeUntilFound('#chart', 100, 5000)
     .then(() => {
       const instance = dxChart.getInstance(document.querySelector('#chart'));
       instance.option('dataSource', dataSource);
-    })
-    .then(() => testUtils.postpone(2000));
+    });
 });

apps/demos/Demos/Charts/LoadDataOnDemand/test-code.js

@@ -1,4 +1,4 @@
-<dx-polar-chart
+<dx-polar-chart
   id="radarChart"
   [dataSource]="temperaturesData"
   title="Average temperature in London"