diff --git a/src/web/components/bar/compliancebar.jsx b/src/web/components/bar/compliancebar.jsx
index 9f17e89fc9..9aa4889ddf 100644
--- a/src/web/components/bar/compliancebar.jsx
+++ b/src/web/components/bar/compliancebar.jsx
@@ -30,7 +30,7 @@ const ComplianceBar = ({compliance, toolTip}) => {
   const toolTipText = isDefined(toolTip) ? toolTip : title;
 
   return (
-    <ProgressBar title={toolTipText} progress={100} background={background}>
+    <ProgressBar title={toolTipText} progress={100} background={background} data-testid="compliance-bar">
       {title}
     </ProgressBar>
   );
diff --git a/src/web/components/bar/compliancestatusbar.jsx b/src/web/components/bar/compliancestatusbar.jsx
index 16917b57f2..1f24660a09 100644
--- a/src/web/components/bar/compliancestatusbar.jsx
+++ b/src/web/components/bar/compliancestatusbar.jsx
@@ -30,6 +30,7 @@ const ComplianceStatusBar = ({complianceStatus}) => {
       progress={complianceStatus}
       background={Theme.statusRunGreen}
       boxBackground={boxBackground}
+      data-testid="compliance-status-bar"
     >
       {text}
     </ProgressBar>
diff --git a/src/web/components/bar/severitybar.jsx b/src/web/components/bar/severitybar.jsx
index 3fa6dca090..676e593242 100644
--- a/src/web/components/bar/severitybar.jsx
+++ b/src/web/components/bar/severitybar.jsx
@@ -60,7 +60,7 @@ const SeverityBar = ({severity, toolTip}) => {
   const toolTipText = isDefined(toolTip) ? toolTip : title;
 
   return (
-    <ProgressBar title={toolTipText} progress={fill} background={type}>
+    <ProgressBar title={toolTipText} progress={fill} background={type} data-testid="severitybar">
       {text}
     </ProgressBar>
   );
diff --git a/src/web/components/bar/statusbar.jsx b/src/web/components/bar/statusbar.jsx
index fe8371e8bc..bd9eb2870a 100644
--- a/src/web/components/bar/statusbar.jsx
+++ b/src/web/components/bar/statusbar.jsx
@@ -79,8 +79,8 @@ const StatusBar = ({status = 'Unknown', progress = '0'}) => {
       : getTranslatableTaskStatus(status);
 
   return (
-    <ProgressBar title={title} progress={progress} background={background}>
-      <Span>{text}</Span>
+    <ProgressBar title={title} progress={progress} background={background} data-testid={`progress-bar-${status.toLowerCase()}`}>
+      <Span data-testid="statusbar-text">{text}</Span>
     </ProgressBar>
   );
 };
diff --git a/src/web/components/certinfo/certinfo.jsx b/src/web/components/certinfo/certinfo.jsx
index 85ab6fa4ed..d7c6b7bbe3 100644
--- a/src/web/components/certinfo/certinfo.jsx
+++ b/src/web/components/certinfo/certinfo.jsx
@@ -24,15 +24,15 @@ import TableRow from 'web/components/table/row';
 const CertInfo = ({info}) => {
   const {activationTime, expirationTime, issuer, md5_fingerprint} = info;
   return (
-    <InfoTable>
+    <InfoTable data-testid="cert-info-table">
       <colgroup>
         <Col width="10%" />
         <Col width="90%" />
       </colgroup>
       <TableBody>
-        <TableRow>
-          <TableData>{_('Activation')}</TableData>
-          <TableData>
+        <TableRow data-testid="cert-info-activation-row">
+          <TableData data-testid="cert-info-activation-label">{_('Activation')}</TableData>
+          <TableData data-testid="cert-info-activation-data">
             {isDefined(activationTime) ? (
               <DateTime date={activationTime} />
             ) : (
@@ -41,9 +41,9 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Expiration')}</TableData>
-          <TableData>
+        <TableRow data-testid="cert-info-expiration-row">
+          <TableData data-testid="cert-info-expiration-label">{_('Expiration')}</TableData>
+          <TableData data-testid="cert-info-expiration-data">
             {isDefined(expirationTime) ? (
               <DateTime date={expirationTime} />
             ) : (
@@ -52,14 +52,14 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('MD5 Fingerprint')}</TableData>
-          <TableData>{md5_fingerprint}</TableData>
+        <TableRow data-testid="cert-info-md5-row">
+          <TableData data-testid="cert-info-md5-label">{_('MD5 Fingerprint')}</TableData>
+          <TableData data-testid="cert-info-md5-data">{md5_fingerprint}</TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Issuer')}</TableData>
-          <TableData>{issuer}</TableData>
+        <TableRow data-testid="cert-info-issuer-row">
+          <TableData data-testid="cert-info-issuer-label">{_('Issuer')}</TableData>
+          <TableData data-testid="cert-info-issuer-data">{issuer}</TableData>
         </TableRow>
       </TableBody>
     </InfoTable>
diff --git a/src/web/components/comment/comment.jsx b/src/web/components/comment/comment.jsx
index 45b69547d9..d56c6d5319 100644
--- a/src/web/components/comment/comment.jsx
+++ b/src/web/components/comment/comment.jsx
@@ -17,7 +17,7 @@ const Comment = ({text, children}) => {
   if (!isDefined(text)) {
     return null;
   }
-  return <div className="comment">{text}</div>;
+  return <div className="comment" data-testid="comment">{text}</div>;
 };
 
 Comment.propTypes = {
diff --git a/src/web/components/dashboard/controls.jsx b/src/web/components/dashboard/controls.jsx
index 72ff0f9eb5..846d67c66b 100644
--- a/src/web/components/dashboard/controls.jsx
+++ b/src/web/components/dashboard/controls.jsx
@@ -119,6 +119,7 @@ export class DashboardControls extends React.Component {
                 : _('Dashboard limit reached')
             }
             onClick={canAdd ? this.handleNewClick : undefined}
+            data-testid="add-dashboard-display"
           />
           <ResetIcon
             title={_('Reset to Defaults')}
diff --git a/src/web/components/dialog/closebutton.jsx b/src/web/components/dialog/closebutton.jsx
index 18bf8b11fe..19c69e4be9 100644
--- a/src/web/components/dialog/closebutton.jsx
+++ b/src/web/components/dialog/closebutton.jsx
@@ -48,6 +48,7 @@ const CloseButton = ({title = _('Close'), size = 'medium', ...props}) => {
       $lineHeight={height}
       title={title}
       {...props}
+      data-testid="close-button"
     >
       ×{/* Javascript unicode: \u00D7 */}
     </StyledCloseButton>
diff --git a/src/web/components/dialog/composercontent.jsx b/src/web/components/dialog/composercontent.jsx
index 453394c137..5946e7807d 100644
--- a/src/web/components/dialog/composercontent.jsx
+++ b/src/web/components/dialog/composercontent.jsx
@@ -64,6 +64,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="include-overrides"
           name="includeOverrides"
           checked={includeOverrides}
           checkedValue={YES_VALUE}
@@ -72,6 +73,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="include-tls-cert"
           disabled={true}
           name="includeTlsCertificates"
           checked={true}
diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
index d135ff35d8..d250ccd85e 100644
--- a/src/web/components/dialog/confirmationdialog.jsx
+++ b/src/web/components/dialog/confirmationdialog.jsx
@@ -31,6 +31,7 @@ const ConfirmationDialog = ({
 
   return (
     <Dialog
+      data-testid="confirmation-dialog"
       width={width}
       onClose={onClose}
       title={title}
diff --git a/src/web/components/dialog/error.jsx b/src/web/components/dialog/error.jsx
index 63fd16d290..c5e0807320 100644
--- a/src/web/components/dialog/error.jsx
+++ b/src/web/components/dialog/error.jsx
@@ -50,7 +50,7 @@ const DialogError = ({error, onCloseClick}) => {
       >
         {error}
       </span>
-      <DialogCloseButton onClick={onCloseClick} title={_('Close')} />
+      <DialogCloseButton onClick={onCloseClick} title={_('Close')} data-testid="error-close-button"/>
     </StyledLayout>
   );
 };
diff --git a/src/web/components/form/DatePicker.jsx b/src/web/components/form/DatePicker.jsx
index 0a45ce7213..fb5e6b44f9 100644
--- a/src/web/components/form/DatePicker.jsx
+++ b/src/web/components/form/DatePicker.jsx
@@ -31,6 +31,7 @@ const DatePickerComponent = (
 
   return (
     <DatePickerInput
+      data-testid="datepicker-input"
       disabled={disabled}
       locale={getLocale()}
       value={value.toDate()}
diff --git a/src/web/components/form/button.jsx b/src/web/components/form/button.jsx
index 71e90fc3d6..3b71489593 100644
--- a/src/web/components/form/button.jsx
+++ b/src/web/components/form/button.jsx
@@ -30,6 +30,7 @@ const Button = ({
   });
   return (
     <OpenSightButton
+      data-testid="opensight-button"
       {...other}
       disabled={disabled}
       name={name}
diff --git a/src/web/components/form/checkbox.jsx b/src/web/components/form/checkbox.jsx
index b221f79414..bce4e7aa5f 100644
--- a/src/web/components/form/checkbox.jsx
+++ b/src/web/components/form/checkbox.jsx
@@ -50,6 +50,7 @@ const Checkbox = ({
   );
   return (
     <OpenSightCheckbox
+      data-testid="opensight-checkbox"
       {...props}
       label={title}
       title={toolTipTitle}
diff --git a/src/web/components/form/filefield.jsx b/src/web/components/form/filefield.jsx
index 675cf68d8c..e8f4db1b7b 100644
--- a/src/web/components/form/filefield.jsx
+++ b/src/web/components/form/filefield.jsx
@@ -23,6 +23,7 @@ const FileField = ({disabled, grow, name, title, onChange, ...props}) => {
 
   return (
     <FileInput
+      data-testid="file-input"
       {...props}
       styles={{root: {flexGrow: grow}}}
       label={title}
diff --git a/src/web/components/form/multiselect.jsx b/src/web/components/form/multiselect.jsx
index d99ba8ee74..1ff22ba205 100644
--- a/src/web/components/form/multiselect.jsx
+++ b/src/web/components/form/multiselect.jsx
@@ -75,6 +75,7 @@ const MultiSelect = ({
   if (isLoading) {
     return (
       <TextInput
+        data-testid="text-input"
         styles={{root: {flexGrow: grow}}}
         placeholder={_('Loading...')}
         readOnly={true}
@@ -84,6 +85,7 @@ const MultiSelect = ({
   }
   return (
     <StyledMultiSelect
+      data-testid="multi-select"
       {...props}
       styles={{root: {flexGrow: grow}}}
       disabled={disabled || !items?.length}
diff --git a/src/web/components/form/numberfield.jsx b/src/web/components/form/numberfield.jsx
index 1bd48f1175..bdfe1790ee 100644
--- a/src/web/components/form/numberfield.jsx
+++ b/src/web/components/form/numberfield.jsx
@@ -81,6 +81,7 @@ const NumberField = forwardRef(
 
     return (
       <StyledNumberInput
+        data-testid="number-input"
         {...props}
         ref={ref}
         allowDecimal={type === 'float'}
diff --git a/src/web/components/form/passwordfield.jsx b/src/web/components/form/passwordfield.jsx
index 0f7d2f48f0..4484571cb2 100644
--- a/src/web/components/form/passwordfield.jsx
+++ b/src/web/components/form/passwordfield.jsx
@@ -29,6 +29,7 @@ const PasswordField = ({
   const handleChange = useValueChange({onChange, name, disabled});
   return (
     <PasswordInput
+      data-testid="password-input"
       {...props}
       error={isDefined(errorContent) && `${errorContent}`}
       styles={{root: {flexGrow: grow}}}
diff --git a/src/web/components/form/textfield.jsx b/src/web/components/form/textfield.jsx
index 7dc5e73e51..824283d785 100644
--- a/src/web/components/form/textfield.jsx
+++ b/src/web/components/form/textfield.jsx
@@ -29,6 +29,7 @@ const TextField = ({
   const handleChange = useValueChange({onChange, disabled, name});
   return (
     <Input
+      data-testid="form-input"
       {...props}
       styles={{root: {flexGrow: grow}}}
       autoComplete={autoComplete}
diff --git a/src/web/components/form/yesnoradio.jsx b/src/web/components/form/yesnoradio.jsx
index dc6f7497ee..8432e09811 100644
--- a/src/web/components/form/yesnoradio.jsx
+++ b/src/web/components/form/yesnoradio.jsx
@@ -33,6 +33,7 @@ const YesNoRadio = ({
       convert={convert}
       onChange={onChange}
       disabled={disabled}
+      data-testid="radio-yes"
     />
     <Radio
       title={_('No')}
@@ -42,6 +43,7 @@ const YesNoRadio = ({
       convert={convert}
       onChange={onChange}
       disabled={disabled}
+      data-testid="radio-no"
     />
   </Row>
 );
diff --git a/src/web/components/icon/XIcon.jsx b/src/web/components/icon/XIcon.jsx
index abca83a7f4..aa46c4e6c9 100644
--- a/src/web/components/icon/XIcon.jsx
+++ b/src/web/components/icon/XIcon.jsx
@@ -10,7 +10,7 @@ import {X as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const XIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="X-icon"/>
 ));
 
 export default XIcon;
diff --git a/src/web/components/icon/addtoassetsicon.jsx b/src/web/components/icon/addtoassetsicon.jsx
index 52c9191e09..2f367ccc36 100644
--- a/src/web/components/icon/addtoassetsicon.jsx
+++ b/src/web/components/icon/addtoassetsicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/add_to_assets.svg';
 
-const AddToAssetsIcon = withSvgIcon()(Icon);
+const AddToAssetsIconComponent = withSvgIcon()(Icon);
+
+const AddToAssetsIcon = props => (
+  <AddToAssetsIconComponent {...props} data-testid="add-to-assets-icon" />
+);
 
 export default AddToAssetsIcon;
 
diff --git a/src/web/components/icon/alerticon.jsx b/src/web/components/icon/alerticon.jsx
index 9bb5e42104..a5339feb29 100644
--- a/src/web/components/icon/alerticon.jsx
+++ b/src/web/components/icon/alerticon.jsx
@@ -9,7 +9,7 @@ import {Megaphone as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AlertIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="alert-icon"/>
 ));
 
 export default AlertIcon;
diff --git a/src/web/components/icon/alterableicon.jsx b/src/web/components/icon/alterableicon.jsx
index b01c0f74a6..14bc8242cf 100644
--- a/src/web/components/icon/alterableicon.jsx
+++ b/src/web/components/icon/alterableicon.jsx
@@ -9,7 +9,7 @@ import {FilePenLine as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AlterableIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="alterable-icon"/>
 ));
 
 export default AlterableIcon;
diff --git a/src/web/components/icon/arrowicon.jsx b/src/web/components/icon/arrowicon.jsx
index a2b97cfe53..c174c1aa28 100644
--- a/src/web/components/icon/arrowicon.jsx
+++ b/src/web/components/icon/arrowicon.jsx
@@ -44,7 +44,7 @@ const ArrowIcon = ({down = false, isLoading = false, size, ...props}) => {
     icon = <Loading />;
   }
   return (
-    <Styled $height={height} $width={width} $lineHeight={height} {...props}>
+    <Styled $height={height} $width={width} $lineHeight={height} {...props} data-testid="arrow-icon">
       {icon}
     </Styled>
   );
diff --git a/src/web/components/icon/auditicon.jsx b/src/web/components/icon/auditicon.jsx
index 037a813d85..87e0118b50 100644
--- a/src/web/components/icon/auditicon.jsx
+++ b/src/web/components/icon/auditicon.jsx
@@ -10,7 +10,7 @@ import {ClipboardCheck as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AuditIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="audit-icon"/>
 ));
 
 export default AuditIcon;
diff --git a/src/web/components/icon/calendaricon.jsx b/src/web/components/icon/calendaricon.jsx
index f3a9e0dea3..75e1b1d128 100644
--- a/src/web/components/icon/calendaricon.jsx
+++ b/src/web/components/icon/calendaricon.jsx
@@ -9,7 +9,7 @@ import {Calendar as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const CalendarIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="calendar-icon"/>
 ));
 
 export default CalendarIcon;
diff --git a/src/web/components/icon/certbundadvicon.jsx b/src/web/components/icon/certbundadvicon.jsx
index 3ee9e3e936..1549e55f71 100644
--- a/src/web/components/icon/certbundadvicon.jsx
+++ b/src/web/components/icon/certbundadvicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cert_bund_adv.svg';
 
-const CertBundAdvIcon = withSvgIcon()(Icon);
+const CertBundAdvIconComponent = withSvgIcon()(Icon);
+
+const CertBundAdvIcon = props => (
+  <CertBundAdvIconComponent {...props} data-testid="cert-bund-adv-icon" />
+);
 
 export default CertBundAdvIcon;
 
diff --git a/src/web/components/icon/cloneicon.jsx b/src/web/components/icon/cloneicon.jsx
index ade92827c7..b7946177e2 100644
--- a/src/web/components/icon/cloneicon.jsx
+++ b/src/web/components/icon/cloneicon.jsx
@@ -7,7 +7,9 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/clone.svg';
 
-const CloneIcon = withSvgIcon()(Icon);
+const CloneIconComponent = withSvgIcon()(Icon);
+
+const CloneIcon = props => <CloneIconComponent {...props} data-testid="clone-icon" />;
 
 export default CloneIcon;
 
diff --git a/src/web/components/icon/cpeicon.jsx b/src/web/components/icon/cpeicon.jsx
index 0685c45fb3..0dca290a8e 100644
--- a/src/web/components/icon/cpeicon.jsx
+++ b/src/web/components/icon/cpeicon.jsx
@@ -18,7 +18,7 @@ const CpeIcon = ({name, ...props}) => {
 
   const icon = isDefined(cpe) ? cpe.icon : 'cpe/other.svg';
 
-  return <Img {...props} width="16px" src={icon} />;
+  return <Img {...props} width="16px" src={icon} data-testid="cpe-icon"/>;
 };
 
 CpeIcon.propTypes = {
diff --git a/src/web/components/icon/cpelogoicon.jsx b/src/web/components/icon/cpelogoicon.jsx
index e62566a68d..c01f8982b2 100644
--- a/src/web/components/icon/cpelogoicon.jsx
+++ b/src/web/components/icon/cpelogoicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cpe.svg';
 
-const CpeLogoIcon = withSvgIcon()(Icon);
+const CpeLogoIconComponent = withSvgIcon()(Icon);
+
+const CpeLogoIcon = props => (
+  <CpeLogoIconComponent {...props} data-testid="cpe-logo-icon" />
+);
 
 export default CpeLogoIcon;
 
diff --git a/src/web/components/icon/credentialicon.jsx b/src/web/components/icon/credentialicon.jsx
index e994b2f5f5..aea0206854 100644
--- a/src/web/components/icon/credentialicon.jsx
+++ b/src/web/components/icon/credentialicon.jsx
@@ -10,7 +10,7 @@ import {KeyRound as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const CredentialIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="credential-icon"/>
 ));
 
 export default CredentialIcon;
diff --git a/src/web/components/icon/cveicon.jsx b/src/web/components/icon/cveicon.jsx
index c9b468bce5..ab1ca35eb9 100644
--- a/src/web/components/icon/cveicon.jsx
+++ b/src/web/components/icon/cveicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cve.svg';
 
-const CveIcon = withSvgIcon()(Icon);
+const CveIconComponent = withSvgIcon()(Icon);
+
+const CveIcon = props => (
+  <CveIconComponent {...props} data-testid="cve-icon" />
+);
 
 export default CveIcon;
 
diff --git a/src/web/components/icon/cvssicon.jsx b/src/web/components/icon/cvssicon.jsx
index 50ea4a936c..664cdd26a6 100644
--- a/src/web/components/icon/cvssicon.jsx
+++ b/src/web/components/icon/cvssicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cvss_calculator.svg';
 
-const CvssIcon = withSvgIcon()(Icon);
+const CvssIconComponent = withSvgIcon()(Icon);
+
+const CvssIcon = props => (
+  <CvssIconComponent {...props} data-testid="cvss-icon" />
+);
 
 export default CvssIcon;
 
diff --git a/src/web/components/icon/dashboardicon.jsx b/src/web/components/icon/dashboardicon.jsx
index 4fc71f9946..46261b81cf 100644
--- a/src/web/components/icon/dashboardicon.jsx
+++ b/src/web/components/icon/dashboardicon.jsx
@@ -10,7 +10,7 @@ import {BarChart3 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DashboardIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="dashboard-icon"/>
 ));
 
 export default DashboardIcon;
diff --git a/src/web/components/icon/deleteicon.jsx b/src/web/components/icon/deleteicon.jsx
index 5ede4abb64..db32418620 100644
--- a/src/web/components/icon/deleteicon.jsx
+++ b/src/web/components/icon/deleteicon.jsx
@@ -20,7 +20,7 @@ import {CircleX as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DeleteSvgIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="delete-icon"/>
 ));
 
 const DeleteIcon = ({selectionType, title, ...props}) => {
diff --git a/src/web/components/icon/deltadifferenceicon.jsx b/src/web/components/icon/deltadifferenceicon.jsx
index 5ba13f0d03..ad85c99f1e 100644
--- a/src/web/components/icon/deltadifferenceicon.jsx
+++ b/src/web/components/icon/deltadifferenceicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/delta_second.svg';
 
-const DeltaDifferenceIcon = withSvgIcon()(Icon);
+const DeltaDifferenceIconComponent = withSvgIcon()(Icon);
+
+const DeltaDifferenceIcon = props => (
+  <DeltaDifferenceIconComponent {...props} data-testid="delta-difference-icon" />
+);
 
 export default DeltaDifferenceIcon;
 
diff --git a/src/web/components/icon/deltaicon.jsx b/src/web/components/icon/deltaicon.jsx
index a9ed003fa5..49ab43887b 100644
--- a/src/web/components/icon/deltaicon.jsx
+++ b/src/web/components/icon/deltaicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/delta.svg';
 
-const DeltaIcon = withSvgIcon()(Icon);
+const DeltaIconComponent = withSvgIcon()(Icon);
+
+const DeltaIcon = props => (
+  <DeltaIconComponent {...props} data-testid="delta-icon" />
+);
 
 export default DeltaIcon;
 
diff --git a/src/web/components/icon/deltasecondicon.jsx b/src/web/components/icon/deltasecondicon.jsx
index 952f8d7520..a7af4ee730 100644
--- a/src/web/components/icon/deltasecondicon.jsx
+++ b/src/web/components/icon/deltasecondicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/delta_second.svg';
 
-const DeltaSecondIcon = withSvgIcon()(Icon);
+const DeltaSecondIconComponent = withSvgIcon()(Icon);
+
+const DeltaSecondIcon = props => (
+  <DeltaSecondIconComponent {...props} data-testid="delta-second-icon" />
+);
 
 export default DeltaSecondIcon;
 
diff --git a/src/web/components/icon/detailsicon.jsx b/src/web/components/icon/detailsicon.jsx
index ba1f8dc352..4ae85a52dc 100644
--- a/src/web/components/icon/detailsicon.jsx
+++ b/src/web/components/icon/detailsicon.jsx
@@ -12,7 +12,7 @@ import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DetailsIcon = props => (
   <SvgIcon {...props}>
-    <IconWithStrokeWidth IconComponent={Icon} {...props} />
+    <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="details-icon"/>
   </SvgIcon>
 );
 
diff --git a/src/web/components/icon/dfncertadvicon.jsx b/src/web/components/icon/dfncertadvicon.jsx
index 15293b1a0f..1611488804 100644
--- a/src/web/components/icon/dfncertadvicon.jsx
+++ b/src/web/components/icon/dfncertadvicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dfn_cert_adv.svg';
 
-const DfnCertAdvIcon = withSvgIcon()(Icon);
+const DfnCertAdvIconComponent = withSvgIcon()(Icon);
+
+const DfnCertAdvIcon = props => (
+  <DfnCertAdvIconComponent {...props} data-testid="dfn-cert-adv-icon" />
+);
 
 export default DfnCertAdvIcon;
 
diff --git a/src/web/components/icon/disableicon.jsx b/src/web/components/icon/disableicon.jsx
index 646a483b70..b56518abd3 100644
--- a/src/web/components/icon/disableicon.jsx
+++ b/src/web/components/icon/disableicon.jsx
@@ -10,7 +10,7 @@ import {PowerOff as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DisableIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="disable-icon"/>
 ));
 
 export default DisableIcon;
diff --git a/src/web/components/icon/downloadcsvicon.jsx b/src/web/components/icon/downloadcsvicon.jsx
index 44eb7eae3c..29f4631ee3 100644
--- a/src/web/components/icon/downloadcsvicon.jsx
+++ b/src/web/components/icon/downloadcsvicon.jsx
@@ -9,10 +9,14 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dl_csv.svg';
 
-const DownloadCsvIcon = withSvgIcon({
+const DownloadCsvIconComponent = withSvgIcon({
   title: _('Download CSV'),
 })(Icon);
 
+const DownloadCsvIcon = props => (
+  <DownloadCsvIconComponent {...props} data-testid="download-csv-icon" />
+);
+
 export default DownloadCsvIcon;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/icon/downloaddebicon.jsx b/src/web/components/icon/downloaddebicon.jsx
index 6300bc48d8..3a20cb7341 100644
--- a/src/web/components/icon/downloaddebicon.jsx
+++ b/src/web/components/icon/downloaddebicon.jsx
@@ -6,7 +6,11 @@
 import Icon from './svg/dl_deb.svg';
 import withSvgIcon from './withSvgIcon';
 
-const DownloadDebIcon = withSvgIcon()(Icon);
+const DownloadDebIconComponent = withSvgIcon()(Icon);
+
+const DownloadDebIcon = props => (
+  <DownloadDebIconComponent {...props} data-testid="download-deb-icon" />
+);
 
 export default DownloadDebIcon;
 
diff --git a/src/web/components/icon/downloadexeicon.jsx b/src/web/components/icon/downloadexeicon.jsx
index 3c350a1814..f2afa0af19 100644
--- a/src/web/components/icon/downloadexeicon.jsx
+++ b/src/web/components/icon/downloadexeicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dl_exe.svg';
 
-const DownloadExeIcon = withSvgIcon()(Icon);
+const DownloadExeIconComponent = withSvgIcon()(Icon);
+
+const DownloadExeIcon = props => (
+  <DownloadExeIconComponent {...props} data-testid="download-exe-icon" />
+);
 
 export default DownloadExeIcon;
 
diff --git a/src/web/components/icon/downloadicon.jsx b/src/web/components/icon/downloadicon.jsx
index b56f058abb..f19bc41724 100644
--- a/src/web/components/icon/downloadicon.jsx
+++ b/src/web/components/icon/downloadicon.jsx
@@ -11,7 +11,7 @@ import {Download as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DownloadIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="download-icon"/>
 ));
 
 export default DownloadIcon;
diff --git a/src/web/components/icon/downloadkeyicon.jsx b/src/web/components/icon/downloadkeyicon.jsx
index 977059c6c5..7c4d4f046f 100644
--- a/src/web/components/icon/downloadkeyicon.jsx
+++ b/src/web/components/icon/downloadkeyicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dl_key.svg';
 
-const DownloadKeyIcon = withSvgIcon()(Icon);
+const DownloadKeyIconComponent = withSvgIcon()(Icon);
+
+const DownloadKeyIcon = props => (
+  <DownloadKeyIconComponent {...props} data-testid="download-key-icon" />
+);
 
 export default DownloadKeyIcon;
 
diff --git a/src/web/components/icon/downloadrpmicon.jsx b/src/web/components/icon/downloadrpmicon.jsx
index 31e857f9b3..5b6ce8bba6 100644
--- a/src/web/components/icon/downloadrpmicon.jsx
+++ b/src/web/components/icon/downloadrpmicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dl_rpm.svg';
 
-const DownloadRpmIcon = withSvgIcon()(Icon);
+const DownloadRpmIconComponent = withSvgIcon()(Icon);
+
+const DownloadRpmIcon = props => (
+  <DownloadRpmIconComponent {...props} data-testid="download-rpm-icon" />
+);
 
 export default DownloadRpmIcon;
 
diff --git a/src/web/components/icon/downloadsvgicon.jsx b/src/web/components/icon/downloadsvgicon.jsx
index 655dad079f..374a8e714c 100644
--- a/src/web/components/icon/downloadsvgicon.jsx
+++ b/src/web/components/icon/downloadsvgicon.jsx
@@ -9,10 +9,13 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/dl_svg.svg';
 
-const DownloadSvgIcon = withSvgIcon({
+const DownloadSvgIconComponent = withSvgIcon({
   title: _('Download SVG'),
 })(Icon);
 
+const DownloadSvgIcon = props => (
+  <DownloadSvgIconComponent {...props} data-testid="download-svg-icon" />
+);
 export default DownloadSvgIcon;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/icon/editicon.jsx b/src/web/components/icon/editicon.jsx
index 9c87772f6b..ec9407e8c9 100644
--- a/src/web/components/icon/editicon.jsx
+++ b/src/web/components/icon/editicon.jsx
@@ -10,7 +10,7 @@ import {Pencil as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const EditIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="edit-icon"/>
 ));
 
 export default EditIcon;
diff --git a/src/web/components/icon/enableicon.jsx b/src/web/components/icon/enableicon.jsx
index 1007d88018..ea2feab842 100644
--- a/src/web/components/icon/enableicon.jsx
+++ b/src/web/components/icon/enableicon.jsx
@@ -10,7 +10,7 @@ import {Power as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const EnableIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="enable-icon"/>
 ));
 
 export default EnableIcon;
diff --git a/src/web/components/icon/exporticon.jsx b/src/web/components/icon/exporticon.jsx
index 0ab1f72436..1af6594e28 100644
--- a/src/web/components/icon/exporticon.jsx
+++ b/src/web/components/icon/exporticon.jsx
@@ -31,7 +31,7 @@ const ExportIcon = ({selectionType, title, ...other}) => {
   } else if (selectionType === SelectionType.SELECTION_FILTER) {
     download_title = _('Export all filtered');
   }
-  return <ExportSvgIcon {...other} title={download_title} />;
+  return <ExportSvgIcon {...other} title={download_title} data-testid="export-icon"/>;
 };
 
 ExportIcon.propTypes = {
diff --git a/src/web/components/icon/feedicon.jsx b/src/web/components/icon/feedicon.jsx
index 6004fd914d..01586dbae2 100644
--- a/src/web/components/icon/feedicon.jsx
+++ b/src/web/components/icon/feedicon.jsx
@@ -9,7 +9,7 @@ import {Rss as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const FeedIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="feed-icon"/>
 ));
 
 export default FeedIcon;
diff --git a/src/web/components/icon/filtericon.jsx b/src/web/components/icon/filtericon.jsx
index 551163e39e..e59e93b8be 100644
--- a/src/web/components/icon/filtericon.jsx
+++ b/src/web/components/icon/filtericon.jsx
@@ -10,7 +10,7 @@ import {Filter as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const FilterIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="filter-icon"/>
 ));
 
 export default FilterIcon;
diff --git a/src/web/components/icon/firsticon.jsx b/src/web/components/icon/firsticon.jsx
index 407763a95b..d5b38b2f25 100644
--- a/src/web/components/icon/firsticon.jsx
+++ b/src/web/components/icon/firsticon.jsx
@@ -10,7 +10,7 @@ import {ChevronFirst as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const FirstIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="first-icon"/>
 ));
 
 export default FirstIcon;
diff --git a/src/web/components/icon/foldicon.jsx b/src/web/components/icon/foldicon.jsx
index 1895790b96..e04cb8d924 100644
--- a/src/web/components/icon/foldicon.jsx
+++ b/src/web/components/icon/foldicon.jsx
@@ -9,7 +9,7 @@ import {Folder as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const FoldIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="fold-icon"/>
 ));
 
 export default FoldIcon;
diff --git a/src/web/components/icon/foldstateicon.jsx b/src/web/components/icon/foldstateicon.jsx
index 0fef7314d0..46c42cfb4e 100644
--- a/src/web/components/icon/foldstateicon.jsx
+++ b/src/web/components/icon/foldstateicon.jsx
@@ -21,10 +21,10 @@ const FoldStateIcon = ({foldState, ...props}) => {
     foldState === FoldState.FOLDING_START;
 
   if (folded) {
-    return <FoldIcon title={_('Unfold')} {...props} />;
+    return <FoldIcon title={_('Unfold')} {...props} data-testid="fold-state-icon-unfold"/>;
   }
 
-  return <UnfoldIcon title={_('Fold')} {...props} />;
+  return <UnfoldIcon title={_('Fold')} {...props} data-testid="fold-state-icon-fold"/>;
 };
 
 FoldStateIcon.propTypes = {
diff --git a/src/web/components/icon/groupicon.jsx b/src/web/components/icon/groupicon.jsx
index 2175dad69e..a39313d76a 100644
--- a/src/web/components/icon/groupicon.jsx
+++ b/src/web/components/icon/groupicon.jsx
@@ -10,7 +10,7 @@ import {Users as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const GroupIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="group-icon" />
 ));
 
 export default GroupIcon;
diff --git a/src/web/components/icon/helpicon.jsx b/src/web/components/icon/helpicon.jsx
index 35bb0f68a0..921901bd02 100644
--- a/src/web/components/icon/helpicon.jsx
+++ b/src/web/components/icon/helpicon.jsx
@@ -10,7 +10,7 @@ import {HelpCircle as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const HelpIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="help-icon"/>
 ));
 
 export default HelpIcon;
diff --git a/src/web/components/icon/hosticon.jsx b/src/web/components/icon/hosticon.jsx
index a6e154192f..eaa0362737 100644
--- a/src/web/components/icon/hosticon.jsx
+++ b/src/web/components/icon/hosticon.jsx
@@ -7,8 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/host.svg';
 
-const HostIcon = withSvgIcon()(Icon);
+const HostIconComponent = withSvgIcon()(Icon);
 
+const HostIcon = props => (
+  <HostIconComponent {...props} data-testid="host-icon" />
+);
 export default HostIcon;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/icon/importicon.jsx b/src/web/components/icon/importicon.jsx
index cec656cd84..ba068e700e 100644
--- a/src/web/components/icon/importicon.jsx
+++ b/src/web/components/icon/importicon.jsx
@@ -10,7 +10,7 @@ import {Import as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const ImportIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="import-icon"/>
 ));
 
 export default ImportIcon;
diff --git a/src/web/components/icon/infoicon.jsx b/src/web/components/icon/infoicon.jsx
index c2c028604c..ae9bbd2f3c 100644
--- a/src/web/components/icon/infoicon.jsx
+++ b/src/web/components/icon/infoicon.jsx
@@ -10,7 +10,7 @@ import {Info as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const InfoIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="info-icon"/>
 ));
 
 export default InfoIcon;
diff --git a/src/web/components/icon/keyicon.jsx b/src/web/components/icon/keyicon.jsx
index 3d9c64f965..b60658ad42 100644
--- a/src/web/components/icon/keyicon.jsx
+++ b/src/web/components/icon/keyicon.jsx
@@ -10,7 +10,7 @@ import {Key as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const KeyIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="key-icon"/>
 ));
 
 export default KeyIcon;
diff --git a/src/web/components/icon/lasticon.jsx b/src/web/components/icon/lasticon.jsx
index 25f330ecbb..4181d9654d 100644
--- a/src/web/components/icon/lasticon.jsx
+++ b/src/web/components/icon/lasticon.jsx
@@ -10,7 +10,7 @@ import {ChevronLast as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const LastIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="last-icon"/>
 ));
 
 export default LastIcon;
diff --git a/src/web/components/icon/ldapicon.jsx b/src/web/components/icon/ldapicon.jsx
index f736266587..92702e47f8 100644
--- a/src/web/components/icon/ldapicon.jsx
+++ b/src/web/components/icon/ldapicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/ldap.svg';
 
-const LdapIcon = withSvgIcon()(Icon);
+const LdapIconComponent = withSvgIcon()(Icon);
+
+const LdapIcon = props => (
+  <LdapIconComponent {...props} data-testid="ldap-icon" />
+);
 
 export default LdapIcon;
 
diff --git a/src/web/components/icon/legendicon.jsx b/src/web/components/icon/legendicon.jsx
index 70784257ad..8c6cc528a5 100644
--- a/src/web/components/icon/legendicon.jsx
+++ b/src/web/components/icon/legendicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/legend.svg';
 
-const LegendIcon = withSvgIcon()(Icon);
+const LegendIconComponent = withSvgIcon()(Icon);
+
+const LegendIcon = props => (
+  <LegendIconComponent {...props} data-testid="legend-icon" />
+);
 
 export default LegendIcon;
 
diff --git a/src/web/components/icon/licenseicon.jsx b/src/web/components/icon/licenseicon.jsx
index a875ab1063..7304dcd32a 100644
--- a/src/web/components/icon/licenseicon.jsx
+++ b/src/web/components/icon/licenseicon.jsx
@@ -10,7 +10,7 @@ import {FileBadge as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const LicenseIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="license-icon"/>
 ));
 
 export default LicenseIcon;
diff --git a/src/web/components/icon/listicon.jsx b/src/web/components/icon/listicon.jsx
index bf7f499d19..7c8dc19e1b 100644
--- a/src/web/components/icon/listicon.jsx
+++ b/src/web/components/icon/listicon.jsx
@@ -14,8 +14,8 @@ import ListSvgIcon from './listsvgicon';
 
 const ListIcon = ({page, filter, ...props}) => {
   return (
-    <Link to={page} filter={filter}>
-      <ListSvgIcon {...props} />
+    <Link to={page} filter={filter} data-testid="list-link-icon">
+      <ListSvgIcon {...props} data-testid="list-icon"/>
     </Link>
   );
 };
diff --git a/src/web/components/icon/logouticon.jsx b/src/web/components/icon/logouticon.jsx
index 119b77dfca..c3777ca613 100644
--- a/src/web/components/icon/logouticon.jsx
+++ b/src/web/components/icon/logouticon.jsx
@@ -10,7 +10,7 @@ import {LogOut as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const LogoutIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="logout-icon"/>
 ));
 
 export default LogoutIcon;
diff --git a/src/web/components/icon/mysettingsicon.jsx b/src/web/components/icon/mysettingsicon.jsx
index 7fab841e36..d1cdc6079a 100644
--- a/src/web/components/icon/mysettingsicon.jsx
+++ b/src/web/components/icon/mysettingsicon.jsx
@@ -10,7 +10,7 @@ import {Settings as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const MySettingsIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="my-settings-icon"/>
 ));
 
 export default MySettingsIcon;
diff --git a/src/web/components/icon/newicon.jsx b/src/web/components/icon/newicon.jsx
index b89f44914f..9f5f0c5f25 100644
--- a/src/web/components/icon/newicon.jsx
+++ b/src/web/components/icon/newicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/new.svg';
 
-const NewIcon = withSvgIcon()(Icon);
+const NewIconComponent = withSvgIcon()(Icon);
+
+const NewIcon = props => (
+  <NewIconComponent {...props} data-testid="new-icon" />
+);
 
 export default NewIcon;
 
diff --git a/src/web/components/icon/newnoteicon.jsx b/src/web/components/icon/newnoteicon.jsx
index 9445a5e3dc..cefbe84e80 100644
--- a/src/web/components/icon/newnoteicon.jsx
+++ b/src/web/components/icon/newnoteicon.jsx
@@ -7,7 +7,12 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/new_note.svg';
 
-const NewNoteIcon = withSvgIcon()(Icon);
+const NewNoteIconComponent = withSvgIcon()(Icon);
+
+const NewNoteIcon = props => (
+  <NewNoteIconComponent {...props} data-testid="new-note-icon" />
+);
+
 
 export default NewNoteIcon;
 
diff --git a/src/web/components/icon/newoverrideicon.jsx b/src/web/components/icon/newoverrideicon.jsx
index ab5cecc7d4..580996b20a 100644
--- a/src/web/components/icon/newoverrideicon.jsx
+++ b/src/web/components/icon/newoverrideicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/new_override.svg';
 
-const NewOverrideIcon = withSvgIcon()(Icon);
+const NewOverrideIconComponent = withSvgIcon()(Icon);
+
+const NewOverrideIcon = props => (
+  <NewOverrideIconComponent {...props} data-testid="new-override-icon" />
+);
 
 export default NewOverrideIcon;
 
diff --git a/src/web/components/icon/newticketicon.jsx b/src/web/components/icon/newticketicon.jsx
index 7a83e06b17..6d7a59b048 100644
--- a/src/web/components/icon/newticketicon.jsx
+++ b/src/web/components/icon/newticketicon.jsx
@@ -11,7 +11,7 @@ import Icon from './svg/new_ticket.svg';
 
 const NewTicketIcon = props => (
   <SvgIcon {...props}>
-    <Icon />
+    <Icon data-testid="new-ticket-icon"/>
   </SvgIcon>
 );
 
diff --git a/src/web/components/icon/nexticon.jsx b/src/web/components/icon/nexticon.jsx
index d4eb334c81..143a387d43 100644
--- a/src/web/components/icon/nexticon.jsx
+++ b/src/web/components/icon/nexticon.jsx
@@ -10,7 +10,7 @@ import {ChevronRight as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const NextIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="next-icon"/>
 ));
 
 export default NextIcon;
diff --git a/src/web/components/icon/noteicon.jsx b/src/web/components/icon/noteicon.jsx
index 9d75147cf6..4111c97c40 100644
--- a/src/web/components/icon/noteicon.jsx
+++ b/src/web/components/icon/noteicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/note.svg';
 
-const NoteIcon = withSvgIcon()(Icon);
+const NoteIconComponent = withSvgIcon()(Icon);
+
+const NoteIcon = props => (
+  <NoteIconComponent {...props} data-testid="note-icon" />
+);
 
 export default NoteIcon;
 
diff --git a/src/web/components/icon/nvticon.jsx b/src/web/components/icon/nvticon.jsx
index 00f3cc268b..e6abc195a8 100644
--- a/src/web/components/icon/nvticon.jsx
+++ b/src/web/components/icon/nvticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/nvt.svg';
 
-const NvtIcon = withSvgIcon()(Icon);
+const NvtIconComponent = withSvgIcon()(Icon);
+
+const NvtIcon = props => (
+  <NvtIconComponent {...props} data-testid="nvt-icon" />
+);
 
 export default NvtIcon;
 
diff --git a/src/web/components/icon/ossvgicon.jsx b/src/web/components/icon/ossvgicon.jsx
index e8dd8f9945..44b011826b 100644
--- a/src/web/components/icon/ossvgicon.jsx
+++ b/src/web/components/icon/ossvgicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/os.svg';
 
-const OsSvgIcon = withSvgIcon()(Icon);
+const OsSvgIconComponent = withSvgIcon()(Icon);
+
+const OsSvgIcon = props => (
+  <OsSvgIconComponent {...props} data-testid="os-svg-icon" />
+);
 
 export default OsSvgIcon;
 
diff --git a/src/web/components/icon/overrideicon.jsx b/src/web/components/icon/overrideicon.jsx
index 5f987c49e0..1b00e59c81 100644
--- a/src/web/components/icon/overrideicon.jsx
+++ b/src/web/components/icon/overrideicon.jsx
@@ -7,8 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/override.svg';
 
-const OverrideIcon = withSvgIcon()(Icon);
+const OverrideIconComponent = withSvgIcon()(Icon);
 
+const OverrideIcon = props => (
+  <OverrideIconComponent {...props} data-testid="override-icon" />
+);
 export default OverrideIcon;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/icon/performanceicon.jsx b/src/web/components/icon/performanceicon.jsx
index 20911c9169..a94b80c553 100644
--- a/src/web/components/icon/performanceicon.jsx
+++ b/src/web/components/icon/performanceicon.jsx
@@ -10,7 +10,7 @@ import {Gauge as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const PerformanceIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="performance-icon"/>
 ));
 
 export default PerformanceIcon;
diff --git a/src/web/components/icon/permissionicon.jsx b/src/web/components/icon/permissionicon.jsx
index fb9b30be24..066856b5e8 100644
--- a/src/web/components/icon/permissionicon.jsx
+++ b/src/web/components/icon/permissionicon.jsx
@@ -10,7 +10,7 @@ import {UserCheck as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const PermissionIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="permission-icon"/>
 ));
 
 export default PermissionIcon;
diff --git a/src/web/components/icon/policyicon.jsx b/src/web/components/icon/policyicon.jsx
index a922daea7c..db7d654194 100644
--- a/src/web/components/icon/policyicon.jsx
+++ b/src/web/components/icon/policyicon.jsx
@@ -10,7 +10,7 @@ import {FileCog as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const PolicyIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="policy-icon"/>
 ));
 
 export default PolicyIcon;
diff --git a/src/web/components/icon/portlisticon.jsx b/src/web/components/icon/portlisticon.jsx
index 02e39f3b57..10104ef9fe 100644
--- a/src/web/components/icon/portlisticon.jsx
+++ b/src/web/components/icon/portlisticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/port_list.svg';
 
-const PortListIcon = withSvgIcon()(Icon);
+const PortListIconComponent = withSvgIcon()(Icon);
+
+const PortListIcon = props => (
+  <PortListIconComponent {...props} data-testid="port-list-icon" />
+);
 
 export default PortListIcon;
 
diff --git a/src/web/components/icon/previousicon.jsx b/src/web/components/icon/previousicon.jsx
index 43ebdcab82..a2b0a6b5f2 100644
--- a/src/web/components/icon/previousicon.jsx
+++ b/src/web/components/icon/previousicon.jsx
@@ -10,7 +10,7 @@ import {ChevronLeft as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const PreviousIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="previous-icon"/>
 ));
 
 export default PreviousIcon;
diff --git a/src/web/components/icon/provideviewicon.jsx b/src/web/components/icon/provideviewicon.jsx
index 37e4ace3fd..acf172324b 100644
--- a/src/web/components/icon/provideviewicon.jsx
+++ b/src/web/components/icon/provideviewicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/provide_view.svg';
 
-const ProvideViewIcon = withSvgIcon()(Icon);
+const ProvideViewIconComponent = withSvgIcon()(Icon);
+
+const ProvideViewIcon = props => (
+  <ProvideViewIconComponent {...props} data-testid="provide-view-icon" />
+);
 
 export default ProvideViewIcon;
 
diff --git a/src/web/components/icon/radiusicon.jsx b/src/web/components/icon/radiusicon.jsx
index a9f80ee9bb..44ab7f864f 100644
--- a/src/web/components/icon/radiusicon.jsx
+++ b/src/web/components/icon/radiusicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/radius.svg';
 
-const RadiusIcon = withSvgIcon()(Icon);
+const RadiusIconComponent = withSvgIcon()(Icon);
+
+const RadiusIcon = props => (
+  <RadiusIconComponent {...props} data-testid="radius-icon" />
+);
 
 export default RadiusIcon;
 
diff --git a/src/web/components/icon/refreshicon.jsx b/src/web/components/icon/refreshicon.jsx
index 707f3a65b1..98d1bbb6e1 100644
--- a/src/web/components/icon/refreshicon.jsx
+++ b/src/web/components/icon/refreshicon.jsx
@@ -10,7 +10,7 @@ import {RefreshCcw as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const RefreshIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="refresh-icon"/>
 ));
 
 export default RefreshIcon;
diff --git a/src/web/components/icon/removefromassetsicon.jsx b/src/web/components/icon/removefromassetsicon.jsx
index d6fc7b7633..88fe7755b0 100644
--- a/src/web/components/icon/removefromassetsicon.jsx
+++ b/src/web/components/icon/removefromassetsicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/remove_from_assets.svg';
 
-const RemoveFromAssetsIcon = withSvgIcon()(Icon);
+const RemoveFromAssetsIconComponent = withSvgIcon()(Icon);
+
+const RemoveFromAssetsIcon = props => (
+  <RemoveFromAssetsIconComponent {...props} data-testid="remove-from-assets-icon" />
+);
 
 export default RemoveFromAssetsIcon;
 
diff --git a/src/web/components/icon/reportconfigicon.jsx b/src/web/components/icon/reportconfigicon.jsx
index b39e5c241a..22c14cbd59 100644
--- a/src/web/components/icon/reportconfigicon.jsx
+++ b/src/web/components/icon/reportconfigicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/report_format.svg';
 
-const ReportConfigIcon = withSvgIcon()(Icon);
+const ReportConfigIconComponent = withSvgIcon()(Icon);
+
+const ReportConfigIcon = props => (
+  <ReportConfigIconComponent {...props} data-testid="report-config-icon" />
+);
 
 export default ReportConfigIcon;
 
diff --git a/src/web/components/icon/reportformaticon.jsx b/src/web/components/icon/reportformaticon.jsx
index 95f5392fc6..d9042c88a3 100644
--- a/src/web/components/icon/reportformaticon.jsx
+++ b/src/web/components/icon/reportformaticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/report_format.svg';
 
-const ReportFormatIcon = withSvgIcon()(Icon);
+const ReportFormatIconComponent = withSvgIcon()(Icon);
+
+const ReportFormatIcon = props => (
+  <ReportFormatIconComponent {...props} data-testid="report-format-icon" />
+);
 
 export default ReportFormatIcon;
 
diff --git a/src/web/components/icon/reporticon.jsx b/src/web/components/icon/reporticon.jsx
index 49938725d7..019d2d3ccd 100644
--- a/src/web/components/icon/reporticon.jsx
+++ b/src/web/components/icon/reporticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/report.svg';
 
-const ReportIcon = withSvgIcon()(Icon);
+const ReportIconComponent = withSvgIcon()(Icon);
+
+const ReportIcon = props => (
+  <ReportIconComponent {...props} data-testid="report-icon" />
+);
 
 export default ReportIcon;
 
diff --git a/src/web/components/icon/reseticon.jsx b/src/web/components/icon/reseticon.jsx
index 55b14a2b1f..25c272e997 100644
--- a/src/web/components/icon/reseticon.jsx
+++ b/src/web/components/icon/reseticon.jsx
@@ -10,7 +10,7 @@ import {RotateCcw as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const ResetIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="reset-icon"/>
 ));
 
 export default ResetIcon;
diff --git a/src/web/components/icon/restoreicon.jsx b/src/web/components/icon/restoreicon.jsx
index b8f05cb101..30a24fd531 100644
--- a/src/web/components/icon/restoreicon.jsx
+++ b/src/web/components/icon/restoreicon.jsx
@@ -7,7 +7,12 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/restore.svg';
 
-const RestoreIcon = withSvgIcon()(Icon);
+const RestoreIconComponent = withSvgIcon()(Icon);
+
+const RestoreIcon = props => (
+  <RestoreIconComponent {...props} data-testid="restore-icon" />
+);
+
 
 export default RestoreIcon;
 
diff --git a/src/web/components/icon/resulticon.jsx b/src/web/components/icon/resulticon.jsx
index bc255cda0f..6715df1cb6 100644
--- a/src/web/components/icon/resulticon.jsx
+++ b/src/web/components/icon/resulticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/result.svg';
 
-const ResultIcon = withSvgIcon()(Icon);
+const ResultIconComponent = withSvgIcon()(Icon);
+
+const ResultIcon = props => (
+  <ResultIconComponent {...props} data-testid="result-icon" />
+);
 
 export default ResultIcon;
 
diff --git a/src/web/components/icon/resumeicon.jsx b/src/web/components/icon/resumeicon.jsx
index 238f09f72e..36fffb0ad7 100644
--- a/src/web/components/icon/resumeicon.jsx
+++ b/src/web/components/icon/resumeicon.jsx
@@ -9,7 +9,7 @@ import {StepForward as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const ResumeIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="resume-icon"/>
 ));
 
 export default ResumeIcon;
diff --git a/src/web/components/icon/roleicon.jsx b/src/web/components/icon/roleicon.jsx
index d6b8df8ca7..2550bb4c61 100644
--- a/src/web/components/icon/roleicon.jsx
+++ b/src/web/components/icon/roleicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/role.svg';
 
-const RoleIcon = withSvgIcon()(Icon);
+const RoleIconComponent = withSvgIcon()(Icon);
+
+const RoleIcon = props => (
+  <RoleIconComponent {...props} data-testid="role-icon" />
+);
 
 export default RoleIcon;
 
diff --git a/src/web/components/icon/scanconfigicon.jsx b/src/web/components/icon/scanconfigicon.jsx
index a9c67eb8c2..4c29080083 100644
--- a/src/web/components/icon/scanconfigicon.jsx
+++ b/src/web/components/icon/scanconfigicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/config.svg';
 
-const ScanConfigIcon = withSvgIcon()(Icon);
+const ScanConfigIconComponent = withSvgIcon()(Icon);
+
+const ScanConfigIcon = props => (
+  <ScanConfigIconComponent {...props} data-testid="scan-config-icon" />
+);
 
 export default ScanConfigIcon;
 
diff --git a/src/web/components/icon/scannericon.jsx b/src/web/components/icon/scannericon.jsx
index 92a7e93cdd..8fd01a3b73 100644
--- a/src/web/components/icon/scannericon.jsx
+++ b/src/web/components/icon/scannericon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/scanner.svg';
 
-const ScannerIcon = withSvgIcon()(Icon);
+const ScannerIconComponent = withSvgIcon()(Icon);
+
+const ScannerIcon = props => (
+  <ScannerIconComponent {...props} data-testid="scanner-icon" />
+);
 
 export default ScannerIcon;
 
diff --git a/src/web/components/icon/scheduleicon.jsx b/src/web/components/icon/scheduleicon.jsx
index 2562efec42..37b8fff644 100644
--- a/src/web/components/icon/scheduleicon.jsx
+++ b/src/web/components/icon/scheduleicon.jsx
@@ -10,7 +10,7 @@ import {Clock3 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const ScheduleIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="schedule-icon"/>
 ));
 
 export default ScheduleIcon;
diff --git a/src/web/components/icon/sensoricon.jsx b/src/web/components/icon/sensoricon.jsx
index 470c158b5f..6480316c93 100644
--- a/src/web/components/icon/sensoricon.jsx
+++ b/src/web/components/icon/sensoricon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/sensor.svg';
 
-const SensorIcon = withSvgIcon()(Icon);
+const SensorIconComponent = withSvgIcon()(Icon);
+
+const SensorIcon = props => (
+  <SensorIconComponent {...props} data-testid="sensor-icon" />
+);
 
 export default SensorIcon;
 
diff --git a/src/web/components/icon/solutiontypesvgicon.jsx b/src/web/components/icon/solutiontypesvgicon.jsx
index 15661096e7..9b77fccc6f 100644
--- a/src/web/components/icon/solutiontypesvgicon.jsx
+++ b/src/web/components/icon/solutiontypesvgicon.jsx
@@ -10,7 +10,7 @@ import {Puzzle as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const SolutionTypeSvgIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="solution-type-icon"/>
 ));
 
 export default SolutionTypeSvgIcon;
diff --git a/src/web/components/icon/starticon.jsx b/src/web/components/icon/starticon.jsx
index 8b2efe52f6..2d3efbb2a0 100644
--- a/src/web/components/icon/starticon.jsx
+++ b/src/web/components/icon/starticon.jsx
@@ -10,7 +10,7 @@ import {Play as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const StartIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="start-icon"/>
 ));
 
 export default StartIcon;
diff --git a/src/web/components/icon/stmitigateicon.jsx b/src/web/components/icon/stmitigateicon.jsx
index 8eb288409c..26a697b5e4 100644
--- a/src/web/components/icon/stmitigateicon.jsx
+++ b/src/web/components/icon/stmitigateicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_mitigate.svg';
 
-const StMitigateIcon = withSvgIcon()(Icon);
+const StMitigateIconComponent = withSvgIcon()(Icon);
+
+const StMitigateIcon = props => (
+  <StMitigateIconComponent {...props} data-testid="st-mitigate-icon" />
+);
 
 export default StMitigateIcon;
 
diff --git a/src/web/components/icon/stnonavailableicon.jsx b/src/web/components/icon/stnonavailableicon.jsx
index 5c9181a1d7..0df6be06f5 100644
--- a/src/web/components/icon/stnonavailableicon.jsx
+++ b/src/web/components/icon/stnonavailableicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_nonavailable.svg';
 
-const StNonAvailableIcon = withSvgIcon()(Icon);
+const StNonAvailableIconComponent = withSvgIcon()(Icon);
+
+const StNonAvailableIcon = props => (
+  <StNonAvailableIconComponent {...props} data-testid="st-nonavailable-icon" />
+);
 
 export default StNonAvailableIcon;
 
diff --git a/src/web/components/icon/stopicon.jsx b/src/web/components/icon/stopicon.jsx
index a217f6b98c..42d7f6eb61 100644
--- a/src/web/components/icon/stopicon.jsx
+++ b/src/web/components/icon/stopicon.jsx
@@ -10,7 +10,7 @@ import {Square as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const StopIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="stop-icon"/>
 ));
 
 export default StopIcon;
diff --git a/src/web/components/icon/stunknownicon.jsx b/src/web/components/icon/stunknownicon.jsx
index b27ac56d49..db63bb9fc0 100644
--- a/src/web/components/icon/stunknownicon.jsx
+++ b/src/web/components/icon/stunknownicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_unknown.svg';
 
-const StUnknownIcon = withSvgIcon()(Icon);
+const StUnknownIconComponent = withSvgIcon()(Icon);
+
+const StUnknownIcon = props => (
+  <StUnknownIconComponent {...props} data-testid="st-unknown-icon" />
+);
 
 export default StUnknownIcon;
 
diff --git a/src/web/components/icon/stvendorfixicon.jsx b/src/web/components/icon/stvendorfixicon.jsx
index 5cb739b5d4..9c93dd98a6 100644
--- a/src/web/components/icon/stvendorfixicon.jsx
+++ b/src/web/components/icon/stvendorfixicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_vendorfix.svg';
 
-const StVendorFixIcon = withSvgIcon()(Icon);
+const StVendorFixIconComponent = withSvgIcon()(Icon);
+
+const StVendorFixIcon = props => (
+  <StVendorFixIconComponent {...props} data-testid="st-vendorfix-icon" />
+);
 
 export default StVendorFixIcon;
 
diff --git a/src/web/components/icon/stwillnotfixicon.jsx b/src/web/components/icon/stwillnotfixicon.jsx
index 5625132e5b..c4846fb832 100644
--- a/src/web/components/icon/stwillnotfixicon.jsx
+++ b/src/web/components/icon/stwillnotfixicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_willnotfix.svg';
 
-const StWillNotFixIcon = withSvgIcon()(Icon);
+const StWillNotFixIconComponent = withSvgIcon()(Icon);
+
+const StWillNotFixIcon = props => (
+  <StWillNotFixIconComponent {...props} data-testid="st-willnotfix-icon" />
+);
 
 export default StWillNotFixIcon;
 
diff --git a/src/web/components/icon/stworkaroundicon.jsx b/src/web/components/icon/stworkaroundicon.jsx
index d3ec84acbf..ada22b9f76 100644
--- a/src/web/components/icon/stworkaroundicon.jsx
+++ b/src/web/components/icon/stworkaroundicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/st_workaround.svg';
 
-const StWorkaroundIcon = withSvgIcon()(Icon);
+const StWorkaroundIconComponent = withSvgIcon()(Icon);
+
+const StWorkaroundIcon = props => (
+  <StWorkaroundIconComponent {...props} data-testid="st-workaround-icon" />
+);
 
 export default StWorkaroundIcon;
 
diff --git a/src/web/components/icon/tagicon.jsx b/src/web/components/icon/tagicon.jsx
index bdc135be88..c4035aa65a 100644
--- a/src/web/components/icon/tagicon.jsx
+++ b/src/web/components/icon/tagicon.jsx
@@ -10,7 +10,7 @@ import {Tag as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const TagIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="tag-icon"/>
 ));
 
 export default TagIcon;
diff --git a/src/web/components/icon/tagssvgicon.jsx b/src/web/components/icon/tagssvgicon.jsx
index 694ff750c4..78f5f024c3 100644
--- a/src/web/components/icon/tagssvgicon.jsx
+++ b/src/web/components/icon/tagssvgicon.jsx
@@ -10,7 +10,7 @@ import {Tags as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const TagsSvgIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="tags-icon"/>
 ));
 
 export default TagsSvgIcon;
diff --git a/src/web/components/icon/targeticon.jsx b/src/web/components/icon/targeticon.jsx
index 84d91d905b..6614e169bc 100644
--- a/src/web/components/icon/targeticon.jsx
+++ b/src/web/components/icon/targeticon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/target.svg';
 
-const TargetIcon = withSvgIcon()(Icon);
+const TargetIconComponent = withSvgIcon()(Icon);
+
+const TargetIcon = props => (
+  <TargetIconComponent {...props} data-testid="target-icon" />
+);
 
 export default TargetIcon;
 
diff --git a/src/web/components/icon/taskicon.jsx b/src/web/components/icon/taskicon.jsx
index 4a0287caed..08e916813b 100644
--- a/src/web/components/icon/taskicon.jsx
+++ b/src/web/components/icon/taskicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/task.svg';
 
-const TaskIcon = withSvgIcon()(Icon);
+const TaskIconComponent = withSvgIcon()(Icon);
+
+const TaskIcon = props => (
+  <TaskIconComponent {...props} data-testid="task-icon" />
+);
 
 export default TaskIcon;
 
diff --git a/src/web/components/icon/ticketicon.jsx b/src/web/components/icon/ticketicon.jsx
index 3f37770f6a..f1d4714901 100644
--- a/src/web/components/icon/ticketicon.jsx
+++ b/src/web/components/icon/ticketicon.jsx
@@ -11,7 +11,7 @@ import Icon from './svg/ticket.svg';
 
 const TicketIcon = props => (
   <SvgIcon {...props}>
-    <Icon />
+    <Icon data-testid="ticket-icon"/>
   </SvgIcon>
 );
 
diff --git a/src/web/components/icon/tlscertificateicon.jsx b/src/web/components/icon/tlscertificateicon.jsx
index 2b20bc4252..d05fa11774 100644
--- a/src/web/components/icon/tlscertificateicon.jsx
+++ b/src/web/components/icon/tlscertificateicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/tlscertificate.svg';
 
-const TlsCertificateIcon = withSvgIcon()(Icon);
+const TlsCertificateIconComponent = withSvgIcon()(Icon);
+
+const TlsCertificateIcon = props => (
+  <TlsCertificateIconComponent {...props} data-testid="tls-certificate-icon" />
+);
 
 export default TlsCertificateIcon;
 
diff --git a/src/web/components/icon/toggle3dicon.jsx b/src/web/components/icon/toggle3dicon.jsx
index 2168bdd18e..bfea7ac352 100644
--- a/src/web/components/icon/toggle3dicon.jsx
+++ b/src/web/components/icon/toggle3dicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/toggle3d.svg';
 
-const Toggle3dIcon = withSvgIcon()(Icon);
+const Toggle3dIconComponent = withSvgIcon()(Icon);
+
+const Toggle3dIcon = props => (
+  <Toggle3dIconComponent {...props} data-testid="toggle-3d-icon" />
+);
 
 export default Toggle3dIcon;
 
diff --git a/src/web/components/icon/trashcanicon.jsx b/src/web/components/icon/trashcanicon.jsx
index d00892eb03..b77f6790c9 100644
--- a/src/web/components/icon/trashcanicon.jsx
+++ b/src/web/components/icon/trashcanicon.jsx
@@ -9,7 +9,7 @@ import {Trash2 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const TrashcanIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="trashcan-icon"/>
 ));
 
 export default TrashcanIcon;
diff --git a/src/web/components/icon/trashicon.jsx b/src/web/components/icon/trashicon.jsx
index 71cfde96f9..eef23f7ec2 100644
--- a/src/web/components/icon/trashicon.jsx
+++ b/src/web/components/icon/trashicon.jsx
@@ -25,7 +25,7 @@ const TrashIcon = ({selectionType, title, ...other}) => {
       title = _('Move all filtered to trashcan');
     }
   }
-  return <TrashcanIcon {...other} title={title} />;
+  return <TrashcanIcon {...other} title={title} data-testid="tash-icon"/>;
 };
 
 TrashIcon.propTypes = {
diff --git a/src/web/components/icon/trenddownicon.jsx b/src/web/components/icon/trenddownicon.jsx
index 8dc975b76b..03ee0e13cb 100644
--- a/src/web/components/icon/trenddownicon.jsx
+++ b/src/web/components/icon/trenddownicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/trend_down.svg';
 
-const TrendDownIcon = withSvgIcon()(Icon);
+const TrendDownIconComponent = withSvgIcon()(Icon);
+
+const TrendDownIcon = props => (
+  <TrendDownIconComponent {...props} data-testid="trend-down-icon" />
+);
 
 export default TrendDownIcon;
 
diff --git a/src/web/components/icon/trendlessicon.jsx b/src/web/components/icon/trendlessicon.jsx
index 4c6d0448d8..9b7f692ba0 100644
--- a/src/web/components/icon/trendlessicon.jsx
+++ b/src/web/components/icon/trendlessicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/trend_less.svg';
 
-const TrendLessIcon = withSvgIcon()(Icon);
+const TrendLessIconComponent = withSvgIcon()(Icon);
+
+const TrendLessIcon = props => (
+  <TrendLessIconComponent {...props} data-testid="trend-less-icon" />
+);
 
 export default TrendLessIcon;
 
diff --git a/src/web/components/icon/trendmoreicon.jsx b/src/web/components/icon/trendmoreicon.jsx
index 49388c0dfb..f3b01b4099 100644
--- a/src/web/components/icon/trendmoreicon.jsx
+++ b/src/web/components/icon/trendmoreicon.jsx
@@ -7,8 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/trend_more.svg';
 
-const TrendMoreIcon = withSvgIcon()(Icon);
+const TrendMoreIconComponent = withSvgIcon()(Icon);
 
+const TrendMoreIcon = props => (
+  <TrendMoreIconComponent {...props} data-testid="trend-more-icon" />
+);
 export default TrendMoreIcon;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/icon/trendnochangeicon.jsx b/src/web/components/icon/trendnochangeicon.jsx
index 64cc2f3774..5226e11d15 100644
--- a/src/web/components/icon/trendnochangeicon.jsx
+++ b/src/web/components/icon/trendnochangeicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/trend_nochange.svg';
 
-const TrendNoChangeIcon = withSvgIcon()(Icon);
+const TrendNoChangeIconComponent = withSvgIcon()(Icon);
+
+const TrendNoChangeIcon = props => (
+  <TrendNoChangeIconComponent {...props} data-testid="trend-nochange-icon" />
+);
 
 export default TrendNoChangeIcon;
 
diff --git a/src/web/components/icon/trendupicon.jsx b/src/web/components/icon/trendupicon.jsx
index bf0fba5321..fa7a052d1f 100644
--- a/src/web/components/icon/trendupicon.jsx
+++ b/src/web/components/icon/trendupicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/trend_up.svg';
 
-const TrendUpIcon = withSvgIcon()(Icon);
+const TrendUpIconComponent = withSvgIcon()(Icon);
+
+const TrendUpIcon = props => (
+  <TrendUpIconComponent {...props} data-testid="trend-up-icon" />
+);
 
 export default TrendUpIcon;
 
diff --git a/src/web/components/icon/unfoldicon.jsx b/src/web/components/icon/unfoldicon.jsx
index 1eaa35ab3d..bd76e257c3 100644
--- a/src/web/components/icon/unfoldicon.jsx
+++ b/src/web/components/icon/unfoldicon.jsx
@@ -10,7 +10,7 @@ import {FolderOpen as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const UnfoldIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="unfold-icon" />
 ));
 
 export default UnfoldIcon;
diff --git a/src/web/components/icon/uploadicon.jsx b/src/web/components/icon/uploadicon.jsx
index 2ea84e69cd..54af62acc5 100644
--- a/src/web/components/icon/uploadicon.jsx
+++ b/src/web/components/icon/uploadicon.jsx
@@ -10,7 +10,7 @@ import {Upload as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const UploadIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="upload-icon"/>
 ));
 
 export default UploadIcon;
diff --git a/src/web/components/icon/usericon.jsx b/src/web/components/icon/usericon.jsx
index c486b001f0..27f0022d62 100644
--- a/src/web/components/icon/usericon.jsx
+++ b/src/web/components/icon/usericon.jsx
@@ -10,7 +10,7 @@ import {User as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const UserIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="user-icon"/>
 ));
 
 export default UserIcon;
diff --git a/src/web/components/icon/verifyicon.jsx b/src/web/components/icon/verifyicon.jsx
index f39c91239a..a33feb0c21 100644
--- a/src/web/components/icon/verifyicon.jsx
+++ b/src/web/components/icon/verifyicon.jsx
@@ -10,7 +10,7 @@ import {ShieldCheck as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const VerifyIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="verify-icon"/>
 ));
 
 export default VerifyIcon;
diff --git a/src/web/components/icon/verifynoicon.jsx b/src/web/components/icon/verifynoicon.jsx
index 245177736b..3aa6ebca3b 100644
--- a/src/web/components/icon/verifynoicon.jsx
+++ b/src/web/components/icon/verifynoicon.jsx
@@ -10,7 +10,7 @@ import {ShieldX as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const VerifyNoIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props}  data-testid="verify-no-icon"/>
 ));
 
 export default VerifyNoIcon;
diff --git a/src/web/components/icon/viewothericon.jsx b/src/web/components/icon/viewothericon.jsx
index 82bf62b026..5f8db98537 100644
--- a/src/web/components/icon/viewothericon.jsx
+++ b/src/web/components/icon/viewothericon.jsx
@@ -10,7 +10,7 @@ import {Glasses as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const ViewOtherIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="view-other-icon"/>
 ));
 
 export default ViewOtherIcon;
diff --git a/src/web/components/icon/vulnerabilityicon.jsx b/src/web/components/icon/vulnerabilityicon.jsx
index 9c531e1537..ebcb7a2154 100644
--- a/src/web/components/icon/vulnerabilityicon.jsx
+++ b/src/web/components/icon/vulnerabilityicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/vulnerability.svg';
 
-const VulnerabilityIcon = withSvgIcon()(Icon);
+const VulnerabilityIconComponent = withSvgIcon()(Icon);
+
+const VulnerabilityIcon = props => (
+  <VulnerabilityIconComponent {...props} data-testid="vulnerability-icon" />
+);
 
 export default VulnerabilityIcon;
 
diff --git a/src/web/components/icon/wizardicon.jsx b/src/web/components/icon/wizardicon.jsx
index f2b9e8af4d..36a8894a03 100644
--- a/src/web/components/icon/wizardicon.jsx
+++ b/src/web/components/icon/wizardicon.jsx
@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/wizard.svg';
 
-const WizardIcon = withSvgIcon()(Icon);
+const WizardIconComponent = withSvgIcon()(Icon);
+
+const WizardIcon = props => (
+  <WizardIconComponent {...props} data-testid="wizard-icon" />
+);
 
 export default WizardIcon;
 
diff --git a/src/web/components/img/greenbone.jsx b/src/web/components/img/greenbone.jsx
index b1f5c84dfb..2f4334c946 100644
--- a/src/web/components/img/greenbone.jsx
+++ b/src/web/components/img/greenbone.jsx
@@ -9,7 +9,7 @@ import React from 'react';
 import GbLogo from 'web/components/icon/svg/greenbone.svg?url';
 
 const GreenboneLogo = props => (
-  <img alt="Greenbone Security Assistant" {...props} src={GbLogo} />
+  <img alt="Greenbone Security Assistant" {...props} src={GbLogo} data-testid="greenbone-logo"/>
 );
 
 export default GreenboneLogo;
diff --git a/src/web/components/img/greenboneloginlogo.jsx b/src/web/components/img/greenboneloginlogo.jsx
index b21b1cd076..c354683d3a 100644
--- a/src/web/components/img/greenboneloginlogo.jsx
+++ b/src/web/components/img/greenboneloginlogo.jsx
@@ -19,7 +19,7 @@ const Image = styled(Img)`
 
 const LoginLogo = props => {
   return (
-    <Image alt={_('Greenbone AG')} src='greenbonehorizontal.png' />
+    <Image alt={_('Greenbone AG')} src='greenbonehorizontal.png' data-testid="greenbone-login-logo"/>
   );
 };
 
diff --git a/src/web/components/label/compliancestate.jsx b/src/web/components/label/compliancestate.jsx
index ac97b3b575..46c0326f16 100644
--- a/src/web/components/label/compliancestate.jsx
+++ b/src/web/components/label/compliancestate.jsx
@@ -42,16 +42,16 @@ ComplianceLabel.propTypes = {
 };
 
 const YesLabel = props => (
-  <ComplianceLabel {...props} text="Yes" color="complianceYes" />
+  <ComplianceLabel {...props} text="Yes" color="complianceYes" data-testid="compliance-state-yes"/>
 );
 const NoLabel = props => (
-  <ComplianceLabel {...props} text="No" color="complianceNo" />
+  <ComplianceLabel {...props} text="No" color="complianceNo" data-testid="compliance-state-no"/>
 );
 const IncompleteLabel = props => (
-  <ComplianceLabel {...props} text="Incomplete" color="complianceIncomplete" />
+  <ComplianceLabel {...props} text="Incomplete" color="complianceIncomplete" data-testid="compliance-state-incomplete"/>
 );
 const UndefinedLabel = props => (
-  <ComplianceLabel {...props} text="Undefined" color="complianceUndefined" />
+  <ComplianceLabel {...props} text="Undefined" color="complianceUndefined" data-testid="compliance-state-undefined"/>
 );
 
 export const ComplianceStateLabels = {
diff --git a/src/web/components/link/certlink.jsx b/src/web/components/link/certlink.jsx
index 3b6dc46c87..12d7bc3818 100644
--- a/src/web/components/link/certlink.jsx
+++ b/src/web/components/link/certlink.jsx
@@ -35,7 +35,7 @@ const CertLink = ({id, textOnly = false, type}) => {
     info_type = 'dfncert';
   }
   return (
-    <DetailsLink title={title} id={id} type={info_type} textOnly={textOnly}>
+    <DetailsLink title={title} id={id} type={info_type} textOnly={textOnly} data-testid="cert_link">
       {id}
     </DetailsLink>
   );
diff --git a/src/web/components/link/cvelink.jsx b/src/web/components/link/cvelink.jsx
index f01622f420..f2e86c6cea 100644
--- a/src/web/components/link/cvelink.jsx
+++ b/src/web/components/link/cvelink.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'web/utils/proptypes';
 import DetailsLink from './detailslink';
 
 const CveLink = ({id, ...props}) => (
-  <DetailsLink {...props} id={id} type="cve">
+  <DetailsLink {...props} id={id} type="cve" data-testid="cve-link">
     {id}
   </DetailsLink>
 );
diff --git a/src/web/components/menu/menu.jsx b/src/web/components/menu/menu.jsx
index 9fba6c44c7..cc5fe62299 100644
--- a/src/web/components/menu/menu.jsx
+++ b/src/web/components/menu/menu.jsx
@@ -85,31 +85,37 @@ const Menu = () => {
         label: 'Tasks',
         to: '/tasks',
         activeCondition: useIsActive('/tasks'),
+        'data-testid': 'menu-tasks',
       },
       {
         label: 'Reports',
         to: '/reports',
         activeCondition: useIsActive('/reports'),
+        'data-testid': 'menu-reports',
       },
       {
         label: 'Results',
         to: '/results',
         activeCondition: useIsActive('/results'),
+        'data-testid': 'menu-results',
       },
       {
         label: 'Vulnerabilities',
         to: '/vulnerabilities',
         activeCondition: useIsActive('/vulnerabilities'),
+        'data-testid': 'menu-vulnerabilities',
       },
       {
         label: 'Notes',
         to: '/notes',
         activeCondition: useIsActive('/notes'),
+        'data-testid': 'menu-notes',
       },
       {
         label: 'Overrides',
         to: '/overrides',
         activeCondition: useIsActive('/overrides'),
+        'data-testid': 'menu-overrides',
       },
     ],
     assets: [
@@ -117,16 +123,19 @@ const Menu = () => {
         label: 'Hosts',
         to: '/hosts',
         activeCondition: useIsActive('/hosts'),
+        'data-testid': 'menu-hosts',
       },
       {
         label: 'Operating Systems',
         to: '/operatingsystems',
         activeCondition: useIsActive('/operatingsystems'),
+        'data-testid': 'menu-operating-systems',
       },
       {
         label: 'TLS Certificates',
         to: '/tlscertificates',
         activeCondition: useIsActive('/tlscertificates'),
+        'data-testid': 'menu-tls-certificates',
       },
     ],
     resilience: [
@@ -134,21 +143,25 @@ const Menu = () => {
         label: 'Remediation Tickets',
         to: '/tickets',
         activeCondition: useIsActive('/tickets'),
+        'data-testid': 'menu-remediation-tickets',
       },
       {
         label: 'Compliance Policies',
         to: '/policies',
         activeCondition: useIsActive('/policies'),
+        'data-testid': 'menu-policies',
       },
       {
         label: 'Compliance Audits',
         to: '/audits',
         activeCondition: useIsActive('/audits'),
+        'data-testid': 'menu-audits',
       },
       {
         label: 'Compliance Audit Reports',
         to: '/auditreports',
         activeCondition: useIsActive('/auditreports'),
+        'data-testid': 'menu-audit-reports',
       },
     ],
     secInfo: [
@@ -156,26 +169,31 @@ const Menu = () => {
         label: 'NVTs',
         to: '/nvts',
         activeCondition: useIsActive('/nvts'),
+        'data-testid': 'menu-nvts',
       },
       {
         label: 'CVEs',
         to: '/cves',
         activeCondition: useIsActive('/cves'),
+        'data-testid': 'menu-cves',
       },
       {
         label: 'CPEs',
         to: '/cpes',
         activeCondition: useIsActive('/cpes'),
+        'data-testid': 'menu-cpes',
       },
       {
         label: 'CERT-Bund Advisories',
         to: '/certbunds',
         activeCondition: useIsActive('/certbunds'),
+        'data-testid': 'menu-certbunds',
       },
       {
         label: 'DFN-CERT Advisories',
         to: '/dfncerts',
         activeCondition: useIsActive('/dfncerts'),
+        'data-testid': 'menu-dfncerts',
       },
     ],
     configuration: [
@@ -183,56 +201,67 @@ const Menu = () => {
         label: 'Targets',
         to: '/targets',
         activeCondition: useIsActive('/targets'),
+        'data-testid': 'menu-targets',
       },
       {
         label: 'Port Lists',
         to: '/portlists',
         activeCondition: useIsActive('/portlists'),
+        'data-testid': 'menu-portlists',
       },
       {
         label: 'Credentials',
         to: '/credentials',
         activeCondition: useIsActive('/credentials'),
+        'data-testid': 'menu-credentials',
       },
       {
         label: 'Scan Configs',
         to: '/scanconfigs',
         activeCondition: useIsActive('/scanconfigs'),
+        'data-testid': 'menu-scanconfigs',
       },
       {
         label: 'Alerts',
         to: '/alerts',
         activeCondition: useIsActive('/alerts'),
+        'data-testid': 'menu-alerts',
       },
       {
         label: 'Schedules',
         to: '/schedules',
         activeCondition: useIsActive('/schedules'),
+        'data-testid': 'menu-schedules',
       },
       {
         label: 'Report Configs',
         to: '/reportconfigs',
         activeCondition: useIsActive('/reportconfigs'),
+        'data-testid': 'menu-report-configs',
       },
       {
         label: 'Report Formats',
         to: '/reportformats',
         activeCondition: useIsActive('/reportformats'),
+        'data-testid': 'menu-report-formats',
       },
       {
         label: 'Scanners',
         to: '/scanners',
         activeCondition: useIsActive('/scanners'),
+        'data-testid': 'menu-scanners',
       },
       {
         label: 'Filters',
         to: '/filters',
         activeCondition: useIsActive('/filters'),
+        'data-testid': 'menu-filters',
       },
       {
         label: 'Tags',
         to: '/tags',
         activeCondition: useIsActive('/tags'),
+        'data-testid': 'menu-tags',
       },
     ],
   };
@@ -251,6 +280,7 @@ const Menu = () => {
           capabilities.featureEnabled(featureEnabled),
       }))
       .filter(({visible}) => visible !== false),
+      ...additionalProps,
   });
 
   const menuPoints = [
@@ -259,6 +289,7 @@ const Menu = () => {
         label: _('Dashboards'),
         to: '/dashboards',
         icon: BarChart3,
+        'data-testid' : 'menu-dashboards',
       },
     ],
     [
@@ -268,6 +299,9 @@ const Menu = () => {
           'scans',
           ShieldCheck,
           subNavConfigs.scans,
+          {
+            'data-testid': 'menu-scans',
+          }
         ),
       mayOpAssets &&
         createMenuItemWithSubNav(
@@ -275,6 +309,9 @@ const Menu = () => {
           'assets',
           Server,
           subNavConfigs.assets,
+          {
+            'data-testid': 'menu-assets',
+          }
         ),
       mayOpResilience &&
         createMenuItemWithSubNav(
@@ -282,6 +319,9 @@ const Menu = () => {
           'resilience',
           FileCheck,
           subNavConfigs.resilience,
+          {
+            'data-testid': 'menu-resilience',
+          }
         ),
       capabilities.mayAccess('info') &&
         createMenuItemWithSubNav(
@@ -289,6 +329,9 @@ const Menu = () => {
           'secInfo',
           View,
           subNavConfigs.secInfo,
+          {
+            'data-testid': 'menu-secinfo',
+          }
         ),
       mayOpConfiguration &&
         createMenuItemWithSubNav(
@@ -296,58 +339,71 @@ const Menu = () => {
           'configuration',
           Wrench,
           subNavConfigs.configuration,
+          {
+            'data-testid': 'menu-configuration',
+          }
         ),
       {
         label: _('Administration'),
         key: 'administration',
         icon: SlidersHorizontal,
+        'data-testid' : 'menu-administration',
         subNav: [
           capabilities.mayAccess('users') && {
             label: _('Users'),
             to: '/users',
             active: isUserActive,
+            'data-testid': 'menu-users',
           },
           capabilities.mayAccess('groups') && {
             label: _('Groups'),
             to: '/groups',
             active: isGroupsActive,
+            'data-testid': 'menu-groups',
           },
           capabilities.mayAccess('roles') && {
             label: _('Roles'),
             to: '/roles',
             active: isRolesActive,
+            'data-testid': 'menu-roles',
           },
           capabilities.mayAccess('permissions') && {
             label: _('Permissions'),
             to: '/permissions',
             active: isPermissionsActive,
+            'data-testid': 'menu-permissions',
           },
           capabilities.mayAccess('system_reports') && {
             label: _('Performance'),
             to: '/performance',
             active: isPerformanceActive,
+            'data-testid': 'menu-performance',
           },
           {
             label: _('Trashcan'),
             to: '/trashcan',
             active: isTrashcanActive,
+            'data-testid': 'menu-trashcan',
           },
           capabilities.mayAccess('feeds') && {
             label: _('Feed Status'),
             to: '/feedstatus',
             active: isFeedStatusActive,
+            'data-testid': 'menu-feed-status',
           },
           capabilities.mayOp('describe_auth') &&
             capabilities.mayOp('modify_auth') && {
               label: _('LDAP'),
               to: '/ldap',
               active: isLdapActive,
+              'data-testid': 'menu-ldap',
             },
           capabilities.mayOp('describe_auth') &&
             capabilities.mayOp('modify_auth') && {
               label: _('RADIUS'),
               to: '/radius',
               active: isRadiusActive,
+              'data-testid': 'menu-radius',
             },
         ].filter(Boolean),
       },
@@ -355,21 +411,25 @@ const Menu = () => {
         label: _('Help'),
         key: 'help',
         icon: CircleHelp,
+        'data-testid' : 'menu-help',
         subNav: [
           {
             label: _('User Manual'),
             to: 'https://docs.greenbone.net/GSM-Manual/gos-22.04/en/',
             isExternal: true,
+            'data-testid': 'menu-user-manual',
           },
           {
             label: _('CVSS Calculator'),
             to: '/cvsscalculator',
             active: isCvssCalculatorActive,
+            'data-testid': 'menu-cvss-calc',
           },
           {
             label: _('About'),
             to: '/about',
             active: isAboutActive,
+            'data-testid': 'menu-about',
           },
         ],
       },
@@ -379,6 +439,7 @@ const Menu = () => {
         label: _('Asset'),
         to: '/asset-management',
         isExternal: true,
+        'data-testid' : 'menu-asset-management',
       },
     ].filter(Boolean),
   ];
diff --git a/src/web/components/powerfilter/applyoverridesgroup.jsx b/src/web/components/powerfilter/applyoverridesgroup.jsx
index 4f52a66854..f9b895b370 100644
--- a/src/web/components/powerfilter/applyoverridesgroup.jsx
+++ b/src/web/components/powerfilter/applyoverridesgroup.jsx
@@ -36,6 +36,7 @@ const ApplyOverridesGroup = ({
         noValue={0}
         convert={parseInt}
         onChange={onChange}
+        data-testid="apply-overrides-yesnoradio"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/booleanfiltergroup.jsx b/src/web/components/powerfilter/booleanfiltergroup.jsx
index 13d58a4b4b..f911bb1066 100644
--- a/src/web/components/powerfilter/booleanfiltergroup.jsx
+++ b/src/web/components/powerfilter/booleanfiltergroup.jsx
@@ -30,6 +30,7 @@ const BooleanFilterGroup = ({filter, name, title, onChange}) => {
         noValue={0}
         convert={parseInt}
         onChange={onChange}
+        data-testid="boolean-filter-yesnoradio"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/compliancelevelsgroup.jsx b/src/web/components/powerfilter/compliancelevelsgroup.jsx
index 6dde65d727..b44542d913 100644
--- a/src/web/components/powerfilter/compliancelevelsgroup.jsx
+++ b/src/web/components/powerfilter/compliancelevelsgroup.jsx
@@ -67,24 +67,28 @@ const ComplianceLevelsFilterGroup = ({
           checked={complianceLevels.includes('y')}
           name="y"
           onChange={handleComplianceChange}
+          data-testid="compliance-checkbox-yes"
         />
         <ComplianceStateLabels.Yes />
         <Checkbox
           checked={complianceLevels.includes('n')}
           name="n"
           onChange={handleComplianceChange}
+          data-testid="compliance-checkbox-no"
         />
         <ComplianceStateLabels.No />
         <Checkbox
           checked={complianceLevels.includes('i')}
           name="i"
           onChange={handleComplianceChange}
+          data-testid="compliance-checkbox-incomplete"
         />
         <ComplianceStateLabels.Incomplete />
         <Checkbox
           checked={complianceLevels.includes('u')}
           name="u"
           onChange={handleComplianceChange}
+          data-testid="compliance-checkbox-undefined"
         />
         <ComplianceStateLabels.Undefined />
       </IconDivider>
diff --git a/src/web/components/powerfilter/minqodgroup.jsx b/src/web/components/powerfilter/minqodgroup.jsx
index 7d6b574f0a..8e1bbdad3d 100644
--- a/src/web/components/powerfilter/minqodgroup.jsx
+++ b/src/web/components/powerfilter/minqodgroup.jsx
@@ -31,6 +31,7 @@ const MinQodGroup = ({qod, onChange, filter, name = 'min_qod'}) => {
         step="1"
         value={qod}
         onChange={onChange}
+        data-testid="min-qod"
       />
       <span>%</span>
     </FormGroup>
diff --git a/src/web/components/powerfilter/powerfilter.jsx b/src/web/components/powerfilter/powerfilter.jsx
index ebc64ad068..64f5e9cc7b 100644
--- a/src/web/components/powerfilter/powerfilter.jsx
+++ b/src/web/components/powerfilter/powerfilter.jsx
@@ -192,12 +192,14 @@ class PowerFilter extends React.Component {
                 value={userFilterString}
                 onKeyDown={this.handleUserFilterKeyPress}
                 onChange={this.handleValueChange}
+                data-testid="powerfilter-text"
               />
             </Layout>
             <IconDivider align={['start', 'center']}>
               <RefreshIcon
                 title={_('Update Filter')}
                 onClick={this.handleUpdateFilter}
+                data-testid="powerfiler-refresh"
               />
 
               {onRemoveClick && (
@@ -207,6 +209,7 @@ class PowerFilter extends React.Component {
                   onClick={
                     isDefined(filter) ? this.handleRemoveClick : undefined
                   }
+                  data-testid="powefilter-delete"
                 />
               )}
               {onResetClick && (
@@ -216,6 +219,7 @@ class PowerFilter extends React.Component {
                   onClick={
                     isDefined(filter) ? this.handleResetClick : undefined
                   }
+                  data-testid="powerfilter-reset"
                 />
               )}
 
@@ -223,6 +227,7 @@ class PowerFilter extends React.Component {
                 title={_('Help: Powerfilter')}
                 page="web-interface"
                 anchor="filtering-the-page-content"
+                data-testid="powerfilter-help"
               />
 
               {onEditClick && (
@@ -230,6 +235,7 @@ class PowerFilter extends React.Component {
                   title={_('Edit Filter')}
                   disabled={!isDefined(filter) || isLoading}
                   onClick={isDefined(filter) ? onEditClick : undefined}
+                  data-testid="powerfilter-edit"
                 />
               )}
             </IconDivider>
@@ -245,6 +251,7 @@ class PowerFilter extends React.Component {
                   : DEFAULT_FILTER_ID
               }
               onChange={this.handleNamedFilterChange}
+              data-testid="powefilter-select"
             />
           )}
         </Layout>
diff --git a/src/web/components/powerfilter/relationselector.jsx b/src/web/components/powerfilter/relationselector.jsx
index 77dd65a993..fc7d16759f 100644
--- a/src/web/components/powerfilter/relationselector.jsx
+++ b/src/web/components/powerfilter/relationselector.jsx
@@ -18,6 +18,7 @@ const RelationSelector = ({relation, onChange}) => {
   const [_] = useTranslation();
   return (
     <Select
+      data-testid="relationselector"
       value={relation}
       onChange={onChange}
       items={[
diff --git a/src/web/components/powerfilter/resultsperpagegroup.jsx b/src/web/components/powerfilter/resultsperpagegroup.jsx
index c84b2c10eb..0d3d3cf1bd 100644
--- a/src/web/components/powerfilter/resultsperpagegroup.jsx
+++ b/src/web/components/powerfilter/resultsperpagegroup.jsx
@@ -22,7 +22,7 @@ const ResultsPerPageGroup = ({rows, filter, onChange, name = 'rows'}) => {
   }
 
   return (
-    <FormGroup title={_('Results per page')}>
+    <FormGroup title={_('Results per page')} data-testid="results-per-page"> 
       <Spinner type="int" name={name} value={rows} onChange={onChange} />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/severitylevelsgroup.jsx b/src/web/components/powerfilter/severitylevelsgroup.jsx
index 1d2a43d254..fd8ad80fe9 100644
--- a/src/web/components/powerfilter/severitylevelsgroup.jsx
+++ b/src/web/components/powerfilter/severitylevelsgroup.jsx
@@ -60,30 +60,35 @@ const SeverityLevelsFilterGroup = ({filter, onChange, onRemove}) => {
           checked={levels.includes('h')}
           name="h"
           onChange={handleLevelChange}
+          data-testid="severity-filter-high"
         />
         <SeverityClassLabel.High />
         <Checkbox
           checked={levels.includes('m')}
           name="m"
           onChange={handleLevelChange}
+          data-testid="severity-filter-medium"
         />
         <SeverityClassLabel.Medium />
         <Checkbox
           checked={levels.includes('l')}
           name="l"
           onChange={handleLevelChange}
+          data-testid="severity-filter-low"
         />
         <SeverityClassLabel.Low />
         <Checkbox
           checked={levels.includes('g')}
           name="g"
           onChange={handleLevelChange}
+          data-testid="severity-filter-log"
         />
         <SeverityClassLabel.Log />
         <Checkbox
           checked={levels.includes('f')}
           name="f"
           onChange={handleLevelChange}
+          data-testid="severity-filter-false-positive"
         />
         <SeverityClassLabel.FalsePositive />
       </IconDivider>
diff --git a/src/web/components/powerfilter/severityvaluesgroup.jsx b/src/web/components/powerfilter/severityvaluesgroup.jsx
index b340718a88..52376d7e73 100644
--- a/src/web/components/powerfilter/severityvaluesgroup.jsx
+++ b/src/web/components/powerfilter/severityvaluesgroup.jsx
@@ -35,6 +35,7 @@ const SeverityValuesGroup = ({filter, name, title, onChange}) => {
         }}
       />
       <NumberField
+        data-testid="severity-value-filter"
         name={keyword}
         type="int"
         min={0}
diff --git a/src/web/components/powerfilter/solutiontypegroup.jsx b/src/web/components/powerfilter/solutiontypegroup.jsx
index a821160ea9..6b1023b9fa 100644
--- a/src/web/components/powerfilter/solutiontypegroup.jsx
+++ b/src/web/components/powerfilter/solutiontypegroup.jsx
@@ -57,6 +57,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={!isDefined(solutionType) || solutionType === 'All'}
                     name="All"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-all"
                   ></Radio>
                   <span>{_('All')}</span>
                 </Row>
@@ -67,6 +68,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={solutionType === 'Workaround'}
                     name="Workaround"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-workaround"
                   />
                   <SolutionTypeIcon type="Workaround" />
                   <span>{_('Workaround')}</span>
@@ -78,6 +80,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={solutionType === 'Mitigation'}
                     name="Mitigation"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-mitigation"
                   />
                   <SolutionTypeIcon type="Mitigation" />
                   <span>{_('Mitigation')}</span>
@@ -91,6 +94,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={solutionType === 'VendorFix'}
                     name="VendorFix"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-vendor-fix"
                   />
                   <SolutionTypeIcon type="VendorFix" />
                   <span>{_('Vendor fix')}</span>
@@ -102,6 +106,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={solutionType === 'NoneAvailable'}
                     name="NoneAvailable"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-none-available"
                   />
                   <SolutionTypeIcon type="NoneAvailable" />
                   <span>{_('None available')}</span>
@@ -113,6 +118,7 @@ const SolutionTypesFilterGroup = ({filter, onChange}) => {
                     checked={solutionType === 'WillNotFix'}
                     name="WillNotFix"
                     onChange={handleSolutionTypeChange}
+                    data-testid="filter-solution-will-not-fix"
                   />
                   <SolutionTypeIcon type="WillNotFix" />
                   <span>{_('Will not fix')}</span>{' '}
diff --git a/src/web/components/powerfilter/sortbygroup.jsx b/src/web/components/powerfilter/sortbygroup.jsx
index 1e93a87050..080cf27ee7 100644
--- a/src/web/components/powerfilter/sortbygroup.jsx
+++ b/src/web/components/powerfilter/sortbygroup.jsx
@@ -42,6 +42,7 @@ const SortByGroup = ({
         value={by}
         items={renderSortFieldItems()}
         onChange={onSortByChange}
+        data-testid="sort-by"
       />
       <Radio
         name="sort_order"
@@ -49,6 +50,7 @@ const SortByGroup = ({
         checked={order === 'sort'}
         title={_('Ascending')}
         onChange={onSortOrderChange}
+        data-testid="sort-order"
       />
       <Radio
         name="sort_order"
@@ -56,6 +58,7 @@ const SortByGroup = ({
         checked={order === 'sort-reverse'}
         title={_('Descending')}
         onChange={onSortOrderChange}
+        data-testid="sort-reverse"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/tasktrendgroup.jsx b/src/web/components/powerfilter/tasktrendgroup.jsx
index f575fdc42b..1174a3a2e7 100644
--- a/src/web/components/powerfilter/tasktrendgroup.jsx
+++ b/src/web/components/powerfilter/tasktrendgroup.jsx
@@ -27,6 +27,7 @@ const TaskTrendGroup = ({trend, name = 'trend', filter, onChange}) => {
         name={name}
         value={trend}
         onChange={onChange}
+        data-testid="filter-trend"
         items={[
           {label: _('Severity increased'), value: 'up'},
           {label: _('Severity decreased'), value: 'down'},
diff --git a/src/web/components/powerfilter/ticketstatusgroup.jsx b/src/web/components/powerfilter/ticketstatusgroup.jsx
index 28bdaff24f..c189109d9d 100644
--- a/src/web/components/powerfilter/ticketstatusgroup.jsx
+++ b/src/web/components/powerfilter/ticketstatusgroup.jsx
@@ -32,6 +32,7 @@ const TicketStatusFilterGroup = ({
         name={name}
         value={status}
         onChange={onChange}
+        data-testid="filter-status"
         items={[
           {label: _('Open'), value: 'Open'},
           {label: _('Fixed'), value: 'Fixed'},
diff --git a/src/web/components/qod/qod.jsx b/src/web/components/qod/qod.jsx
index 07a328b8ca..e37932f41b 100644
--- a/src/web/components/qod/qod.jsx
+++ b/src/web/components/qod/qod.jsx
@@ -14,7 +14,7 @@ const Span = styled.span`
   white-space: nowrap;
 `;
 
-const Qod = ({value}) => <Span>{value} %</Span>;
+const Qod = ({value}) => <Span data-testid="qod">{value} %</Span>;
 
 Qod.propTypes = {
   value: PropTypes.numberOrNumberString.isRequired,