fix(e2e): Fix container styles

Author: marker dao ®

e2e/testcafe-devextreme/tests/editors/chat/messageGroup.ts

@@ -9,7 +9,7 @@ import {
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
-import { appendElementTo, insertStylesheetRulesToPage, setStyleAttribute } from '../../../helpers/domUtils';
+import { appendElementTo, setStyleAttribute } from '../../../helpers/domUtils';
 import asyncForEach from '../../../helpers/asyncForEach';
 
 const AVATAR_SELECTOR = '.dx-avatar';
@@ -111,11 +111,9 @@ test('Messagegroup scenarios in disabled state', async (t) => {
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
 
-  await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 2px; padding: 20px; }');
-
   await asyncForEach([1, 2, 3, 4], async (bubbleCount, idx) => {
     const chatId = `#chat_${idx}`;
-    await appendElementTo('#container', 'div', `chat_${idx}`);
+    await appendElementTo('#chat-wrapper', 'div', `chat_${idx}`);
 
     const items = generateMessages(bubbleCount, userFirst, userSecond, false, false, 4, 2);
 
@@ -131,11 +129,14 @@ test('Messagegroup scenarios in disabled state', async (t) => {
     await chat.repaint();
   });
 
-  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#chat-wrapper' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat-wrapper');
+  await setStyleAttribute(Selector('#chat-wrapper'), 'display: flex; flex-wrap: wrap; gap: 2px; width: 1270px; padding: 20px; transform: scale(0.9);');
 });
 
 test('Messagegroup scenarios in RTL mode', async (t) => {
@@ -144,11 +145,9 @@ test('Messagegroup scenarios in RTL mode', async (t) => {
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
 
-  await insertStylesheetRulesToPage('#container { display: flex; flex-wrap: wrap; gap: 2px; padding: 20px; }');
-
   await asyncForEach([1, 2, 3, 4], async (bubbleCount, idx) => {
     const chatId = `#chat_${idx}`;
-    await appendElementTo('#container', 'div', `chat_${idx}`);
+    await appendElementTo('#chat-wrapper', 'div', `chat_${idx}`);
 
     const items = generateMessages(bubbleCount, userFirst, userSecond, false, false, 4, 2);
 
@@ -164,13 +163,14 @@ test('Messagegroup scenarios in RTL mode', async (t) => {
     await chat.repaint(); // NOTE: WA to make it stable in Material theme.
   });
 
-  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in RTL mode.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in RTL mode.png', { element: '#chat-wrapper' });
 
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {
-  await setStyleAttribute(Selector('#container'), 'width: 1270px');
+  await appendElementTo('#container', 'div', 'chat-wrapper');
+  await setStyleAttribute(Selector('#chat-wrapper'), 'display: flex; flex-wrap: wrap; gap: 2px; width: 1270px; padding: 20px; transform: scale(0.9);');
 });
 
 test('MessageGroup with edited messages', async (t) => {

e2e/testcafe-devextreme/tests/editors/chat/messageList.ts

@@ -133,7 +133,7 @@ test('Messagelist should scrolled to the latest messages after being rendered in
 
   return createWidget('dxTabPanel', {
     width: 400,
-    height: 570,
+    height: 600,
     deferRendering: true,
     templatesRenderAsynchronously: true,
     dataSource: [{