Added data-cy for sidepanel and multipage icons (#5560)

* Add data-cy for side panel elements

* Add data-cy for multipage elements

* Add missing data-cy

frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx

@@ -43,7 +43,9 @@ export const EditInput = ({ slug, error, setError, pageHandle, setPageHandle, is
         value={pageHandle}
         data-cy={'page-handle-input-field'}
       />
-      <div className="invalid-feedback">{error}</div>
+      <div className="invalid-feedback" data-cy={'page-handle-invalid-feedback'}>
+        {error}
+      </div>
     </div>
   );
 };

frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx

@@ -16,7 +16,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
         <Popover id="page-handler-menu" className={`global-settings ${darkMode && 'popover-dark-themed'}`}>
           <Popover.Content bsPrefix="popover-body">
             <div className="card-body">
-              <label htmlFor="pin" className="form-label">
+              <label htmlFor="pin" className="form-label" data-cy={`page-settings-header`}>
                 Settings
               </label>
               <hr style={{ margin: '0.75rem 0' }} />
@@ -28,7 +28,7 @@ export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, sho
         </Popover>
       }
     >
-      <MenuIcon width="10" height="16" />
+      <MenuIcon width="10" height="16" data-cy={'menu-icon'} />
     </OverlayTrigger>
   );
 };
@@ -37,6 +37,7 @@ const Toggle = ({ onChange, value = true }) => {
   return (
     <div className="form-check form-switch">
       <input
+        data-cy={`disable-page-menu-toggle`}
         className="form-check-input"
         type="checkbox"
         onClick={(e) => {
@@ -45,10 +46,12 @@ const Toggle = ({ onChange, value = true }) => {
         }}
         checked={value}
       />
-      <span className="form-check-label">Disable Menu</span>
+      <span className="form-check-label" data-cy={`disable-page-menu-label`}>
+        Disable Menu
+      </span>
 
       <div className="toggle-info">
-        <small className="secondary-text">
+        <small className="secondary-text" data-cy={`disable-page-menu-description`}>
           To hide the page navigation sidebar in viewer mode, set this option to on.
         </small>
       </div>

frontend/src/Editor/LeftSidebar/SidebarPageSelector/PagehandlerMenu.jsx

@@ -95,7 +95,7 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
         }}
         styles={{ height: '20px', marginTop: '2px' }}
       >
-        <Button.Content iconSrc={'assets/images/icons/3dots-menu.svg'} />
+        <Button.Content dataCy={`page-menu`} iconSrc={'assets/images/icons/3dots-menu.svg'} />
       </Button.UnstyledButton>
     </OverlayTrigger>
   );
@@ -104,7 +104,7 @@ export const PagehandlerMenu = ({ page, darkMode, handlePageCallback, showMenu,
 const PageHandleField = ({ page, updatePageHandle }) => {
   const Label = () => {
     return (
-      <label htmlFor="pin" className="form-label">
+      <label htmlFor="pin" className="form-label" data-cy={`header-page-handle`}>
         Page Handle
       </label>
     );
@@ -114,7 +114,7 @@ const PageHandleField = ({ page, updatePageHandle }) => {
     return (
       <div className="col">
         <span style={{ color: '#889096' }}>.../</span>
-        <span>{page.handle}</span>
+        <span data-cy={`page-handle-text`}>{page.handle}</span>
       </div>
     );
   };
@@ -129,7 +129,12 @@ const PageHandleField = ({ page, updatePageHandle }) => {
         }}
         classNames="page-handle-button-container"
       >
-        <Button.Content title={content} iconSrc={'assets/images/icons/input.svg'} direction="right" />
+        <Button.Content
+          title={content}
+          iconSrc={'assets/images/icons/input.svg'}
+          direction="right"
+          dataCy={`page-handler`}
+        />
       </Button.UnstyledButton>
     </div>
   );

frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx

@@ -83,7 +83,7 @@ const LeftSidebarPageSelector = ({
                 size="sm"
                 styles={{ width: '28px', padding: 0 }}
               >
-                <Button.Content iconSrc={'assets/images/icons/plus.svg'} direction="left" />
+                <Button.Content dataCy={`add-page`} iconSrc={'assets/images/icons/plus.svg'} direction="left" />
               </Button>
               <Button
                 title={'Search'}
@@ -92,7 +92,7 @@ const LeftSidebarPageSelector = ({
                 size="sm"
                 styles={{ width: '28px', padding: 0 }}
               >
-                <Button.Content iconSrc={'assets/images/icons/search.svg'} direction="left" />
+                <Button.Content dataCy={'search-page'} iconSrc={'assets/images/icons/search.svg'} direction="left" />
               </Button>
               <Button
                 title={`${pinned ? 'Unpin' : 'Pin'}`}
@@ -102,6 +102,7 @@ const LeftSidebarPageSelector = ({
                 styles={{ width: '28px', padding: 0 }}
               >
                 <Button.Content
+                  dataCy={'pin-panel'}
                   iconSrc={`assets/images/icons/editor/left-sidebar/pinned${pinned ? 'off' : ''}.svg`}
                   direction="left"
                 />
@@ -149,7 +150,9 @@ const LeftSidebarPageSelector = ({
               <div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
                 <div>
                   <EmptyIllustration />
-                  <p className="mt-3">No pages found</p>
+                  <p data-cy={`label-no-pages-found`} className="mt-3">
+                    No pages found
+                  </p>
                 </div>
               </div>
             )}

frontend/src/_ui/Alert/Alert.jsx

@@ -22,7 +22,7 @@ const Container = ({ children, cls = '' }) => {
 
 const Message = ({ children }) => {
   return (
-    <div style={{ fontWeight: 400 }} className="mx-2">
+    <div data-cy={`alert-info-text`} style={{ fontWeight: 400 }} className="mx-2">
       {children}
     </div>
   );

frontend/src/_ui/LeftSidebar/Button.jsx

@@ -38,7 +38,7 @@ const Button = ({
   );
 };
 
-const Content = ({ title = null, iconSrc = null, direction = 'left' }) => {
+const Content = ({ title = null, iconSrc = null, direction = 'left', dataCy }) => {
   const icon = !iconSrc ? (
     ''
   ) : (
@@ -47,7 +47,9 @@ const Content = ({ title = null, iconSrc = null, direction = 'left' }) => {
       src={iconSrc}
       width="12"
       height="12"
-      data-cy={`${String(title).toLowerCase().replace(/\s+/g, '-')}-option-icon`}
+      data-cy={`${String(dataCy ?? title)
+        .toLowerCase()
+        .replace(/\s+/g, '-')}-option-icon`}
     />
   );
   const btnTitle = !title ? (