diff --git a/apps/meteor/tests/e2e/e2e-encryption.spec.ts b/apps/meteor/tests/e2e/e2e-encryption.spec.ts index ad98df1aaa53..461eec090150 100644 --- a/apps/meteor/tests/e2e/e2e-encryption.spec.ts +++ b/apps/meteor/tests/e2e/e2e-encryption.spec.ts @@ -1008,9 +1008,8 @@ test.describe.serial('e2ee room setup', () => { await injectInitialData(); await restoreState(page, Users.admin); - await page.locator('role=navigation >> role=button[name=Search]').click(); - await page.locator('role=search >> role=searchbox').fill(channelName); - await page.locator(`role=search >> role=listbox >> role=link >> text="${channelName}"`).click(); + await poHomeChannel.sidenav.typeSearch(channelName); + await poHomeChannel.sidenav.getSearchRoomByName(channelName).click(); await page.locator('role=button[name="Save E2EE password"]').click(); await page.locator('#modal-root >> button:has-text("I saved my password")').click(); diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts index 81ae93965856..77e7d37ff4fe 100644 --- a/apps/meteor/tests/e2e/mark-unread.spec.ts +++ b/apps/meteor/tests/e2e/mark-unread.spec.ts @@ -26,7 +26,7 @@ test.describe.serial('mark-unread', () => { test('should not mark empty room as unread', async () => { await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).not.toBeVisible(); }); test('should mark a populated room as unread', async () => { @@ -34,7 +34,7 @@ test.describe.serial('mark-unread', () => { await poHomeChannel.content.sendMessage('this is a message for reply'); await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible(); }); test('should mark a populated room as unread - search', async () => { @@ -61,11 +61,11 @@ test.describe.serial('mark-unread', () => { await poHomeChannel.sidenav.openChat(targetChannel); // wait for the sidebar item to be read - await poHomeChannel.sidenav.getSidebarItemByName(targetChannel, true).waitFor(); + await poHomeChannel.sidenav.getSidebarItemRead(targetChannel).waitFor(); await poHomeChannel.content.openLastMessageMenu(); await poHomeChannel.markUnread.click(); - await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible(); + await expect(poHomeChannel.sidenav.getSidebarItemBadge(targetChannel)).toBeVisible(); }); }); }); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts index 823469d02a96..ddd85c1a86d8 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts @@ -37,12 +37,8 @@ export class HomeSidenav { return this.page.locator('role=button[name="Create"]'); } - get inputSearch(): Locator { - return this.page.locator('[placeholder="Search (Ctrl+K)"]').first(); - } - get userProfileMenu(): Locator { - return this.page.getByRole('button', { name: 'User menu', exact: true }); + return this.page.getByRole('navigation', { name: 'header' }).getByRole('button', { name: 'User menu', exact: true }); } get sidebarChannelsList(): Locator { @@ -53,45 +49,52 @@ export class HomeSidenav { return this.page.getByRole('toolbar', { name: 'Sidebar actions' }); } + get sidebarSearchSection(): Locator { + return this.page.getByRole('navigation', { name: 'sidebar' }).getByRole('search'); + } + async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { - await this.sidebarToolbar.getByRole('button', { name: 'Display', exact: true }).click(); - await this.sidebarToolbar.getByRole('menuitemcheckbox', { name: mode }).click(); - await this.sidebarToolbar.click(); + const displayButton = this.sidebarSearchSection.getByRole('button', { name: 'Display', exact: true }); + await displayButton.click(); + await this.sidebarSearchSection.getByRole('group', { name: 'Display' }).getByRole('menuitemcheckbox', { name: mode }).click(); + await displayButton.click(); } // Note: this is different from openChat because queued chats are not searchable getQueuedChat(name: string): Locator { - return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: name }).first(); + return this.page.getByRole('listitem').getByRole('link', { name }); } get accountProfileOption(): Locator { - return this.page.locator('role=menuitemcheckbox[name="Profile"]'); + return this.page.getByRole('menu').getByRole('menuitemcheckbox', { name: 'Profile' }); } // TODO: refactor getSidebarItemByName to not use data-qa - getSidebarItemByName(name: string, isRead?: boolean): Locator { - return this.page.locator( - ['[data-qa="sidebar-item"]', `[aria-label="${name}"]`, isRead && '[data-unread="false"]'].filter(Boolean).join(''), - ); + getSidebarItemByName(name: string): Locator { + return this.page.getByRole('listitem').getByRole('link', { name }); + } + + getSidebarItemRead(name: string): Locator { + return this.page.getByRole('listitem').getByRole('link', { name }).locator('[data-unread=false]'); } async selectMarkAsUnread(name: string) { const sidebarItem = this.getSidebarItemByName(name); await sidebarItem.focus(); - await sidebarItem.locator('.rcx-sidebar-item__menu').click(); - await this.page.getByRole('option', { name: 'Mark Unread' }).click(); + await sidebarItem.locator('.rcx-sidebar-v2-item__menu-wrapper').click(); + await this.page.getByRole('listbox').getByRole('option', { name: 'Mark Unread' }).click(); } async selectPriority(name: string, priority: string) { const sidebarItem = this.getSidebarItemByName(name); await sidebarItem.focus(); - await sidebarItem.locator('.rcx-sidebar-item__menu').click(); + await sidebarItem.locator('.rcx-sidebar-v2-item__menu-wrapper').click(); await this.page.locator(`li[value="${priority}"]`).click(); } async openAdministrationByLabel(text: string): Promise { - await this.page.locator('role=button[name="Administration"]').click(); - await this.page.locator(`role=menuitem[name="${text}"]`).click(); + await this.page.getByRole('navigation', { name: 'header' }).getByRole('group').getByRole('button', { name: 'Manage' }).click(); + await this.page.getByRole('group').getByRole('menuitem', { name: text }).click(); } async openInstalledApps(): Promise { @@ -100,31 +103,30 @@ export class HomeSidenav { } async openNewByLabel(text: string): Promise { - await this.page.locator('role=button[name="Create new"]').click(); - await this.page.locator(`role=menuitem[name="${text}"]`).click(); + await this.sidebarSearchSection.getByRole('button', { name: 'Create new', exact: true }).click(); + await this.sidebarSearchSection.getByRole('menuitem', { name: text }).click(); } - async openSearch(): Promise { - await this.page.locator('role=navigation >> role=button[name=Search]').click(); + async typeSearch(text: string): Promise { + await this.page.getByRole('navigation', { name: 'sidebar' }).getByRole('searchbox', { name: 'Search' }).fill(text); } getSearchRoomByName(name: string): Locator { - return this.page.locator(`role=search >> role=listbox >> role=link >> text="${name}"`); + return this.page.getByRole('search').getByRole('listbox').getByRole('link', { name, exact: true }); } async searchRoom(name: string): Promise { - await this.openSearch(); - await this.page.locator('role=search >> role=searchbox').fill(name); + await this.typeSearch(name); } async logout(): Promise { await this.userProfileMenu.click(); - await this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]').click(); + await this.page.getByRole('menu').getByRole('menuitemcheckbox', { name: 'Logout' }).click(); } async switchStatus(status: 'offline' | 'online'): Promise { await this.userProfileMenu.click(); - await this.page.locator(`role=menuitemcheckbox[name="${status}"]`).click(); + await this.page.getByRole('menu').getByRole('menuitemcheckbox', { name: status }).click(); } async openChat(name: string): Promise { @@ -181,8 +183,8 @@ export class HomeSidenav { await this.btnCreate.click(); } - getRoomBadge(roomName: string): Locator { - return this.getSidebarItemByName(roomName).getByRole('status', { exact: true }); + getSidebarItemBadge(roomName: string): Locator { + return this.getSidebarItemByName(roomName).getByRole('status'); } getSearchChannelBadge(name: string): Locator { diff --git a/apps/meteor/tests/e2e/page-objects/home-channel.ts b/apps/meteor/tests/e2e/page-objects/home-channel.ts index ce51896eb449..1fe8ad10b829 100644 --- a/apps/meteor/tests/e2e/page-objects/home-channel.ts +++ b/apps/meteor/tests/e2e/page-objects/home-channel.ts @@ -61,6 +61,6 @@ export class HomeChannel { } get markUnread(): Locator { - return this.page.locator('role=menuitem[name="Mark Unread"]'); + return this.page.getByRole('menuitem', { name: 'Mark Unread' }); } } diff --git a/apps/meteor/tests/e2e/search-discussion.spec.ts b/apps/meteor/tests/e2e/search-discussion.spec.ts index 0d645432d777..b5dc866ce6ac 100644 --- a/apps/meteor/tests/e2e/search-discussion.spec.ts +++ b/apps/meteor/tests/e2e/search-discussion.spec.ts @@ -29,8 +29,7 @@ test.describe.serial('search-discussion', () => { }); const testDiscussionSearch = async (page: Page) => { - await poHomeChannel.sidenav.openSearch(); - await poHomeChannel.sidenav.inputSearch.type(discussionName); + await poHomeChannel.sidenav.typeSearch(discussionName); const targetSearchItem = page.locator('role=listbox').getByText(discussionName).first(); await expect(targetSearchItem).toBeVisible(); }; diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index a172fe72d1be..09b3b5f98f45 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -16,9 +16,16 @@ test.describe.serial('sidebar', () => { test('should navigate on sidebar toolbar using arrow keys', async ({ page }) => { await poHomeDiscussion.sidenav.userProfileMenu.focus(); await page.keyboard.press('Tab'); - await page.keyboard.press('ArrowRight'); + await page.keyboard.press('ArrowDown'); + await expect(poHomeDiscussion.sidenav.sidebarSearchSection.getByRole('searchbox', { name: 'Search' })).toBeFocused(); + }); - await expect(poHomeDiscussion.sidenav.sidebarToolbar.getByRole('button', { name: 'Search' })).toBeFocused(); + test('should navigate through search results using keyboard', async ({ page }) => { + await poHomeDiscussion.sidenav.typeSearch('a'); + await page.keyboard.press('Tab'); + await expect(poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first()).toBeFocused(); + await page.keyboard.press('ArrowDown'); + await expect(poHomeDiscussion.sidenav.sidebarChannelsList.getByRole('link').first()).not.toBeFocused(); }); test('should navigate on sidebar items using arrow keys and restore focus', async ({ page }) => {