chore: fix embedded livechat tests (#31477)

apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts

@@ -71,7 +71,7 @@ test.describe('OC - Livechat API', () => {
 			page = await browser.newPage();
 			await expect((await api.post('/settings/Enable_CSP', { value: false })).status()).toBe(200);
 
-			poLiveChat = new OmnichannelLiveChatEmbedded(page, api);
+			poLiveChat = new OmnichannelLiveChatEmbedded(page);
 
 			const { page: pageCtx } = await createAuxContext(browser, Users.user1);
 			poAuxContext = { page: pageCtx, poHomeOmnichannel: new HomeOmnichannel(pageCtx) };
@@ -238,10 +238,10 @@ test.describe('OC - Livechat API', () => {
 			await expect((await api.post('/settings/Livechat_offline_email', { value: 'test@testing.com' })).status()).toBe(200);
 		});
 
-		test.beforeEach(async ({ browser, api }, testInfo) => {
+		test.beforeEach(async ({ browser }, testInfo) => {
 			page = await browser.newPage();
 
-			poLiveChat = new OmnichannelLiveChatEmbedded(page, api);
+			poLiveChat = new OmnichannelLiveChatEmbedded(page);
 
 			const { page: pageCtx } = await createAuxContext(browser, Users.user1);
 			poAuxContext = { page: pageCtx, poHomeOmnichannel: new HomeOmnichannel(pageCtx) };
@@ -488,10 +488,10 @@ test.describe('OC - Livechat API', () => {
 			await expect((await api.post('/settings/Livechat_offline_email', { value: 'test@testing.com' })).status()).toBe(200);
 		});
 
-		test.beforeEach(async ({ browser, api }, testInfo) => {
+		test.beforeEach(async ({ browser }, testInfo) => {
 			page = await browser.newPage();
 
-			poLiveChat = new OmnichannelLiveChatEmbedded(page, api);
+			poLiveChat = new OmnichannelLiveChatEmbedded(page);
 
 			const { page: pageCtx } = await createAuxContext(browser, Users.user1);
 			poAuxContext = { page: pageCtx, poHomeOmnichannel: new HomeOmnichannel(pageCtx) };
@@ -559,7 +559,7 @@ test.describe('OC - Livechat API', () => {
 					}),
 				);
 
-				await poLiveChat.openLiveChat(false);
+				await poLiveChat.openLiveChat();
 				await poLiveChat.sendMessage(newVisitor, false);
 				await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 				await poLiveChat.btnSendMessageToOnlineAgent.click();
@@ -601,7 +601,7 @@ test.describe('OC - Livechat API', () => {
 					}),
 				);
 
-				await poLiveChat.openLiveChat(false);
+				await poLiveChat.openLiveChat();
 				await poLiveChat.sendMessage(newVisitor, false);
 				await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 				await poLiveChat.btnSendMessageToOnlineAgent.click();
@@ -631,7 +631,7 @@ test.describe('OC - Livechat API', () => {
 				email: faker.internet.email(),
 			};
 
-			await poLiveChat.openLiveChat(false);
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newVisitor, false);
 			await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_visitor');
 			await poLiveChat.btnSendMessageToOnlineAgent.click();
@@ -669,7 +669,7 @@ test.describe('OC - Livechat API', () => {
 				}),
 			);
 
-			await poLiveChat.openLiveChat(true);
+			await poLiveChat.openLiveChat();
 			await poLiveChat.sendMessage(newVisitor, true);
 
 			await watchForTrigger;

apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-widget.spec.ts

@@ -1,18 +1,17 @@
 import type { Page } from '@playwright/test';
 
+import { OmnichannelLiveChatEmbedded } from '../page-objects';
 import { test, expect } from '../utils/test';
 
 test.describe('Omnichannel - Livechat Widget Embedded', () => {
 	test.describe('Widget is working on Embedded View', () => {
 		let page: Page;
-        let siteName: string;
+		let poLiveChat: OmnichannelLiveChatEmbedded;
 
 		test.beforeAll(async ({ browser, api }) => {
 			page = await browser.newPage();
+			poLiveChat = new OmnichannelLiveChatEmbedded(page);
             await expect((await api.post('/settings/Enable_CSP', { value: false })).status()).toBe(200);
-            const { value } = await(await api.get('/settings/Site_Name')).json();
-            siteName = value;
-
 
 			await page.goto('/packages/rocketchat_livechat/assets/demo.html');
 		});
@@ -24,7 +23,7 @@ test.describe('Omnichannel - Livechat Widget Embedded', () => {
 
 		test('Open and Close widget', async () => {
 			await test.step('Expect widget to be visible while embedded in an iframe', async () => {
-				await expect(page.frameLocator('#rocketchat-iframe').locator(`role=button[name="${siteName}"]`)).toBeVisible();
+				await expect(poLiveChat.btnOpenLiveChat()).toBeVisible();
 			});
 		});
 	});

apps/meteor/tests/e2e/page-objects/omnichannel-livechat-embedded.ts

@@ -1,14 +1,14 @@
-import type { Page, Locator, APIResponse } from '@playwright/test';
+import type { Page, Locator } from '@playwright/test';
 
 export class OmnichannelLiveChatEmbedded {
 	readonly page: Page;
 
-	constructor(page: Page, private readonly api: { get(url: string): Promise<APIResponse> }) {
+	constructor(page: Page) {
 		this.page = page;
 	}
 
-	btnOpenLiveChat(label: string): Locator {
-		return this.page.frameLocator('#rocketchat-iframe').locator(`role=button[name="${label}"]`);
+	btnOpenLiveChat(): Locator {
+		return this.page.frameLocator('#rocketchat-iframe').locator(`[data-qa-id="chat-button"]`);
 	}
 
 	btnOpenOfflineLiveChat(): Locator {
@@ -49,12 +49,8 @@ export class OmnichannelLiveChatEmbedded {
 		await this.btnCloseChatConfirm.click();
 	}
 
-	async openLiveChat(offline: boolean): Promise<void> {
-		const { value: siteName } = await (await this.api.get('/settings/Site_Name')).json();
-		if (offline) {
-			return this.btnOpenOfflineLiveChat().click();
-		}
-		await this.btnOpenLiveChat(siteName).click();
+	async openLiveChat(): Promise<void> {
+		await this.btnOpenLiveChat().click();
 	}
 
 	unreadMessagesBadge(count: number): Locator {

packages/livechat/src/components/Button/index.tsx

@@ -49,6 +49,7 @@ export const Button = ({
 	children,
 	img,
 	full,
+	...props
 }: ButtonProps) => {
 	const { t } = useTranslation();
 	return (
@@ -84,6 +85,7 @@ export const Button = ({
 					backgroundImage: `url(${img})`,
 				},
 			)}
+			{...props}
 		>
 			{badge ? (
 				<span role='status' aria-label={t('unread_messages_count', { count: badge })} className={createClassName(styles, 'button__badge')}>

packages/livechat/src/components/Screen/index.js

@@ -31,6 +31,7 @@ const ChatButton = ({ text, minimized, badge, onClick, triggered = false, agent
 		badge={badge}
 		onClick={onClick}
 		className={createClassName(styles, 'screen__chat-button')}
+		data-qa-id='chat-button'
 		img={triggered && agent && agent.avatar.src}
 	>
 		{text}
@@ -101,7 +102,12 @@ export const Screen = ({
 	<div className={createClassName(styles, 'screen', { minimized, expanded, windowed, triggered })}>
 		<CssVar theme={theme} />
 		{triggered && (
-			<Button onClick={onMinimize} className={createClassName(styles, 'screen__chat-close-button')} icon={<CloseIcon />}>
+			<Button
+				onClick={onMinimize}
+				data-qa-id='chat-close-button'
+				className={createClassName(styles, 'screen__chat-close-button')}
+				icon={<CloseIcon />}
+			>
 				Close
 			</Button>
 		)}