test: improve selectors specificity (#32665)

RocketChat · Jun 24, 2024 · 209a062 · 209a062
1 parent e07a515
commit 209a062
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 13 deletions.
diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
@@ -54,6 +54,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 					value={text}
 					flexGrow={2}
 					minWidth='x220'
+					aria-label={placeholder ?? t('Search')}
 				/>
 			</Box>
 			{isFilterByTextPropsWithButton(props) ? (

diff --git a/apps/meteor/client/views/omnichannel/managers/AddManager.tsx b/apps/meteor/client/views/omnichannel/managers/AddManager.tsx
@@ -1,5 +1,5 @@
 import { Button, Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
@@ -12,6 +12,8 @@ const AddManager = ({ reload }: { reload: () => void }): ReactElement => {
 	const [username, setUsername] = useState('');
 	const dispatchToastMessage = useToastMessageDispatch();
 
+	const usernameFieldId = useUniqueId();
+
 	const saveAction = useEndpointAction('POST', '/v1/livechat/users/manager');
 
 	const handleSave = useMutableCallback(async () => {
@@ -34,9 +36,9 @@ const AddManager = ({ reload }: { reload: () => void }): ReactElement => {
 	return (
 		<Box display='flex' alignItems='center'>
 			<Field>
-				<FieldLabel>{t('Username')}</FieldLabel>
+				<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
 				<FieldRow>
-					<UserAutoComplete value={username} onChange={handleChange} />
+					<UserAutoComplete id={usernameFieldId} value={username} onChange={handleChange} />
 					<Button disabled={!username} onClick={handleSave} mis={8} primary>
 						{t('Add_manager')}
 					</Button>

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
@@ -23,7 +23,7 @@ export class OmnichannelAgents {
 	}
 
 	get inputSearch(): Locator {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	get btnAdd(): Locator {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-business-hours.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-business-hours.ts
@@ -20,7 +20,7 @@ export class OmnichannelBusinessHours extends OmnichannelAdministration {
 	}
 
 	get inputSearch(): Locator {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	get inputName(): Locator {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-custom-fields.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-custom-fields.ts
@@ -33,7 +33,7 @@ export class OmnichannelCustomFields {
 	}
 
 	get inputSearch(): Locator {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	firstRowInTable(filedName: string) {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
@@ -13,7 +13,7 @@ export class OmnichannelDepartments {
 	}
 
 	get inputSearch() {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	async search(text: string) {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-manager.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-manager.ts
@@ -13,7 +13,7 @@ export class OmnichannelManager {
 	}
 
 	private get inputSearch() {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	async search(text: string) {
@@ -27,7 +27,7 @@ export class OmnichannelManager {
 	}
 
 	get inputUsername(): Locator {
-		return this.page.locator('input').first();
+		return this.page.getByRole('main').getByLabel('Username');
 	}
 
 	async selectUsername(username: string) {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts
@@ -20,7 +20,7 @@ export class OmnichannelMonitors extends OmnichannelAdministration {
 	}
 
 	get inputSearch(): Locator {
-		return this.page.locator('input[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	findRowByName(name: string): Locator {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-sla-policies.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-sla-policies.ts
@@ -60,7 +60,7 @@ export class OmnichannelSlaPolicies {
 	}
 
 	get inputSearch() {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	headingButtonNew(name: string) {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-tags.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-tags.ts
@@ -24,7 +24,7 @@ export class OmnichannelTags extends OmnichannelAdministration {
 	}
 
 	get inputSearch(): Locator {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	get confirmDeleteModal(): Locator {

diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
@@ -4,7 +4,7 @@ import { OmnichannelAdministration } from './omnichannel-administration';
 
 export class OmnichannelUnits extends OmnichannelAdministration {
 	get inputSearch() {
-		return this.page.locator('[placeholder="Search"]');
+		return this.page.getByRole('main').getByRole('textbox', { name: 'Search' });
 	}
 
 	async search(text: string) {