DataGrid: stabilize testcafe tests suit

e2e/testcafe-devextreme/runner.ts

@@ -313,7 +313,10 @@ async function main() {
     // Retry failed tests multiple times if enabled and there are failures
     if (args.retryFailed && failedTests.size > 0 && failedCount > 0) {
       const initialFailedCount = failedTests.size;
-      let attemptsLeft = FAILED_TESTS_RETRY_ATTEMPTS;
+      const noRetryFolders = ['cardView', 'dataGrid', 'common'];
+      let attemptsLeft = noRetryFolders.some((folder) => componentFolderArg === folder || componentFolderArg.startsWith(`${folder}/`))
+        ? 0
+        : FAILED_TESTS_RETRY_ATTEMPTS;
 
       while (attemptsLeft > 0 && failedCount > 0) {
         const attemptNumber = FAILED_TESTS_RETRY_ATTEMPTS - attemptsLeft + 1;

e2e/testcafe-devextreme/tests/accessibility/dataGrid/fixedColumns.ts

@@ -158,7 +158,7 @@ test('Accessibility: Scrollable should have focusable element when navigate out
   $('#myButton').remove();
 })());
 
-test('Accessibility: Scrollable should have focusable when fixed on the right side columns are focused', async (t) => {
+test.meta({ unstable: true })('Accessibility: Scrollable should have focusable when fixed on the right side columns are focused', async (t) => {
   const dataGrid = new DataGrid('#container');
 
   // focus through headers

e2e/testcafe-devextreme/tests/cardView/columnChooser/functional.ts

@@ -1,8 +1,50 @@
+import { Selector } from 'testcafe';
 import CardView from 'devextreme-testcafe-models/cardView';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { getCardFieldCaptions } from '../helpers/cardUtils';
 
+const COLUMN_CHOOSER_DND_TIMEOUT = 1000;
+const SORTABLE_DRAGGING_SELECTOR = '.dx-sortable-dragging';
+
+const waitForDragEnd = async (t: TestController, cardView: CardView): Promise<void> => {
+  await t
+    .expect(Selector(SORTABLE_DRAGGING_SELECTOR).exists)
+    .notOk({ timeout: COLUMN_CHOOSER_DND_TIMEOUT })
+    .expect(cardView.isReady())
+    .ok({ timeout: COLUMN_CHOOSER_DND_TIMEOUT });
+};
+
+const dragHeaderColumnToColumnChooser = async (
+  t: TestController,
+  cardView: CardView,
+  columnIndex: number,
+): Promise<void> => {
+  await t.dragToElement(
+    cardView.getHeaderPanel().getHeaderItem(columnIndex).element,
+    cardView.getColumnChooser().content,
+    {
+      speed: 0.5,
+    },
+  );
+  await waitForDragEnd(t, cardView);
+};
+
+const dragColumnChooserColumnToHeaderPanel = async (
+  t: TestController,
+  cardView: CardView,
+  columnIndex: number,
+): Promise<void> => {
+  await t.dragToElement(
+    cardView.getColumnChooser().getColumn(columnIndex),
+    cardView.getHeaderPanel().element,
+    {
+      speed: 0.5,
+    },
+  );
+  await waitForDragEnd(t, cardView);
+};
+
 fixture`CardView - ColumnChooser.Functional`
   .page(url(__dirname, '../../container.html'));
 
@@ -99,16 +141,10 @@ testsFactory({
     },
   },
   async hideFirstColumn(t: TestController, cardView: CardView) {
-    await t.dragToElement(
-      cardView.getHeaderPanel().getHeaderItem(0).element,
-      cardView.getColumnChooser().content,
-    );
+    await dragHeaderColumnToColumnChooser(t, cardView, 0);
   },
   async showFirstColumn(t: TestController, cardView: CardView) {
-    await t.dragToElement(
-      cardView.getColumnChooser().getColumn(0),
-      cardView.getHeaderPanel().element,
-    );
+    await dragColumnChooserColumnToHeaderPanel(t, cardView, 0);
   },
   async assertFirstColumnVisible(t: TestController, cardView: CardView) {
     await t.expect(
@@ -222,18 +258,12 @@ test('cards should update when column is hidden via column chooser (dragAndDrop
 
   await cardView.apiShowColumnChooser();
 
-  await t.dragToElement(
-    cardView.getHeaderPanel().getHeaderItem(0).element,
-    cardView.getColumnChooser().content,
-  );
+  await dragHeaderColumnToColumnChooser(t, cardView, 0);
 
   const captionsAfterHide = await getCardFieldCaptions(t, cardView, 2);
   await t.expect(captionsAfterHide).eql(['B', 'C']);
 
-  await t.dragToElement(
-    cardView.getColumnChooser().getColumn(0),
-    cardView.getHeaderPanel().element,
-  );
+  await dragColumnChooserColumnToHeaderPanel(t, cardView, 0);
 
   const captionsAfterShow = await getCardFieldCaptions(t, cardView, 3);
   await t.expect(captionsAfterShow).eql(['A', 'B', 'C']);

e2e/testcafe-devextreme/tests/cardView/columnSortable/functional.ts

@@ -315,16 +315,12 @@ test('cards should update when columns are reordered (T1324855)', async (t) => {
 
   const headerPanel = cardView.getHeaderPanel();
   const firstHeader = headerPanel.getHeaderItem(0).element;
-  const secondHeader = headerPanel.getHeaderItem(1).element;
 
-  await t.dragToElement(firstHeader, secondHeader, {
-    destinationOffsetX: -5,
-    destinationOffsetY: -20,
-    speed: 0.5,
-  });
+  await dragToHeaderPanel(t, cardView, firstHeader, 2);
 
-  // Wait for headers to update after drag
-  await t.expect(cardView.getHeaders().getHeaderItemNth(0).element.innerText).notEql('A');
+  await t
+    .expect(cardView.getHeaders().getHeaderItemNth(0).element.innerText)
+    .notEql('A', { timeout: 1000 });
 
   const headerCaptions: string[] = [];
   const headersCount = await cardView.getHeaders().getHeaderItemsElements().count;

e2e/testcafe-devextreme/tests/cardView/columnSortable/utils.ts

@@ -1,7 +1,10 @@
-import { ClientFunction } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import CardView from 'devextreme-testcafe-models/cardView';
 import TreeView from 'devextreme-testcafe-models/treeView';
 
+const DRAG_ASSERTION_TIMEOUT = 1000;
+const HEADER_DROP_OFFSET_Y = 5;
+
 export const SELECTORS = {
   dragging: '.dx-sortable-dragging',
   treeView: '.dx-cardview-column-chooser .dx-treeview',
@@ -80,19 +83,31 @@ export const dragToHeaderPanel = async (
     await t.dragToElement(
       columnElement,
       insertBeforeColumn,
-      { destinationOffsetX: +5, destinationOffsetY: -20, speed: 0.5 },
+      {
+        destinationOffsetX: 5,
+        destinationOffsetY: HEADER_DROP_OFFSET_Y,
+        speed: 0.5,
+      },
     );
   } else {
     const insertAfterColumn = headers.getHeaderItemNth(columnsNum - 1).element;
 
     await t.dragToElement(
       columnElement,
       insertAfterColumn,
-      { destinationOffsetX: -5, destinationOffsetY: -20, speed: 0.5 },
+      {
+        destinationOffsetX: -5,
+        destinationOffsetY: HEADER_DROP_OFFSET_Y,
+        speed: 0.5,
+      },
     );
   }
 
-  await t.wait(300);
+  await t
+    .expect(Selector(SELECTORS.dragging).exists)
+    .notOk({ timeout: DRAG_ASSERTION_TIMEOUT })
+    .expect(cardView.isReady())
+    .ok({ timeout: DRAG_ASSERTION_TIMEOUT });
 };
 
 export const dragToColumnChooser = async (
@@ -124,7 +139,7 @@ export const expectColumns = async (
   expectedColumns: number[],
   source: 'headerPanel' | 'columnChooser' = 'headerPanel',
 ): Promise<void> => {
-  const actualColumns: string[] = [];
+  const adjustedExpectedColumns = expectedColumns.map((columnIndex) => `Column ${columnIndex}`);
 
   for (let i = 0; i < expectedColumns.length; i += 1) {
     // eslint-disable-next-line @typescript-eslint/init-declarations
@@ -137,12 +152,10 @@ export const expectColumns = async (
       column = treeView.getNodeItem(i);
     }
 
-    if (await column?.exists) {
-      actualColumns.push(await column.innerText);
-    }
+    await t
+      .expect(column.exists)
+      .ok({ timeout: DRAG_ASSERTION_TIMEOUT })
+      .expect(column.innerText)
+      .eql(adjustedExpectedColumns[i], { timeout: DRAG_ASSERTION_TIMEOUT });
   }
-
-  const adjustedExpectedColumns = expectedColumns.map((columnIndex) => `Column ${columnIndex}`);
-
-  await t.expect(actualColumns).eql(adjustedExpectedColumns);
 };

e2e/testcafe-devextreme/tests/cardView/helpers/cardUtils.ts

@@ -1,17 +1,21 @@
 import CardView from 'devextreme-testcafe-models/cardView';
 
-const getCardFieldCaptions = async (
+const FIELD_CAPTION_SELECTOR = '.dx-cardview-field-caption';
+const CARD_FIELD_CAPTION_TIMEOUT = 1000;
+
+export const getCardFieldCaptions = async (
   t: TestController,
   cardView: CardView,
   expectedCount: number,
   cardIndex = 0,
 ): Promise<string[]> => {
   const card = cardView.getCard(cardIndex);
-  const captions = await card.getCaptions();
 
-  await t.expect(captions.length).eql(expectedCount);
+  await t
+    .expect(card.element.find(FIELD_CAPTION_SELECTOR).count)
+    .eql(expectedCount, { timeout: CARD_FIELD_CAPTION_TIMEOUT });
+
+  const captions = await card.getCaptions();
 
   return captions;
 };
-
-export { getCardFieldCaptions };

e2e/testcafe-devextreme/tests/common/filterBuilder/filterBuilderNaming.ts

@@ -21,10 +21,16 @@ test('FilterBuilder - First field uses the dataField property while subsequent f
       ['name2', 'contains', 'A'],
     ],
   ];
+  await t
+    .expect(filterBuilder.isReady())
+    .ok();
+
   await t
     .click(filterBuilder.getAddButton())
-    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .expect(FilterBuilder.getPopupTreeViewNode(0).visible).ok()
     .click(FilterBuilder.getPopupTreeViewNode(0))
+    .expect(filterBuilder.getField(1, 'itemValue').element.exists)
+    .ok()
     .click(filterBuilder.getField(1, 'itemValue').element)
     .pressKey('A enter');
 
@@ -34,8 +40,10 @@ test('FilterBuilder - First field uses the dataField property while subsequent f
 
   await t
     .click(filterBuilder.getField(1, 'item').element)
-    .expect(FilterBuilder.getPopupTreeView().visible).ok()
+    .expect(FilterBuilder.getPopupTreeViewNode(1).visible).ok()
     .click(FilterBuilder.getPopupTreeViewNode(1))
+    .expect(filterBuilder.getField(1, 'itemValue').element.exists)
+    .ok()
     .click(filterBuilder.getField(1, 'itemValue').element)
     .pressKey('A enter');
 

e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/T1138119_dragAndDropAreaItems.ts

@@ -6,7 +6,7 @@ import { MouseAction, MouseUpEvents } from '../../../../helpers/mouseUpEvents';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 import { DRAG_MOUSE_OPTIONS } from '../const';
 
-fixture.disablePageReloads`pivotGrid_fieldChooser_drag-and-drop_T1138119 `
+fixture`pivotGrid_fieldChooser_drag-and-drop_T1138119 `
   .page(url(__dirname, '../../../container.html'));
 
 test('Drag-n-drop the tree view item in all directions', async (t) => {

e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/stickyColumns.ts

@@ -7,7 +7,7 @@ import { testScreenshot } from '../../../../helpers/themeUtils';
 
 const TREE_LIST_SELECTOR = '#container';
 
-fixture.disablePageReloads`Sticky columns - Drag and Drop`
+fixture`Sticky columns - Drag and Drop`
   .page(url(__dirname, '../../../container.html'));
 
 test.meta({

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

@@ -57,7 +57,7 @@ test('Focused cell should be switched to the editing mode after onSaving\'s prom
 });
 
 // T1190566
-test('DataGrid - The "Cannot read properties of undefined error" occurs when using Tab while saving a promise', async (t) => {
+test.meta({ unstable: true })('DataGrid - The "Cannot read properties of undefined error" occurs when using Tab while saving a promise', async (t) => {
   const dataGrid = new DataGrid('#container');
   const resolveOnSavingDeferred = ClientFunction(() => (window as any).deferred.resolve());
 
@@ -2382,7 +2382,7 @@ test('Cells should be focused correctly on click when cell editing mode is used
   false,
   true,
 ].forEach((remoteOperations) => {
-  test(`Empty rows should not appear after rows are updated in batch editing mode when paging and validation are enabled and remoteOperations=${remoteOperations}`, async (t) => {
+  test.meta({ unstable: !remoteOperations })(`Empty rows should not appear after rows are updated in batch editing mode when paging and validation are enabled and remoteOperations=${remoteOperations}`, async (t) => {
     const dataGrid = new DataGrid('#container');
 
     await t

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

@@ -12,7 +12,6 @@ test('Don\'t calculate additional filter when filtering column list is empty', a
   // arrange
   const dataGrid = new DataGrid(GRID_CONTAINER);
   await t.expect(dataGrid.isReady()).ok();
-  const consoleMessages = await t.getBrowserConsoleMessages();
 
   // act
   await dataGrid.option({
@@ -37,8 +36,10 @@ test('Don\'t calculate additional filter when filtering column list is empty', a
   });
 
   // assert
+  const consoleMessages = await t.getBrowserConsoleMessages();
+
   await t
-    .expect(consoleMessages.error.every((msg) => !msg.includes('E1047')))
+    .expect((consoleMessages?.error ?? []).every((msg) => !msg.includes('E1047')))
     .ok();
 }).before(async () => createWidget('dxDataGrid', {
   keyExpr: 'id',

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusEvents/newRows_T1162227.ts

@@ -1,3 +1,4 @@
+import { ClientFunction } from 'testcafe';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import { createWidget } from '../../../../../helpers/createWidget';
 import url from '../../../../../helpers/getPageUrl';
@@ -337,24 +338,18 @@ test('It should fire correct events on page change', async (t) => {
 
 test('It should fire row changed event and change page if focusedRowKey on another page', async (t) => {
   const expectedRowFocusChanged: FocusRowChangedData[] = [[1]];
+  const getRowFocusChanged = ClientFunction(() => {
+    const extendedWindow = window as WindowCallbackExtended;
 
-  const dataGrid = new DataGrid(GRID_SELECTOR);
-
-  await t.wait(100);
-
-  const [
-    ,
-    ,
-    ,
-    rowFocusChanged,
-  ] = await collectEventsCallbackResults();
+    return extendedWindow.clientTesting!.data.rowFocusChanged;
+  });
 
-  const cellText = await dataGrid.getDataCell(3, 0).element().innerText;
+  const dataGrid = new DataGrid(GRID_SELECTOR);
 
   await t
-    .expect(rowFocusChanged)
+    .expect(getRowFocusChanged())
     .eql(expectedRowFocusChanged)
-    .expect(cellText)
+    .expect(dataGrid.getDataCell(3, 0).element.innerText)
     .eql('dataA_3');
 }).before(async () => {
   await initCallbackTesting();

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/focusedRow.ts

@@ -316,7 +316,7 @@ test('Row - Focused row should be reset after editing a row by API (T879627)', a
   },
 }));
 
-test('Cell - Focused row should not be reset after editing a cell (T879627)', async (t) => {
+test.meta({ unstable: true })('Cell - Focused row should not be reset after editing a cell (T879627)', async (t) => {
   const dataGrid = new DataGrid('#container');
   const dataRow0 = dataGrid.getDataRow(0);
   const dataRow1 = dataGrid.getDataRow(1);
@@ -579,7 +579,9 @@ test('Focused row should not fire onFocusedRowChanging, onFocusedRowChanged even
     masterDetail: {
       enabled: true,
       template: (container): any => {
-        (container.append($('<div>') as any) as any).dxDataGrid({
+        const nestedGridContainer = $('<div>') as any;
+        nestedGridContainer.appendTo(container);
+        nestedGridContainer.dxDataGrid({
           height: 500,
           keyExpr: 'id',
           dataSource: data,

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/markup.ts

@@ -65,13 +65,14 @@ test('markup - generic.light', async (t) => {
 // visual: generic.light
 // visual: fluent.light
 // visual: material.blue.light
-test('Invalid cells in a focused row should have the correct background color (T1197268) - generic.light', async (t) => {
+test.meta({ unstable: true })('Invalid cells in a focused row should have the correct background color (T1197268) - generic.light', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
   // act
   await dataGrid.apiAddRow();
   await dataGrid.apiSaveEditData();
   // assert
+  await t.expect(dataGrid.isReady()).ok();
   await testScreenshot(t, takeScreenshot, 'focused-row-invalid-cells.png');
   await t.expect(compareResults.isValid())
     .ok(compareResults.errorMessages());