test: Replace `data-qa` by accessible locators #36757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

kodiakhq merged 16 commits into develop from test/replace-data-qa

Dec 29, 2025

apps/meteor/client/components/UserCard/UserCard.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ const UserCard = ({ @@
     	const isLayoutEmbedded = useEmbeddedLayout();
     	return (
-    		<UserCardDialog data-qa='UserCard' {...props}>
+    		<UserCardDialog title={t('User_card')} {...props}>
     			<div>
     				{username && <UserAvatar username={username} etag={etag} size='x124' />}
     				<Box flexGrow={0} display='flex' mbs={12} alignItems='center' justifyContent='center'>
@@ Expand Down @@

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     					size='x124'
     					url={url}
     					key={url}
-    					data-qa-id='UserAvatarEditor'
+    					alt={t('__username__profile_picture', { username: currentUsername || 'user' })}
     					username={currentUsername || ''}
     					etag={etag}
     					style={{
@@ Expand All @@
     							title={t('Add_URL')}
     							mi={4}
     							onClick={handleAddUrl}
-    							data-qa-id='UserAvatarEditorSetAvatarLink'
     						/>
     						<UserAvatarSuggestions disabled={disabled} onSelectOne={handleSelectSuggestion} />
     					</Box>
     					<Label htmlFor={imageUrlField} mis={4}>
     						{t('Use_url_for_avatar')}
     					</Label>
     					<TextInput
-    						data-qa-id='UserAvatarEditorLink'
     						id={imageUrlField}
     						flexGrow={0}
     						placeholder={t('Use_url_for_avatar')}
@@ Expand Down @@

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     	return (
     		<Modal
-    			data-qa='create-channel-modal'
     			aria-labelledby={`${createChannelFormId}-title`}
     			wrapperFunction={(props: ComponentProps<typeof Box>) => (
     				<Box is='form' id={createChannelFormId} onSubmit={handleSubmit(handleCreateChannel)} {...props} />
@@ Expand All @@
     						<FieldRow>
     							<TextInput
     								id={nameId}
-    								data-qa-type='channel-name-input'
     								{...register('name', {
     									required: t('Required_field', { field: t('Name') }),
     									validate: (value) => validateChannelName(value),
@@ Expand All @@
     					<Field>
     						<FieldLabel htmlFor={topicId}>{t('Topic')}</FieldLabel>
     						<FieldRow>
-    							<TextInput id={topicId} aria-describedby={`${topicId}-hint`} {...register('topic')} data-qa-type='channel-topic-input' />
+    							<TextInput id={topicId} aria-describedby={`${topicId}-hint`} {...register('topic')} />
     						</FieldRow>
     						<FieldHint id={`${topicId}-hint`}>{t('Displayed_next_to_name')}</FieldHint>
     					</Field>
@@ Expand Down Expand Up @@
     			<ModalFooter>
     				<ModalFooterControllers>
     					<Button onClick={onClose}>{t('Cancel')}</Button>
-    					<Button type='submit' primary data-qa-type='create-channel-confirm-button'>
+    					<Button type='submit' primary>
     						{t('Create')}
     					</Button>
     				</ModalFooterControllers>
@@ Expand Down @@

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     	return (
     		<Modal
     			aria-labelledby={`${createDMFormId}-title`}
-    			data-qa='create-direct-modal'
     			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
     		>
     			<ModalHeader>
@@ Expand Down @@

apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -125,7 +125,6 @@ const SidebarItemTemplateWithData = ({ @@
     		<SidebarItemTemplate
     			is='a'
     			id={id}
-    			data-qa='sidebar-item'
     			data-unread={highlighted}
     			unread={highlighted}
     			selected={selected}
@@ Expand Down @@

apps/meteor/client/sidebar/RoomList/SidebarItemWithData.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     	return (
     		<SidebarItem
     			id={id}
-    			data-qa='sidebar-item'
     			data-unread={highlighted}
     			unread={highlighted}
     			href={href}
@@ Expand Down @@

apps/meteor/client/views/account/profile/AccountProfilePage.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -139,14 +139,7 @@ const AccountProfilePage = (): ReactElement => { @@
     					<Button disabled={!isDirty} onClick={() => reset(getProfileInitialValues(user))}>
     						{t('Cancel')}
     					</Button>
-    					<Button
-    						form={profileFormId}
-    						data-qa='AccountProfilePageSaveButton'
-    						primary
-    						disabled={!isDirty || loggingOut}
-    						loading={isSubmitting}
-    						type='submit'
-    					>
+    					<Button form={profileFormId} primary disabled={!isDirty || loggingOut} loading={isSubmitting} type='submit'>
     						{t('Save_changes')}
     					</Button>
     				</ButtonGroup>
@@ Expand Down @@

apps/meteor/client/views/account/security/ChangePassphrase.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -196,13 +196,7 @@ export const ChangePassphrase = (): JSX.Element => { @@
     						</Field>
     					)}
     				</FieldGroup>
-    				<Button
-    					primary
-    					disabled={!(keysExist && valid && isValid)}
-    					onClick={handleSubmit(handleSave)}
-    					mbs={12}
-    					data-qa-type='e2e-encryption-save-password-button'
-    				>
+    				<Button primary disabled={!(keysExist && valid && isValid)} onClick={handleSubmit(handleSave)} mbs={12}>
     					{t('Save_changes')}
     				</Button>
     			</Box>
@@ Expand Down @@

apps/meteor/client/views/account/security/ResetPassphrase.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,9 +14,7 @@ export const ResetPassphrase = (): JSX.Element => { @@
     			<Box is='p' fontScale='p1' mbe={12}>
     				{t('Reset_E2EE_password_description')}
     			</Box>
-    			<Button onClick={() => resetE2EPassword.mutate()} data-qa-type='e2e-encryption-reset-key-button'>
-    				{t('Reset_E2EE_password')}
-    			</Button>
+    			<Button onClick={() => resetE2EPassword.mutate()}>{t('Reset_E2EE_password')}</Button>
     		</>
     	);
     };

apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     							<StatesIcon name='circle-exclamation' />
     							<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
     							<StatesSubtitle>{isError(error) && error?.message}</StatesSubtitle>
-    							<StatesActions data-qa='EngagementDashboardCardErrorBoundary'>
+    							<StatesActions>
     								<StatesAction onClick={(): void => resetErrorBoundary()}>{t('Retry')}</StatesAction>
     							</StatesActions>
     						</States>
@@ Expand Down @@

apps/meteor/client/views/admin/permissions/PermissionsPage.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     				<Margins blockEnd={16}>
     					<Tabs>
     						<Tabs.Item
-    							data-qa='PermissionTable-Permissions'
     							selected={type === 'permissions'}
     							onClick={canViewPermission ? handlePermissionsTab : undefined}
     							disabled={!canViewPermission}
     						>
     							{t('Permissions')}
     						</Tabs.Item>
-    						<Tabs.Item
-    							data-qa='PermissionTable-Settings'
-    							selected={type === 'settings'}
-    							onClick={handleSettingsTab}
-    							disabled={!canViewSettingPermission}
-    						>
+    						<Tabs.Item selected={type === 'settings'} onClick={handleSettingsTab} disabled={!canViewSettingPermission}>
     							{t('Settings')}
     						</Tabs.Item>
     					</Tabs>
@@ Expand Down @@

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     		setFilter(value);
     	});
-    	return (
-    		<TextInput
-    			data-qa='PermissionTable-PermissionsTableFilter'
-    			value={filter}
-    			onChange={handleFilter}
-    			placeholder={t('Search')}
-    			flexGrow={0}
-    		/>
-    	);
+    	return <TextInput value={filter} onChange={handleFilter} placeholder={t('Search')} flexGrow={0} />;
     };
     export default PermissionsTableFilter;

...ent/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ exports[`renders Default without crashing 1`] = ` @@
         >
           <input
             class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box rcx-css-1ltvj5u"
-            data-qa="PermissionTable-PermissionsTableFilter"
             placeholder="Search"
             size="1"
             type="text"
@@ Expand Down Expand Up / @@ -1169,7 +1168,6 @@ exports[`renders Empty without crashing 1`] = ` @@
         >
           <input
             class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box rcx-css-1ltvj5u"
-            data-qa="PermissionTable-PermissionsTableFilter"
             placeholder="Search"
             size="1"
             type="text"
@@ Expand Down @@

apps/meteor/client/views/home/CustomHomePage.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ import CustomContentCard from './cards/CustomContentCard'; @@
     const CustomHomePage = (): ReactElement => {
     	return (
-    		<Page data-qa='page-home' data-qa-type='custom' color='default' background='tint'>
+    		<Page color='default' background='tint'>
     			<HomePageHeader />
     			<PageScrollableContentWithShadow>
     				<CustomContentCard />
@@ Expand Down @@

apps/meteor/client/views/home/DefaultHomePage.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,10 +24,10 @@ const DefaultHomePage = (): ReactElement => { @@
     	const isCustomContentVisible = useSetting('Layout_Home_Custom_Block_Visible', false);
     	return (
-    		<Page color='default' data-qa='page-home' data-qa-type='default' background='tint'>
+    		<Page color='default' background='tint'>
     			<HomePageHeader />
     			<PageScrollableContent>
-    				<Box is='h2' fontScale='h1' mb={20} data-qa-id='homepage-welcome-text'>
+    				<Box is='h2' fontScale='h1' mb={20}>
     					{t('Welcome_to_workspace', { Site_Name: workspaceName || 'Rocket.Chat' })}
     				</Box>
     				<Box is='h3' fontScale='h3' mb={16}>
@@ Expand Down @@

apps/meteor/client/views/home/HomePageHeader.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ const HomepageHeader = (): ReactElement => { @@
     	const settingsRoute = useRoute('admin-settings');
     	return (
-    		<PageHeader title={title} data-qa-id='home-header'>
+    		<PageHeader title={title}>
     			{canEditLayout && (
     				<Button icon='pencil' onClick={() => settingsRoute.push({ group: 'Layout' })}>
     					{t('Customize')}
@@ Expand Down @@

apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,7 @@ const AppInstallationModal = ({ @@
     			<Modal>
     				<ModalHeader>
     					<ModalHeaderText>
-    						<ModalTitle data-qa-id='confirm-app-upload-modal-title'>{getTitle()}</ModalTitle>
+    						<ModalTitle>{getTitle()}</ModalTitle>
     					</ModalHeaderText>
     					<ModalClose onClick={handleClose} />
     				</ModalHeader>
@@ Expand Down @@

apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItemWithData.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     	return (
     		<SidebarItem
     			id={id}
-    			data-qa='sidebar-item'
     			data-unread={highlighted}
     			unread={highlighted}
     			href={href}
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up @@
     			flexGrow={0}
     			setFilter={setUnitsFilter as (value: string | number | undefined) => void}
     			options={unitItems}
-    			data-qa='autocomplete-multiple-unit'
     			onChange={onChange}
     			endReached={() => fetchNextPage()}
     		/>
@@ Expand Down @@

apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     							<Field>
     								<FieldLabel htmlFor={nameField}>{t('Name')}</FieldLabel>
     								<FieldRow>
-    									<Controller
-    										name='name'
-    										control={control}
-    										render={({ field }) => <TextInput id={nameField} data-qa-id='agent-edit-name' {...field} readOnly />}
-    									/>
+    									<Controller name='name' control={control} render={({ field }) => <TextInput id={nameField} {...field} readOnly />} />
     								</FieldRow>
     							</Field>
     							<Field>
@@ Expand Down @@

apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,11 +13,11 @@ import { useQuery } from '@tanstack/react-query'; @@
     import type { HTMLAttributes } from 'react';
     import { useTranslation } from 'react-i18next';
+    import AgentInfoAction from './AgentInfoAction';
+    import { useRemoveAgent } from './hooks/useRemoveAgent';
     import { UserInfoAvatar, UserInfoUsername } from '../../../components/UserInfo';
     import { UserStatus } from '../../../components/UserStatus';
     import { MaxChatsPerAgentDisplay } from '../additionalForms';
-    import AgentInfoAction from './AgentInfoAction';
-    import { useRemoveAgent } from './hooks/useRemoveAgent';
     type AgentInfoProps = {
     	uid: string;
@@ Expand Down Expand Up / @@ -54,7 +54,7 @@ const AgentInfo = ({ uid }: AgentInfoProps) => { @@
     			<ContextualbarScrollableContent>
     				{username && (
     					<Box alignSelf='center'>
-    						<UserInfoAvatar data-qa='AgentUserInfoAvatar' username={username} />
+    						<UserInfoAvatar username={username} />
     					</Box>
     				)}
     				<ButtonGroup align='center'>
@@ Expand All / @@ -69,11 +69,11 @@ const AgentInfo = ({ uid }: AgentInfoProps) => { @@
     				</ButtonGroup>
     				<Margins block={4}>
     					<Box mb={2}>
-    						<UserInfoUsername data-qa='AgentInfoUserInfoUserName' username={username} status={<UserStatus status={userStatus} />} />
+    						<UserInfoUsername username={username} status={<UserStatus status={userStatus} />} />
     					</Box>
     					{statusLivechat && (
     						<>
-    							<InfoPanelLabel data-qa='AgentInfoUserInfoLabel'>{t('Livechat_status')}</InfoPanelLabel>
+    							<InfoPanelLabel>{t('Livechat_status')}</InfoPanelLabel>
     							<InfoPanelText>{statusLivechat === 'available' ? t('Available') : t('Not_Available')}</InfoPanelText>
     						</>
     					)}
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,6 @@ const AutoCompleteMultipleAgent = ({ @@
     			filter={agentsFilter}
     			setFilter={setAgentsFilter as (value: string | number | undefined) => void}
     			options={agentsItems}
-    			data-qa='autocomplete-multiple-agent'
     			endReached={() => fetchNextPage()}
     		/>
     	);
@@ Expand Down @@

apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -104,7 +104,7 @@ const CustomFieldsTable = () => { @@
     			{isSuccess && data.customFields.length > 0 && (
     				<>
-    					<GenericTable data-qa='GenericTableCustomFieldsInfoBody' aria-busy={isLoading} aria-live='assertive'>
+    					<GenericTable aria-busy={isLoading} aria-live='assertive'>
     						<GenericTableHeader>{headers}</GenericTableHeader>
     						<GenericTableBody>
     							{data.customFields.map(({ label, _id, scope, visibility }) => (
@@ Expand Down @@

apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     			<ContextualbarFooter>
     				<ButtonGroup stretch>
     					<Button onClick={onClose}>{t('Cancel')}</Button>
-    					<Button form={formId} data-qa-id='BtnSaveEditCustomFieldsPage' primary type='submit' disabled={!isDirty}>
+    					<Button form={formId} primary type='submit' disabled={!isDirty}>
     						{t('Save')}
     					</Button>
     				</ButtonGroup>
@@ Expand Down @@

...teor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     	return (
     		<>
-    			<AddAgent aria-labelledby={ariaLabelledBy} agentList={agentList} data-qa='DepartmentSelect-AgentsTable' onAdd={append} />
+    			<AddAgent aria-labelledby={ariaLabelledBy} agentList={agentList} onAdd={append} />
     			<GenericTable>
     				<GenericTableHeader>
@@ Expand Down @@

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTable.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -63,7 +63,7 @@ const ChatsTable = () => { @@
     			</GenericTableHeaderCell>
     			<GenericTableHeaderCell key='lm'>{t('Last_Message')}</GenericTableHeaderCell>
     			<GenericTableHeaderCell key='status'>{t('Status')}</GenericTableHeaderCell>
-    			{canRemoveClosedChats && <GenericTableHeaderCell key='remove' w='x60' data-qa='current-chats-header-remove' />}
+    			{canRemoveClosedChats && <GenericTableHeaderCell key='remove' w='x60' />}
     		</>
     	);
@@ Expand Down @@

apps/meteor/client/views/omnichannel/reports/components/ReportCardErrorState.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     		<States width='100%' height='100%'>
     			<StatesIcon name='circle-exclamation' />
     			<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
-    			<StatesActions data-qa='CardErrorState'>
+    			<StatesActions>
     				<StatesAction onClick={onRetry}>{t('Retry')}</StatesAction>
     			</StatesActions>
     		</States>
@@ Expand Down @@

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ const RoomMembersActions = ({ @@
     	if (!menuOptions) {
     		return null;
     	}
-    	return <GenericMenu detached title={t('More')} key='menu' data-qa-id='UserUserInfo-menu' sections={menuOptions} placement='bottom-end' />;
+    	return <GenericMenu detached title={t('More')} key='menu' sections={menuOptions} placement='bottom-end' />;
     };
     export default RoomMembersActions;

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     				button={<IconButton icon='kebab' secondary />}
     				title={t('More')}
     				key='menu'
-    				data-qa-id='UserUserInfo-menu'
     				sections={menuOptions}
     				placement='bottom-end'
     				small={false}
-    				data-qa='UserUserInfo-menu'
     			/>
     		);
     	}, [menuOptions, t]);
@@ Expand Down @@

apps/meteor/tests/e2e/admin-room.spec.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ test.describe.serial('admin-rooms', () => { @@
     	});
     	test('should display the Rooms Table', async ({ page }) => {
-    		await expect(page.locator('[data-qa-type="PageHeader-title"]')).toContainText('Rooms');
+    		await expect(page.getByRole('main').getByRole('heading', { level: 1, name: 'Rooms', exact: true })).toBeVisible();
+    		await expect(page.getByRole('main').getByRole('table')).toBeVisible();
     	});
     	test('should filter room by name', async ({ page }) => {
@@ Expand Down @@

apps/meteor/tests/e2e/federation/page-objects/account-profile.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,6 @@ export class FederationAccountProfile { @@
     	}
     	get btnSubmit(): Locator {
-    		return this.page.locator('[data-qa="AccountProfilePageSaveButton"]');
+    		return this.page.getByRole('button', { name: 'Save changes', exact: true });
     	}
     }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: Replace `data-qa` by accessible locators #36757

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

test: Replace data-qa by accessible locators #36757

Uh oh!

test: Replace data-qa by accessible locators #36757

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

test: Replace `data-qa` by accessible locators #36757

test: Replace `data-qa` by accessible locators #36757