test: adjust locators

RocketChat · Oct 10, 2024 · ec79a1d · ec79a1d
1 parent 2e90359
commit ec79a1d
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 42 deletions.
diff --git 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
@@ -26,15 +26,15 @@ 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 () => {
 			await poHomeChannel.sidenav.openChat(targetChannel);
 			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
@@ -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<void> {
-		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<void> {
-		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<void> {
@@ -100,31 +103,30 @@ export class HomeSidenav {
 	}
 
 	async openNewByLabel(text: string): Promise<void> {
-		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<void> {
-		await this.page.locator('role=navigation >> role=button[name=Search]').click();
+	async typeSearch(text: string): Promise<void> {
+		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<void> {
-		await this.openSearch();
-		await this.page.locator('role=search >> role=searchbox').fill(name);
+		await this.typeSearch(name);
 	}
 
 	async logout(): Promise<void> {
 		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<void> {
 		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<void> {
@@ -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
@@ -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
@@ -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
@@ -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 }) => {