src: Remove more data-testids

As using `data-testid`s in tests is an anti-pattern, this removes more of them and replaces them with appropriate locators in the tests.

playwright/test.spec.ts

@@ -22,14 +22,16 @@ test.describe.serial('test', () => {
     await frame.getByTestId('blueprints-create-button').click();
 
     frame.getByRole('heading', { name: 'Image output' });
-    await frame.getByTestId('checkbox-guest-image').click();
+    await frame
+      .getByRole('checkbox', { name: /Virtualization guest image/i })
+      .click();
     await frame.getByRole('button', { name: 'Next', exact: true }).click();
 
     if (isHosted()) {
       frame.getByRole('heading', {
         name: 'Register systems using this image',
       });
-      await page.getByTestId('register-later-radio').click();
+      await page.getByRole('radio', { name: /Register later/i }).click();
       await frame.getByRole('button', { name: 'Next', exact: true }).click();
     }
 
@@ -164,7 +166,7 @@ test.describe.serial('test', () => {
     // the clickable blueprint cards are a bit awkward, so use the
     // button's id instead
     await frame.locator(`button[id="${blueprintName}"]`).click();
-    await frame.getByTestId('blueprint-action-menu-toggle').click();
+    await frame.getByRole('button', { name: /blueprint menu toggle/i }).click();
     await frame.getByRole('menuitem', { name: 'Delete blueprint' }).click();
     await frame.getByRole('button', { name: 'Delete' }).click();
   });

src/Components/Blueprints/BlueprintActionsMenu.tsx

@@ -60,7 +60,6 @@ export const BlueprintActionsMenu: React.FunctionComponent<
           onClick={() => setShowBlueprintActionsMenu(!showBlueprintActionsMenu)}
           variant="plain"
           aria-label="blueprint menu toggle"
-          data-testid="blueprint-action-menu-toggle"
         >
           <EllipsisVIcon aria-hidden="true" />
         </MenuToggle>

src/Components/Blueprints/ImportBlueprintModal.tsx

@@ -327,7 +327,6 @@ export const ImportBlueprintModal: React.FunctionComponent<
               state: { blueprint: importedBlueprint },
             })
           }
-          data-testid="import-blueprint-finish"
         >
           Review and finish
         </Button>

src/Components/CreateImageWizard/steps/FileSystem/components/FileSystemTable.tsx

@@ -194,7 +194,6 @@ const MountpointPrefix = ({ partition }: MountpointPrefixPropTypes) => {
       onClick={onToggleClick}
       isExpanded={isOpen}
       isDisabled={prefix === '/'}
-      data-testid="prefix-select"
       isFullWidth
     >
       {prefix}
@@ -332,12 +331,7 @@ const SizeUnit = ({ partition }: SizeUnitPropTypes) => {
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      ref={toggleRef}
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      data-testid="unit-select"
-    >
       {partition.unit}
     </MenuToggle>
   );
@@ -505,7 +499,6 @@ const FileSystemTable = () => {
       className={isDragging ? styles.modifiers.dragOver : ''}
       aria-label="File system table"
       variant="compact"
-      data-testid="fsc-table"
     >
       <Thead>
         <Tr>
@@ -526,7 +519,6 @@ const FileSystemTable = () => {
         onDrop={onDragOver}
         onDragLeave={onDragLeave}
         ref={bodyRef}
-        data-testid="file-system-configuration-tbody"
       >
         {partitions &&
           partitions.map((partition) => (

src/Components/CreateImageWizard/steps/ImageOutput/components/ReleaseLifecycle.tsx

@@ -119,7 +119,6 @@ export const MajorReleasesLifecyclesChart = () => {
     <Panel>
       <PanelMain maxHeight="10rem">
         <Bar
-          data-testid="release-lifecycle-chart"
           options={chartMajorVersionCfg.options}
           data={chartMajorVersionCfg.data}
         />

src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx

@@ -37,7 +37,6 @@ type TargetEnvironmentCardProps = {
   imageAlt: string;
   isClicked: boolean;
   isDisabled?: boolean;
-  testId: string;
   handleOnClick: () => void;
   onMouseEnter?: MouseEventHandler<HTMLElement>;
 };
@@ -50,11 +49,9 @@ const TargetEnvironmentCard = ({
   onMouseEnter,
   isClicked,
   isDisabled = false,
-  testId,
 }: TargetEnvironmentCardProps) => {
   return (
     <Card
-      data-testid={testId}
       style={{ textAlign: 'center' } as React.CSSProperties}
       onMouseUp={onMouseEnter}
       isClicked={isClicked}
@@ -147,7 +144,6 @@ const TargetEnvironment = () => {
           <Gallery hasGutter>
             {supportedEnvironments?.includes('aws') && (
               <TargetEnvironmentCard
-                testId="upload-aws"
                 title="Amazon Web Services"
                 imageSrc={'/apps/frontend-assets/partners-icons/aws.svg'}
                 imageAlt="Amazon Web Services logo"
@@ -158,7 +154,6 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('gcp') && (
               <TargetEnvironmentCard
-                testId="upload-google"
                 title="Google Cloud Platform"
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
@@ -171,7 +166,6 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('azure') && (
               <TargetEnvironmentCard
-                testId="upload-azure"
                 title="Microsoft Azure"
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
@@ -184,7 +178,6 @@ const TargetEnvironment = () => {
             )}
             {supportedEnvironments?.includes('oci') && (
               <TargetEnvironmentCard
-                testId="upload-oci"
                 title="Oracle Cloud Infrastructure"
                 imageSrc={
                   '/apps/frontend-assets/partners-icons/oracle-short.svg'
@@ -208,7 +201,6 @@ const TargetEnvironment = () => {
               name="vsphere-checkbox-ova"
               aria-label="VMware vSphere checkbox OVA"
               id="vsphere-checkbox-ova"
-              data-testid="checkbox-vsphere-ova"
               label={
                 <>
                   VMware vSphere - Open virtualization format (.ova)
@@ -249,7 +241,6 @@ const TargetEnvironment = () => {
               name="vsphere-checkbox-vmdk"
               aria-label="VMware vSphere checkbox VMDK"
               id="vsphere-checkbox-vmdk"
-              data-testid="checkbox-vsphere-vmdk"
               label={
                 <>
                   VMware vSphere - Virtual disk (.vmdk)
@@ -296,7 +287,6 @@ const TargetEnvironment = () => {
             aria-label="Virtualization guest image checkbox"
             id="checkbox-guest-image"
             name="Virtualization guest image"
-            data-testid="checkbox-guest-image"
           />
         )}
         {supportedEnvironments?.includes('image-installer') && (
@@ -309,7 +299,6 @@ const TargetEnvironment = () => {
             aria-label="Bare metal installer checkbox"
             id="checkbox-image-installer"
             name="Bare metal installer"
-            data-testid="checkbox-image-installer"
           />
         )}
         {supportedEnvironments?.includes('wsl') && (
@@ -369,7 +358,6 @@ const TargetEnvironment = () => {
             aria-label="windows subsystem for linux checkbox"
             id="checkbox-wsl"
             name="WSL"
-            data-testid="checkbox-wsl"
           />
         )}
       </FormGroup>

src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx

@@ -120,7 +120,6 @@ const Registration = () => {
     <FormGroup label="Registration method">
       <Radio
         label="Automatically register and enable advanced capabilities"
-        data-testid="automatically-register-radio"
         isChecked={
           registrationType === 'register-now' ||
           registrationType === 'register-now-insights' ||
@@ -200,7 +199,6 @@ const Registration = () => {
       />
       <Radio
         label="Register later"
-        data-testid="register-later-radio"
         isChecked={registrationType === 'register-later'}
         onChange={() => {
           dispatch(changeRegistrationType('register-later'));

src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx

@@ -27,7 +27,6 @@ const Empty = ({ hasFilterValue, refetch }: EmptyProps) => {
           : 'No custom repositories'
       }
       variant={EmptyStateVariant.lg}
-      data-testid="empty-state"
     >
       <EmptyStateBody>
         {hasFilterValue

src/Components/CreateImageWizard/steps/Snapshot/components/TemplatesEmpty.tsx

@@ -35,7 +35,6 @@ const TemplatesEmpty = ({ refetch }: TemplatesEmptyProps) => {
       headingLevel="h4"
       titleText={'No content templates'}
       variant={EmptyStateVariant.lg}
-      data-testid="empty-state"
     >
       <EmptyStateBody>
         {`Content templates can be added in the "Templates" area of the

src/Components/CreateImageWizard/steps/TargetEnvironment/Azure/AzureHyperVSelect.tsx

@@ -47,7 +47,6 @@ export const AzureHyperVSelect = () => {
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
-      data-testid="azure-hyper-v-generation-select"
       onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
     >

src/Components/CreateImageWizard/steps/TargetEnvironment/Gcp/index.tsx

@@ -66,7 +66,6 @@ const Gcp = () => {
         />
         <Radio
           id="share-with-insights"
-          data-testid="share-with-insights"
           label="Share image with Red Hat Insights only"
           name="radio-2"
           description={
@@ -88,7 +87,6 @@ const Gcp = () => {
           <FormGroup label="Account type" isRequired>
             <Radio
               id="google-account"
-              data-testid="google-account"
               label="Google account"
               name="radio-3"
               isChecked={accountType === 'user'}
@@ -98,7 +96,6 @@ const Gcp = () => {
             />
             <Radio
               id="service-account"
-              data-testid="service-account"
               label="Service account"
               name="radio-4"
               isChecked={accountType === 'serviceAccount'}
@@ -108,7 +105,6 @@ const Gcp = () => {
             />
             <Radio
               id="google-group"
-              data-testid="google-group"
               label="Google group"
               name="radio-5"
               isChecked={accountType === 'group'}
@@ -118,7 +114,6 @@ const Gcp = () => {
             />
             <Radio
               id="google-domain"
-              data-testid="google-domain"
               label="Google Workspace domain or Cloud Identity domain"
               name="radio-6"
               isChecked={accountType === 'domain'}

src/Components/ImagesTable/EmptyState.tsx

@@ -55,7 +55,6 @@ const EmptyImagesTable = () => {
     <Bullseye>
       <EmptyState
         variant={EmptyStateVariant.lg}
-        data-testid="empty-state"
         titleText="No images"
         headingLevel="h4"
         icon={SearchIcon}

src/Components/sharedComponents/ImageBuilderHeader.tsx

@@ -115,7 +115,6 @@ export const ImageBuilderHeader = ({
                   </Button>
                   {importExportFlag && (
                     <Button
-                      data-testid="import-blueprint-button"
                       variant="secondary"
                       onClick={() => setShowImportModal(true)}
                     >

src/test/Components/Blueprints/Blueprints.test.tsx

@@ -356,9 +356,9 @@ describe('Blueprints', () => {
       renderCustomRoutesWithReduxRouter();
 
       await selectBlueprintById(blueprintIdWithComposes);
-      const toggleButton = await screen.findByTestId(
+      const toggleButton = await screen.findByRole('button', {
-        'blueprint-action-menu-toggle'
+        name: /blueprint menu toggle/i,
-      );
+      });
       await waitFor(() => user.click(toggleButton));
 
       const downloadButton = screen.getByRole('menuitem', {

src/test/Components/Blueprints/ImportBlueprintModal.test.tsx

@@ -293,15 +293,15 @@ describe('Import modal', () => {
 
   test('renders import component', async () => {
     renderCustomRoutesWithReduxRouter();
-    const importButton = await screen.findByTestId('import-blueprint-button');
+    const importButton = await screen.findByRole('button', { name: /Import/i });
     await waitFor(() => expect(importButton).toBeInTheDocument());
   });
 
   const setUp = async () => {
     renderCustomRoutesWithReduxRouter();
-    const importBlueprintBtn = await screen.findByTestId(
+    const importBlueprintBtn = await screen.findByRole('button', {
-      'import-blueprint-button'
+      name: /Import/i,
-    );
+    });
     await waitFor(() => user.click(importBlueprintBtn));
     const reviewButton = await screen.findByRole('button', {
       name: /review and finish/i,
@@ -312,7 +312,9 @@ describe('Import modal', () => {
   test('should show alert on invalid blueprint', async () => {
     await setUp();
     await uploadFile(`blueprints.json`, INVALID_JSON);
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     expect(reviewButton).toBeDisabled();
     const helperText = await screen.findByText(
       /not compatible with the blueprints format\./i
@@ -323,7 +325,9 @@ describe('Import modal', () => {
   test('should show alert on invalid blueprint incorrect architecture', async () => {
     await setUp();
     await uploadFile(`blueprints.json`, INVALID_ARCHITECTURE_JSON);
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     expect(reviewButton).toBeDisabled();
     const helperText = await screen.findByText(
       /not compatible with the blueprints format\./i
@@ -334,7 +338,9 @@ describe('Import modal', () => {
   test('should enable button and ignore subscription in blueprint file', async () => {
     await setUp();
     await uploadFile(`blueprints.json`, IGNORE_SUBSCRIPTION_BLUEPRINT);
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     await waitFor(() => expect(reviewButton).toBeEnabled());
     user.click(reviewButton);
 
@@ -348,7 +354,9 @@ describe('Import modal', () => {
   test('should enable button on correct blueprint and go to wizard', async () => {
     await setUp();
     await uploadFile(`blueprints.json`, BLUEPRINT_JSON);
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     await waitFor(() => expect(reviewButton).toBeEnabled());
     user.click(reviewButton);
 
@@ -369,7 +377,9 @@ describe('Import modal', () => {
   test('should enable button on toml blueprint and go to wizard', async () => {
     await setUp();
     await uploadFile(`blueprints.toml`, ONPREM_BLUEPRINT_TOML);
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     await waitFor(() => expect(reviewButton).toBeEnabled());
     user.click(reviewButton);
 
@@ -381,7 +391,10 @@ describe('Import modal', () => {
 
     // Image output
     await waitFor(
-      async () => await user.click(await screen.findByTestId('upload-aws'))
+      async () =>
+        await user.click(
+          await screen.findByRole('button', { name: /Amazon Web Services/i })
+        )
     );
     await clickNext();
 
@@ -404,9 +417,9 @@ describe('Import modal', () => {
     await screen.findByText(
       'Automatically register and enable advanced capabilities'
     );
-    //const registrationCheckbox = await screen.findByTestId(
+    //const registrationCheckbox = await screen.findByRole('radio', {
-    //  'automatically-register-radio'
+    //  name: /Automatically register and enable advanced capabilities/i,
-    //);
+    //});
     //expect(registrationCheckbox).toHaveFocus();
     await screen.findByPlaceholderText('Select activation key');
 
@@ -514,7 +527,9 @@ describe('Import modal', () => {
       `blueprints.toml`,
       ONPREM_BLUEPRINT_TOML_WITH_INVALID_VALUES
     );
-    const reviewButton = screen.getByTestId('import-blueprint-finish');
+    const reviewButton = screen.getByRole('button', {
+      name: /Review and finish/i,
+    });
     await waitFor(() => expect(reviewButton).toBeEnabled());
     user.click(reviewButton);
 

src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx

@@ -13,10 +13,20 @@ const getSourceDropdown = async () => {
 const selectAllEnvironments = async () => {
   const user = userEvent.setup();
 
-  await waitFor(() => user.click(screen.getByTestId('upload-aws')));
+  await waitFor(() =>
-  await waitFor(() => user.click(screen.getByTestId('upload-google')));
+    user.click(screen.getByRole('button', { name: /Amazon Web Services/i }))
-  await waitFor(() => user.click(screen.getByTestId('upload-azure')));
+  );
-  await waitFor(() => user.click(screen.getByTestId('checkbox-guest-image')));
+  await waitFor(() =>
+    user.click(screen.getByRole('button', { name: /Google Cloud Platform/i }))
+  );
+  await waitFor(() =>
+    user.click(screen.getByRole('button', { name: /Microsoft Azure/i }))
+  );
+  await waitFor(() =>
+    user.click(
+      screen.getByRole('checkbox', { name: /Virtualization guest image/i })
+    )
+  );
 };
 
 const testTile = async (tile: HTMLElement) => {
@@ -24,7 +34,7 @@ const testTile = async (tile: HTMLElement) => {
 
   tile.focus();
   await waitFor(() => user.keyboard(' '));
-  expect(tile).toHaveClass('pf-m-clickable');
+  expect(tile).toHaveClass('pf-v6-c-card__clickable-action');
 };
 
 describe('Create Image Wizard', () => {
@@ -135,9 +145,9 @@ describe('Keyboard accessibility', () => {
     await screen.findByText(
       'Automatically register and enable advanced capabilities'
     );
-    //const registrationCheckbox = await screen.findByTestId(
+    //const registrationCheckbox = await screen.findByRole('radio', {
-    //  'automatically-register-radio'
+    //  name: /Automatically register and enable advanced capabilities/i,
-    //);
+    //});
     //expect(registrationCheckbox).toHaveFocus();
     await screen.findByPlaceholderText('Select activation key');
     await clickNext();
@@ -160,7 +170,9 @@ describe('Keyboard accessibility', () => {
 
   test('pressing Enter does not advance the wizard', async () => {
     await renderCreateMode();
-    user.click(await screen.findByTestId('upload-aws'));
+    user.click(
+      await screen.findByRole('button', { name: /Amazon Web Services/i })
+    );
     user.keyboard('{enter}');
     await screen.findByRole('heading', {
       name: /image output/i,
@@ -170,8 +182,14 @@ describe('Keyboard accessibility', () => {
   test('target environment tiles are keyboard selectable', async () => {
     await renderCreateMode();
 
-    await testTile(await screen.findByTestId('upload-aws'));
+    await testTile(
-    await testTile(await screen.findByTestId('upload-google'));
+      await screen.findByRole('button', { name: /Amazon Web Services/i })
-    await testTile(await screen.findByTestId('upload-azure'));
+    );
+    await testTile(
+      await screen.findByRole('button', { name: /Google Cloud Platform/i })
+    );
+    await testTile(
+      await screen.findByRole('button', { name: /Microsoft Azure/i })
+    );
   });
 });

src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx

@@ -36,9 +36,9 @@ const selectGuestImage = async () => {
 
 const selectImageInstaller = async () => {
   const user = userEvent.setup();
-  const imageInstallerCheckbox = await screen.findByTestId(
+  const imageInstallerCheckbox = await screen.findByRole('checkbox', {
-    'checkbox-image-installer'
+    name: /Bare metal installer/i,
-  );
+  });
   await waitFor(() => user.click(imageInstallerCheckbox));
 };
 
@@ -71,8 +71,7 @@ const customizePartition = async () => {
 };
 
 const getRow = async (row: number) => {
-  const table = await screen.findByTestId('fsc-table');
+  const rows = await screen.findAllByRole('row');
-  const rows = await within(table).findAllByRole('row');
   return rows[row];
 };
 
@@ -88,7 +87,7 @@ const changePartitionSize = async () => {
 const changePartitionUnitsToKiB = async () => {
   const user = userEvent.setup();
   const row = await getRow(1);
-  const units = await within(row).findByTestId('unit-select');
+  const units = await within(row).findByText('GiB');
   await waitFor(() => user.click(units));
   const kibOption = await screen.findByRole('option', { name: 'KiB' });
   await waitFor(() => user.click(kibOption));
@@ -97,7 +96,7 @@ const changePartitionUnitsToKiB = async () => {
 const changePartitionUnitsToMiB = async () => {
   const user = userEvent.setup();
   const row = await getRow(1);
-  const units = await within(row).findByTestId('unit-select');
+  const units = await within(row).findByText('GiB');
   await waitFor(() => user.click(units));
   const mibOption = await screen.findByRole('option', { name: 'MiB' });
   await waitFor(() => user.click(mibOption));
@@ -180,16 +179,12 @@ describe('Step File system configuration', () => {
     const mountPointAlerts = screen.getAllByRole('heading', {
       name: /danger alert: duplicate mount point/i,
     });
-    const fscTable = await screen.findByTestId(
+    const rows = await screen.findAllByRole('row');
-      'file-system-configuration-tbody'
+    rows.shift(); // remove table header
-    );
-    const rows = within(fscTable).getAllByRole('row');
     expect(rows).toHaveLength(3);
 
     //Change mountpoint of final row to /var, resolving errors
-    const mountPointOptions = await within(rows[2]).findByTestId(
+    const mountPointOptions = await within(rows[2]).findByText('/home');
-      'prefix-select'
-    );
     await waitFor(() => user.click(mountPointOptions));
     const varButton = await screen.findByRole('option', {
       name: /\/var/i,

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -174,23 +174,29 @@ describe('Step Image output', () => {
     expect(destination).toContainElement(required);
   });
 
-  test('selecting and deselecting a tile disables the next button', async () => {
+  test('selecting and deselecting a card disables the next button', async () => {
     await renderCreateMode();
     const nextButton = await getNextButton();
 
-    const awsTile = await screen.findByTestId('upload-aws');
+    const awsTile = await screen.findByRole('button', {
+      name: /Amazon Web Services/i,
+    });
     user.click(awsTile); // select
     await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(awsTile); // deselect
     await waitFor(() => expect(nextButton).toBeDisabled());
 
-    const googleTile = await screen.findByTestId('upload-google');
+    const googleTile = await screen.findByRole('button', {
+      name: /Google Cloud Platform/i,
+    });
     user.click(googleTile); // select
     await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(googleTile); // deselect
     await waitFor(() => expect(nextButton).toBeDisabled());
 
-    const azureTile = await screen.findByTestId('upload-azure');
+    const azureTile = await screen.findByRole('button', {
+      name: /Microsoft Azure/i,
+    });
     user.click(azureTile); // select
     await waitFor(() => expect(nextButton).toBeEnabled());
     user.click(azureTile); // deselect
@@ -238,15 +244,21 @@ describe('Step Image output', () => {
     await renderCreateMode();
 
     await selectRhel8();
-    await screen.findByTestId('release-lifecycle-chart');
+    await screen.findByRole('region', {
+      name: /hide information about release lifecycle/i,
+    });
 
     await selectRhel9();
-    await screen.findByTestId('release-lifecycle-chart');
+    await screen.findByRole('region', {
+      name: /hide information about release lifecycle/i,
+    });
 
     await selectRhel10();
     await waitFor(() =>
       expect(
-        screen.queryByTestId('release-lifecycle-chart')
+        screen.queryByRole('region', {
+          name: /hide information about release lifecycle/i,
+        })
       ).not.toBeInTheDocument()
     );
   });
@@ -328,12 +340,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
-    await screen.findByTestId('upload-google');
+    await screen.findByRole('button', { name: /Google Cloud Platform/i });
-    await screen.findByTestId('upload-azure');
+    await screen.findByRole('button', { name: /Microsoft Azure/i });
-    await screen.findByTestId('upload-oci');
+    await screen.findByRole('button', {
-    await screen.findByTestId('checkbox-guest-image');
+      name: /Oracle Cloud Infrastructure/i,
-    await screen.findByTestId('checkbox-image-installer');
+    });
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     await screen.findByText(/wsl - windows subsystem for linux \(\.wsl\)/i);
   });
 
@@ -361,12 +379,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).not.toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
-    await screen.findByTestId('upload-google');
+    await screen.findByRole('button', { name: /Google Cloud Platform/i });
-    await screen.findByTestId('upload-azure');
+    await screen.findByRole('button', { name: /Microsoft Azure/i });
-    await screen.findByTestId('upload-oci');
+    await screen.findByRole('button', {
-    await screen.findByTestId('checkbox-guest-image');
+      name: /Oracle Cloud Infrastructure/i,
-    await screen.findByTestId('checkbox-image-installer');
+    });
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     await screen.findByText(
       /VMware vSphere - Open virtualization format \(\.ova\)/
     );
@@ -400,12 +424,18 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
-    await screen.findByTestId('upload-google');
+    await screen.findByRole('button', { name: /Google Cloud Platform/i });
-    await screen.findByTestId('upload-azure');
+    await screen.findByRole('button', { name: /Microsoft Azure/i });
-    await screen.findByTestId('upload-oci');
+    await screen.findByRole('button', {
-    await screen.findByTestId('checkbox-guest-image');
+      name: /Oracle Cloud Infrastructure/i,
-    await screen.findByTestId('checkbox-image-installer');
+    });
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     await screen.findByText(
       /VMware vSphere - Open virtualization format \(\.ova\)/
     );
@@ -436,14 +466,24 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).not.toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
     await waitFor(() =>
-      expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: /Google Cloud Platform/i })
+      ).not.toBeInTheDocument()
     );
-    expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
+    expect(
-    expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
+      screen.queryByRole('button', { name: /Microsoft Azure/i })
-    await screen.findByTestId('checkbox-guest-image');
+    ).not.toBeInTheDocument();
-    await screen.findByTestId('checkbox-image-installer');
+    expect(
+      screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
+    ).not.toBeInTheDocument();
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     expect(
       screen.queryByText(
         /VMware vSphere - Open virtualization format \(\.ova\)/
@@ -481,14 +521,24 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).not.toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
     await waitFor(() =>
-      expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: /Google Cloud Platform/i })
+      ).not.toBeInTheDocument()
     );
-    expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
+    expect(
-    expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
+      screen.queryByRole('button', { name: /Microsoft Azure/i })
-    await screen.findByTestId('checkbox-guest-image');
+    ).not.toBeInTheDocument();
-    await screen.findByTestId('checkbox-image-installer');
+    expect(
+      screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
+    ).not.toBeInTheDocument();
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     expect(
       screen.queryByText(
         /VMware vSphere - Open virtualization format \(\.ova\)/
@@ -526,12 +576,22 @@ describe('Check that the target filtering is in accordance to mock content', ()
     expect(images_types).not.toContain('wsl');
 
     // make sure the UX conforms to the mocks
-    await screen.findByTestId('upload-aws');
+    await screen.findByRole('button', { name: /Amazon Web Services/i });
-    expect(screen.queryByTestId('upload-google')).not.toBeInTheDocument();
+    expect(
-    expect(screen.queryByTestId('upload-azure')).not.toBeInTheDocument();
+      screen.queryByRole('button', { name: /Google Cloud Platform/i })
-    expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
+    ).not.toBeInTheDocument();
-    await screen.findByTestId('checkbox-guest-image');
+    expect(
-    await screen.findByTestId('checkbox-image-installer');
+      screen.queryByRole('button', { name: /Microsoft Azure/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Oracle Cloud Infrastructure/i })
+    ).not.toBeInTheDocument();
+    await screen.findByRole('checkbox', {
+      name: /Virtualization guest image/i,
+    });
+    await screen.findByRole('checkbox', {
+      name: /Bare metal installer/i,
+    });
     expect(
       screen.queryByText(
         /VMware vSphere - Open virtualization format \(\.ova\)/
@@ -559,7 +619,9 @@ describe('Check step consistency', () => {
     const next = await screen.findByRole('button', { name: /Next/ });
 
     // select GCP, it's available for x86_64
-    const uploadGcpBtn = await screen.findByTestId('upload-google');
+    const uploadGcpBtn = await screen.findByRole('button', {
+      name: /Google Cloud Platform/i,
+    });
     user.click(uploadGcpBtn);
     await waitFor(() => expect(next).toBeEnabled());
 
@@ -568,7 +630,9 @@ describe('Check step consistency', () => {
     await waitFor(() => expect(next).toBeDisabled());
 
     // clicking on AWS enables the Next button
-    const uploadAwsBtn = await screen.findByTestId('upload-aws');
+    const uploadAwsBtn = await screen.findByRole('button', {
+      name: /Amazon Web Services/i,
+    });
     user.click(uploadAwsBtn);
     await waitFor(() => expect(next).toBeEnabled());
 
@@ -655,7 +719,11 @@ describe('Set target using query parameter', () => {
 
   test('image-installer (query parameter provided)', async () => {
     await renderCreateMode({ target: 'iso' });
-    expect(await screen.findByTestId('checkbox-image-installer')).toBeChecked();
+    expect(
+      await screen.findByRole('checkbox', {
+        name: /Bare metal installer/i,
+      })
+    ).toBeChecked();
     await handleRegistration();
     await goToDetailsStep();
     await enterNameAndGoToReviewStep();
@@ -668,7 +736,11 @@ describe('Set target using query parameter', () => {
 
   test('guest-image (query parameter provided)', async () => {
     await renderCreateMode({ target: 'qcow2' });
-    expect(await screen.findByTestId('checkbox-guest-image')).toBeChecked();
+    expect(
+      await screen.findByRole('checkbox', {
+        name: /Virtualization guest image/i,
+      })
+    ).toBeChecked();
     await handleRegistration();
     await goToDetailsStep();
     await enterNameAndGoToReviewStep();

src/test/Components/CreateImageWizard/steps/Oscap/Oscap.test.tsx

@@ -40,15 +40,17 @@ const selectRhel8 = async () => {
 
 const selectImageInstallerTarget = async () => {
   const user = userEvent.setup();
-  const imageInstallerCheckbox = await screen.findByTestId(
+  const imageInstallerCheckbox = await screen.findByRole('checkbox', {
-    'checkbox-image-installer'
+    name: /Bare metal installer/i,
-  );
+  });
   await waitFor(() => user.click(imageInstallerCheckbox));
 };
 
 const selectWslTarget = async () => {
   const user = userEvent.setup();
-  const wslCheckBox = await screen.findByTestId('checkbox-wsl');
+  const wslCheckBox = await screen.findByRole('checkbox', {
+    name: /windows subsystem for linux/i,
+  });
   await waitFor(() => user.click(wslCheckBox));
 };
 

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AwsTarget.test.tsx

@@ -70,15 +70,19 @@ const clickRevisitButton = async () => {
 
 const selectAwsTarget = async () => {
   const user = userEvent.setup();
-  const awsCard = await screen.findByTestId('upload-aws');
+  const awsCard = await screen.findByRole('button', {
+    name: /Amazon Web Services/i,
+  });
   await waitFor(() => user.click(awsCard));
   await clickNext();
 };
 
 const deselectAwsAndSelectGuestImage = async () => {
   const user = userEvent.setup();
-  const awsCard = await screen.findByTestId('upload-aws');
+  const awsCard = await screen.findAllByRole('button', {
-  await waitFor(() => user.click(awsCard));
+    name: /Amazon Web Services/i,
+  });
+  await waitFor(() => user.click(awsCard[1]));
   const guestImageCheckbox = await screen.findByRole('checkbox', {
     name: /virtualization guest image checkbox/i,
   });

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AzureTarget.test.tsx

@@ -70,14 +70,18 @@ const clickRevisitButton = async () => {
 
 const selectAzureTarget = async () => {
   const user = userEvent.setup();
-  const azureCard = await screen.findByTestId('upload-azure');
+  const azureCard = await screen.findByRole('button', {
+    name: /Microsoft Azure/i,
+  });
   await waitFor(() => user.click(azureCard));
   await clickNext();
 };
 
 const deselectAzureAndSelectGuestImage = async () => {
   const user = userEvent.setup();
-  const azureCard = await screen.findByTestId('upload-azure');
+  const azureCard = await screen.findByRole('button', {
+    name: /Microsoft Azure/i,
+  });
   await waitFor(() => user.click(azureCard));
   const guestImageCheckbox = await screen.findByRole('checkbox', {
     name: /virtualization guest image checkbox/i,
@@ -157,7 +161,7 @@ const enterSubscriptionId = async () => {
 
 const selectV1 = async () => {
   const user = userEvent.setup();
-  const hypervMenu = screen.getByTestId('azure-hyper-v-generation-select');
+  const hypervMenu = screen.getByRole('button', { name: /Generation 2/i });
 
   await waitFor(() => user.click(hypervMenu));
   const v1 = await screen.findByRole('option', {

src/test/Components/CreateImageWizard/steps/TargetEnvironment/GCPTarget.test.tsx

@@ -79,15 +79,19 @@ const createGCPCloudImage = (
 
 const clickGCPTarget = async () => {
   const user = userEvent.setup();
-  const googleOption = await screen.findByTestId('upload-google');
+  const googleOption = await screen.findByRole('button', {
+    name: /Google Cloud Platform/i,
+  });
   await waitFor(() => user.click(googleOption));
   await clickNext();
 };
 
 const deselectGcpAndSelectGuestImage = async () => {
   const user = userEvent.setup();
-  const googleCard = await screen.findByTestId('upload-google');
+  const googleCard = await screen.findAllByRole('button', {
-  await waitFor(() => user.click(googleCard));
+    name: /Google Cloud Platform/i,
+  });
+  await waitFor(() => user.click(googleCard[1]));
   const guestImageCheckbox = await screen.findByRole('checkbox', {
     name: /virtualization guest image checkbox/i,
   });
@@ -96,7 +100,9 @@ const deselectGcpAndSelectGuestImage = async () => {
 
 const selectGoogleAccount = async (optionId: string) => {
   const user = userEvent.setup();
-  const googleAccountOption = await screen.findByTestId(optionId);
+  const googleAccountOption = await screen.findByRole('radio', {
+    name: optionId,
+  });
   await waitFor(() => user.click(googleAccountOption));
   const principalInput = await screen.findByTestId('principal');
   await waitFor(() => user.type(principalInput, GCP_ACCOUNT));
@@ -115,7 +121,7 @@ describe('Step Upload to Google', () => {
   test('clicking Next loads Registration', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-account');
+    await selectGoogleAccount('Google account');
     await clickNext();
     await screen.findByRole('heading', {
       name: 'Register systems using this image',
@@ -161,7 +167,7 @@ describe('Step Upload to Google', () => {
   test('revisit step button on Review works', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-account');
+    await selectGoogleAccount('Google account');
     await goToReview();
     await clickRevisitButton();
     await screen.findByRole('heading', { name: /Image output/ });
@@ -176,7 +182,7 @@ describe('GCP image type request generated correctly', () => {
   test('share image with google account', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-account');
+    await selectGoogleAccount('Google account');
     await goToReview();
     // informational modal pops up in the first test only as it's tied
     // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage
@@ -196,7 +202,7 @@ describe('GCP image type request generated correctly', () => {
   test('share image with service account', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('service-account');
+    await selectGoogleAccount('Service account');
     await goToReview();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
     const expectedImageRequest = createGCPCloudImage('gcp', {
@@ -212,7 +218,7 @@ describe('GCP image type request generated correctly', () => {
   test('share image with google group', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-group');
+    await selectGoogleAccount('Google group');
     await goToReview();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
     const expectedImageRequest = createGCPCloudImage('gcp', {
@@ -228,7 +234,9 @@ describe('GCP image type request generated correctly', () => {
   test('share image with domain', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-domain');
+    await selectGoogleAccount(
+      'Google Workspace domain or Cloud Identity domain'
+    );
     await goToReview();
     const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
     const expectedImageRequest = createGCPCloudImage('gcp', {
@@ -245,9 +253,9 @@ describe('GCP image type request generated correctly', () => {
     const user = userEvent.setup();
     await renderCreateMode();
     await clickGCPTarget();
-    const shareWithInsightOption = await screen.findByTestId(
+    const shareWithInsightOption = await screen.findByRole('radio', {
-      'share-with-insights'
+      name: /Share image with Red Hat Insights only/i,
-    );
+    });
 
     user.click(shareWithInsightOption);
     await goToReview();
@@ -263,7 +271,9 @@ describe('GCP image type request generated correctly', () => {
   test('after selecting and deselecting gcp', async () => {
     await renderCreateMode();
     await clickGCPTarget();
-    await selectGoogleAccount('google-domain');
+    await selectGoogleAccount(
+      'Google Workspace domain or Cloud Identity domain'
+    );
     await clickBack();
     await deselectGcpAndSelectGuestImage();
     await goToReview();

src/test/Components/CreateImageWizard/steps/Users/Users.test.tsx

@@ -55,7 +55,9 @@ const goToReviewStep = async () => {
 
 const addAzureTarget = async () => {
   const user = userEvent.setup();
-  await waitFor(() => user.click(screen.getByTestId('upload-azure')));
+  await waitFor(() =>
+    user.click(screen.getByRole('button', { name: /Microsoft Azure/i }))
+  );
   await clickNext();
 
   const azureSourceDropdown = await screen.findByPlaceholderText(

src/test/Components/CreateImageWizard/wizardTestUtils.tsx

@@ -117,7 +117,9 @@ export const selectRhel9 = async () => {
 
 export const selectGuestImageTarget = async () => {
   const user = userEvent.setup();
-  const guestImageCheckBox = await screen.findByTestId('checkbox-guest-image');
+  const guestImageCheckBox = await screen.findByRole('checkbox', {
+    name: /Virtualization guest image/i,
+  });
   await waitFor(() => user.click(guestImageCheckBox));
 };
 

src/test/Components/ImagesTable/ImagesTable.test.tsx

@@ -19,8 +19,10 @@ describe('Images Table', () => {
 
     const table = await screen.findByTestId('images-table');
 
-    // make sure the empty-state message isn't present
+    // make sure the empty state message isn't present
-    const emptyState = screen.queryByTestId('empty-state');
+    const emptyState = screen.queryByText(
+      /Image builder is a tool for creating deployment-ready customized system images/i
+    );
     expect(emptyState).not.toBeInTheDocument();
 
     // check table
@@ -228,8 +230,10 @@ describe('Clones table', () => {
 
     const table = await screen.findByTestId('images-table');
 
-    // make sure the empty-state message isn't present
+    // make sure the empty state message isn't present
-    const emptyState = screen.queryByTestId('empty-state');
+    const emptyState = screen.queryByText(
+      /Image builder is a tool for creating deployment-ready customized system images/i
+    );
     expect(emptyState).not.toBeInTheDocument();
 
     // get rows

src/test/Components/LandingPage/LandingPage.test.tsx

@@ -28,6 +28,8 @@ describe('Landing Page', () => {
 
     renderCustomRoutesWithReduxRouter();
     // check table loads
-    await screen.findByTestId('empty-state');
+    await screen.findByText(
+      /Image builder is a tool for creating deployment-ready customized system images/i
+    );
   });
 });