add data-testids to UI components that may be hard to target with automation

invokeai/frontend/web/src/common/components/IAICollapse.tsx

@@ -46,6 +46,7 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
           transitionDuration: 'normal',
           userSelect: 'none',
         }}
+        data-testid={`${label} collapsible`}
       >
         {label}
         <AnimatePresence>

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -67,6 +67,7 @@ type IAIDndImageProps = FlexProps & {
   withHoverOverlay?: boolean;
   children?: JSX.Element;
   uploadElement?: ReactNode;
+  dataTestId?: string;
 };
 
 const IAIDndImage = (props: IAIDndImageProps) => {
@@ -94,6 +95,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     children,
     onMouseOver,
     onMouseOut,
+    dataTestId,
   } = props;
 
   const { colorMode } = useColorMode();
@@ -183,6 +185,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                   borderRadius: 'base',
                   ...imageSx,
                 }}
+                data-testId={dataTestId}
               />
               {withMetadataOverlay && (
                 <ImageMetadataOverlay imageDTO={imageDTO} />

invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx

@@ -39,6 +39,7 @@ const IAIDndImageIcon = (props: Props) => {
         },
         ...styleOverrides,
       }}
+      data-testid={tooltip}
     />
   );
 };

invokeai/frontend/web/src/common/components/IAIIconButton.tsx

@@ -30,6 +30,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
         ref={forwardedRef}
         role={role}
         colorScheme={isChecked ? 'accent' : 'base'}
+        data-testid={tooltip}
         {...rest}
       />
     </Tooltip>

invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx

@@ -70,7 +70,12 @@ const IAIMantineSearchableSelect = forwardRef((props: IAISelectProps, ref) => {
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <FormControl ref={ref} isDisabled={disabled} position="static">
+      <FormControl
+        ref={ref}
+        isDisabled={disabled}
+        position="static"
+        data-testid={`select-${label || props.placeholder}`}
+      >
         {label && <FormLabel>{label}</FormLabel>}
         <Select
           ref={inputRef}

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -27,6 +27,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
         isRequired={required}
         isDisabled={disabled}
         position="static"
+        data-testid={`select-${label || props.placeholder}`}
       >
         <FormLabel>{label}</FormLabel>
         <Select disabled={disabled} ref={inputRef} styles={styles} {...rest} />

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx

@@ -20,6 +20,7 @@ const AddBoardButton = () => {
       aria-label={t('boards.addBoard')}
       onClick={handleCreateBoard}
       size="sm"
+      data-testid="add-board-button"
     />
   );
 };

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -68,17 +68,22 @@ const BoardsList = (props: Props) => {
           >
             <Grid
               className="list-container"
+              data-testid="boards-list"
               sx={{
                 gridTemplateColumns: `repeat(auto-fill, minmax(108px, 1fr));`,
                 maxH: 346,
               }}
             >
-              <GridItem sx={{ p: 1.5 }}>
+              <GridItem sx={{ p: 1.5 }} data-testid="no-board">
                 <NoBoardBoard isSelected={selectedBoardId === 'none'} />
               </GridItem>
               {filteredBoards &&
-                filteredBoards.map((board) => (
+                filteredBoards.map((board, index) => (
-                  <GridItem key={board.board_id} sx={{ p: 1.5 }}>
+                  <GridItem
+                    key={board.board_id}
+                    sx={{ p: 1.5 }}
+                    data-testid={`board-${index}`}
+                  >
                     <GalleryBoard
                       board={board}
                       isSelected={selectedBoardId === board.board_id}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx

@@ -79,6 +79,7 @@ const BoardsSearch = () => {
         value={boardSearchText}
         onKeyDown={handleKeydown}
         onChange={handleChange}
+        data-testid="board-search-input"
       />
       {boardSearchText && boardSearchText.length && (
         <InputRightElement>

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx

@@ -149,6 +149,7 @@ const CurrentImagePreview = () => {
           width={denoiseProgress.progress_image.width}
           height={denoiseProgress.progress_image.height}
           draggable={false}
+          data-testid="progress-image"
           sx={{
             objectFit: 'contain',
             maxWidth: 'full',
@@ -171,6 +172,7 @@ const CurrentImagePreview = () => {
           noContentFallback={
             <IAINoContentFallback icon={FaImage} label="No image selected" />
           }
+          dataTestId="image-preview"
         />
       )}
       {shouldShowImageDetails && imageDTO && (

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -109,6 +109,7 @@ const ImageGalleryContent = () => {
                     w: 'full',
                   }}
                   leftIcon={<FaImages />}
+                  data-testid="images-tab"
                 >
                   Images
                 </Tab>
@@ -121,6 +122,7 @@ const ImageGalleryContent = () => {
                     w: 'full',
                   }}
                   leftIcon={<FaServer />}
+                  data-testid="assets-tab"
                 >
                   Assets
                 </Tab>

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -117,7 +117,10 @@ const GalleryImage = (props: HoverableImageProps) => {
   }
 
   return (
-    <Box sx={{ w: 'full', h: 'full', touchAction: 'none' }}>
+    <Box
+      sx={{ w: 'full', h: 'full', touchAction: 'none' }}
+      data-testid={`image-${imageDTO.image_name}`}
+    >
       <Flex
         userSelect="none"
         sx={{

invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx

@@ -3,7 +3,12 @@ import { PropsWithChildren, memo } from 'react';
 
 type ItemContainerProps = PropsWithChildren & FlexProps;
 const ItemContainer = forwardRef((props: ItemContainerProps, ref) => (
-  <Box className="item-container" ref={ref} p={1.5}>
+  <Box
+    className="item-container"
+    ref={ref}
+    p={1.5}
+    data-testid="image-item-container"
+  >
     {props.children}
   </Box>
 ));

invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx

@@ -17,6 +17,7 @@ const ListContainer = forwardRef((props: ListContainerProps, ref) => {
       sx={{
         gridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr));`,
       }}
+      data-testid="image-list-container"
     >
       {props.children}
     </Grid>

invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx

@@ -98,6 +98,7 @@ const ParamLoRASelect = () => {
         item.value.toLowerCase().includes(value.toLowerCase().trim())
       }
       onChange={handleChange}
+      data-testid="add-lora"
     />
   );
 };

invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx

@@ -107,6 +107,7 @@ const ParamControlNetCollapse = () => {
             flexGrow={1}
             size="sm"
             onClick={handleClickedAddControlNet}
+            data-testid="add controlnet"
           />
         </Flex>
         {controlNetsArray.map((c, i) => (

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx

@@ -60,6 +60,7 @@ const InitialImage = () => {
       noContentFallback={
         <IAINoContentFallback label="No initial image selected" />
       }
+      dataTestId="initial-image"
     />
   );
 };

invokeai/frontend/web/src/features/queue/components/QueueControls.tsx

@@ -77,7 +77,12 @@ const QueueCounts = memo(() => {
   }, [dispatch]);
 
   return (
-    <Flex justifyContent="space-between" alignItems="center" pe={1}>
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      pe={1}
+      data-testid="queue-count"
+    >
       <Spacer />
       <Button
         onClick={handleClick}

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx

@@ -72,6 +72,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
       borderRadius="base"
       justifyContent="center"
       sx={sx}
+      data-testid="queue-item"
     >
       <Flex
         minH={9}

invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx

@@ -8,7 +8,7 @@ const QueueStatus = () => {
   const { data: queueStatus } = useGetQueueStatusQuery();
   const { t } = useTranslation();
   return (
-    <StatusStatGroup>
+    <StatusStatGroup data-testid="queue-status">
       <StatusStatItem
         label={t('queue.in_progress')}
         value={queueStatus?.queue.in_progress ?? 0}

invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx

@@ -39,6 +39,7 @@ const QueueButton = ({
         colorScheme={colorScheme}
         isLoading={isLoading}
         sx={sx}
+        data-testid={label}
       />
     );
   }
@@ -55,6 +56,7 @@ const QueueButton = ({
       loadingText={loadingText ?? label}
       flexGrow={1}
       sx={sx}
+      data-testid={label}
     >
       {label}
     </IAIButton>