diff --git a/e2e/testcafe-devextreme/tests/chat/alertList.ts b/e2e/testcafe-devextreme/tests/chat/alertList.ts
index 9f6a7d80847..51bcce3ed6b 100644
--- a/e2e/testcafe-devextreme/tests/chat/alertList.ts
+++ b/e2e/testcafe-devextreme/tests/chat/alertList.ts
@@ -14,7 +14,9 @@ test.clientScripts([
   { content: 'window.MockDate = MockDate;' },
 ])('Alertlist appearance', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await testScreenshot(t, takeScreenshot, 'Alertlist with one error.png', { element: '#container' });
 
diff --git a/e2e/testcafe-devextreme/tests/chat/avatar.ts b/e2e/testcafe-devextreme/tests/chat/avatar.ts
index ac7feca3367..f2713c3b668 100644
--- a/e2e/testcafe-devextreme/tests/chat/avatar.ts
+++ b/e2e/testcafe-devextreme/tests/chat/avatar.ts
@@ -11,9 +11,11 @@ fixture.disablePageReloads`ChatAvatar`
 
 test('Chat: avatar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', { element: '#chat' });
 
   const chat = new Chat('#chat');
+  await chat.repaint();
+
+  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', { element: '#chat' });
 
   const userFirst = createUser(1, 'First', avatarUrl);
   const userSecond = createUser(2, 'Second', avatarUrl);
@@ -45,6 +47,10 @@ test('Chat: avatar', async (t) => {
 
 test('Chat: showAvatar set to false', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Avatar with showAvatar set to false.png', { element: '#chat' });
 
   await t
diff --git a/e2e/testcafe-devextreme/tests/chat/messageBox.ts b/e2e/testcafe-devextreme/tests/chat/messageBox.ts
index 8bbfd5bdc13..71c9219b6d4 100644
--- a/e2e/testcafe-devextreme/tests/chat/messageBox.ts
+++ b/e2e/testcafe-devextreme/tests/chat/messageBox.ts
@@ -13,6 +13,8 @@ test('Chat: messagebox', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
+
   const shortText = getShortText();
   const longText = getLongText(false, 5);
 
diff --git a/e2e/testcafe-devextreme/tests/chat/messageBubble.ts b/e2e/testcafe-devextreme/tests/chat/messageBubble.ts
index a39af085db5..5d55845b4c1 100644
--- a/e2e/testcafe-devextreme/tests/chat/messageBubble.ts
+++ b/e2e/testcafe-devextreme/tests/chat/messageBubble.ts
@@ -13,6 +13,7 @@ test('Chat: messagebubble', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
 
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
diff --git a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
index f4b493ba336..d4380b649f4 100644
--- a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
+++ b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
@@ -20,6 +20,9 @@ fixture.disablePageReloads`ChatMessageGroup`
 test('Chat: messagegroup, avatar rendering', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' });
 
   await setStyleAttribute(Selector(AVATAR_SELECTOR), 'width: 64px; height: 64px');
@@ -44,6 +47,9 @@ test('Chat: messagegroup, avatar rendering', async (t) => {
 test('Chat: messagegroup, information', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Information row with long user name.png', { element: '#chat' });
 
   await t
@@ -69,6 +75,7 @@ test('Chat: messagegroup, bubbles', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
 
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
@@ -126,6 +133,9 @@ test('Messagegroup scenarios in disabled state', async (t) => {
       width: 250,
       height: 400,
     }, chatId);
+
+    const chat = new Chat(chatId);
+    await chat.repaint(); // NOTE: WA to make it stable in Material theme.
   });
 
   await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#container' });
diff --git a/e2e/testcafe-devextreme/tests/chat/messageList.ts b/e2e/testcafe-devextreme/tests/chat/messageList.ts
index ad5d7c36a1a..42d7efcd73c 100644
--- a/e2e/testcafe-devextreme/tests/chat/messageList.ts
+++ b/e2e/testcafe-devextreme/tests/chat/messageList.ts
@@ -16,6 +16,7 @@ test('Messagelist empty view scenarios', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await testScreenshot(t, takeScreenshot, 'Messagelist empty state.png', { element: '#container' });
 
@@ -50,6 +51,7 @@ test('Messagelist appearance with scrollbar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await t
     .hover(chat.messageList)
@@ -118,6 +120,9 @@ test('Messagelist should scrolled to the latest messages after being rendered in
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const tabPanel = new TabPanel('#container');
+  const chat = new Chat('#chat');
+
+  await chat.repaint();
 
   await t
     .click(tabPanel.tabs.getItem(1).element);
@@ -145,7 +150,7 @@ test('Messagelist should scrolled to the latest messages after being rendered in
     }, {
       title: 'Tab_2',
       collapsible: true,
-      template: ClientFunction(() => ($('<div>') as any).dxChat({
+      template: ClientFunction(() => ($('<div id="chat">') as any).dxChat({
         items,
         user: userSecond,
       }), { dependencies: { items, userSecond } }),
@@ -185,9 +190,11 @@ test('Messagelist with loadindicator appearance on initial loading', async (t) =
 });
 
 test('Messagelist with messageTemplate', async (t) => {
-  const chat = new Chat('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#container');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Messagelist with message template.png', { element: '#container' });
 
   await t
@@ -231,6 +238,9 @@ test('Messagelist with messageTemplate', async (t) => {
 
 test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp set to false work', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await chat.repaint();
 
   await testScreenshot(
     t,
@@ -275,7 +285,9 @@ test.clientScripts([
   { content: 'window.MockDate = MockDate;' },
 ])('Messagelist with date headers', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
 
+  await chat.repaint();
   await testScreenshot(t, takeScreenshot, 'Messagelist with date headers.png', { element: '#container' });
 
   await t
diff --git a/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts b/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts
index 8c62b5317d6..97653db1a82 100644
--- a/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts
+++ b/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts
@@ -54,6 +54,9 @@ test('Chat: typing indicator with emptyview', async (t) => {
 test('Chat: typing indicator with a lot of items', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Typing indicator with a lot of items.png', { element: '#chat' });
 
   await t
@@ -82,9 +85,10 @@ test('Chat: typing indicator with a lot of items', async (t) => {
 test('Chat: typing indicator', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  await testScreenshot(t, takeScreenshot, 'Typing indicator with 1 user.png', { element: '#chat' });
-
   const chat = new Chat('#chat');
+  await chat.repaint();
+
+  await testScreenshot(t, takeScreenshot, 'Typing indicator with 1 user.png', { element: '#chat' });
 
   const userFirst = createUser(1, 'Camille');
   const userSecond = createUser(2, 'Sophie');