DevExpress · Tucchhaa · Jan 30, 2025 · Jan 14, 2025 · Jan 16, 2025 · Jan 16, 2025
@@ -101,6 +101,7 @@ import {
   DxLookup,
   DxForm,
 } from 'devextreme-vue/data-grid';
+import 'devextreme-vue/text-area';
 import { DxItem } from 'devextreme-vue/form';
 import { employees, states } from './data.ts';
 

@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="data.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="index.js"></script>
   </head>
   <body class="dx-viewport">

@@ -0,0 +1,32 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector as $ } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('DataGrid.PopupEditing')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 600];
+  });
+
+runManualTest('DataGrid', 'PopupEditing', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+  test('PopupEditing', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await testScreenshot(t, takeScreenshot, 'datagrid_popup_editing_1_desktop.png');
+
+    await t
+      .click($('.dx-link-edit').nth(0))
+      .wait(500);
+
+    await testScreenshot(t, takeScreenshot, 'datagrid_popup_editing_2_desktop.png', '.dx-overlay-content');
+
+    await t.scrollBy('.dx-popup-content .dx-scrollable-container', 0, 1000);
+
+    await testScreenshot(t, takeScreenshot, 'datagrid_popup_editing_3_desktop.png', '.dx-overlay-content');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});