Replace unstable Cypress selectors with stable semantic hooks

src/components/Dropdown/Calendar/Calendar.jsx

@@ -317,6 +317,7 @@ function Calendar({ children, setPageNumber, allCalendarsData }) {
       <div className="calendar-search-wrapper">
         <Input
           className="calendar-search-input"
+          data-cy="input-calendar-search"
           prefix={<SearchOutlined className="calendar-search-icon" />}
           placeholder={t('dashboard.calendar.searchPlaceholder')}
           bordered={false}
@@ -325,7 +326,7 @@ function Calendar({ children, setPageNumber, allCalendarsData }) {
           autoFocus
         />
       </div>
-      <div className="calendar-list-wrapper" ref={listRef} onScroll={handleScroll}>
+      <div data-cy="calendar-list" className="calendar-list-wrapper" ref={listRef} onScroll={handleScroll}>
         {filteredCalendars.map((item) => {
           const name = contentLanguageBilingual({
             interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
@@ -336,22 +337,27 @@ function Calendar({ children, setPageNumber, allCalendarsData }) {
             <div
               key={item.id}
               className="calendar-dropdown-item"
+              data-cy="calendar-dropdown-item"
               role="button"
               tabIndex={0}
               onClick={() => handleItemClick(item.id)}
               onKeyDown={(event) => handleItemKeyDown(event, item.id)}>
               <img className="calendar-item-logo" src={item?.logo?.original?.uri} alt="" />
-              <span className="calendar-item-name">{name}</span>
+              <span data-cy="calendar-item-name" className="calendar-item-name">
+                {name}
+              </span>
             </div>
           );
         })}
         {isFetching && (
-          <div className="calendar-load-more-indicator">
+          <div data-cy="calendar-load-more-indicator" className="calendar-load-more-indicator">
             <LoadingIndicator />
           </div>
         )}
         {!filteredCalendars.length && !isFetching && (
-          <div className="calendar-empty-state">{t('dashboard.calendar.noCalendarsFound')}</div>
+          <div data-cy="calendar-empty-state" className="calendar-empty-state">
+            {t('dashboard.calendar.noCalendarsFound')}
+          </div>
         )}
       </div>
     </div>

src/components/Dropdown/EventStatus/EventStatus.jsx

@@ -109,11 +109,13 @@ function EventStatusOptions({
 
   const showDeleteConfirm = () => {
     confirm({
-      title: t('dashboard.events.deleteEvent.title'),
+      title: <span data-cy="confirm-modal-title">{t('dashboard.events.deleteEvent.title')}</span>,
       icon: <ExclamationCircleOutlined />,
-      content: t('dashboard.events.deleteEvent.description'),
+      content: <span data-cy="confirm-modal-content">{t('dashboard.events.deleteEvent.description')}</span>,
       okText: t('dashboard.events.deleteEvent.ok'),
       okType: 'danger',
+      okButtonProps: { 'data-cy': 'button-confirm-ok' },
+      cancelButtonProps: { 'data-cy': 'button-confirm-cancel' },
       cancelText: t('dashboard.events.deleteEvent.cancel'),
       className: 'delete-modal-container',
       onOk() {

src/components/Dropdown/UserProfile/UserProfileDropDown.jsx

@@ -61,14 +61,16 @@ const UserProfileDropDown = () => {
         onClick,
       }}
       trigger={['click']}>
-      <div className="user-profile-dropwdown-content">
+      <div data-cy="user-profile-menu-trigger" className="user-profile-dropwdown-content">
         <Avatar
           className="dropdown-avatar"
           src={user?.profileImage || undefined}
           icon={!user?.profileImage && <UserOutlined style={{ color: '#607EFC', fontSize: '18px' }} />}
           size={32}
         />
-        <span className="user-profile-user-name">{user?.userName}</span>
+        <span data-cy="user-profile-name" className="user-profile-user-name">
+          {user?.userName}
+        </span>
         <CaretDownOutlined />
       </div>
     </Dropdown>

src/components/Filter/SearchableCheckbox/SearchableCheckbox.jsx

@@ -49,7 +49,7 @@ function SearchableCheckbox(props) {
         overlayClassName="searchable-checkbox-overlay"
         trigger={['click']}
         dropdownRender={() => (
-          <div className="searchable-checkbox-dropdown-wrapper">
+          <div className="searchable-checkbox-dropdown-wrapper" data-cy="searchable-checkbox-options">
             {allowSearch && (
               <AuthenticationInput
                 data-cy="input-search-entity"
@@ -63,7 +63,11 @@ function SearchableCheckbox(props) {
             {!loading ? (
               <div className="searchable-checkbox-dropdown-content">
                 {items?.length > 0 ? (
-                  items?.map((item, index) => <span key={item.id || index}>{item.label}</span>)
+                  items?.map((item, index) => (
+                    <span data-cy="searchable-checkbox-option" key={item.id || index}>
+                      {item.label}
+                    </span>
+                  ))
                 ) : (
                   <NoContent />
                 )}

src/components/List/Events/List.jsx

@@ -23,6 +23,7 @@ import { sameAsTypes } from '../../../constants/sameAsTypes';
 import { getWidthFromAspectRatio } from '../../../utils/getWidthFromAspectRatio';
 import Link from 'antd/lib/typography/Link';
 import { truncateText } from '../../../utils/stringManipulations';
+import { paginationItemRender } from '../../../utils/paginationItemRender';
 
 const { useBreakpoint } = Grid;
 
@@ -85,6 +86,7 @@ function Lists(props) {
         dataSource={data?.data}
         bordered={false}
         pagination={{
+          itemRender: paginationItemRender,
           onChange: (page) => {
             setPageNumber(page);
           },
@@ -109,6 +111,7 @@ function Lists(props) {
           return (
             <List.Item
               className="event-list-item-wrapper"
+              data-cy="list-item-event"
               key={index}
               actions={[
                 <EventStatusOptions
@@ -126,7 +129,7 @@ function Lists(props) {
                   deleteEvent={deleteEvent}
                   featureEvents={featureEvents}
                   onGetStructuredData={() => setStructuredDataEvent(eventItem)}>
-                  <span>
+                  <span data-cy="button-event-actions">
                     <MoreOutlined
                       className="event-list-more-icon"
                       style={{ color: selectedItemId === eventItem?.id && '#1B3DE6' }}
@@ -148,7 +151,7 @@ function Lists(props) {
                     deleteEvent={deleteEvent}
                     featureEvents={featureEvents}
                     onGetStructuredData={() => setStructuredDataEvent(eventItem)}>
-                    <span>
+                    <span data-cy="button-event-actions">
                       <MoreOutlined className="event-list-more-icon-responsive" key={index} />
                     </span>
                   </EventStatusOptions>

src/components/Modal/Confirm/Confirm.jsx

@@ -15,11 +15,11 @@ export const Confirm = ({ title, content, onCancel, onAction, okText, cancelText
   const config = {
     title: (
       <>
-        <span>{title}</span>
+        <span data-cy="confirm-modal-title">{title}</span>
       </>
     ),
     content: (
-      <div style={{ padding: '24px' }}>
+      <div data-cy="confirm-modal-content" style={{ padding: '24px' }}>
         <ExclamationCircleOutlined size="18px" />
         {isStringContent ? <span>{content}</span> : content}
       </div>
@@ -28,6 +28,12 @@ export const Confirm = ({ title, content, onCancel, onAction, okText, cancelText
     okType: 'danger',
     okText,
     cancelText,
+    okButtonProps: {
+      'data-cy': 'button-confirm-ok',
+    },
+    cancelButtonProps: {
+      'data-cy': 'button-confirm-cancel',
+    },
     centered: true,
     className: modalClassName,
     closable: closable ?? true,

src/components/Sidebar/Main/Sidebar.jsx

@@ -37,7 +37,14 @@ function Sidebar(props) {
     const itemJson = {
       key: key,
       icon: item.icon,
-      label: t(item.name),
+      label: (
+        <span
+          data-cy="sidebar-navigation-item"
+          data-path={item.path}
+          data-active={location.pathname?.includes(item.path) ? 'true' : 'false'}>
+          {t(item.name)}
+        </span>
+      ),
       className: 'sidebar-menu-item',
       path: item.path,
       disabled: item.disabled,
@@ -66,11 +73,14 @@ function Sidebar(props) {
         ),
         label: (
           <div
+            data-cy="calendar-selector"
             style={{
               display: 'flex',
               flexDirection: 'column',
             }}>
-            <span style={{ height: currentCalendarData?.mode === calendarModes.READ_ONLY && '16px' }}>
+            <span
+              data-cy="calendar-selected-name"
+              style={{ height: currentCalendarData?.mode === calendarModes.READ_ONLY && '16px' }}>
               {label}
               <DownOutlined
                 style={{

src/components/Sidebar/Responsive/ResponsiveSidebar.jsx

@@ -8,7 +8,7 @@ import { userNameItems } from '../../../constants/userNameItems';
 import { sidebarItems } from '../../../constants/sidebarItems';
 import { useDispatch, useSelector } from 'react-redux';
 import { clearUser, getUserDetails } from '../../../redux/reducer/userSlice';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { PathName } from '../../../constants/pathName';
 import { useTranslation } from 'react-i18next';
 import CalendarList from '../../Dropdown/Calendar';
@@ -24,6 +24,7 @@ function ResponsiveSidebar(props) {
   const { t } = useTranslation();
   let { calendarId } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
   const dispatch = useDispatch();
   const { user } = useSelector(getUserDetails);
 
@@ -45,7 +46,14 @@ function ResponsiveSidebar(props) {
     const itemJson = {
       key: key,
       icon: item.icon,
-      label: t(item.name),
+      label: (
+        <span
+          data-cy="sidebar-navigation-item"
+          data-path={item.path}
+          data-active={location.pathname?.includes(item.path) ? 'true' : 'false'}>
+          {t(item.name)}
+        </span>
+      ),
       className: 'sidebar-menu-item',
       path: item.path,
       disabled: item.disabled,
@@ -71,11 +79,13 @@ function ResponsiveSidebar(props) {
           />
         ),
         label: (
-          <div className="calendar-label-wrapper">
+          <div className="calendar-label-wrapper" data-cy="calendar-selector">
             <span
               className="calendar-label-row"
               style={{ height: currentCalendarData?.mode === calendarModes.READ_ONLY ? '16px' : undefined }}>
-              <span className="calendar-label-text">{label}</span>
+              <span className="calendar-label-text" data-cy="calendar-selected-name">
+                {label}
+              </span>
               <DownOutlined className="calendar-label-icon" />
             </span>
 

src/constants/eventPublishOptions.js

@@ -2,34 +2,62 @@ import { Translation } from 'react-i18next';
 
 export const eventPublishOptions = [
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.publishEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="publish">
+        <Translation>{(t) => t('dashboard.events.publishOptions.publishEvent')}</Translation>
+      </span>
+    ),
     key: '0',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.revertToDraft')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="revert-to-draft">
+        <Translation>{(t) => t('dashboard.events.publishOptions.revertToDraft')}</Translation>
+      </span>
+    ),
     key: '6',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.unpublishEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="unpublish">
+        <Translation>{(t) => t('dashboard.events.publishOptions.unpublishEvent')}</Translation>
+      </span>
+    ),
     key: '1',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.featureEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="feature">
+        <Translation>{(t) => t('dashboard.events.publishOptions.featureEvent')}</Translation>
+      </span>
+    ),
     key: '4',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.unFeatureEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="unfeature">
+        <Translation>{(t) => t('dashboard.events.publishOptions.unFeatureEvent')}</Translation>
+      </span>
+    ),
     key: '5',
   },
   {
     type: 'divider',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.duplicateEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="duplicate">
+        <Translation>{(t) => t('dashboard.events.publishOptions.duplicateEvent')}</Translation>
+      </span>
+    ),
     key: '3',
   },
   {
-    label: <Translation>{(t) => t('dashboard.events.publishOptions.deleteEvent')}</Translation>,
+    label: (
+      <span data-cy="event-action-menu-item" data-action="delete">
+        <Translation>{(t) => t('dashboard.events.publishOptions.deleteEvent')}</Translation>
+      </span>
+    ),
     key: '2',
   },
 ];

src/constants/userNameItems.js

@@ -7,25 +7,41 @@ const iconStyle = {
 
 export const userNameItems = [
   {
-    label: <Translation>{(t) => t('dashboard.topNavigation.userProfile')}</Translation>,
+    label: (
+      <span data-cy="user-menu-item" data-action="user-profile">
+        <Translation>{(t) => t('dashboard.topNavigation.userProfile')}</Translation>
+      </span>
+    ),
     icon: <SettingOutlined style={iconStyle} />,
     key: 'userProfile',
   },
   {
-    label: <Translation>{(t) => t('dashboard.topNavigation.help')}</Translation>,
+    label: (
+      <span data-cy="user-menu-item" data-action="help">
+        <Translation>{(t) => t('dashboard.topNavigation.help')}</Translation>
+      </span>
+    ),
     key: 'help',
     icon: <QuestionCircleOutlined style={iconStyle} />,
   },
   {
-    label: <Translation>{(t) => t('dashboard.topNavigation.logOut')}</Translation>,
+    label: (
+      <span data-cy="user-menu-item" data-action="logout">
+        <Translation>{(t) => t('dashboard.topNavigation.logOut')}</Translation>
+      </span>
+    ),
     key: 'logOut',
     icon: <LogoutOutlined style={iconStyle} />,
   },
 ];
 
 export const superAdminItems = [
   {
-    label: <Translation>{(t) => t('dashboard.topNavigation.systemUpdates')}</Translation>,
+    label: (
+      <span data-cy="user-menu-item" data-action="system-updates">
+        <Translation>{(t) => t('dashboard.topNavigation.systemUpdates')}</Translation>
+      </span>
+    ),
     key: 'systemUpdates',
     icon: <DeploymentUnitOutlined style={iconStyle} />,
   },

src/pages/Dashboard/AddTaxonomy/AddTaxonomy.jsx

@@ -1151,7 +1151,11 @@ const AddTaxonomy = () => {
                           return {
                             key: role.key,
                             label: (
-                              <Checkbox value={role.value} key={role.key} style={{ marginLeft: '8px' }}>
+                              <Checkbox
+                                data-cy="searchable-checkbox-input"
+                                value={role.value}
+                                key={role.key}
+                                style={{ marginLeft: '8px' }}>
                                 {t(`dashboard.taxonomy.addNew.adminOnly`)}
                               </Checkbox>
                             ),

src/pages/Dashboard/EventReadOnly/EventReadOnly.jsx

@@ -415,7 +415,7 @@ function EventReadOnly() {
                     isReadOnly={isReadOnly}
                     eventState={eventData?.publishState}>
                     <OutlinedButton
-                      data-cy="button-edit-place"
+                      data-cy="button-edit-event"
                       label={t('dashboard.places.readOnly.edit')}
                       size="middle"
                       style={{ height: '40px', width: '60px' }}