CI optimization: reduce the number of scenarios in TestCafe testing (unstable) (DevExpress#31319)

Author: juleari

e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (material-blue-light).png

@@ -1,10 +1,10 @@
 /* eslint-disable no-restricted-syntax */
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { ClientFunction, Selector } from 'testcafe';
-import { getThemePostfix, testScreenshot } from '../../../helpers/themeUtils';
+import { getThemePostfix, isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { appendElementTo, setStyleAttribute } from '../../../helpers/domUtils';
+import { appendElementTo, insertStylesheetRulesToPage, setStyleAttribute } from '../../../helpers/domUtils';
 import { changeTheme } from '../../../helpers/changeTheme';
 
 const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
@@ -78,6 +78,9 @@ for (const label of ['Add Row', '']) {
         .ok(compareResults.errorMessages());
     }).before(async () => {
       await setStyleAttribute(Selector('#container'), 'width: 300px; height: 300px;');
+      if (isMaterial()) {
+        await insertStylesheetRulesToPage('.dx-overlay-wrapper { font-family: sans-serif !important; }');
+      }
       await appendElementTo('#container', 'div', 'speed-dial-action');
 
       await setGlobalConfig();

e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png

@@ -2,6 +2,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DateRangeBox from 'devextreme-testcafe-models/dateRangeBox';
 import {
   appendElementTo,
+  insertStylesheetRulesToPage,
   setAttribute,
 } from '../../../helpers/domUtils';
 import url from '../../../helpers/getPageUrl';
@@ -325,6 +326,7 @@ test('Selected range if endDate = startDate, currentSelection: startDate', async
 }).before(async () => {
   await appendElementTo('#container', 'div', 'dateRangeBox');
   await setAttribute('#container', 'style', 'width: 800px; height: 500px; padding-top: 10px;');
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
 
   return createWidget('dxDateRangeBox', {
     value: [new Date(2021, 9, 18), new Date(2021, 9, 18)],
@@ -449,6 +451,7 @@ test('Start date cell in selected range', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'dateRangeBox');
   await setAttribute('#container', 'style', 'width: 800px; height: 500px; padding-top: 10px;');
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
 
   return createWidget('dxDateRangeBox', {
     value: [new Date(2021, 9, 17), new Date(2021, 10, 6)],
@@ -562,6 +565,7 @@ test('End date cell in selected range', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'dateRangeBox');
   await setAttribute('#container', 'style', 'width: 800px; height: 500px; padding-top: 10px;');
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
 
   return createWidget('dxDateRangeBox', {
     value: [new Date(2021, 9, 17), new Date(2021, 9, 23)],
@@ -662,17 +666,20 @@ test('Disabled dates on inputs focus (disableOutOfRangeSelection: true)', async
   const dateRangeBox = new DateRangeBox('#dateRangeBox');
 
   await t
-    .click(dateRangeBox.getStartDateBox().input);
+    .click(dateRangeBox.getStartDateBox().input)
+    .hover(dateRangeBox.getStartDateBox().input);
 
   await testScreenshot(t, takeScreenshot, 'DRB disabled dates on popup opening.png', { element: '#container' });
 
   await t
-    .click(dateRangeBox.getEndDateBox().input);
+    .click(dateRangeBox.getEndDateBox().input)
+    .hover(dateRangeBox.getEndDateBox().input);
 
   await testScreenshot(t, takeScreenshot, 'DRB disabled dates on end date input focus.png', { element: '#container' });
 
   await t
-    .click(dateRangeBox.getStartDateBox().input);
+    .click(dateRangeBox.getStartDateBox().input)
+    .hover(dateRangeBox.getStartDateBox().input);
 
   await testScreenshot(t, takeScreenshot, 'DRB disabled dates on start date input focus.png', { element: '#container' });
 
@@ -682,6 +689,7 @@ test('Disabled dates on inputs focus (disableOutOfRangeSelection: true)', async
 }).before(async () => {
   await appendElementTo('#container', 'div', 'dateRangeBox');
   await setAttribute('#container', 'style', 'width: 800px; height: 500px; padding-top: 10px;');
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
 
   return createWidget('dxDateRangeBox', {
     value: [new Date('2020/02/20'), new Date('2020/02/22')],

e2e/testcafe-devextreme/tests/editors/button/floatingAction.ts

@@ -12,9 +12,11 @@ fixture.disablePageReloads`Grid on Drop Down Box`.page(
 // T1245111
 safeSizeTest('DataGrid on dropDownBox should appear correctly on window resize', async (t) => {
   const dropDownBox = Selector('#container');
+  const overlay = Selector('.dx-overlay-content');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t.click(dropDownBox);
+  await t.hover(overlay);
   await t.resizeWindow(800, 800);
   await testScreenshot(t, takeScreenshot, 'T1245111-dropDownBox-resize.png');
   await t

e2e/testcafe-devextreme/tests/editors/dateRangeBox/calendar.ts

@@ -12,6 +12,7 @@ import {
 } from '../../../helpers/domUtils';
 
 const LOOKUP_FIELD_CLASS = 'dx-lookup-field';
+const OVERLAY_CLASS = 'dx-overlay-content';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
 const labelModes = ['static', 'floating', 'hidden', 'outside'];
@@ -89,37 +90,47 @@ if (!isMaterialBased()) {
 safeSizeTest('Check popup height with no found data option', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup with no found data.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', { dataSource: [], searchEnabled: true }));
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', { dataSource: [], searchEnabled: true });
+});
 
 safeSizeTest('Check popup height in loading state', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
+  await t.hover(`.${OVERLAY_CLASS}`);
 
   await testScreenshot(t, takeScreenshot, 'Lookup in loading.png');
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [300, 400]).before(async () => createWidget('dxLookup', {
-  dataSource: {
-    load() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([1, 2, 3]);
-        }, 5000);
-      });
+}, [300, 400]).before(async () => {
+  await insertStylesheetRulesToPage('* { caret-color: transparent !important; }');
+
+  return createWidget('dxLookup', {
+    dataSource: {
+      load() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([1, 2, 3]);
+          }, 5000);
+        });
+      },
     },
-  },
-  valueExpr: 'id',
-  displayExpr: 'text',
-}));
+    valueExpr: 'id',
+    displayExpr: 'text',
+  });
+});
 
 test('Placeholder is visible after items option change when value is not chosen (T1099804)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);