diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
index 3639d98f005f..c86621de14ce 100644
--- a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
@@ -1,5 +1,6 @@
 <div class="demo-container">
   <dx-chat
+    [elementAttr]="{ id: 'user-chat' }"
     [user]="currentUser"
     [items]="messages$ | async"
     [typingUsers]="userChatTypingUsers$ | async"
@@ -10,6 +11,7 @@
   </dx-chat>
 
   <dx-chat
+    [elementAttr]="{ id: 'support-chat' }"
     [user]="supportAgent"
     [items]="messages$ | async"
     [typingUsers]="supportChatTypingUsers$ | async"
diff --git a/apps/demos/Demos/Chat/Overview/React/App.tsx b/apps/demos/Demos/Chat/Overview/React/App.tsx
index 4fc1a0f2e8a2..0b78b76068a7 100644
--- a/apps/demos/Demos/Chat/Overview/React/App.tsx
+++ b/apps/demos/Demos/Chat/Overview/React/App.tsx
@@ -33,6 +33,7 @@ export default function App() {
   return (
     <React.Fragment>
       <Chat
+        elementAttr={{ id: 'user-chat' }}
         user={currentUser}
         items={messages}
         onMessageEntered={onMessageEntered}
@@ -41,6 +42,7 @@ export default function App() {
         typingUsers={userChatTypingUsers}
       />
       <Chat
+        elementAttr={{ id: 'support-chat' }}
         user={supportAgent}
         items={messages}
         onMessageEntered={onMessageEntered}
diff --git a/apps/demos/Demos/Chat/Overview/ReactJs/App.js b/apps/demos/Demos/Chat/Overview/ReactJs/App.js
index f2f1cbb0b47b..0cda9bb4b94e 100644
--- a/apps/demos/Demos/Chat/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Chat/Overview/ReactJs/App.js
@@ -26,6 +26,7 @@ export default function App() {
   return (
     <React.Fragment>
       <Chat
+        elementAttr={{ id: 'user-chat' }}
         user={currentUser}
         items={messages}
         onMessageEntered={onMessageEntered}
@@ -34,6 +35,7 @@ export default function App() {
         typingUsers={userChatTypingUsers}
       />
       <Chat
+        elementAttr={{ id: 'support-chat' }}
         user={supportAgent}
         items={messages}
         onMessageEntered={onMessageEntered}
diff --git a/apps/demos/Demos/Chat/Overview/Vue/App.vue b/apps/demos/Demos/Chat/Overview/Vue/App.vue
index 3fcf8fe9a28d..19287fc278d8 100644
--- a/apps/demos/Demos/Chat/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Chat/Overview/Vue/App.vue
@@ -1,5 +1,6 @@
 <template>
   <DxChat
+    :element-attr="{ id: 'user-chat' }"
     v-model:items="messages"
     v-model:user="currentUser"
     v-model:typing-users="userChatTypingUsers"
@@ -8,6 +9,7 @@
     @typing-end="userChatTypingEnd()"
   />
   <DxChat
+    :element-attr="{ id: 'support-chat' }"
     v-model:items="messages"
     v-model:user="supportAgent"
     v-model:typing-users="supportChatTypingUsers"
diff --git a/apps/demos/testing/widgets/chat/Overview.test.js b/apps/demos/testing/widgets/chat/Overview.test.js
index d8f460c52d9e..202a16653fbf 100644
--- a/apps/demos/testing/widgets/chat/Overview.test.js
+++ b/apps/demos/testing/widgets/chat/Overview.test.js
@@ -3,7 +3,7 @@ import { ClientFunction, Selector } from 'testcafe';
 import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
 import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
 
-const CHAT_INPUT_SELECTOR = '.dx-chat .dx-texteditor-input';
+const USER_CHAT_INPUT_SELECTOR = '#user-chat .dx-texteditor-input';
 
 fixture('Chat.Overview')
   .page('http://localhost:8080/')
@@ -21,7 +21,7 @@ runManualTest('Chat', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test)
 
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await t.typeText(CHAT_INPUT_SELECTOR, 'left chat typing testing');
+    await t.typeText(USER_CHAT_INPUT_SELECTOR, 'left chat typing testing');
 
     await testScreenshot(t, takeScreenshot, 'chat_typing_indicator.png');