e2e tests: bump TestCafe version to 3.7.0 (#31320)

Author: EugeniyKiyashko

e2e/testcafe-devextreme/helpers/clearPage.js

@@ -2,10 +2,10 @@
 const testCafe = require('testcafe');
 
 module.exports = {
-    clearTestPage: async function() {
+    clearTestPage: async function(testController) {
         const shadowDom = process.env.shadowDom === 'true';
 
-        await testCafe.ClientFunction(() => {
+        const clearTestPageFn = testCafe.ClientFunction(() => {
             const widgetSelector = '.dx-widget';
             const $elements = $(widgetSelector)
                 .filter((_, element) => $(element).parents(widgetSelector).length === 0);
@@ -46,6 +46,8 @@ module.exports = {
             dependencies: {
                 shadowDom,
             }
-        })();
+        });
+
+        await clearTestPageFn.with({ boundTestRun: testController })();
     }
 };

e2e/testcafe-devextreme/package.json

@@ -27,7 +27,7 @@
     "minimist": "1.2.8",
     "mockdate": "3.0.5",
     "nconf": "0.12.1",
-    "testcafe": "2.5.0",
+    "testcafe": "3.7.0",
     "ts-node": "10.9.2"
   }
 }

e2e/testcafe-devextreme/runner.ts

@@ -31,6 +31,13 @@ const TESTCAFE_CONFIG: Partial<TestCafeConfigurationOptions> = {
   port2: 1438,
 };
 
+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;
+};
+
 const changeTheme = async (t: TestController, themeName: string): Promise<void> => {
   const changeThemeClientFn = ClientFunction(() => new Promise<void>((resolve) => {
     (window as any).DevExpress.ui.themes.ready(resolve);
@@ -237,7 +244,8 @@ createTestCafe(TESTCAFE_CONFIG)
     }
 
     const runOptions: RunOptions = {
-      quarantineMode: { successThreshold: 1, attemptLimit: 10 },
+      quarantineMode: { successThreshold: 1, attemptLimit: 5 },
+      disableNativeAutomation: true,
       // @ts-expect-error ts-error
       hooks: {
         test: {
@@ -251,12 +259,17 @@ createTestCafe(TESTCAFE_CONFIG)
               await addShadowRootTree(t);
             }
 
-            if (args.theme) {
-              await changeTheme(t, args.theme);
+            if (!componentFolder.includes('dataGrid')) {
+              const currentTheme = await getCurrentTheme(t) || 'generic.light';
+              const newTheme = args.theme || 'generic.light';
+
+              if (currentTheme !== newTheme) {
+                await changeTheme(t, newTheme);
+              }
             }
           },
-          after: async () => {
-            await testPageUtils.clearTestPage();
+          after: async (t: TestController) => {
+            await testPageUtils.clearTestPage(t);
           },
         },
       },

e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_mouse-click_position (fluent-blue-light).png

@@ -194,7 +194,7 @@ test(
   width: 600,
 }));
 
-test('render with horizontal scroll', async (t) => {
+test.meta({ unstable: true })('render with horizontal scroll', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);
   const firstItem = cardView.getHeaderPanel().getHeaderItem(0);

e2e/testcafe-devextreme/tests/cardView/headerPanel/visual.ts

@@ -28,7 +28,7 @@ fixture.disablePageReloads`FixedColumns - appearance`
   ([theme, showRowLines]) => {
     // T1268664
     const showRowLinesState = `showRowLines=${showRowLines ? 'true' : 'false'}`;
-    test(`Row height for selected, focus and edit state should not differ from the default one if ${showRowLinesState}`, async (t) => {
+    test.meta({ unstable: true })(`Row height for selected, focus and edit state should not differ from the default one if ${showRowLinesState}`, async (t) => {
       const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
       const dataGrid = new DataGrid(DATA_GRID_SELECTOR);