feat(ui): add data-testids to control layers components:

- Add Layer Menu Button: `control-layers-add-layer-menu-button`
- Delete All Layers Button: `control-layers-delete-all-layers-button`
- CL Layer List: `control-layers-layer-list`
- CL Canvas: `control-layers-canvas`
- Toggle Metadata Button: `toggle-show-metadata-button`
- Toggle Progress Button: `toggle-show-progress-button`
- Toggle Viewer Menu Button: `toggle-viewer-menu-button`
- Settings Tab Button: `generation-tab-settings-tab-button`
- Control Layers Tab Button: `generation-tab-control-layers-tab-button`

invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx

@@ -18,7 +18,12 @@ export const AddLayerButton = memo(() => {
 
   return (
     <Menu>
-      <MenuButton as={Button} leftIcon={<PiPlusBold />} variant="ghost">
+      <MenuButton
+        as={Button}
+        leftIcon={<PiPlusBold />}
+        variant="ghost"
+        data-testid="control-layers-add-layer-menu-button"
+      >
         {t('controlLayers.addLayer')}
       </MenuButton>
       <MenuList>

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx

@@ -32,7 +32,7 @@ export const ControlLayersPanelContent = memo(() => {
       </Flex>
       {layerIdTypePairs.length > 0 && (
         <ScrollableContent>
-          <Flex flexDir="column" gap={2}>
+          <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
             {layerIdTypePairs.map(({ id, type }) => (
               <LayerWrapper key={id} id={id} type={type} />
             ))}

invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx

@@ -20,6 +20,7 @@ export const DeleteAllLayersButton = memo(() => {
       variant="ghost"
       colorScheme="error"
       isDisabled={isDisabled}
+      data-testid="control-layers-delete-all-layers-button"
     >
       {t('controlLayers.deleteAll')}
     </Button>

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -233,7 +233,14 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
   return (
     <Flex overflow="hidden" w="full" h="full">
       <Flex ref={wrapperRef} w="full" h="full" alignItems="center" justifyContent="center">
-        <Flex ref={containerRef} tabIndex={-1} bg="base.850" borderRadius="base" overflow="hidden" />
+        <Flex
+          ref={containerRef}
+          tabIndex={-1}
+          bg="base.850"
+          borderRadius="base"
+          overflow="hidden"
+          data-testid="control-layers-canvas"
+        />
       </Flex>
     </Flex>
   );

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx

@@ -35,6 +35,7 @@ export const ToggleMetadataViewerButton = memo(() => {
       isDisabled={!imageDTO}
       variant="outline"
       colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-metadata-button"
     />
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx

@@ -22,6 +22,7 @@ export const ToggleProgressButton = memo(() => {
       onClick={onClick}
       variant="outline"
       colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-progress-button"
     />
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx

@@ -21,7 +21,7 @@ export const ViewerToggleMenu = () => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Button variant="outline">
+        <Button variant="outline" data-testid="toggle-viewer-menu-button">
           <Flex gap={3} w="full" alignItems="center">
             {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
             <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>

invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx

@@ -75,10 +75,14 @@ const ParametersPanelTextToImage = () => {
                 onChange={onChangeTabs}
               >
                 <TabList gap={2} fontSize="sm" borderColor="base.800">
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab sx={baseStyles} _selected={selectedStyles} data-testid="generation-tab-settings-tab-button">
                     {t('common.settingsLabel')}
                   </Tab>
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab
+                    sx={baseStyles}
+                    _selected={selectedStyles}
+                    data-testid="generation-tab-control-layers-tab-button"
+                  >
                     {controlLayersTitle}
                   </Tab>
                 </TabList>