next screenshots

packages/web/src/icons/FontIcon.svelte

@@ -301,7 +301,15 @@
   };
 </script>
 
-<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight {style} on:click />
+<span
+  class={iconNames[icon] || icon}
+  {title}
+  class:padLeft
+  class:padRight
+  {style}
+  on:click
+  data-testid={$$props['data-testid']}
+/>
 
 <style>
   .padLeft {

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -36,9 +36,11 @@
   <span class="expandColumnIcon" style={`margin-right: ${5 + (node.level - (tempRoot?.level ?? 0)) * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
+      data-testid={`PerspectiveNodeRow_expand_${node.pathIdentifier}`}
       on:click={() => {
         node.toggleExpanded();
       }}
+
     />
   </span>
 
@@ -54,6 +56,7 @@
     on:change={() => {
       node.toggleChecked();
     }}
+    data-testid={`PerspectiveNodeRow_check_${node.pathIdentifier}`}
   />
 
   {#if node.secondaryCheckable}

packages/web/src/tabpanel/TabsPanel.svelte

@@ -660,7 +660,7 @@
               {#if tab.tabPreviewMode}
                 <span
                   class="pin-button"
-                  data-testid='TabsPanel_pinTabButton'
+                  data-testid="TabsPanel_pinTabButton"
                   on:click={e => pinTab(tab.tabid)}
                   title="This tab is in preview mode, it will be replaced eg. when clicking table. Click to switch to normal mode. You could also double-click tab header."
                 >
@@ -683,11 +683,21 @@
   </div>
   <div class="icons-wrapper">
     {#if allowSplitTab}
-      <div class="icon-button" on:click={() => splitTab(multiTabIndex)} title="Split window">
+      <div
+        class="icon-button"
+        on:click={() => splitTab(multiTabIndex)}
+        title="Split window"
+        data-testid="TabsPanel_buttonSplit"
+      >
         <FontIcon icon="icon split" />
       </div>
     {/if}
-    <div class="icon-button" on:click={() => newQuery({ multiTabIndex })} title="New query">
+    <div
+      class="icon-button"
+      on:click={() => newQuery({ multiTabIndex })}
+      title="New query"
+      data-testid="TabsPanel_buttonNewQuery"
+    >
       <FontIcon icon="icon add" />
     </div>
   </div>