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

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

@@ -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/dateRangeBox/calendar.ts

@@ -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/dropDownBox/T1245111_dropDownBox_height.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/lookup/common.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);

e2e/testcafe-devextreme/tests/editors/overlays/toolbarIntegration.ts

@@ -3,10 +3,11 @@ import Popup from 'devextreme-testcafe-models/popup';
 import Popover from 'devextreme-testcafe-models/popover';
 import Toolbar from 'devextreme-testcafe-models/toolbar/toolbar';
 import { Selector } from 'testcafe';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
 
 fixture`Popup_toolbar`
   .page(url(__dirname, '../../container.html'));
@@ -40,90 +41,95 @@ const ANIMATION_DELAY = 500;
         await t
           .expect(compareResults.isValid())
           .ok(compareResults.errorMessages());
-      }, [600, 400]).before(async () => createWidget(name as 'dxPopup' | 'dxPopover', {
-        showCloseButton: true,
-        // eslint-disable-next-line no-multi-str
-        contentTemplate: () => $('<div>').text('\
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry.\
-            Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,\
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book.\
-        '),
-        width: '60%',
-        height: 300,
-        showTitle: true,
-        rtlEnabled,
-        visible: true,
-        animation: undefined,
-        target: COMPONENT_SELECTOR,
-        hideOnOutsideClick: true,
-        toolbarItems: [{
-          location: 'before',
-          widget: 'dxButton',
-          options: {
-            icon: 'back',
-          },
-          toolbar,
-        }, {
-          location: 'before',
-          widget: 'dxButton',
-          locateInMenu: 'auto',
-          options: {
-            icon: 'refresh',
-          },
-          toolbar,
-        }, {
-          location: 'center',
-          locateInMenu: 'never',
-          template() {
-            return $('<div><b>Popup\'s</b> title</div>');
-          },
-          toolbar,
-        }, {
-          location: 'after',
-          widget: 'dxSelectBox',
-          locateInMenu: 'auto',
-          options: {
-            width: 140,
-            items: [1, 2, 3, 4, 5],
-            value: 3,
-          },
-          toolbar,
-        }, {
-          location: 'after',
-          widget: 'dxButton',
-          locateInMenu: 'auto',
-          options: {
-            icon: 'plus',
-          },
-          toolbar,
-        }, {
-          locateInMenu: 'always',
-          widget: 'dxButton',
-          options: {
-            icon: 'save',
-            text: 'Save',
-          },
-          toolbar,
-        }, {
-          widget: 'dxButton',
-          toolbar: toolbar === 'top'
-            ? 'bottom'
-            : 'top',
-          location: 'before',
-          options: {
-            icon: 'email',
-          },
-        }, {
-          widget: 'dxButton',
-          toolbar: toolbar === 'top'
-            ? 'bottom'
-            : 'top',
-          location: 'after',
-          options: {
-            text: 'Close',
-          },
-        }],
-      }));
+      }, [600, 400]).before(async () => {
+        if (isMaterial()) {
+          await insertStylesheetRulesToPage('.dx-overlay-content, .dx-overlay-content input { font-family: sans-serif !important; }');
+        }
+        return createWidget(name as 'dxPopup' | 'dxPopover', {
+          showCloseButton: true,
+          // eslint-disable-next-line no-multi-str
+          contentTemplate: () => $('<div>').text('\
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry.\
+              Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,\
+              when an unknown printer took a galley of type and scrambled it to make a type specimen book.\
+          '),
+          width: '60%',
+          height: 300,
+          showTitle: true,
+          rtlEnabled,
+          visible: true,
+          animation: undefined,
+          target: COMPONENT_SELECTOR,
+          hideOnOutsideClick: true,
+          toolbarItems: [{
+            location: 'before',
+            widget: 'dxButton',
+            options: {
+              icon: 'back',
+            },
+            toolbar,
+          }, {
+            location: 'before',
+            widget: 'dxButton',
+            locateInMenu: 'auto',
+            options: {
+              icon: 'refresh',
+            },
+            toolbar,
+          }, {
+            location: 'center',
+            locateInMenu: 'never',
+            template() {
+              return $('<div><b>Popup\'s</b> title</div>');
+            },
+            toolbar,
+          }, {
+            location: 'after',
+            widget: 'dxSelectBox',
+            locateInMenu: 'auto',
+            options: {
+              width: 140,
+              items: [1, 2, 3, 4, 5],
+              value: 3,
+            },
+            toolbar,
+          }, {
+            location: 'after',
+            widget: 'dxButton',
+            locateInMenu: 'auto',
+            options: {
+              icon: 'plus',
+            },
+            toolbar,
+          }, {
+            locateInMenu: 'always',
+            widget: 'dxButton',
+            options: {
+              icon: 'save',
+              text: 'Save',
+            },
+            toolbar,
+          }, {
+            widget: 'dxButton',
+            toolbar: toolbar === 'top'
+              ? 'bottom'
+              : 'top',
+            location: 'before',
+            options: {
+              icon: 'email',
+            },
+          }, {
+            widget: 'dxButton',
+            toolbar: toolbar === 'top'
+              ? 'bottom'
+              : 'top',
+            location: 'after',
+            options: {
+              text: 'Close',
+            },
+          }],
+        });
+      });
     });
   });
 });

e2e/testcafe-devextreme/tests/editors/tagBox/label.ts

@@ -2,12 +2,13 @@ import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TagBox from 'devextreme-testcafe-models/tagBox';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import { isMaterial, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import {
   appendElementTo,
   setStyleAttribute,
+  insertStylesheetRulesToPage,
 } from '../../../helpers/domUtils';
 
 const stylingModes = ['outlined', 'underlined', 'filled'];
@@ -37,6 +38,10 @@ stylingModes.forEach((stylingMode) => {
       stylingMode,
     };
 
+    if (isMaterial()) {
+      await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }');
+    }
+
     await appendElementTo('#container', 'div', 'tagBox1', { });
     await appendElementTo('#container', 'div', 'tagBox2', { });
 
@@ -61,12 +66,6 @@ stylingModes.forEach((stylingMode) => {
 
       const screenshotName = `TagBox label with stylingMode=${stylingMode},labelMode=${labelMode}.png`;
 
-      await testScreenshot(t, takeScreenshot, screenshotName);
-
-      await t
-        .expect(compareResults.isValid())
-        .ok(compareResults.errorMessages());
-
       await t.click(tagBox.element);
       await t.click(tagBox.element);