e2e tests: switch on native automation (#31218)

.github/workflows/demos_visual_tests_frameworks.yml

@@ -35,7 +35,7 @@ jobs:
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
     env:
-      NODE_OPTIONS: "--max-old-space-size=8192"
+      NODE_OPTIONS: --max-old-space-size=8192
     timeout-minutes: 40
 
     steps:
@@ -154,7 +154,7 @@ jobs:
       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"
+        NODE_OPTIONS: --max-old-space-size=8192
       run: pnpx nx prepare-bundles
 
     - name: Demos - Run tsc

.github/workflows/qunit_tests.yml

@@ -149,19 +149,15 @@ jobs:
       matrix:
         constel: [
           'ui',
-          'ui.widgets(1/3)',
-          'ui.widgets(2/3)',
-          'ui.widgets(3/3)',
+          'ui.widgets(1/2)',
+          'ui.widgets(2/2)',
           'ui.editors(1/2)',
           'ui.editors(2/2)',
           'ui.htmlEditor',
-          'ui.grid(1/4)',
-          'ui.grid(2/4)',
-          'ui.grid(3/4)',
-          'ui.grid(4/4)',
-          'ui.scheduler(1/3)',
-          'ui.scheduler(2/3)',
-          'ui.scheduler(3/3)',
+          'ui.grid(1/2)',
+          'ui.grid(2/2)',
+          'ui.scheduler(1/2)',
+          'ui.scheduler(2/2)',
           'viz'
         ]
 

.github/workflows/testcafe_tests.yml

@@ -70,7 +70,10 @@ jobs:
       run: pnpm install
 
     - name: Build
-      run: pnpx nx build devextreme
+      shell: bash
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+      run: pnpx nx build devextreme --uglify
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -92,18 +95,13 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          { componentFolder: "accessibility", name: "accessibility (1/2)", indices: "1/2" },
-          { componentFolder: "accessibility", name: "accessibility (2/2)", indices: "2/2" },
+          { componentFolder: "accessibility", name: "accessibility" },
           { componentFolder: "common", name: "common" },
 
           # Grids tests need to be reworked to work in fluent theme
-          { 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/sticky", name: "dataGrid / sticky (1/2)", indices: "1/2" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (2/2)", indices: "2/2" },
+          { componentFolder: "dataGrid", name: "dataGrid (1/3)", indices: "1/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (2/3)", indices: "2/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (3/3)", indices: "3/3" },
           { componentFolder: "cardView", name: "cardView" },
 
           # Scheduler tests need to be reworked to work in fluent theme
@@ -163,8 +161,8 @@ jobs:
       run: |
         echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - uses: actions/cache@v4
-      name: Setup pnpm cache
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
       with:
         path: |
           ${{ env.STORE_PATH }}
@@ -178,6 +176,8 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
       run: |
         if [ "${{ matrix.ARGS.theme }}" != "" ]; then
           THEME="--theme ${{ matrix.ARGS.theme }}"

e2e/testcafe-devextreme/.testcaferc.json

@@ -2,6 +2,7 @@
   "screenshots": {
     "path": "./",
     "takeOnFails": true,
+    "thumbnails": false,
     "pathPattern": "/artifacts/failedtests/${TEST}"
   },
   "screenshots-comparer": {

e2e/testcafe-devextreme/helpers/domUtils.ts

@@ -116,3 +116,23 @@ export const addCaptionTo = ClientFunction((
 
   element?.insertAdjacentText(where, caption);
 });
+
+export const addFocusableElementBefore = ClientFunction((
+  targetSelector: string,
+  elementId = 'focusable-start',
+) => {
+  const existing = document.getElementById(elementId);
+  existing?.remove();
+
+  const target = document.querySelector(targetSelector);
+  const button = document.createElement('button');
+  button.id = elementId;
+  button.textContent = 'Start';
+  button.style.position = 'fixed';
+  button.style.top = '0';
+  button.style.left = '0';
+  button.style.zIndex = '-1';
+  button.style.opacity = '0';
+  target?.parentElement?.insertBefore(button, target);
+  return button.id;
+});

e2e/testcafe-devextreme/helpers/getPageUrl.ts

@@ -2,13 +2,7 @@ import { pathToFileURL } from 'url';
 import { join } from 'path';
 
 export default (currentDir: string, pagePath: string): string => {
-  let path = pagePath;
-
-  if (process.env.shadowDom === 'true') {
-    const lastIndexOfSlash = path.lastIndexOf('/');
-
-    path = `${path.substring(0, lastIndexOfSlash + 1)}shadowDom/${path.substring(lastIndexOfSlash + 1)}`;
-  }
+  const path = pagePath;
 
   const fullPath = join(currentDir, path);
 

e2e/testcafe-devextreme/helpers/testPageUtils.ts

@@ -4,10 +4,8 @@ import {
   removeStylesheetRulesFromPage,
 } from './domUtils';
 
-export async function clearTestPage(testController: TestController): Promise<void> {
-  const shadowDom = process.env.shadowDom === 'true';
-
-  const clearTestPageFn = ClientFunction(() => {
+export async function clearTestPage(t: TestController): Promise<void> {
+  await ClientFunction(() => {
     const widgetSelector = '.dx-widget';
     const $elements = $(widgetSelector)
       .filter((_, element) => $(element).parents(widgetSelector).length === 0);
@@ -23,6 +21,9 @@ export async function clearTestPage(testController: TestController): Promise<voi
       $widgetElement.empty();
     });
 
+    const element = document.getElementById('focusable-start');
+    element?.remove();
+
     const body = document.querySelector('body');
     if (body) {
       body.innerHTML = '';
@@ -40,29 +41,58 @@ export async function clearTestPage(testController: TestController): Promise<voi
     `;
 
     body?.prepend(temp.firstElementChild!);
-  }, {
-    dependencies: {
-      shadowDom,
-    },
-  });
+  }).with({ boundTestRun: t })();
 
-  await clearTestPageFn.with({ boundTestRun: testController })();
-  await removeStylesheetRulesFromPage.with({ boundTestRun: testController })();
+  await removeStylesheetRulesFromPage.with({ boundTestRun: t })();
 }
 
 export async function loadAxeCore(t: TestController): Promise<void> {
-  await t.eval(() => new Promise<void>((resolve, reject) => {
+  await ClientFunction(() => new Promise<void>((resolve, reject) => {
     // @ts-expect-error ts-error
     if (window.axe) {
       resolve();
       return;
     }
 
     const script = document.createElement('script');
+    script.id = 'axe-core-script';
     script.src = '../../../node_modules/axe-core/axe.min.js';
     // @ts-expect-error ts-error
     script.onload = resolve;
     script.onerror = reject;
     document.head.appendChild(script);
-  }));
+  })).with({ boundTestRun: t })();
+}
+
+export async function loadShadowDomExtension(t: TestController): Promise<void> {
+  await ClientFunction(() => new Promise<void>((resolve, reject) => {
+    if (document.getElementById('shadow-dom-extension-script')) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.id = 'shadow-dom-extension-script';
+    script.src = '../../helpers/shadowDom/shadowDomExtension.js';
+    // @ts-expect-error ts-error
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  })).with({ boundTestRun: t })();
 }
+
+export const addShadowRootTree = async (t: TestController): Promise<void> => {
+  await ClientFunction(() => {
+    const root = document.querySelector('#parentContainer') as HTMLElement;
+    const { childNodes } = root;
+
+    if (!root.shadowRoot) {
+      root.attachShadow({ mode: 'open' });
+    }
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.append(...Array.from(childNodes));
+
+    root.shadowRoot!.appendChild(shadowContainer);
+  }).with({ boundTestRun: t })();
+};

e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -1,4 +1,5 @@
 import { isString } from 'devextreme/core/utils/type';
+import { ClientFunction } from 'testcafe';
 import { changeTheme } from './changeTheme';
 
 const defaultThemeName = 'fluent.blue.light';
@@ -8,6 +9,13 @@ export const getThemePostfix = (theme?: string): string => {
   return ` (${themeName})`;
 };
 
+export const getCurrentTheme = async (t: TestController): Promise<string> => {
+  // eslint-disable-next-line max-len
+  const currentTheme = await ClientFunction(() => (window as any).DevExpress?.ui.themes.current()).with({ boundTestRun: t })();
+
+  return currentTheme;
+};
+
 export const isMaterial = (): boolean => process.env.theme === 'material.blue.light';
 
 export const isFluent = (): boolean => process.env.theme === 'fluent.blue.light';

e2e/testcafe-devextreme/package.json

@@ -28,6 +28,7 @@
     "mockdate": "3.0.5",
     "nconf": "0.12.1",
     "testcafe": "3.7.2",
+    "testcafe-reporter-spec-time": "4.0.0",
     "ts-node": "10.9.2"
   }
 }