test: Refactoring toolbar data-cy selectors (#1323)

platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js

@@ -43,6 +43,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
     ? tabs.map((tab, index) => {
         const { name, hidden = false } = tab;
 
+        const cypressSelectorId = name.toLowerCase();
         const tabClass =
           index === activeTabIndex ? 'nav-link active' : 'nav-link';
         return !hidden ? (
@@ -52,6 +53,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
               onHeaderChanged(index);
             }}
             className={tabClass}
+            data-cy={cypressSelectorId}
           >
             <button>{name}</button>
           </li>

platform/ui/src/viewer/ToolbarButton.js

@@ -23,8 +23,14 @@ export function ToolbarButton(props) {
     }
   };
 
+  const cypressSelectorId = props.label.toLowerCase();
+
   return (
-    <div className={className} onClick={handleClick}>
+    <div
+      className={className}
+      onClick={handleClick}
+      data-cy={cypressSelectorId}
+    >
       {iconProps && <Icon {...iconProps} />}
       <div className="toolbar-button-label">
         {t(label)}