diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/dateBoxGeometry.ts b/packages/devextreme/testing/testcafe/tests/editors/dateBox/dateBoxGeometry.ts
index 8966ca9cd80..646b2022a33 100644
--- a/packages/devextreme/testing/testcafe/tests/editors/dateBox/dateBoxGeometry.ts
+++ b/packages/devextreme/testing/testcafe/tests/editors/dateBox/dateBoxGeometry.ts
@@ -15,9 +15,13 @@ safeSizeTest('Geometry is good', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dateBox = new DateBox('#container');
 
+  await dateBox.option('opened', true);
+
   await testScreenshot(t, takeScreenshot, 'Datebox with calendar.png');
 
+  await dateBox.option('opened', false);
   await dateBox.option('type', 'datetime');
+  await dateBox.option('opened', true);
 
   await testScreenshot(t, takeScreenshot, 'Datebox with datetime.png');
 
@@ -40,7 +44,6 @@ safeSizeTest('Geometry is good', async (t) => {
   await waitFont();
 
   return createWidget('dxDateBox', {
-    opened: true,
     pickerType: 'calendar',
     width: 200,
     value: new Date(1.5e12),
diff --git a/packages/devextreme/testing/testcafe/tests/form/form.labelMode.ts b/packages/devextreme/testing/testcafe/tests/form/form.labelMode.ts
index 817eb80ac44..88860e95ead 100644
--- a/packages/devextreme/testing/testcafe/tests/form/form.labelMode.ts
+++ b/packages/devextreme/testing/testcafe/tests/form/form.labelMode.ts
@@ -1,7 +1,10 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
-import { isMaterialBased, testScreenshot } from '../../helpers/themeUtils';
+import { isMaterial, isMaterialBased, testScreenshot } from '../../helpers/themeUtils';
+
+const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400));
 
 fixture.disablePageReloads`Form`
   .page(url(__dirname, '../containerQuill.html'));
@@ -23,6 +26,11 @@ fixture.disablePageReloads`Form`
               return;
             }
 
+            if (labelVisible && isMaterial()) {
+              // There is no specificity for the Material theme
+              return;
+            }
+
             const testName = `Form,lMode=${formLabelMode},lLoc=${formLabelLocation},lVis=${labelVisible},lAl=${labelAlignment},e.lMode=${editorLabelMode ?? 'undef'},e.sMode=${editorStylingMode}`;
 
             test(testName, async (t) => {
@@ -33,229 +41,233 @@ fixture.disablePageReloads`Form`
               await t
                 .expect(compareResults.isValid())
                 .ok(compareResults.errorMessages());
-            }).before(async () => createWidget('dxForm', {
-              width: 1100,
-              height: 800,
-              labelMode: formLabelMode,
-              labelLocation: formLabelLocation,
-              colCount: 3,
-              items: [
-                {
-                  dataField: 'field1',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxAutocomplete',
-                  editorOptions: {
-                    items: ['1', '2'],
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field2',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxTextBox',
-                  editorOptions: {
-                    value: 'dxTextBox',
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field3',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxCheckBox',
-                  editorOptions: {
-                    value: true,
-                    text: 'dxCheckBox',
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field4',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxColorBox',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field5',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxDateBox',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field6',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxDropDownBox',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field7',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxTextArea',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field8',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxLookup',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field9',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxNumberBox',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field10',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxRadioGroup',
-                  editorOptions: {
-                    items: ['1', '2'],
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field11',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxRangeSlider',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field12',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxSelectBox',
-                  editorOptions: {
-                    items: ['1', '2'],
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field13',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxSlider',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field14',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxSwitch',
-                  editorOptions: {
-                    value: true,
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field15',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxTagBox',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-                {
-                  dataField: 'field16',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxHtmlEditor',
-                  editorOptions: {
-                    labelMode: editorLabelMode,
-                    height: 100,
-                    stylingMode: editorStylingMode,
-                    toolbar: { items: ['undo', 'redo', 'separator', 'insertTable', 'deleteTable', 'insertRowAbove', 'insertRowBelow', 'deleteRow'] },
-                  },
-                },
-                {
-                  dataField: 'field17',
-                  label: {
-                    visible: labelVisible,
-                    alignment: labelAlignment,
-                  },
-                  editorType: 'dxCalendar',
-                  editorOptions: {
-                    value: new Date(2021, 9, 17),
-                    labelMode: editorLabelMode,
-                    stylingMode: editorStylingMode,
-                  },
-                },
-              ],
-            }));
+            }).before(async () => {
+              await waitFont();
+
+              return createWidget('dxForm', {
+                width: 1100,
+                height: 800,
+                labelMode: formLabelMode,
+                labelLocation: formLabelLocation,
+                colCount: 3,
+                items: [
+                  {
+                    dataField: 'field1',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxAutocomplete',
+                    editorOptions: {
+                      items: ['1', '2'],
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field2',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxTextBox',
+                    editorOptions: {
+                      value: 'dxTextBox',
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field3',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxCheckBox',
+                    editorOptions: {
+                      value: true,
+                      text: 'dxCheckBox',
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field4',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxColorBox',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field5',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxDateBox',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field6',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxDropDownBox',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field7',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxTextArea',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field8',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxLookup',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field9',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxNumberBox',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field10',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxRadioGroup',
+                    editorOptions: {
+                      items: ['1', '2'],
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field11',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxRangeSlider',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field12',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxSelectBox',
+                    editorOptions: {
+                      items: ['1', '2'],
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field13',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxSlider',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field14',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxSwitch',
+                    editorOptions: {
+                      value: true,
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field15',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxTagBox',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                  {
+                    dataField: 'field16',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxHtmlEditor',
+                    editorOptions: {
+                      labelMode: editorLabelMode,
+                      height: 100,
+                      stylingMode: editorStylingMode,
+                      toolbar: { items: ['undo', 'redo', 'separator', 'insertTable', 'deleteTable', 'insertRowAbove', 'insertRowBelow', 'deleteRow'] },
+                    },
+                  },
+                  {
+                    dataField: 'field17',
+                    label: {
+                      visible: labelVisible,
+                      alignment: labelAlignment,
+                    },
+                    editorType: 'dxCalendar',
+                    editorOptions: {
+                      value: new Date(2021, 9, 17),
+                      labelMode: editorLabelMode,
+                      stylingMode: editorStylingMode,
+                    },
+                  },
+                ],
+              });
+            });
           });
         });
       });
diff --git a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.colSpan.ts b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.colSpan.ts
index 4482d052286..d763d18f834 100644
--- a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.colSpan.ts
+++ b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.colSpan.ts
@@ -1,9 +1,12 @@
 /* eslint-disable no-restricted-syntax */
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
+import Form from '../../model/form/form';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
-import Form from '../../model/form/form';
+
+const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400));
 
 fixture.disablePageReloads`Form`
   .page(url(__dirname, '../containerQuill.html'));
@@ -28,13 +31,17 @@ test('SimpleItem: item1_cSpan_2', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxForm', {
-  width: 500,
-  height: 100,
-  colCount: 1,
-  labelLocation: 'left',
-  items: [{ dataField: 'item_1', colSpan: 2 }],
-}));
+}).before(async () => {
+  await waitFont();
+
+  return createWidget('dxForm', {
+    width: 500,
+    height: 100,
+    colCount: 1,
+    labelLocation: 'left',
+    items: [{ dataField: 'item_1', colSpan: 2 }],
+  });
+});
 
 test('SimpleItem: item1_cSpan_2,item2_cSpan_1', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -54,16 +61,20 @@ test('SimpleItem: item1_cSpan_2,item2_cSpan_1', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxForm', {
-  width: 500,
-  height: 100,
-  colCount: 1,
-  labelLocation: 'left',
-  items: [
-    { dataField: 'item_1', colSpan: 2 },
-    { dataField: 'item_2', colSpan: 1 },
-  ],
-}));
+}).before(async () => {
+  await waitFont();
+
+  return createWidget('dxForm', {
+    width: 500,
+    height: 100,
+    colCount: 1,
+    labelLocation: 'left',
+    items: [
+      { dataField: 'item_1', colSpan: 2 },
+      { dataField: 'item_2', colSpan: 1 },
+    ],
+  });
+});
 
 test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -83,16 +94,20 @@ test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxForm', {
-  width: 500,
-  height: 100,
-  colCount: 1,
-  labelLocation: 'left',
-  items: [
-    { dataField: 'item_1', colSpan: 1 },
-    { dataField: 'item_2', colSpan: 2 },
-  ],
-}));
+}).before(async () => {
+  await waitFont();
+
+  return createWidget('dxForm', {
+    width: 500,
+    height: 100,
+    colCount: 1,
+    labelLocation: 'left',
+    items: [
+      { dataField: 'item_1', colSpan: 1 },
+      { dataField: 'item_2', colSpan: 2 },
+    ],
+  });
+});
 
 test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -112,13 +127,17 @@ test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxForm', {
-  width: 500,
-  height: 100,
-  colCount: 1,
-  labelLocation: 'left',
-  items: [
-    { dataField: 'item_1', colSpan: 2 },
-    { dataField: 'item_2', colSpan: 2 },
-  ],
-}));
+}).before(async () => {
+  await waitFont();
+
+  return createWidget('dxForm', {
+    width: 500,
+    height: 100,
+    colCount: 1,
+    labelLocation: 'left',
+    items: [
+      { dataField: 'item_1', colSpan: 2 },
+      { dataField: 'item_2', colSpan: 2 },
+    ],
+  });
+});
diff --git a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.labelMode.ts b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.labelMode.ts
index 2e657f27472..45449aaf97a 100644
--- a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.labelMode.ts
+++ b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.labelMode.ts
@@ -17,30 +17,32 @@ fixture.disablePageReloads`Form`
         test(testName, async (t) => {
           const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-          await waitFont();
-
           await testScreenshot(t, takeScreenshot, `${testName}.png`, { element: '#container' });
 
           await t
             .expect(compareResults.isValid())
             .ok(compareResults.errorMessages());
-        }).before(async () => createWidget('dxForm', {
-          width: 200,
-          rtlEnabled,
-          labelMode,
-          showOptionalMark,
-          optionalMark: 'opt',
-          requiredMark: '**',
-          formData: {
-            item1: 'some value',
-          },
-          items: [
-            { itemType: 'empty' },
-            { dataField: 'item1', isRequired: true },
-            { dataField: 'item2', isRequired: true },
-            { dataField: 'item3', isRequired: false },
-          ],
-        }));
+        }).before(async () => {
+          await waitFont();
+
+          return createWidget('dxForm', {
+            width: 200,
+            rtlEnabled,
+            labelMode,
+            showOptionalMark,
+            optionalMark: 'opt',
+            requiredMark: '**',
+            formData: {
+              item1: 'some value',
+            },
+            items: [
+              { itemType: 'empty' },
+              { dataField: 'item1', isRequired: true },
+              { dataField: 'item2', isRequired: true },
+              { dataField: 'item3', isRequired: false },
+            ],
+          });
+        });
       });
     });
   });
diff --git a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.ts b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.ts
index 55af539b595..13c1b96746d 100644
--- a/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.ts
+++ b/packages/devextreme/testing/testcafe/tests/form/form.simpleItem.ts
@@ -22,13 +22,17 @@ fixture.disablePageReloads`Form`
           await t
             .expect(compareResults.isValid())
             .ok(compareResults.errorMessages());
-        }).before(async () => createWidget('dxForm', {
-          width: 500,
-          colCount,
-          rtlEnabled,
-          labelLocation,
-          items: Array(itemsCount).fill(null).map((_, i) => ({ dataField: `item_${i + 1}` })),
-        }));
+        }).before(async () => {
+          await waitFont();
+
+          return createWidget('dxForm', {
+            width: 500,
+            colCount,
+            rtlEnabled,
+            labelLocation,
+            items: Array(itemsCount).fill(null).map((_, i) => ({ dataField: `item_${i + 1}` })),
+          });
+        });
       });
     });
   });
@@ -38,32 +42,34 @@ fixture.disablePageReloads`Form`
   test('widget alignment (T1086611)', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await waitFont();
-
     await testScreenshot(t, takeScreenshot, `Form with labelLocation=${labelLocation}.png`, { element: '#container' });
 
     await t
       .expect(compareResults.isValid())
       .ok(compareResults.errorMessages());
-  }).before(async () => createWidget('dxForm', {
-    labelLocation,
-    colCount: 2,
-    width: 1000,
-    formData: {},
-    items: [{
-      dataField: 'FirstName',
-      editorType: 'dxTextBox',
-    }, {
-      dataField: 'Position',
-      editorType: 'dxSelectBox',
-    }, {
-      dataField: 'BirthDate',
-      editorType: 'dxDateBox',
-    }, {
-      dataField: 'Notes',
-      editorType: 'dxTextArea',
-    }],
-  }));
+  }).before(async () => {
+    await waitFont();
+
+    return createWidget('dxForm', {
+      labelLocation,
+      colCount: 2,
+      width: 1000,
+      formData: {},
+      items: [{
+        dataField: 'FirstName',
+        editorType: 'dxTextBox',
+      }, {
+        dataField: 'Position',
+        editorType: 'dxSelectBox',
+      }, {
+        dataField: 'BirthDate',
+        editorType: 'dxDateBox',
+      }, {
+        dataField: 'Notes',
+        editorType: 'dxTextArea',
+      }],
+    });
+  });
 });
 
 [() => 'xs', () => 'md', () => 'lg'].forEach((screenByWidth) => {