test: replace data-qa attributes for Autocomplete locators

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -94,7 +94,6 @@ const UserAutoCompleteMultiple = ({ onChange, value, placeholder, federated, ...
 		<OptionsContext.Provider value={{ options }}>
 			<MultiSelectFiltered
 				{...props}
-				data-qa-type='user-auto-complete-input'
 				placeholder={placeholder}
 				value={value}
 				onChange={handleOnChange}

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -17,7 +17,6 @@ const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMul
 	return (
 		<Option
 			{...props}
-			data-qa-type='autocomplete-user-option'
 			avatar={_federated ? undefined : <UserAvatar username={username || ''} size='x20' />}
 			icon={_federated ? 'globe' : undefined}
 			key={username}

apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx

@@ -43,7 +43,7 @@ const AutoCompleteUnit = ({
 	return (
 		<PaginatedSelectFiltered
 			id={id}
-			data-qa='autocomplete-unit'
+			aria-label={t('Unit')} // FIXME: remove this when PaginatedSelectFiltered properly associates the input with the label htmlFor
 			error={error}
 			filter={unitsFilter}
 			flexGrow={0}

apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx

@@ -3,7 +3,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAutoComplete } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useEndpointMutation } from '../../../../hooks/useEndpointMutation';
@@ -15,6 +15,8 @@ const AddAgent = () => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const queryClient = useQueryClient();
 
+	const usernameFieldId = useId();
+
 	const { mutateAsync: saveAction } = useEndpointMutation('POST', '/v1/livechat/users/agent', {
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agents() });
@@ -36,9 +38,9 @@ const AddAgent = () => {
 	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_agent')}
 					</Button>

apps/meteor/client/views/omnichannel/components/AutoCompleteAgent.tsx

@@ -48,7 +48,6 @@ const AutoCompleteAgent = ({
 			filter={agentsFilter}
 			setFilter={setAgentsFilter as (value: string | number | undefined) => void}
 			options={agentsItems}
-			data-qa='autocomplete-agent'
 			onChange={onChange}
 			endReached={() => fetchNextPage()}
 		/>

apps/meteor/client/views/omnichannel/components/AutoCompleteDepartment.tsx

@@ -62,7 +62,6 @@ const AutoCompleteDepartment = ({
 			setFilter={setDepartmentsFilter as (value?: string | number) => void}
 			options={departmentsItems}
 			placeholder={isPending ? t('Loading...') : t('Select_an_option')}
-			data-qa='autocomplete-department'
 			endReached={() => fetchNextPage()}
 			renderItem={({ label, ...props }) => <Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />}
 		/>

apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx

@@ -19,7 +19,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -43,6 +43,9 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatMo
 	const getUserData = useEndpoint('GET', '/v1/users.info');
 	const idleAgentsAllowedForForwarding = useSetting('Livechat_enabled_when_agent_idle', true);
 
+	const departmentFieldId = useId();
+	const userFieldId = useId();
+
 	const {
 		getValues,
 		handleSubmit,
@@ -93,13 +96,14 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatMo
 			<ModalContent fontScale='p2'>
 				<FieldGroup>
 					<Field>
-						<FieldLabel>{t('Forward_to_department')}</FieldLabel>
+						<FieldLabel htmlFor={departmentFieldId}>{t('Forward_to_department')}</FieldLabel>
 						<FieldRow>
 							<AutoCompleteDepartment
+								id={departmentFieldId}
+								aria-label={t('Forward_to_department')}
 								withTitle={false}
 								maxWidth='100%'
 								flexGrow={1}
-								data-qa-id='forward-to-department'
 								onChange={(value: string): void => {
 									setValue('department', value);
 								}}
@@ -108,9 +112,11 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatMo
 					</Field>
 					<Divider p={0} children={t('or')} />
 					<Field>
-						<FieldLabel>{t('Forward_to_user')}</FieldLabel>
+						<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
 						<FieldRow>
 							<AutoCompleteAgent
+								id={userFieldId}
+								aria-label={t('Forward_to_user')}
 								withTitle
 								onlyAvailable
 								value={getValues().username}

apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx

@@ -28,7 +28,7 @@ import {
 } from '@rocket.chat/ui-client';
 import { useTranslation, useToastMessageDispatch, useEndpoint, useSetModal } from '@rocket.chat/ui-contexts';
 import { useMutation, useQuery, hashKey, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useId, useMemo, useState } from 'react';
 
 import FilterByText from '../../../components/FilterByText';
 import GenericNoResults from '../../../components/GenericNoResults';
@@ -37,6 +37,7 @@ import { links } from '../../../lib/links';
 const MonitorsTable = () => {
 	const t = useTranslation();
 	const setModal = useSetModal();
+	const usernameFieldId = useId();
 
 	const [text, setText] = useState('');
 	const [username, setUsername] = useState('');
@@ -139,9 +140,9 @@ const MonitorsTable = () => {
 		<>
 			<Box display='flex' flexDirection='column'>
 				<Field>
-					<FieldLabel>{t('Username')}</FieldLabel>
+					<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
 					<FieldRow>
-						<UserAutoComplete name='monitor' value={username} onChange={setUsername as () => void} />
+						<UserAutoComplete id={usernameFieldId} name='monitor' value={username} onChange={setUsername as () => void} />
 						<Button primary disabled={!username} loading={addMutation.isPending} onClick={() => handleAdd()} mis={8}>
 							{t('Add_monitor')}
 						</Button>

apps/meteor/tests/e2e/federation/page-objects/channel.ts

@@ -78,9 +78,6 @@ export class FederationChannel {
 		for await (const username of usernamesToInvite) {
 			await this.newDMModal.inviteUserToDM(username);
 		}
-		await this.page
-			.locator('//*[@id="modal-root"]//*[contains(@class, "rcx-modal__title") and contains(text(), "Direct messages")]')
-			.click();
 		await this.newDMModal.btnCreate.click();
 	}
 

apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts

@@ -41,9 +41,11 @@ export class FederationHomeFlextabMembers {
 	async addMultipleUsers(usernames: string[]) {
 		await this.addUsersButton.click();
 		for await (const username of usernames) {
-			await this.page.locator('//label[contains(text(), "Choose users")]/..//input').type(username);
-			await this.page.locator(`[data-qa-type="autocomplete-user-option"] >> text=${username}`).waitFor();
-			await this.page.locator(`[data-qa-type="autocomplete-user-option"] >> text=${username}`).first().click();
+			await this.page.getByRole('textbox', { name: 'Choose users' }).click();
+			await this.page.getByRole('textbox', { name: 'Choose users' }).fill(username);
+
+			await this.page.getByRole('listbox').waitFor();
+			await this.page.getByRole('listbox').selectOption(username);
 		}
 		await this.addUsersButton.click();
 	}

apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts

@@ -52,16 +52,14 @@ export class CreateNewChannelModal extends CreateNewModal {
 		return this.root.getByRole('button', { name: 'Advanced settings', exact: true });
 	}
 
-	// TODO: improve locator
 	get autocompleteUser(): Locator {
-		return this.root.locator('//*[@id="modal-root"]//*[contains(@class, "rcx-box--full") and contains(text(), "Add Members")]/..//input');
+		return this.root.getByRole('textbox', { name: 'Add people' });
 	}
 
 	async inviteUserToChannel(username: string) {
 		await this.autocompleteUser.click();
-		await this.autocompleteUser.type(username);
-		await this.root.locator('[data-qa-type="autocomplete-user-option"]', { hasText: username }).waitFor();
-		await this.root.locator('[data-qa-type="autocomplete-user-option"]', { hasText: username }).click();
+		await this.autocompleteUser.fill(username);
+		await this.listbox.selectOption(username);
 	}
 }
 
@@ -75,14 +73,13 @@ export class CreateNewDMModal extends CreateNewModal {
 	}
 
 	get autocompleteUser(): Locator {
-		return this.root.locator('//*[@id="modal-root"]//*[contains(@class, "rcx-box--full")]/..//input');
+		return this.root.getByRole('listbox').getByRole('textbox');
 	}
 
 	async inviteUserToDM(username: string) {
 		await this.autocompleteUser.click();
-		await this.autocompleteUser.type(username);
-		await this.root.locator('[data-qa-type="autocomplete-user-option"]', { hasText: username }).waitFor();
-		await this.root.locator('[data-qa-type="autocomplete-user-option"]', { hasText: username }).click();
+		await this.autocompleteUser.fill(username);
+		await this.dmListbox.selectOption(username);
 	}
 }
 

apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts

@@ -16,11 +16,11 @@ export class OmnichannelTransferChatModal extends Modal {
 	}
 
 	get inputForwardDepartment(): Locator {
-		return this.root.locator('[data-qa-id="forward-to-department"] input');
+		return this.root.getByLabel('Forward to department').getByRole('textbox');
 	}
 
 	get inputForwardUser(): Locator {
-		return this.root.locator('[data-qa="autocomplete-agent"] input');
+		return this.root.getByLabel('Forward to user').getByRole('textbox');
 	}
 
 	get btnForward(): Locator {

apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts

@@ -19,7 +19,7 @@ export class OmnichannelAgents {
 	}
 
 	get inputUsername(): Locator {
-		return this.page.locator('[data-qa-id="UserAutoComplete"]');
+		return this.page.getByRole('textbox', { name: 'Username' });
 	}
 
 	get inputSearch(): Locator {

apps/meteor/tests/e2e/page-objects/omnichannel-contact-center-chats.ts

@@ -54,22 +54,10 @@ export class OmnichannelChats extends OmnichannelAdministration {
 		return this.contactCenterChatsTable.getByRole('link', { name: contactName });
 	}
 
-	get inputServedBy(): Locator {
-		return this.page.locator('[data-qa="autocomplete-agent"] input');
-	}
-
 	get inputStatus(): Locator {
 		return this.page.locator('[data-qa="current-chats-status"]');
 	}
 
-	get inputDepartment(): Locator {
-		return this.page.locator('[data-qa="autocomplete-department"] input');
-	}
-
-	get inputDepartmentValue(): Locator {
-		return this.page.locator('[data-qa="autocomplete-department"] span');
-	}
-
 	get inputTags(): Locator {
 		return this.page.locator('[data-qa="current-chats-tags"] [role="listbox"]');
 	}
@@ -78,12 +66,6 @@ export class OmnichannelChats extends OmnichannelAdministration {
 		return this.page.locator('[data-qa-id="current-chats-modal-remove-all-closed"]');
 	}
 
-	async selectServedBy(option: string) {
-		await this.inputServedBy.click();
-		await this.inputServedBy.fill(option);
-		await this.page.locator(`[role='option'][value='${option}']`).click();
-	}
-
 	async addTag(option: string) {
 		await this.inputTags.click();
 		await this.page.locator(`[role='option'][value='${option}']`).click();
@@ -94,12 +76,6 @@ export class OmnichannelChats extends OmnichannelAdministration {
 		await this.page.locator(`role=option[name='${option}']`).click();
 	}
 
-	async selectDepartment(option: string) {
-		await this.inputDepartment.click();
-		await this.inputDepartment.fill(option);
-		await this.page.locator(`role=option[name='${option}']`).click();
-	}
-
 	async selectStatus(option: string) {
 		await this.inputStatus.click();
 		await this.page.locator(`[role='option'][data-key='${option}']`).click();

apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts

@@ -126,8 +126,7 @@ export class OmnichannelDepartments {
 	}
 
 	get inputUnit(): Locator {
-		// TODO: Improve PaginatedSelectFiltered to allow for more accessible locators
-		return this.page.locator('[data-qa="autocomplete-unit"] input');
+		return this.page.getByLabel('Unit').getByRole('textbox', { name: 'Select an option' });
 	}
 
 	btnTag(tagName: string) {

packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx

@@ -37,7 +37,6 @@ const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps)
 			onChange={onChange}
 			filter={filter}
 			setFilter={setFilter}
-			data-qa-id='UserAutoComplete'
 			renderSelected={({ selected: { value, label } }) => (
 				<Chip height='x20' value={value} mie={4}>
 					<UserAvatar size='x20' username={value} />