diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts index 617d5ba268c..2d7d345e7b1 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-api.spec.ts +++ b/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; diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-widget.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-widget.spec.ts index 812a2496c74..37279923dbd 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-livechat-widget.spec.ts +++ b/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(); }); }); }); diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-livechat-embedded.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-livechat-embedded.ts index c5bc515a99e..8d5fff57412 100644 --- a/apps/meteor/tests/e2e/page-objects/omnichannel-livechat-embedded.ts +++ b/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 }) { + 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 { - 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 { + await this.btnOpenLiveChat().click(); } unreadMessagesBadge(count: number): Locator { diff --git a/packages/livechat/src/components/Button/index.tsx b/packages/livechat/src/components/Button/index.tsx index e217632f7d5..439928497b8 100644 --- a/packages/livechat/src/components/Button/index.tsx +++ b/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 ? ( diff --git a/packages/livechat/src/components/Screen/index.js b/packages/livechat/src/components/Screen/index.js index e59c39bdc02..e4f4aff1ea4 100644 --- a/packages/livechat/src/components/Screen/index.js +++ b/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 = ({
{triggered && ( - )}