screenshots for textbox with limited width, ids for detebox

Author: Julia Volkova

e2e/testcafe-devextreme/tests/editors/dateBox/validationMessage.ts

@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DateBox from 'devextreme-testcafe-models/dateBox';
+import Guid from 'devextreme/core/guid';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
@@ -55,9 +56,12 @@ safeSizeTest('DateBox ValidationMessage position is correct', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}, [600, 400]).before(async () => {
+}, [600, 400]).before(async (t) => {
   // eslint-disable-next-line no-restricted-syntax
   for (const position of positions) {
+    const id = `${`dx${new Guid()}`}`;
+
+    t.ctx.ids.push(id);
     await createWidget('dxDateBox', {
       elementAttr: { style: 'display: inline-block; margin: 50px 100px 0 0;' },
       width: 150,