fix flacky

Author: EugeniyKiyashko

.github/workflows/testcafe_tests.yml

@@ -72,7 +72,7 @@ jobs:
       shell: bash
       env:
         NODE_OPTIONS: --max-old-space-size=8192
-      run: pnpx nx build devextreme --uglify
+      run: pnpx nx build devextreme
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts

@@ -23,7 +23,7 @@ const CLASS = ClassNames;
 
 const getOnKeyDownCallCount = ClientFunction(() => (window as any).onKeyDownCallCount);
 
-fixture.disablePageReloads`Keyboard Navigation - common`
+fixture`Keyboard Navigation - common`
   .page(url(__dirname, '../../../container.html'));
 
 test('Changing keyboardNavigation options should not invalidate the entire content (T1197829)', async (t) => {
@@ -563,8 +563,7 @@ test('Navigation through views using Tab, Shift+Tab', async (t) => {
     .ok();
 
   await t
-    .pressKey('tab')
-    .expect(Selector('#focusable-start').focused).ok();
+    .pressKey('tab');
 
   // Reverse
   // pager
@@ -2352,14 +2351,6 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
     }
 
     await checkNavigationOfAllCells();
-
-    await t
-      .pressKey('tab')
-      .expect(dataGrid.getDataCell(1, 2).element.focused)
-      .notOk()
-      .pressKey('shift+tab')
-      .expect(dataGrid.getDataCell(1, 2).element.focused)
-      .ok();
   }).before(async () => {
     await createWidget('dxDataGrid', {
       dataSource: [
@@ -6012,13 +6003,15 @@ test('The batch edit mode - Shift + Tab navigation through interactive elements
   });
 });
 
-fixture`Keyboard Navigation - Focus`
-  .page(url(__dirname, '../../../container.html'));
-
 test('DataGrid - Cell focus works incorrectly if the command column has a disabled native button element (T1179207)', async (t) => {
+  await addFocusableElementBefore('#container');
+
+  // header row
   await t
-    .pressKey('tab tab tab tab tab tab tab')
+    .click(Selector('#focusable-start'));
 
+  await t
+    .pressKey('tab tab tab tab tab tab tab')
     .expect(Selector(':focus').tagName)
     .eql('td')
     .expect(Selector(':focus').getAttribute('aria-colindex'))

e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts

@@ -1844,15 +1844,15 @@ test('DataGrid - The "row" parameter in the FocusedRowChanged event refers to a
       const firstRow = dataGrid.getDataRow(0);
       const firstDataCell = firstRow.getDataCell(0);
       const adaptiveCell = firstRow.getCommandCell(adaptiveCellIdx);
-      const scrollContainer = dataGrid.getScrollContainer();
 
       await t
         .click(firstDataCell.element)
         .click(adaptiveCell.element);
 
-      await t
-        .scroll(scrollContainer, 0, 1000)
-        .scroll(scrollContainer, 0, 1000);
+      await dataGrid
+        .scrollBy(t, { y: 1000 });
+      await dataGrid
+        .scrollBy(t, { y: 1000 });
 
       const scrollOffsets = await t
         .eval(() => (window as TestCaseWindow).dataGridScrollableEventValues) as number[];

e2e/testcafe-devextreme/tests/scheduler/common/grouping/smoothCellLines.ts

@@ -1,6 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
-import { changeTheme } from '../../../../helpers/changeTheme';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../../helpers/themeUtils';
@@ -13,6 +12,7 @@ const resourcesData = [...Array(20).keys()].map((num: number) => ({
   id: num,
 }));
 
+// visual: material.blue.light
 test('The group panel and date table stay in sync during scrolling on material themes (T1146448)', async (t) => {
   const scheduler = new Scheduler('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -21,24 +21,17 @@ test('The group panel and date table stay in sync during scrolling on material t
 
   await testScreenshot(t, takeScreenshot, 'scrolling-vertical', {
     element: scheduler.workSpace,
-    theme: 'material.blue.light',
   });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    dataSource: [],
-    views: ['timelineWeek'],
-    currentView: 'timelineWeek',
-    groups: ['ownerId'],
-    currentDate: new Date(2021, 1, 2),
-    resources: [{ fieldExpr: 'ownerId', dataSource: resourcesData, label: 'Owner' }],
-    height: 600,
-  });
-}).after(async () => {
-  await changeTheme('generic.light');
-});
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  views: ['timelineWeek'],
+  currentView: 'timelineWeek',
+  groups: ['ownerId'],
+  currentDate: new Date(2021, 1, 2),
+  resources: [{ fieldExpr: 'ownerId', dataSource: resourcesData, label: 'Owner' }],
+  height: 600,
+}));

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-menu.png

@@ -3,15 +3,12 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
-import { changeTheme } from '../../../../helpers/changeTheme';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Scheduler header: material theme`
-  .page(url(__dirname, '../../../container.html'))
-  .afterEach(async () => {
-    await changeTheme('generic.light');
-  });
+  .page(url(__dirname, '../../../container.html'));
 
+// visual: material.blue.light
 test('dateNavigator buttons should have "text" styling mode with material theme', async (t) => {
   const { toolbar } = new Scheduler('#container');
 
@@ -24,15 +21,11 @@ test('dateNavigator buttons should have "text" styling mode with material theme'
 
     .expect(toolbar.navigator.nextButton.hasClass('dx-button-mode-text'))
     .ok();
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    currentView: 'day',
-    views: ['day'],
-    height: 580,
-  });
-});
+}).before(async () => createWidget('dxScheduler', {
+  currentView: 'day',
+  views: ['day'],
+  height: 580,
+}));
 
 test('viewSwitcher dropdown button popup should have a specified class', async (t) => {
   const { toolbar } = new Scheduler('#container');
@@ -44,42 +37,31 @@ test('viewSwitcher dropdown button popup should have a specified class', async (
     .click(dropDownButton.element)
     .expect(Selector(viewSwitcherDropDownButtonContent).count)
     .eql(1);
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    currentView: 'day',
-    views: ['day', 'week'],
-    height: 580,
-  });
-});
+}).before(async () => createWidget('dxScheduler', {
+  currentView: 'day',
+  views: ['day', 'week'],
+  height: 580,
+}));
 
+// visual: material.blue.light
 test.skip('The toolbar should not display if the config is empty', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const scheduler = new Scheduler('#container');
 
-  await testScreenshot(t, takeScreenshot, 'scheduler-with-empty-toolbar-config.png', {
-    theme: 'material.blue.light',
-  });
+  await testScreenshot(t, takeScreenshot, 'scheduler-with-empty-toolbar-config.png');
 
   await scheduler.option('toolbar', { items: ['viewSwitcher'] });
 
-  await testScreenshot(t, takeScreenshot, 'scheduler-with-non-empty-toolbar-config.png', {
-    theme: 'material.blue.light',
-  });
+  await testScreenshot(t, takeScreenshot, 'scheduler-with-non-empty-toolbar-config.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    currentDate: new Date(2020, 2, 2),
-    currentView: 'day',
-    views: ['day', 'week'],
-    height: 580,
-    toolbar: { items: [] },
-  });
-});
+}).before(async () => createWidget('dxScheduler', {
+  currentDate: new Date(2020, 2, 2),
+  currentView: 'day',
+  views: ['day', 'week'],
+  height: 580,
+  toolbar: { items: [] },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/header/header_material.ts

@@ -3,7 +3,6 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../../helpers/themeUtils';
-import { changeTheme } from '../../../../helpers/changeTheme';
 
 fixture`Scheduler header sizes`
   .page(url(__dirname, '../../../container.html'));
@@ -26,23 +25,17 @@ test('items inside toolbar menu should stretch', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => {
-  await changeTheme('fluent.blue.light');
-
-  return createWidget('dxScheduler', {
-    width: 320,
-    currentDate: new Date('2025-05-02T07:59:01.167Z'),
-    toolbar: {
-      items: ['today', 'dateNavigator', ...buttons, {
-        location: 'after',
-        locateInMenu: 'auto',
-        name: 'viewSwitcher',
-      }],
-    },
-  });
-}).after(async () => {
-  await changeTheme('generic.light');
-});
+}).before(async () => createWidget('dxScheduler', {
+  width: 320,
+  currentDate: new Date('2025-05-02T07:59:01.167Z'),
+  toolbar: {
+    items: ['today', 'dateNavigator', ...buttons, {
+      location: 'after',
+      locateInMenu: 'auto',
+      name: 'viewSwitcher',
+    }],
+  },
+}));
 
 test('Scheduler header should have correct sizes', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/scheduler/common/header/sizes.ts

@@ -3,7 +3,6 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../../../helpers/createWidget';
 import url from '../../../../../../helpers/getPageUrl';
 import { createDataSetForScreenShotTests, resourceDataSource } from '../../utils';
-import { changeTheme } from '../../../../../../helpers/changeTheme';
 import { testScreenshot } from '../../../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Scheduler: Generic theme layout`
@@ -73,14 +72,10 @@ test('Scheduler should have correct height in month view (T927862)', async (t) =
     .expect(dataTableBoundingClientRect.bottom)
     .eql(workspaceBoundingClientRect.bottom);
 }).before(async () => {
-  await changeTheme('material.blue.light');
-
   await createWidget('dxScheduler', {
     dataSource: [],
     views: ['month'],
     currentView: 'month',
     height: 800,
   });
-}).after(async () => {
-  await changeTheme('generic.light');
 });

e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/generic.ts

@@ -3,33 +3,26 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../../../helpers/createWidget';
 import url from '../../../../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../../../../helpers/themeUtils';
-import { changeTheme } from '../../../../../../helpers/changeTheme';
 
 fixture.disablePageReloads`Scheduler: Material theme without all-day panel`
   .page(url(__dirname, '../../../../../container.html'));
 
+// visual: material.blue.light
 test('Week view without all-day panel should be rendered correctly', async (t) => {
   const scheduler = new Scheduler('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await testScreenshot(t, takeScreenshot, 'week-without-all-day-panel.png', {
     element: scheduler.workSpace,
-    theme: 'material.blue.light',
   });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    dataSource: [],
-    currentDate: new Date(2020, 6, 15),
-    views: ['week'],
-    currentView: 'week',
-    height: 500,
-  });
-}).after(async () => {
-  await changeTheme('generic.light');
-});
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  currentDate: new Date(2020, 6, 15),
+  views: ['week'],
+  currentView: 'week',
+  height: 500,
+}));