diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
index 1480e50da..b9c449995 100644
--- a/frontend/webapp/components/overview/add-entity/index.tsx
+++ b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -90,7 +90,7 @@ const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_O
 
   return (
     <Container ref={dropdownRef}>
-      <StyledButton onClick={handleToggle}>
+      <StyledButton data-id='add-entity' onClick={handleToggle}>
         {isPolling ? <FadeLoader color={theme.colors.primary} /> : <Image src='/icons/common/plus-black.svg' width={16} height={16} alt='Add' />}
         <ButtonText size={14}>{placeholder}</ButtonText>
       </StyledButton>
@@ -98,7 +98,7 @@ const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_O
       {isDropdownOpen && (
         <DropdownListContainer>
           {options.map((option) => (
-            <DropdownItem key={option.id} $selected={currentModal === option.id} onClick={() => handleSelect(option)}>
+            <DropdownItem key={option.id} data-id={`add-${option.id}`} $selected={currentModal === option.id} onClick={() => handleSelect(option)}>
               <Image src={`/icons/overview/${option.id}s.svg`} width={16} height={16} alt={`Add ${option.value}`} />
               <Text size={14}>{option.value}</Text>
             </DropdownItem>
diff --git a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx
index 80eaeaf54..ac4736b17 100644
--- a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/destination-list-item/index.tsx
@@ -92,7 +92,7 @@ export const DestinationListItem: React.FC<DestinationListItemProps> = ({ item,
   };
 
   return (
-    <ListItem id={`destination-${item.type}`} onClick={() => onSelect(item)}>
+    <ListItem data-id={`destination-${item.type}`} onClick={() => onSelect(item)}>
       <ListItemContent>
         <DestinationIconWrapper>
           <Image src={item.imageUrl} width={20} height={20} alt='destination' />
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
index 2009a67c9..2ee92a343 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -44,15 +44,15 @@ const DrawerFooter: React.FC<Props> = ({ isOpen, onSave, saveLabel = 'Save', onC
 
   return (
     <Transition enter={isOpen}>
-      <FooterButton variant='primary' onClick={onSave}>
+      <FooterButton data-id='drawer-save' variant='primary' onClick={onSave}>
         {saveLabel}
       </FooterButton>
-      <FooterButton variant='secondary' onClick={onCancel}>
+      <FooterButton data-id='drawer-cancel' variant='secondary' onClick={onCancel}>
         {cancelLabel}
       </FooterButton>
 
       <AlignRight>
-        <FooterButton variant='tertiary' onClick={onDelete}>
+        <FooterButton data-id='drawer-delete' variant='tertiary' onClick={onDelete}>
           <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           <Text color={theme.text.error} size={14} family='secondary'>
             {deleteLabel}
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index 427002838..ea94656d2 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -100,19 +100,19 @@ const DrawerHeader = forwardRef<DrawerHeaderRef, DrawerHeaderProps>(({ title, ti
       {/* "titleTooltip" is currently used only by sources, if we add tooltip to other entities we will have to define a "hideTitleInput" prop */}
       {isEdit && !titleTooltip && (
         <InputWrapper>
-          <Input autoFocus value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+          <Input data-id='title' autoFocus value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
         </InputWrapper>
       )}
 
       <SectionItemsWrapper $gap={8}>
         {!isEdit && (
-          <EditButton variant='tertiary' onClick={onEdit}>
+          <EditButton data-id='drawer-edit' variant='tertiary' onClick={onEdit}>
             <Image src='/icons/common/edit.svg' alt='Edit' width={16} height={16} />
             <ButtonText>Edit</ButtonText>
           </EditButton>
         )}
-        <CloseButton variant='secondary' onClick={onClose}>
-          <Image src='/icons/common/x.svg' alt='Close' width={11} height={10} />
+        <CloseButton data-id='drawer-close' variant='secondary' onClick={onClose}>
+          <Image src='/icons/common/x.svg' alt='Close' width={12} height={12} />
         </CloseButton>
       </SectionItemsWrapper>
     </HeaderContainer>
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx
index 1b95461fc..2788b5069 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-fast/sources-list/index.tsx
@@ -136,7 +136,7 @@ export const SourcesList: React.FC<Props> = ({
         const hasFilteredSources = !!filtered.length;
 
         return (
-          <Group id={`namespace-${namespace}`} key={`namespace-${namespace}`} $selected={isNamespaceAllSourcesSelected} $isOpen={isNamespaceSelected && hasFilteredSources}>
+          <Group data-id={`namespace-${namespace}`} key={`namespace-${namespace}`} $selected={isNamespaceAllSourcesSelected} $isOpen={isNamespaceSelected && hasFilteredSources}>
             <NamespaceItem $selected={isNamespaceAllSourcesSelected} onClick={() => onSelectNamespace(namespace)}>
               <FlexRow>
                 <Checkbox disabled={namespaceLoaded && !isNamespaceCanSelect} initialValue={isNamespaceAllSourcesSelected} onChange={(bool) => onSelectAll(bool, namespace)} />
diff --git a/frontend/webapp/cypress/e2e/01-connection.cy.ts b/frontend/webapp/cypress/e2e/01-connection.cy.ts
index c9fdd70c0..8b92877ea 100644
--- a/frontend/webapp/cypress/e2e/01-connection.cy.ts
+++ b/frontend/webapp/cypress/e2e/01-connection.cy.ts
@@ -1,3 +1,5 @@
+import { ROUTES } from '../../utils/constants/routes';
+
 describe('Root Connection', () => {
   it('Should fetch a config with GraphQL. A redirect of any kind confirms Frontend + Backend connections.', () => {
     cy.intercept('/graphql').as('gql');
@@ -6,7 +8,7 @@ describe('Root Connection', () => {
     cy.wait('@gql').then(() => {
       cy.location().should((loc) => {
         // If GraphQL failed to fetch the config, the app will remain on "/", thereby failing the test.
-        expect(loc.pathname).to.be.oneOf(['/choose-sources', '/overview']);
+        expect(loc.pathname).to.be.oneOf([ROUTES.CHOOSE_SOURCES, ROUTES.OVERVIEW]);
       });
     });
   });
diff --git a/frontend/webapp/cypress/e2e/02-onboarding.cy.ts b/frontend/webapp/cypress/e2e/02-onboarding.cy.ts
index a3ceafa1f..783e7ee8f 100644
--- a/frontend/webapp/cypress/e2e/02-onboarding.cy.ts
+++ b/frontend/webapp/cypress/e2e/02-onboarding.cy.ts
@@ -1,42 +1,38 @@
 import { ROUTES } from '../../utils/constants/routes';
 
 describe('Onboarding', () => {
-  it('Should contain at least a "default" namespace', () => {
+  beforeEach(() => {
     cy.intercept('/graphql').as('gql');
-    cy.visit(ROUTES.CHOOSE_SOURCES);
+  });
 
+  it('Should contain at least a "default" namespace', () => {
+    cy.visit(ROUTES.CHOOSE_SOURCES);
     cy.wait('@gql').then(() => {
-      expect('#namespace-default').to.exist;
+      cy.get('[data-id=namespace-default]').contains('default').should('exist');
     });
   });
 
   it('Should contain at least a "Jaeger" destination', () => {
-    cy.intercept('/graphql').as('gql');
     cy.visit(ROUTES.CHOOSE_DESTINATION);
-
+    cy.contains('button', 'ADD DESTINATION').click();
     cy.wait('@gql').then(() => {
-      cy.contains('button', 'ADD DESTINATION').click();
-      expect('#destination-jaeger').to.exist;
+      cy.get('[data-id=destination-jaeger]').contains('Jaeger').should('exist');
     });
   });
 
   it('Should autocomplete the "Jaeger" destination', () => {
-    cy.intercept('/graphql').as('gql');
     cy.visit(ROUTES.CHOOSE_DESTINATION);
-
+    cy.contains('button', 'ADD DESTINATION').click();
     cy.wait('@gql').then(() => {
-      cy.contains('button', 'ADD DESTINATION').click();
-      cy.get('#destination-jaeger').click();
-      expect('#JAEGER_URL').to.not.be.empty;
+      cy.get('[data-id=destination-jaeger]').contains('Jaeger').click();
+      expect('[data-id=JAEGER_URL]').to.not.be.empty;
     });
   });
 
   it('Should allow the user to pass every step, and end-up on the "Overview" page.', () => {
     cy.visit(ROUTES.CHOOSE_SOURCES);
-
     cy.contains('button', 'NEXT').click();
     cy.location('pathname').should('eq', ROUTES.CHOOSE_DESTINATION);
-
     cy.contains('button', 'DONE').click();
     cy.location('pathname').should('eq', ROUTES.OVERVIEW);
   });
diff --git a/frontend/webapp/cypress/e2e/05-actions.cy.ts b/frontend/webapp/cypress/e2e/05-actions.cy.ts
new file mode 100644
index 000000000..551c4c182
--- /dev/null
+++ b/frontend/webapp/cypress/e2e/05-actions.cy.ts
@@ -0,0 +1,103 @@
+import { ROUTES } from '../../utils/constants/routes';
+
+// The number of CRDs that exist in the cluster before running any tests should be 0.
+// Tests will fail if you have existing CRDs in the cluster.
+// If you have to run tests locally, make sure to clean up the cluster before running the tests.
+
+describe('Actions CRUD', () => {
+  const namespace = 'odigos-system';
+  const crdName = 'piimaskings.actions.odigos.io';
+  const noResourcesFound = `No resources found in ${namespace} namespace.`;
+
+  beforeEach(() => {
+    cy.intercept('/graphql').as('gql');
+  });
+
+  it('Should create a CRD in the cluster', () => {
+    cy.visit(ROUTES.OVERVIEW);
+
+    cy.exec(`kubectl get ${crdName} -n ${namespace} | awk 'NR>1 {print $1}'`).then((crdListBefore) => {
+      expect(crdListBefore.stderr).to.eq(noResourcesFound);
+      expect(crdListBefore.stdout).to.eq('');
+
+      const crdIdsBefore = crdListBefore.stdout.split('\n').filter((str) => !!str);
+      expect(crdIdsBefore.length).to.eq(0);
+
+      cy.get('[data-id=add-entity]').click();
+      cy.get('[data-id=add-action]').click();
+      cy.get('[data-id=modal-Add-Action]').should('exist');
+      cy.get('[data-id=modal-Add-Action]').find('input').should('have.attr', 'placeholder', 'Type to search...').click();
+      cy.get('[data-id=option-pii-masking]').click();
+      cy.get('button').contains('DONE').click();
+
+      cy.wait('@gql').then(() => {
+        cy.exec(`kubectl get ${crdName} -n ${namespace} | awk 'NR>1 {print $1}'`).then((crdListAfter) => {
+          expect(crdListAfter.stderr).to.eq('');
+          expect(crdListAfter.stdout).to.not.be.empty;
+
+          const crdIdsAfter = crdListAfter.stdout.split('\n').filter((str) => !!str);
+          expect(crdIdsAfter.length).to.eq(1);
+        });
+      });
+    });
+  });
+
+  it('Should update the CRD in the cluster', () => {
+    cy.visit(ROUTES.OVERVIEW);
+
+    const node = cy.contains('[data-id=action-0]', 'PiiMasking');
+    expect(node).to.exist;
+    node.click();
+
+    cy.get('[data-id=drawer]').should('exist');
+    cy.get('button[data-id=drawer-edit]').click();
+    cy.get('input[data-id=title]').clear().type('Cypress Test');
+    cy.get('button[data-id=drawer-save]').click();
+    cy.get('button[data-id=drawer-close]').click();
+
+    cy.wait('@gql').then(() => {
+      cy.exec(`kubectl get ${crdName} -n ${namespace} | awk 'NR>1 {print $1}'`).then((crdList) => {
+        expect(crdList.stderr).to.eq('');
+        expect(crdList.stdout).to.not.be.empty;
+
+        const crdIds = crdList.stdout.split('\n').filter((str) => !!str);
+        expect(crdIds.length).to.eq(1);
+
+        cy.exec(`kubectl get ${crdName} ${crdIds[0]} -n ${namespace} -o json`).then((crd) => {
+          expect(crd.stderr).to.eq('');
+          expect(crd.stdout).to.not.be.empty;
+
+          const parsed = JSON.parse(crd.stdout);
+          const { spec } = parsed?.items?.[0] || parsed || {};
+
+          expect(spec).to.not.be.empty;
+          expect(spec.actionName).to.eq('Cypress Test');
+        });
+      });
+    });
+  });
+
+  it('Should delete the CRD from the cluster', () => {
+    cy.visit(ROUTES.OVERVIEW);
+
+    const node = cy.contains('[data-id=action-0]', 'PiiMasking');
+    expect(node).to.exist;
+    node.click();
+
+    cy.get('[data-id=drawer]').should('exist');
+    cy.get('button[data-id=drawer-edit]').click();
+    cy.get('button[data-id=drawer-delete]').click();
+    cy.get('[data-id=modal]').contains('Delete action').should('exist');
+    cy.get('button[data-id=approve]').click();
+
+    cy.wait('@gql').then(() => {
+      cy.exec(`kubectl get ${crdName} -n ${namespace} | awk 'NR>1 {print $1}'`).then((crdList) => {
+        expect(crdList.stderr).to.eq(noResourcesFound);
+        expect(crdList.stdout).to.eq('');
+
+        const crdIds = crdList.stdout.split('\n').filter((str) => !!str);
+        expect(crdIds.length).to.eq(0);
+      });
+    });
+  });
+});
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 74bf32836..b37f2a019 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -119,7 +119,7 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, renderIcon = true,
   const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
-    <OptionItemContainer $isActive={isActive} $isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
+    <OptionItemContainer data-id={`option-${option.id}`} $isActive={isActive} $isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
       {option.icon && renderIcon && <Icon src={option.icon} alt={option.label} />}
 
       <OptionContent>
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index fef39cd29..ddc16acab 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -43,7 +43,7 @@ export const Drawer: React.FC<Props> = ({ isOpen, onClose, position = 'right', w
     <>
       <Overlay hidden={!isOpen} onClick={onClose} />
 
-      <Transition enter={isOpen} $position={position} $width={width}>
+      <Transition data-id='drawer' enter={isOpen} $position={position} $width={width}>
         {children}
       </Transition>
     </>,
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 3930769d9..e4d6b9b42 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -144,7 +144,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
           <StyledInput
             ref={ref} // Pass ref to the StyledInput
-            id={name}
+            data-id={name}
             name={name}
             $hasIcon={!!icon || isSecret}
             value={value}
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index ea24d27fa..9bba9b66a 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -96,12 +96,12 @@ const Modal: React.FC<Props> = ({ isOpen, noOverlay, header, actionComponent, on
     <>
       <Overlay hidden={!isOpen} onClick={onClose} style={{ opacity: noOverlay ? 0 : 1 }} />
 
-      <Transition enter={isOpen}>
+      <Transition data-id={`modal${header ? `-${header.title.replaceAll(' ', '-')}` : ''}`} enter={isOpen}>
         {header && (
           <ModalHeader>
             <ModalCloseButton onClick={onClose}>
               <Image src='/icons/common/x.svg' alt='close' width={15} height={12} />
-              <CancelText>{'Cancel'}</CancelText>
+              <CancelText>Cancel</CancelText>
             </ModalCloseButton>
             <ModalTitleContainer>
               <ModalTitle>{header.title}</ModalTitle>
diff --git a/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx b/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx
index bc374b675..bd8e76109 100644
--- a/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx
@@ -81,10 +81,10 @@ export const WarningModal: React.FC<Props> = ({ isOpen, noOverlay, title = '', d
         )}
 
         <Footer>
-          <FooterButton variant={approveButton.variant || 'primary'} onClick={onApprove}>
+          <FooterButton data-id='approve' variant={approveButton.variant || 'primary'} onClick={onApprove}>
             {approveButton.text}
           </FooterButton>
-          <FooterButton variant={denyButton.variant || 'secondary'} onClick={onDeny}>
+          <FooterButton data-id='deny' variant={denyButton.variant || 'secondary'} onClick={onDeny}>
             {denyButton.text}
           </FooterButton>
         </Footer>
diff --git a/frontend/webapp/reuseable-components/no-data-found/index.tsx b/frontend/webapp/reuseable-components/no-data-found/index.tsx
index 91127dbbe..9d847addf 100644
--- a/frontend/webapp/reuseable-components/no-data-found/index.tsx
+++ b/frontend/webapp/reuseable-components/no-data-found/index.tsx
@@ -34,7 +34,7 @@ const Container = styled.div`
 
 const NoDataFound: React.FC<NoDataFoundProps> = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => {
   return (
-    <Container id='no-data'>
+    <Container>
       <TitleWrapper>
         <Image src='/icons/common/no-data-found.svg' alt='no-found' width={16} height={16} />
         <Title>{title}</Title>
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
index fc71d54e8..180c460d3 100644
--- a/frontend/webapp/reuseable-components/textarea/index.tsx
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -97,7 +97,7 @@ const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, requi
       <InputWrapper $disabled={props.disabled} $hasError={!!errorMessage} $isActive={!!props.autoFocus}>
         <StyledTextArea
           ref={ref}
-          id={name}
+          data-id={name}
           name={name}
           onFocus={resize}
           onBlur={resize}