e2e test: use testScreenshot utility across all test (Grids) (#31548)

Author: juleari

e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -1,7 +1,7 @@
 import { isString } from 'devextreme/core/utils/type';
 import { changeTheme } from './changeTheme';
 
-const defaultThemeName = 'generic.light';
+const defaultThemeName = 'fluent.blue.light';
 
 export const getThemePostfix = (theme?: string): string => {
   const themeName = (theme ?? process.env.theme) ?? defaultThemeName;

e2e/testcafe-devextreme/runner.ts

@@ -37,7 +37,7 @@ const TESTCAFE_CONFIG: Partial<TestCafeConfigurationOptions> = {
 
 const getCurrentTheme = async (t: TestController): Promise<string> => {
   // eslint-disable-next-line @stylistic/max-len
-  const currentTheme = await ClientFunction(() => (window as any).DevExpress.ui.themes.current()).with({ boundTestRun: t })();
+  const currentTheme = await ClientFunction(() => (window as any)?.DevExpress?.ui?.themes?.current()).with({ boundTestRun: t })();
 
   return currentTheme;
 };
@@ -98,7 +98,7 @@ function setTestingPlatform(args: ParsedArgs): void {
 }
 
 function setTestingTheme(args: ParsedArgs): void {
-  process.env.theme = args.theme || 'generic.light';
+  process.env.theme = args.theme || 'fluent.blue.light';
 }
 
 function setShadowDom(args: ParsedArgs): void {
@@ -275,13 +275,11 @@ createTestCafe(TESTCAFE_CONFIG)
               await addShadowRootTree(t);
             }
 
-            if (!componentFolder.includes('dataGrid')) {
-              const currentTheme = await getCurrentTheme(t) || 'generic.light';
-              const newTheme = args.theme || 'generic.light';
+            const currentTheme = await getCurrentTheme(t) || 'fluent.blue.light';
+            const newTheme = args.theme || 'fluent.blue.light';
 
-              if (currentTheme !== newTheme) {
-                await changeTheme(t, newTheme);
-              }
+            if (currentTheme !== newTheme) {
+              await changeTheme(t, newTheme);
             }
           },
           after: async (t: TestController) => {

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

@@ -4,6 +4,7 @@ import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTex
 import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 import { getData } from '../../helpers/generateDataSourceData';
 
 fixture.disablePageReloads`Common tests`
@@ -19,9 +20,9 @@ const screenshotCheck = async (
 ) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  await testScreenshot(t, takeScreenshot, `${screenshotName}.png`);
+
   await t
-    .expect(await takeScreenshot(`${screenshotName}.png`))
-    .ok()
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 };

e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts

@@ -4,6 +4,7 @@ import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTex
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { getData } from '../../helpers/generateDataSourceData';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`DataGrid - contrast`
   .page(url(__dirname, '../../../container.html'));
@@ -26,9 +27,9 @@ test('DataGrid - Contrast between icons in the Filter Row menu and their backgro
     .click(searchButton)
     .expect(filterMenu.element.exists)
     .ok();
+
+  await testScreenshot(t, takeScreenshot, 'T1257970-datagrid-menu-icon-contrast.png', { element: dataGrid.element });
   await t
-    .expect(await takeScreenshot('T1257970-datagrid-menu-icon-contrast-generic.light.png', dataGrid.element))
-    .ok()
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(
@@ -67,9 +68,8 @@ test('DataGrid - Filter icon should remain visible when it\'s focused', async (t
     .expect(searchIconContainer.focused)
     .ok();
 
+  await testScreenshot(t, takeScreenshot, 'T1286345-datagrid-menu-icon-when-focused.png', { element: dataGrid.element });
   await t
-    .expect(await takeScreenshot('T1286345-datagrid-menu-icon-when-focused-generic.light.png', dataGrid.element))
-    .ok()
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(