diff --git a/frontend/src/HomePage/FolderMenu.jsx b/frontend/src/HomePage/FolderMenu.jsx
index d0949ecf1b..820652c11b 100644
--- a/frontend/src/HomePage/FolderMenu.jsx
+++ b/frontend/src/HomePage/FolderMenu.jsx
@@ -10,6 +10,7 @@ export const FolderMenu = function FolderMenu({
   canDeleteFolder,
   canUpdateFolder,
   darkMode,
+  dataCy = '',
 }) {
   const [open, setOpen] = React.useState(false);
   const closeMenu = () => {
@@ -28,7 +29,9 @@ export const FolderMenu = function FolderMenu({
             closeMenu();
             onClick();
           }}
-          data-cy={`${text.toLowerCase().replace(/\s+/g, '-')}-card-option`}
+          data-cy={`${String(dataCy + '-' + text)
+            .toLowerCase()
+            .replace(/\s+/g, '-')}-option`}
         >
           {text}
         </span>
@@ -72,7 +75,7 @@ export const FolderMenu = function FolderMenu({
         className={cx('folder-menu-icon', {
           'd-grid': open,
         })}
-        data-cy="folder-card-menu-icon"
+        data-cy={`${dataCy.toLowerCase().replace(/\s+/g, '-')}-card-menu-icon`}
       >
         <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
diff --git a/frontend/src/HomePage/Folders.jsx b/frontend/src/HomePage/Folders.jsx
index 1e1f962b2d..79ef73efb6 100644
--- a/frontend/src/HomePage/Folders.jsx
+++ b/frontend/src/HomePage/Folders.jsx
@@ -277,6 +277,7 @@ export const Folders = function Folders({
                 deleteFolder={() => deleteFolder(folder)}
                 editFolder={() => updateFolder(folder)}
                 darkMode={darkMode}
+                dataCy={folder.name}
               />
             )}
           </a>
diff --git a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
index c625af0802..710308f9e7 100644
--- a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
+++ b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
@@ -333,7 +333,12 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
           ) : (
             <div>
               <div className="justify-content-between d-flex groups-main-header-wrap">
-                <p className="font-weight-500 tj-text-md">{this?.props?.selectedGroup}</p>
+                <p
+                  className="font-weight-500 tj-text-md"
+                  data-cy={`${this.props.selectedGroup.toLowerCase().replace(/\s+/g, '-')}-title`}
+                >
+                  {this.props.selectedGroup}
+                </p>
                 {(groupPermission.group == 'admin' || groupPermission.group == 'all_users') && (
                   <div className="default-group-wrap">
                     <SolidIcon name="information" fill="#46A758" width="13" />
@@ -346,7 +351,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                   <div className="user-group-actions">
                     <Link
                       onClick={() => this.props.updateGroupName(groupPermission)}
-                      data-cy="update-link"
+                      data-cy={`${String(groupPermission.group)
+                        .toLowerCase()
+                        .replace(/\s+/g, '-')}-group-name-update-link`}
                       className="tj-text-xsm font-weight-500 edit-group"
                     >
                       <SolidIcon fill="#28303F" name="editrectangle" width="14" />
@@ -355,7 +362,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                     <Link
                       className="delete-group tj-text-xsm font-weight-500"
                       onClick={() => this.props.deleteGroup(groupPermission.id)}
-                      data-cy="delete-link"
+                      data-cy={`${String(groupPermission.group).toLowerCase().replace(/\s+/g, '-')}-group-delete-link`}
                     >
                       <SolidIcon fill="#E54D2E" name="trash" width="14" /> Delete group
                     </Link>
@@ -455,15 +462,19 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                         <table>
                           {groupPermission.group == 'admin' && (
                             <div className="manage-group-users-info">
-                              <p className="tj-text-xsm">
+                              <p className="tj-text-xsm" data-cy="helper-text-admin-app-access">
                                 <SolidIcon name="information" fill="#3E63DD" /> Admin has edit access to all apps. These
                                 are not editable
                               </p>
                             </div>
                           )}
                           <div className="groups-app-body-header d-flex">
-                            <p className="font-weight-500 tj-text-xsm">App name</p>
-                            <p className="font-weight-500 tj-text-xsm">Permissions</p>
+                            <p className="font-weight-500 tj-text-xsm" data-cy="name-header">
+                              App name
+                            </p>
+                            <p className="font-weight-500 tj-text-xsm" data-cy="permissions-header">
+                              Permissions
+                            </p>
                           </div>
                           <tbody className="manage-group-app-table-body">
                             {isLoadingGroup || isLoadingApps ? (
@@ -484,8 +495,14 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                               <>
                                 {appsInGroup?.length > 0 ? (
                                   appsInGroup.map((app) => (
-                                    <tr key={app.id} className="apps-table-row">
-                                      <td className="font-weight-500">{app.name}</td>
+                                    <tr
+                                      key={app.id}
+                                      className="apps-table-row"
+                                      data-cy={`${app.name.toLowerCase().replace(/\s+/g, '-')}-app-permission-data`}
+                                    >
+                                      <td className="font-weight-500" data-cy="selected-app-name">
+                                        {app.name}
+                                      </td>
                                       <td className="text-secondary d-flex">
                                         <div className="apps-view-edit-wrap">
                                           <label className="form-check form-check-inline">
@@ -497,8 +514,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                               }}
                                               disabled={groupPermission.group === 'admin'}
                                               checked={this.canAppGroupPermission(app, groupPermission.id, 'view')}
+                                              data-cy="checkbox-view-app"
                                             />
-                                            <span className="form-check-label">
+                                            <span className="form-check-label" data-cy="label-app-view">
                                               {this.props.t('globals.view', 'view')}
                                             </span>
                                           </label>
@@ -511,8 +529,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                               }}
                                               disabled={groupPermission.group === 'admin'}
                                               checked={this.canAppGroupPermission(app, groupPermission.id, 'edit')}
+                                              data-cy="checkbox-app-edit"
                                             />
-                                            <span className="form-check-label">
+                                            <span className="form-check-label" data-cy="label-app-edit">
                                               {this.props.t('globals.edit', 'Edit')}
                                             </span>
                                           </label>
@@ -541,12 +560,14 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                                 groupPermission.id,
                                                 'hideFromDashboard'
                                               )}
+                                              data-cy="checkbox-hide-from-dashboard"
                                             />
                                             <span
                                               className={`form-check-label ${
                                                 this.canAppGroupPermission(app, groupPermission.id, 'edit') &&
                                                 'faded-text'
                                               }`}
+                                              data-cy="label-hide-from-dashboard"
                                             >
                                               Hide from dashboard
                                             </span>
@@ -560,7 +581,6 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                             onClick={() => {
                                               this.removeAppFromGroup(groupPermission.id, app.id, app.name);
                                             }}
-                                            data-cy="delete-link"
                                             className="delete-link"
                                           >
                                             <ButtonSolid
@@ -569,6 +589,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                               leftIcon="trash"
                                               iconWidth="14"
                                               fill={'#E54D2E'}
+                                              data-cy={`${app.name.toLowerCase().replace(/\s+/g, '-')}-remove-button`}
                                             >
                                               Remove
                                             </ButtonSolid>
@@ -582,8 +603,13 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                     <div className="manage-groups-no-apps-icon">
                                       <BulkIcon name="apps" fill="#3E63DD" width="28" />
                                     </div>
-                                    <p className="tj-text-md font-weight-500">No apps are added to the group</p>
-                                    <span className="tj-text-sm text-center">
+                                    <p className="tj-text-md font-weight-500" data-cy="helper-text-no-apps-added">
+                                      No apps are added to the group
+                                    </p>
+                                    <span
+                                      className="tj-text-sm text-center"
+                                      data-cy="helper-text-user-groups-permissions"
+                                    >
                                       Add app to the group to control permissions
                                       <br /> for users in this group
                                     </span>
@@ -637,6 +663,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                             iconWidth="16"
                             className="add-users-button"
                             isLoading={isAddingUsers}
+                            data-cy={`${String(groupPermission.group)
+                              .toLowerCase()
+                              .replace(/\s+/g, '-')}-group-add-button`}
                           >
                             Add users
                           </ButtonSolid>
@@ -652,7 +681,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                     <br />
                     <div>
                       {groupPermission.group == 'all_users' && (
-                        <div className="manage-group-users-info">
+                        <div className="manage-group-users-info" data-cy="helper-text-all-user-included">
                           <p className="tj-text-xsm">
                             <SolidIcon name="information" fill="#3E63DD" /> All users include every users in the app.
                             This list is not editable
@@ -725,7 +754,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                         <div>
                           {groupPermission.group == 'admin' && (
                             <div className="manage-group-users-info">
-                              <p className="tj-text-xsm">
+                              <p className="tj-text-xsm" data-cy="helper-text-admin-permissions">
                                 <SolidIcon name="information" fill="#3E63DD" /> Admin has all permissions
                               </p>
                             </div>
@@ -843,7 +872,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                   </div>
                                 </div>
                                 <div className="apps-variable-permission-wrap">
-                                  <div>{this.props.t('globals.environmentVar', 'Environment variables')}</div>
+                                  <div data-cy="resource-workspace-variable">
+                                    {this.props.t('globals.environmentVar', 'Environment variables')}
+                                  </div>
                                   <div className="text-muted">
                                     <div>
                                       <label className="form-check form-check-inline">
diff --git a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
index a94da87b87..31eb481808 100644
--- a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
+++ b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
@@ -203,7 +203,9 @@ class ManageGroupPermissionsComponent extends React.Component {
               darkMode={this.props.darkMode}
             />
             <div className="d-flex groups-btn-container">
-              <p className="tj-text">{groups?.length} Groups</p>
+              <p className="tj-text" data-cy="page-title">
+                {groups?.length} Groups
+              </p>
               {!showNewGroupForm && !showGroupNameUpdateForm && (
                 <ButtonSolid
                   className="btn btn-primary create-new-group-button"
@@ -321,6 +323,9 @@ class ManageGroupPermissionsComponent extends React.Component {
                           });
                         }}
                         className="groups-folder-list"
+                        dataCy={this.humanizeifDefaultGroupName(permissionGroup.group)
+                          .toLowerCase()
+                          .replace(/\s+/g, '-')}
                       >
                         <span>{this.humanizeifDefaultGroupName(permissionGroup.group)}</span>
                       </FolderList>
diff --git a/frontend/src/_ui/Icon/bulkIcons/Trash.jsx b/frontend/src/_ui/Icon/bulkIcons/Trash.jsx
index a3b5b3a7ac..6b8cc5c8fa 100644
--- a/frontend/src/_ui/Icon/bulkIcons/Trash.jsx
+++ b/frontend/src/_ui/Icon/bulkIcons/Trash.jsx
@@ -8,6 +8,7 @@ const Trash = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    data-cy="trash-icon"
   >
     <g opacity="0.4">
       <path
diff --git a/frontend/src/_ui/Icon/solidIcons/Information.jsx b/frontend/src/_ui/Icon/solidIcons/Information.jsx
index 413e3049d9..e98032b19a 100644
--- a/frontend/src/_ui/Icon/solidIcons/Information.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Information.jsx
@@ -8,6 +8,7 @@ const Information = ({ fill = '#C1C8CD', width = '25', className = '', viewBox =
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className={className}
+    data-cy="information-icon"
   >
     <path
       fillRule="evenodd"