From 1272be9318160a75156dd0792fb8e2af80432ba0 Mon Sep 17 00:00:00 2001
From: christianpiske <christian.piske@greenbone.net>
Date: Thu, 14 Nov 2024 11:20:06 +0100
Subject: [PATCH 1/2] Add: A lot of Test-IDs These will be used in test
 automation to make tests more stable and resilient to code changes.

---
 src/web/components/bar/compliancebar.jsx      |  2 +-
 .../components/bar/compliancestatusbar.jsx    |  1 +
 src/web/components/bar/menubar.jsx            | 95 ++++++++++---------
 src/web/components/bar/severitybar.jsx        |  2 +-
 src/web/components/bar/statusbar.jsx          |  2 +-
 src/web/components/bar/toolbar.jsx            |  1 +
 src/web/components/certinfo/certinfo.jsx      | 24 ++---
 src/web/components/comment/comment.jsx        |  2 +-
 src/web/components/dashboard/controls.jsx     |  4 +
 src/web/components/dialog/button.jsx          |  2 +-
 src/web/components/dialog/closebutton.jsx     |  1 +
 src/web/components/dialog/composercontent.jsx |  4 +-
 .../components/dialog/confirmationdialog.jsx  |  6 +-
 src/web/components/dialog/container.jsx       |  1 +
 src/web/components/dialog/dialog.jsx          |  1 +
 src/web/components/dialog/error.jsx           |  4 +-
 src/web/components/dialog/errordialog.jsx     |  5 +-
 src/web/components/dialog/savedialog.jsx      |  5 +-
 src/web/components/form/datepicker.jsx        |  1 +
 src/web/components/form/passwordfield.jsx     |  2 +-
 src/web/components/form/textfield.jsx         |  1 +
 src/web/components/form/timezoneselect.jsx    |  1 +
 src/web/components/form/yesnoradio.jsx        |  2 +
 src/web/components/icon/arrowicon.jsx         |  2 +-
 src/web/components/icon/cpeicon.jsx           |  2 +-
 src/web/components/icon/deleteicon.jsx        |  2 +-
 src/web/components/icon/detailsicon.jsx       |  2 +-
 src/web/components/icon/exporticon.jsx        |  2 +-
 src/web/components/icon/foldstateicon.jsx     |  4 +-
 src/web/components/icon/manualicon.jsx        |  2 +-
 src/web/components/icon/trashicon.jsx         |  2 +-
 src/web/components/img/greenbone.jsx          |  2 +-
 src/web/components/img/greenboneloginlogo.jsx |  2 +-
 src/web/components/label/severityclass.jsx    | 10 +-
 src/web/components/link/certlink.jsx          |  2 +-
 src/web/components/link/cvelink.jsx           |  2 +-
 src/web/components/link/externallink.jsx      |  3 +-
 src/web/components/link/innerlink.jsx         |  2 +-
 src/web/components/link/link.jsx              |  2 +-
 src/web/components/link/manuallink.jsx        |  2 +-
 src/web/components/link/protocoldoclink.jsx   |  2 +-
 .../powerfilter/applyoverridesgroup.jsx       |  1 +
 .../powerfilter/booleanfiltergroup.jsx        |  1 +
 .../powerfilter/compliancelevelsgroup.jsx     |  4 +
 .../powerfilter/filtersearchgroup.jsx         |  2 +-
 .../powerfilter/filterstringgroup.jsx         |  1 +
 .../powerfilter/firstresultgroup.jsx          |  1 +
 .../components/powerfilter/minqodgroup.jsx    |  1 +
 .../components/powerfilter/powerfilter.jsx    |  5 +
 .../powerfilter/relationselector.jsx          |  8 +-
 .../powerfilter/resultsperpagegroup.jsx       |  1 +
 .../powerfilter/severitylevelsgroup.jsx       |  5 +
 .../powerfilter/severityvaluesgroup.jsx       |  1 +
 .../powerfilter/solutiontypegroup.jsx         |  6 ++
 .../components/powerfilter/sortbygroup.jsx    |  3 +
 .../components/powerfilter/tasktrendgroup.jsx | 10 +-
 .../powerfilter/ticketstatusgroup.jsx         |  8 +-
 src/web/components/qod/qod.jsx                |  2 +-
 src/web/components/section/header.jsx         |  2 +-
 src/web/components/table/detailstable.jsx     |  2 +-
 src/web/entity/note.jsx                       |  4 +-
 src/web/entity/override.jsx                   |  3 +-
 62 files changed, 172 insertions(+), 115 deletions(-)

diff --git a/src/web/components/bar/compliancebar.jsx b/src/web/components/bar/compliancebar.jsx
index 9f17e89fc9..158a101e74 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="progress-bar">
       {title}
     </ProgressBar>
   );
diff --git a/src/web/components/bar/compliancestatusbar.jsx b/src/web/components/bar/compliancestatusbar.jsx
index 16917b57f2..0de33f3000 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="progress-bar"
     >
       {text}
     </ProgressBar>
diff --git a/src/web/components/bar/menubar.jsx b/src/web/components/bar/menubar.jsx
index 388586c6b0..e3cd63f36a 100644
--- a/src/web/components/bar/menubar.jsx
+++ b/src/web/components/bar/menubar.jsx
@@ -114,137 +114,140 @@ const MenuBar = ({isLoggedIn}) => {
       <MenuBarPlaceholder />
       <Wrapper>
         <Ul>
-          <Menu to="/dashboard" title={_('Dashboards')} />
+          <Menu to="/dashboard" title={_('Dashboards')} data-testid="menu_dashboard"/>
           {may_op_scans && (
-            <Menu title={_('Scans')}>
+            <Menu title={_('Scans')} data-testid="menu_scans">
               {caps.mayAccess('tasks') && (
-                <MenuEntry title={_('Tasks')} to="tasks" />
+                <MenuEntry title={_('Tasks')} to="tasks" data-testid="menu_tasks"/>
               )}
               {caps.mayAccess('reports') && (
-                <MenuEntry title={_('Reports')} to="reports" />
+                <MenuEntry title={_('Reports')} to="reports" data-testid="menu_reports"/>
               )}
               {caps.mayAccess('results') && (
-                <MenuEntry title={_('Results')} to="results" />
+                <MenuEntry title={_('Results')} to="results" data-testid="menu_results"/>
               )}
               {caps.mayAccess('vulns') && (
-                <MenuEntry title={_('Vulnerabilities')} to="vulnerabilities" />
+                <MenuEntry title={_('Vulnerabilities')} to="vulnerabilities" data-testid="menu_vulnerability"/>
               )}
               {mayOpNotesOverrides && (
                 <MenuSection>
                   {caps.mayAccess('notes') && (
-                    <MenuEntry title={_('Notes')} to="notes" />
+                    <MenuEntry title={_('Notes')} to="notes" data-testid="menu_notes"/>
                   )}
                   {caps.mayAccess('overrides') && (
-                    <MenuEntry title={_('Overrides')} to="overrides" />
+                    <MenuEntry title={_('Overrides')} to="overrides" data-testid="menu_overrides"/>
                   )}
                 </MenuSection>
               )}
             </Menu>
           )}
           {mayOpAssets && (
-            <Menu title={_('Assets')}>
+            <Menu title={_('Assets')} data-testid="menu_assets">
               {caps.mayAccess('assets') && (
-                <MenuEntry title={_('Hosts')} to="hosts" />
+                <MenuEntry title={_('Hosts')} to="hosts" data-testid="menu_hosts"/>
               )}
               {caps.mayAccess('assets') && (
                 <MenuEntry
                   title={_('Operating Systems')}
                   to="operatingsystems"
+                  data-testid="menu_operating_systems"
                 />
               )}
               {caps.mayAccess('tls_certificates') && (
-                <MenuEntry title={_('TLS Certificates')} to="tlscertificates" />
+                <MenuEntry title={_('TLS Certificates')} to="tlscertificates" data-testid="menu_TLS_cert"/>
               )}
             </Menu>
           )}
           {mayOpResilience && (
-            <Menu title={_('Resilience')}>
+            <Menu title={_('Resilience')} data-testid="menu_resilience">
               {caps.mayAccess('tickets') && (
-                <MenuEntry title={_('Remediation Tickets')} to="tickets" />
+                <MenuEntry title={_('Remediation Tickets')} to="tickets" data-testid="menu_remediation_tickets"/>
               )}
               <MenuSection>
                 {caps.mayAccess('policies') && (
-                  <MenuEntry title={_('Compliance Policies')} to="policies" />
+                  <MenuEntry title={_('Compliance Policies')} to="policies" data-testid="menu_compliance_policies"/>
                 )}
                 {caps.mayAccess('audits') && (
-                  <MenuEntry title={_('Compliance Audits')} to="audits" />
+                  <MenuEntry title={_('Compliance Audits')} to="audits" data-testid="menu_compliance_audits"/>
                 )}
                 {caps.featureEnabled('COMPLIANCE_REPORTS') &&
                   caps.mayAccess('audits') && (
                     <MenuEntry
                       title={_('Compliance Audit Reports')}
                       to="auditreports"
+                      data-testid="menu_compliance_reports"
                     />
                   )}
               </MenuSection>
             </Menu>
           )}
           {caps.mayAccess('info') && (
-            <Menu title={_('SecInfo')}>
-              <MenuEntry title={_('NVTs')} to="nvts" />
-              <MenuEntry title={_('CVEs')} to="cves" />
-              <MenuEntry title={_('CPEs')} to="cpes" />
-              <MenuEntry title={_('CERT-Bund Advisories')} to="certbunds" />
-              <MenuEntry title={_('DFN-CERT Advisories')} to="dfncerts" />
+            <Menu title={_('SecInfo')} data-testid="menu_secinfo">
+              <MenuEntry title={_('NVTs')} to="nvts" data-testid="menu_nvts"/>
+              <MenuEntry title={_('CVEs')} to="cves" data-testid="menu_cves"/>
+              <MenuEntry title={_('CPEs')} to="cpes" data-testid="menu_cpes"/>
+              <MenuEntry title={_('CERT-Bund Advisories')} to="certbunds" data-testid="menu_cert_bund_advisories"/>
+              <MenuEntry title={_('DFN-CERT Advisories')} to="dfncerts" data-testid="menu_dfn_cert_advisories"/>
+              
             </Menu>
           )}
           {may_op_configuration && (
-            <Menu title={_('Configuration')}>
+            <Menu title={_('Configuration')} data-testid="menu_configuration">
               {caps.mayAccess('targets') && (
-                <MenuEntry title={_('Targets')} to="targets" />
+                <MenuEntry title={_('Targets')} to="targets" data-testid="menu_targets"/>
               )}
               {caps.mayAccess('port_lists') && (
-                <MenuEntry title={_('Port Lists')} to="portlists" />
+                <MenuEntry title={_('Port Lists')} to="portlists" data-testid="menu_portlists"/>
               )}
               {caps.mayAccess('credentials') && (
-                <MenuEntry title={_('Credentials')} to="credentials" />
+                <MenuEntry title={_('Credentials')} to="credentials" data-testid="menu_credentials"/>
               )}
               {caps.mayAccess('configs') && (
-                <MenuEntry title={_('Scan Configs')} to="scanconfigs" />
+                <MenuEntry title={_('Scan Configs')} to="scanconfigs" data-testid="menu_scanconfigs"/>
               )}
               {mayOpAlertsSchedulesReportFormats && (
                 <MenuSection>
                   {caps.mayAccess('alerts') && (
-                    <MenuEntry title={_('Alerts')} to="alerts" />
+                    <MenuEntry title={_('Alerts')} to="alerts" data-testid="menu_alerts"/>
                   )}
                   {caps.mayAccess('schedules') && (
-                    <MenuEntry title={_('Schedules')} to="schedules" />
+                    <MenuEntry title={_('Schedules')} to="schedules" data-testid="menu_schedules"/>
                   )}
                   {caps.mayAccess('report_configs') && (
-                    <MenuEntry title={_('Report Configs')} to="reportconfigs" />
+                    <MenuEntry title={_('Report Configs')} to="reportconfigs" data-testid="menu_report_configs"/>
                   )}
                   {caps.mayAccess('report_formats') && (
-                    <MenuEntry title={_('Report Formats')} to="reportformats" />
+                    <MenuEntry title={_('Report Formats')} to="reportformats" data-testid="menu_report_formats"/>
                   )}
                 </MenuSection>
               )}
               {mayOpScannersFiltersTags && (
                 <MenuSection>
                   {caps.mayAccess('scanners') && (
-                    <MenuEntry title={_('Scanners')} to="scanners" />
+                    <MenuEntry title={_('Scanners')} to="scanners" data-testid="menu_scanners"/>
                   )}
                   {caps.mayAccess('filters') && (
-                    <MenuEntry title={_('Filters')} to="filters" />
+                    <MenuEntry title={_('Filters')} to="filters" data-testid="menu_filters"/>
                   )}
                   {caps.mayAccess('tags') && (
-                    <MenuEntry title={_('Tags')} to="tags" />
+                    <MenuEntry title={_('Tags')} to="tags" data-testid="menu_tags"/>
                   )}
                 </MenuSection>
               )}
             </Menu>
           )}
-          <Menu title={_('Administration')}>
+          <Menu title={_('Administration')} data-testid="menu_administration">
             {caps.mayAccess('users') && (
-              <MenuEntry title={_('Users')} to="users" />
+              <MenuEntry title={_('Users')} to="users" data-testid="menu_users"/>
             )}
             {caps.mayAccess('groups') && (
-              <MenuEntry title={_('Groups')} to="groups" />
+              <MenuEntry title={_('Groups')} to="groups" data-testid="menu_groups"/>
             )}
             {caps.mayAccess('roles') && (
-              <MenuEntry title={_('Roles')} to="roles" />
+              <MenuEntry title={_('Roles')} to="roles" data-testid="menu_roles"/>
             )}
             {caps.mayAccess('permissions') && (
-              <MenuEntry title={_('Permissions')} to="permissions" />
+              <MenuEntry title={_('Permissions')} to="permissions" data-testid="menu_permissions"/>
             )}
             <MenuSection>
               {caps.mayAccess('system_reports') && (
@@ -252,32 +255,34 @@ const MenuBar = ({isLoggedIn}) => {
                   title={_('Performance')}
                   caps="get_system_reports"
                   to="performance"
+                  data-testid="menu_performance"
                 />
               )}
-              <MenuEntry title={_('Trashcan')} to="trashcan" />
+              <MenuEntry title={_('Trashcan')} to="trashcan" data-testid="menu_trashcan"/>
               {caps.mayAccess('feeds') && (
                 <MenuEntry
                   title={_('Feed Status')}
                   to="feedstatus"
                   caps="get_feeds"
+                  data-testid="menu_feed_status"
                 />
               )}
             </MenuSection>
             {caps.mayOp('describe_auth') && (
               <MenuSection>
                 {caps.mayOp('modify_auth') && (
-                  <MenuEntry title={_('LDAP')} to="ldap" />
+                  <MenuEntry title={_('LDAP')} to="ldap" data-testid="menu_ldap"/>
                 )}
                 {caps.mayOp('modify_auth') && (
-                  <MenuEntry title={_('RADIUS')} to="radius" />
+                  <MenuEntry title={_('RADIUS')} to="radius" data-testid="menu_radius"/>
                 )}
               </MenuSection>
             )}
           </Menu>
-          <Menu title={_('Help')}>
-            <MenuHelpEntry title={_('User Manual')} />
-            <MenuEntry title={_('CVSS Calculator')} to="cvsscalculator" />
-            <MenuEntry title={_('About')} to="about" />
+          <Menu title={_('Help')} data-testid="menu_help">
+            <MenuHelpEntry title={_('User Manual')} data-testid="menu_user_manual"/>
+            <MenuEntry title={_('CVSS Calculator')} to="cvsscalculator" data-testid="menu_cvss_calculator"/>
+            <MenuEntry title={_('About')} to="about" data-testid="menu_about"/>
           </Menu>
         </Ul>
       </Wrapper>
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..bc35ddb1e1 100644
--- a/src/web/components/bar/statusbar.jsx
+++ b/src/web/components/bar/statusbar.jsx
@@ -79,7 +79,7 @@ const StatusBar = ({status = 'Unknown', progress = '0'}) => {
       : getTranslatableTaskStatus(status);
 
   return (
-    <ProgressBar title={title} progress={progress} background={background}>
+    <ProgressBar title={title} progress={progress} background={background} data-testid="statusbar">
       <Span>{text}</Span>
     </ProgressBar>
   );
diff --git a/src/web/components/bar/toolbar.jsx b/src/web/components/bar/toolbar.jsx
index eb439147eb..564f3257ef 100644
--- a/src/web/components/bar/toolbar.jsx
+++ b/src/web/components/bar/toolbar.jsx
@@ -18,6 +18,7 @@ const Toolbar = props => {
         align={['space-between', 'start']}
         {...props}
         className="toolbar"
+        data-testid="toolbar"
       />
     </IconSizeProvider>
   );
diff --git a/src/web/components/certinfo/certinfo.jsx b/src/web/components/certinfo/certinfo.jsx
index 926d691d2c..f7e7c923d6 100644
--- a/src/web/components/certinfo/certinfo.jsx
+++ b/src/web/components/certinfo/certinfo.jsx
@@ -29,9 +29,9 @@ const CertInfo = ({info}) => {
         <Col width="90%" />
       </colgroup>
       <TableBody>
-        <TableRow>
-          <TableData>{_('Activation')}</TableData>
-          <TableData>
+        <TableRow data-testid="row_activation">
+          <TableData data-testid="label_activation">{_('Activation')}</TableData>
+          <TableData data-testid="value_activation">
             {isDefined(activationTime) ? (
               <DateTime date={activationTime} />
             ) : (
@@ -40,9 +40,9 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Expiration')}</TableData>
-          <TableData>
+        <TableRow data-testid="row_expiration">
+          <TableData data-testid="label_expiration">{_('Expiration')}</TableData>
+          <TableData data-testid="value_expiration">
             {isDefined(expirationTime) ? (
               <DateTime date={expirationTime} />
             ) : (
@@ -51,14 +51,14 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('MD5 Fingerprint')}</TableData>
-          <TableData>{md5_fingerprint}</TableData>
+        <TableRow data-testid="row_fingerprint">
+          <TableData data-testid="label_expiration">{_('MD5 Fingerprint')}</TableData>
+          <TableData data-testid="value_expiration">{md5_fingerprint}</TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Issuer')}</TableData>
-          <TableData>{issuer}</TableData>
+        <TableRow data-testid="row_issuer">
+          <TableData data-testid="label_issuer">{_('Issuer')}</TableData>
+          <TableData data-testid="value_issuer">{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..8d0f4b1a30 100644
--- a/src/web/components/dashboard/controls.jsx
+++ b/src/web/components/dashboard/controls.jsx
@@ -119,10 +119,12 @@ export class DashboardControls extends React.Component {
                 : _('Dashboard limit reached')
             }
             onClick={canAdd ? this.handleNewClick : undefined}
+            data-testid="add_new_dashboard"
           />
           <ResetIcon
             title={_('Reset to Defaults')}
             onClick={this.handleResetClick}
+            data-testid="reset_icon"
           />
         </IconDivider>
         {showNewDialog && (
@@ -136,6 +138,7 @@ export class DashboardControls extends React.Component {
             }}
             onClose={this.handleNewDialogClose}
             onSave={this.handleNewDisplay}
+            data-testid="save_dialog_add"
           >
             {({values, onValueChange}) => (
               <FormGroup title={_('Choose Display')} titleSize={3}>
@@ -145,6 +148,7 @@ export class DashboardControls extends React.Component {
                   value={values.displayId}
                   width="auto"
                   onChange={onValueChange}
+                  data-testid="display_id"
                 />
               </FormGroup>
             )}
diff --git a/src/web/components/dialog/button.jsx b/src/web/components/dialog/button.jsx
index 35aa3ab355..d0109bce47 100644
--- a/src/web/components/dialog/button.jsx
+++ b/src/web/components/dialog/button.jsx
@@ -11,7 +11,7 @@ import Button from 'web/components/form/button';
 
 import Theme from 'web/utils/theme';
 
-const DialogButton = styled(({loading, ...props}) => <Button {...props} />)`
+const DialogButton = styled(({loading, ...props}) => <Button data-testid="dialog_button" {...props} />)`
   border: 1px solid ${Theme.mediumGray};
   color: ${props => (props.loading ? 'rgba(0, 0, 0, 0.0)' : Theme.white)};
   background: ${props =>
diff --git a/src/web/components/dialog/closebutton.jsx b/src/web/components/dialog/closebutton.jsx
index 18bf8b11fe..9eb5e00b47 100644
--- a/src/web/components/dialog/closebutton.jsx
+++ b/src/web/components/dialog/closebutton.jsx
@@ -43,6 +43,7 @@ const CloseButton = ({title = _('Close'), size = 'medium', ...props}) => {
 
   return (
     <StyledCloseButton
+      data-testid="close-button"
       $width={width}
       $height={height}
       $lineHeight={height}
diff --git a/src/web/components/dialog/composercontent.jsx b/src/web/components/dialog/composercontent.jsx
index 7e8ee76626..2e0d8a32a8 100644
--- a/src/web/components/dialog/composercontent.jsx
+++ b/src/web/components/dialog/composercontent.jsx
@@ -55,7 +55,7 @@ const ComposerContent = ({
     <FormGroup title={_('Include')} titleSize="3">
       <Divider>
         <CheckBox
-          data-testid="includeNotes"
+          data-testid="includenotes"
           name="includeNotes"
           checked={includeNotes}
           checkedValue={YES_VALUE}
@@ -64,6 +64,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="includeoverrides"
           name="includeOverrides"
           checked={includeOverrides}
           checkedValue={YES_VALUE}
@@ -72,6 +73,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="includetlscertificates"
           disabled={true}
           name="includeTlsCertificates"
           checked={true}
diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
index 6494310baa..1c478ae79a 100644
--- a/src/web/components/dialog/confirmationdialog.jsx
+++ b/src/web/components/dialog/confirmationdialog.jsx
@@ -30,11 +30,12 @@ const ConfirmationDialogContent = props => {
 
   return (
     <DialogContent>
-      <DialogTitle title={title} onCloseClick={props.close} {...moveprops} />
-      <ScrollableContent data-testid="confirmationdialog-content">
+      <DialogTitle title={title} onCloseClick={props.close} {...moveprops} data-testid="confimrationdialog_title"/>
+      <ScrollableContent data-testid="confirmationdialog-content_scrollable">
         {content}
       </ScrollableContent>
       <DialogTwoButtonFooter
+        data-testid="confirmationdialog_buttonfooter"
         rightButtonTitle={rightButtonTitle}
         onLeftButtonClick={props.close}
         onRightButtonClick={handleResume}
@@ -67,6 +68,7 @@ const ConfirmationDialog = ({
     <Dialog width={width} onClose={onClose} resizable={false}>
       {({close, moveProps}) => (
         <ConfirmationDialogContent
+          data-testid="confirmationdialog_content"
           close={close}
           moveprops={moveProps}
           content={content}
diff --git a/src/web/components/dialog/container.jsx b/src/web/components/dialog/container.jsx
index ba5aa6d2d0..b7d9bf4db2 100644
--- a/src/web/components/dialog/container.jsx
+++ b/src/web/components/dialog/container.jsx
@@ -31,6 +31,7 @@ const DialogContainer = React.forwardRef(
     }
     return (
       <StyledDialogContainer
+        data-testid="dialogcontainer"
         {...other}
         ref={ref}
         width={width}
diff --git a/src/web/components/dialog/dialog.jsx b/src/web/components/dialog/dialog.jsx
index 24bc073e80..17218c1cfa 100644
--- a/src/web/components/dialog/dialog.jsx
+++ b/src/web/components/dialog/dialog.jsx
@@ -184,6 +184,7 @@ class Dialog extends React.Component {
             width={width}
             height={height}
             ref={this.dialogRef}
+            data-testid="dialog"
           >
             {children({
               close: this.handleClose,
diff --git a/src/web/components/dialog/error.jsx b/src/web/components/dialog/error.jsx
index dee7bf888c..00a72d7419 100644
--- a/src/web/components/dialog/error.jsx
+++ b/src/web/components/dialog/error.jsx
@@ -42,9 +42,9 @@ const DialogError = ({error, onCloseClick}) => {
     return null;
   }
   return (
-    <StyledLayout align={['space-between', 'center']}>
+    <StyledLayout align={['space-between', 'center']} data-testid="layout_error">
       <span>{error}</span>
-      <DialogCloseButton onClick={onCloseClick} title={_('Close')} />
+      <DialogCloseButton onClick={onCloseClick} title={_('Close')} data-testid="error_close_button"/>
     </StyledLayout>
   );
 };
diff --git a/src/web/components/dialog/errordialog.jsx b/src/web/components/dialog/errordialog.jsx
index fd0f9ef0fd..3cbb00ffb5 100644
--- a/src/web/components/dialog/errordialog.jsx
+++ b/src/web/components/dialog/errordialog.jsx
@@ -20,8 +20,8 @@ const DEFAULT_DIALOG_WIDTH = '400px';
 const ErrorDialogContent = ({moveprops, text, title, buttonTitle, close}) => {
   return (
     <DialogContent>
-      <DialogTitle title={title} onCloseClick={close} {...moveprops} />
-      <ScrollableContent data-testid="errordialog-content">
+      <DialogTitle title={title} onCloseClick={close} {...moveprops} data-testid="errordialog_title"/>
+      <ScrollableContent data-testid="errordialog-content_scrollable">
         {text}
       </ScrollableContent>
       <DialogFooter title={buttonTitle} onClick={close} />
@@ -48,6 +48,7 @@ const ErrorDialog = ({
     <Dialog width={width} onClose={onClose} resizable={false}>
       {({close, moveProps}) => (
         <ErrorDialogContent
+          data-testid="errordialog-content"
           close={close}
           moveprops={moveProps}
           text={text}
diff --git a/src/web/components/dialog/savedialog.jsx b/src/web/components/dialog/savedialog.jsx
index 8374521b11..13d2dffa85 100644
--- a/src/web/components/dialog/savedialog.jsx
+++ b/src/web/components/dialog/savedialog.jsx
@@ -99,9 +99,9 @@ const SaveDialogContent = ({
         const childValues = {...state, ...values};
         return (
           <DialogContent>
-            <DialogTitle title={title} onCloseClick={close} {...moveProps} />
+            <DialogTitle title={title} onCloseClick={close} {...moveProps} data-testid="savedialog_title"/>
             {stateError && (
-              <DialogError error={stateError} onCloseClick={handleErrorClose} />
+              <DialogError error={stateError} onCloseClick={handleErrorClose} data-testid="savedialog_error"/>
             )}
             <ErrorBoundary message={_('An error occurred in this dialog.')}>
               <ScrollableContent
@@ -137,6 +137,7 @@ const SaveDialogContent = ({
               />
             ) : (
               <DialogFooter
+                data-testid="savedialog_footer"
                 loading={loading}
                 rightButtonTitle={buttonTitle}
                 onLeftButtonClick={close}
diff --git a/src/web/components/form/datepicker.jsx b/src/web/components/form/datepicker.jsx
index 88eef8b23d..9658c84a28 100644
--- a/src/web/components/form/datepicker.jsx
+++ b/src/web/components/form/datepicker.jsx
@@ -81,6 +81,7 @@ const DatePickerComponent = ({
   );
   return (
     <DatePicker
+      data-testid="datepicker"
       {...restProps}
       disabled={disabled}
       customInput={<InputField width={width} disabled={disabled} />}
diff --git a/src/web/components/form/passwordfield.jsx b/src/web/components/form/passwordfield.jsx
index a7e727a5e4..85ce8242b4 100644
--- a/src/web/components/form/passwordfield.jsx
+++ b/src/web/components/form/passwordfield.jsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import Field from './field';
 
-const PasswordField = props => <Field {...props} type="password" />;
+const PasswordField = props => <Field {...props} type="password" data-testid="passwordfield"/>;
 
 export default PasswordField;
 
diff --git a/src/web/components/form/textfield.jsx b/src/web/components/form/textfield.jsx
index 595c669bc6..25b749158c 100644
--- a/src/web/components/form/textfield.jsx
+++ b/src/web/components/form/textfield.jsx
@@ -18,6 +18,7 @@ const TextField = ({hasError = false, errorContent, title, ...props}) => {
         hasError={hasError}
         title={hasError ? `${errorContent}` : title}
         type="text"
+        data-testid="textfield"
       />
       <ErrorMarker isVisible={hasError} />
     </React.Fragment>
diff --git a/src/web/components/form/timezoneselect.jsx b/src/web/components/form/timezoneselect.jsx
index e8221b11d5..20b9145c08 100644
--- a/src/web/components/form/timezoneselect.jsx
+++ b/src/web/components/form/timezoneselect.jsx
@@ -35,6 +35,7 @@ const TimeZoneSelectComponent = ({value = 'UTC', ...props}) => {
       menuPosition="adjust"
       value={value}
       width="230px"
+      data-testid="timezoneselect"
     />
   );
 };
diff --git a/src/web/components/form/yesnoradio.jsx b/src/web/components/form/yesnoradio.jsx
index 18b2de3fc4..8ef41f579a 100644
--- a/src/web/components/form/yesnoradio.jsx
+++ b/src/web/components/form/yesnoradio.jsx
@@ -36,6 +36,7 @@ const YesNoRadio = ({
         convert={convert}
         onChange={onChange}
         disabled={disabled}
+        data-testid="yes_radio"
       />
       <Radio
         title={_('No')}
@@ -45,6 +46,7 @@ const YesNoRadio = ({
         convert={convert}
         onChange={onChange}
         disabled={disabled}
+        data-testid="no_radio"
       />
     </Divider>
   </Layout>
diff --git a/src/web/components/icon/arrowicon.jsx b/src/web/components/icon/arrowicon.jsx
index a2b97cfe53..2e1907c9ce 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/cpeicon.jsx b/src/web/components/icon/cpeicon.jsx
index 0685c45fb3..e2828ca94d 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/deleteicon.jsx b/src/web/components/icon/deleteicon.jsx
index 3075a22362..1cd8896df6 100644
--- a/src/web/components/icon/deleteicon.jsx
+++ b/src/web/components/icon/deleteicon.jsx
@@ -29,7 +29,7 @@ const DeleteIcon = ({selectionType, title, ...props}) => {
       title = _('Delete all filtered');
     }
   }
-  return <DeleteSvgIcon {...props} title={title} />;
+  return <DeleteSvgIcon {...props} title={title} data-testid="delete_icon"/>;
 };
 
 DeleteIcon.propTypes = {
diff --git a/src/web/components/icon/detailsicon.jsx b/src/web/components/icon/detailsicon.jsx
index 415cba00b2..f1c8e2b1a0 100644
--- a/src/web/components/icon/detailsicon.jsx
+++ b/src/web/components/icon/detailsicon.jsx
@@ -11,7 +11,7 @@ import Icon from './svg/details.svg';
 
 const DetailsIcon = props => (
   <SvgIcon {...props}>
-    <Icon />
+    <Icon data-testid="details_icon"/>
   </SvgIcon>
 );
 
diff --git a/src/web/components/icon/exporticon.jsx b/src/web/components/icon/exporticon.jsx
index 00ac016660..3b79fe8573 100644
--- a/src/web/components/icon/exporticon.jsx
+++ b/src/web/components/icon/exporticon.jsx
@@ -27,7 +27,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/foldstateicon.jsx b/src/web/components/icon/foldstateicon.jsx
index 0fef7314d0..929f66a4df 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_icon"/>;
   }
 
-  return <UnfoldIcon title={_('Fold')} {...props} />;
+  return <UnfoldIcon title={_('Fold')} {...props} data-testid="unfold_icon"/>;
 };
 
 FoldStateIcon.propTypes = {
diff --git a/src/web/components/icon/manualicon.jsx b/src/web/components/icon/manualicon.jsx
index 705bb2cf64..b44eeca933 100644
--- a/src/web/components/icon/manualicon.jsx
+++ b/src/web/components/icon/manualicon.jsx
@@ -15,7 +15,7 @@ import HelpIcon from './helpicon';
 const ManualIcon = ({anchor, page, searchTerm, ...props}) => {
   return (
     <ManualLink anchor={anchor} page={page} searchTerm={searchTerm}>
-      <HelpIcon {...props} />
+      <HelpIcon {...props} data-testid="help_icon"/>
     </ManualLink>
   );
 };
diff --git a/src/web/components/icon/trashicon.jsx b/src/web/components/icon/trashicon.jsx
index 71cfde96f9..b0d9b25c47 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="trashicon"/>;
 };
 
 TrashIcon.propTypes = {
diff --git a/src/web/components/img/greenbone.jsx b/src/web/components/img/greenbone.jsx
index b1f5c84dfb..2f48f4d3cd 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..63ea7ec10c 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_logo_login"/>
   );
 };
 
diff --git a/src/web/components/label/severityclass.jsx b/src/web/components/label/severityclass.jsx
index 094c4bcdf6..dbe9f74144 100644
--- a/src/web/components/label/severityclass.jsx
+++ b/src/web/components/label/severityclass.jsx
@@ -29,7 +29,7 @@ const Label = styledExcludeProps(styled.div, [
 
 const HighLabel = props => {
   return (
-    <Label {...props} backgroundColor="#C83814" borderColor="#C83814">
+    <Label {...props} backgroundColor="#C83814" borderColor="#C83814" data-testid="high_severity_label">
       {_('High')}
     </Label>
   );
@@ -37,7 +37,7 @@ const HighLabel = props => {
 
 const MediumLabel = props => {
   return (
-    <Label {...props} backgroundColor="#F0A519" borderColor="#F0A519">
+    <Label {...props} backgroundColor="#F0A519" borderColor="#F0A519" data-testid="medium_severity_label">
       {_('Medium')}
     </Label>
   );
@@ -45,7 +45,7 @@ const MediumLabel = props => {
 
 const LowLabel = props => {
   return (
-    <Label {...props} backgroundColor="#4F91C7" borderColor="#4F91C7">
+    <Label {...props} backgroundColor="#4F91C7" borderColor="#4F91C7" data-testid="low_severity_label">
       {_('Low')}
     </Label>
   );
@@ -53,7 +53,7 @@ const LowLabel = props => {
 
 const LogLabel = props => {
   return (
-    <Label {...props} backgroundColor="#191919" borderColor="#191919">
+    <Label {...props} backgroundColor="#191919" borderColor="#191919" data-testid="log_severity_label">
       {_('Log')}
     </Label>
   );
@@ -61,7 +61,7 @@ const LogLabel = props => {
 
 const FalsePositiveLabel = props => {
   return (
-    <Label {...props} backgroundColor="#191919" borderColor="#191919">
+    <Label {...props} backgroundColor="#191919" borderColor="#191919" data-testid="false_positive_severity_label">
       {_('False Pos.')}
     </Label>
   );
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..a820b529b7 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/link/externallink.jsx b/src/web/components/link/externallink.jsx
index 846ebb4760..c7b042576c 100644
--- a/src/web/components/link/externallink.jsx
+++ b/src/web/components/link/externallink.jsx
@@ -60,7 +60,7 @@ class ExternalLink extends React.Component {
     );
     return (
       <React.Fragment>
-        <a {...props} href={to} onClick={this.handleClick}>
+        <a {...props} href={to} onClick={this.handleClick} data-testid="external_link">
           {children}
         </a>
         {dialogvisible && (
@@ -72,6 +72,7 @@ class ExternalLink extends React.Component {
             rightButtonTitle={_('Follow Link')}
             to={to}
             width="500px"
+            data-testid="external_link_confirmation_dialog"
           />
         )}
       </React.Fragment>
diff --git a/src/web/components/link/innerlink.jsx b/src/web/components/link/innerlink.jsx
index 27ea303e9f..c7ee33ad57 100644
--- a/src/web/components/link/innerlink.jsx
+++ b/src/web/components/link/innerlink.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'web/utils/proptypes';
 
 const InnerLink = ({children, to, ...props}) => {
   return (
-    <a {...props} href={'#' + to}>
+    <a {...props} href={'#' + to} data-testid="innerlink">
       {children}
     </a>
   );
diff --git a/src/web/components/link/link.jsx b/src/web/components/link/link.jsx
index c628d96bf8..068129d6ae 100644
--- a/src/web/components/link/link.jsx
+++ b/src/web/components/link/link.jsx
@@ -63,7 +63,7 @@ const LinkComponent = ({anchor, to = '', filter, query, ...other}) => {
     hash: isDefined(anchor) ? '#' + anchor : '',
   };
 
-  return <RLink {...other} to={fullPath} />;
+  return <RLink {...other} to={fullPath} data-testid="link"/>;
 };
 
 LinkComponent.propTypes = {
diff --git a/src/web/components/link/manuallink.jsx b/src/web/components/link/manuallink.jsx
index c53a43df39..78c5021e2f 100644
--- a/src/web/components/link/manuallink.jsx
+++ b/src/web/components/link/manuallink.jsx
@@ -50,7 +50,7 @@ const ManualLink = ({anchor, page, searchTerm, lang, ...props}) => {
   } else if (isDefined(anchor)) {
     url += '#' + anchor;
   }
-  return <BlankLink {...props} to={url} />;
+  return <BlankLink {...props} to={url} data-testid="manual_link"/>;
 };
 
 ManualLink.propTypes = {
diff --git a/src/web/components/link/protocoldoclink.jsx b/src/web/components/link/protocoldoclink.jsx
index ded9d8fd8f..4a5e4895cc 100644
--- a/src/web/components/link/protocoldoclink.jsx
+++ b/src/web/components/link/protocoldoclink.jsx
@@ -16,7 +16,7 @@ const ProtocolDocLink = ({title}) => {
   const {protocolDocUrl} = gmp.settings;
 
   return (
-    <BlankLink to={protocolDocUrl} title={title}>
+    <BlankLink to={protocolDocUrl} title={title} data-testid="protocol_link">
       {title}
     </BlankLink>
   );
diff --git a/src/web/components/powerfilter/applyoverridesgroup.jsx b/src/web/components/powerfilter/applyoverridesgroup.jsx
index 1339b2ba09..ba8937ab68 100644
--- a/src/web/components/powerfilter/applyoverridesgroup.jsx
+++ b/src/web/components/powerfilter/applyoverridesgroup.jsx
@@ -34,6 +34,7 @@ const ApplyOverridesGroup = ({
         noValue={0}
         convert={parseInt}
         onChange={onChange}
+        data-testid="yes_no_radio"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/booleanfiltergroup.jsx b/src/web/components/powerfilter/booleanfiltergroup.jsx
index 13d58a4b4b..36d988c871 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="yes_no_radio"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/compliancelevelsgroup.jsx b/src/web/components/powerfilter/compliancelevelsgroup.jsx
index 272b4882d6..44ee53c747 100644
--- a/src/web/components/powerfilter/compliancelevelsgroup.jsx
+++ b/src/web/components/powerfilter/compliancelevelsgroup.jsx
@@ -66,6 +66,7 @@ const ComplianceLevelsFilterGroup = ({
           checked={complianceLevels.includes('y')}
           name="y"
           onChange={handleComplianceChange}
+          data-testid="compliance_checkbox_y"
         >
           <ComplianceStateLabels.Yes />
         </Checkbox>
@@ -73,6 +74,7 @@ const ComplianceLevelsFilterGroup = ({
           checked={complianceLevels.includes('n')}
           name="n"
           onChange={handleComplianceChange}
+          data-testid="compliance_checkbox_n"
         >
           <ComplianceStateLabels.No />
         </Checkbox>
@@ -80,6 +82,7 @@ const ComplianceLevelsFilterGroup = ({
           checked={complianceLevels.includes('i')}
           name="i"
           onChange={handleComplianceChange}
+          data-testid="compliance_checkbox_i"
         >
           <ComplianceStateLabels.Incomplete />
         </Checkbox>
@@ -87,6 +90,7 @@ const ComplianceLevelsFilterGroup = ({
           checked={complianceLevels.includes('u')}
           name="u"
           onChange={handleComplianceChange}
+          data-testid="compliance_checkbox_u"
         >
           <ComplianceStateLabels.Undefined />
         </Checkbox>
diff --git a/src/web/components/powerfilter/filtersearchgroup.jsx b/src/web/components/powerfilter/filtersearchgroup.jsx
index 82bc520145..f80d0c51c2 100644
--- a/src/web/components/powerfilter/filtersearchgroup.jsx
+++ b/src/web/components/powerfilter/filtersearchgroup.jsx
@@ -33,7 +33,7 @@ const FilterSearchGroup = ({name, filter, title, onChange}) => {
 
   return (
     <FormGroup title={title}>
-      <TextField name={name} value={filterVal} onChange={onChange} />
+      <TextField name={name} value={filterVal} onChange={onChange}/>
     </FormGroup>
   );
 };
diff --git a/src/web/components/powerfilter/filterstringgroup.jsx b/src/web/components/powerfilter/filterstringgroup.jsx
index 00af4fbe91..ee227227c1 100644
--- a/src/web/components/powerfilter/filterstringgroup.jsx
+++ b/src/web/components/powerfilter/filterstringgroup.jsx
@@ -27,6 +27,7 @@ const FilterStringGroup = ({filter, onChange, name = 'filter'}) => {
         value={filterstring}
         size="30"
         onChange={onChange}
+        data-testid="filter_textfield"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/firstresultgroup.jsx b/src/web/components/powerfilter/firstresultgroup.jsx
index 6fcb5366a0..4fc3320267 100644
--- a/src/web/components/powerfilter/firstresultgroup.jsx
+++ b/src/web/components/powerfilter/firstresultgroup.jsx
@@ -26,6 +26,7 @@ const FirstResultGroup = ({first, filter, onChange, name = 'first'}) => {
         value={first}
         size="5"
         onChange={onChange}
+        data-testid="filter_result"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/minqodgroup.jsx b/src/web/components/powerfilter/minqodgroup.jsx
index e9a9846105..5ff636fbb2 100644
--- a/src/web/components/powerfilter/minqodgroup.jsx
+++ b/src/web/components/powerfilter/minqodgroup.jsx
@@ -33,6 +33,7 @@ const MinQodGroup = ({qod, onChange, filter, name = 'min_qod'}) => {
           value={qod}
           size="1"
           onChange={onChange}
+          data-testid="qod_filter"
         />
         <span>%</span>
       </Divider>
diff --git a/src/web/components/powerfilter/powerfilter.jsx b/src/web/components/powerfilter/powerfilter.jsx
index e828879588..329c4f1cbc 100644
--- a/src/web/components/powerfilter/powerfilter.jsx
+++ b/src/web/components/powerfilter/powerfilter.jsx
@@ -192,6 +192,7 @@ class PowerFilter extends React.Component {
               <RefreshIcon
                 title={_('Update Filter')}
                 onClick={this.handleUpdateFilter}
+                data-testid="update_filter_icon"
               />
 
               {onRemoveClick && (
@@ -201,6 +202,7 @@ class PowerFilter extends React.Component {
                   onClick={
                     isDefined(filter) ? this.handleRemoveClick : undefined
                   }
+                  data-testid="remove_filter_icon"
                 />
               )}
               {onResetClick && (
@@ -210,6 +212,7 @@ class PowerFilter extends React.Component {
                   onClick={
                     isDefined(filter) ? this.handleResetClick : undefined
                   }
+                  data-testid="reset_filter_icon"
                 />
               )}
 
@@ -217,6 +220,7 @@ class PowerFilter extends React.Component {
                 title={_('Help: Powerfilter')}
                 page="web-interface"
                 anchor="filtering-the-page-content"
+                data-testid="Manual_filter_icon"
               />
 
               {onEditClick && (
@@ -224,6 +228,7 @@ class PowerFilter extends React.Component {
                   title={_('Edit Filter')}
                   disabled={!isDefined(filter) || isLoading}
                   onClick={isDefined(filter) ? onEditClick : undefined}
+                  data-testid="edit_filter_icon"
                 />
               )}
             </IconDivider>
diff --git a/src/web/components/powerfilter/relationselector.jsx b/src/web/components/powerfilter/relationselector.jsx
index 1a9a8c6c99..09c616900c 100644
--- a/src/web/components/powerfilter/relationselector.jsx
+++ b/src/web/components/powerfilter/relationselector.jsx
@@ -20,10 +20,10 @@ const RelationSelector = ({relation, onChange}) => {
       value={relation}
       onChange={onChange}
       items={[
-        {label: UNSET_LABEL, value: UNSET_VALUE},
-        {label: _('is equal to'), value: '='},
-        {label: _('is greater than'), value: '>'},
-        {label: _('is less than'), value: '<'},
+        {label: UNSET_LABEL, value: UNSET_VALUE, 'data-testid': 'relation_unset'},
+        {label: _('is equal to'), value: '=', 'data-testid': 'relation_equal'},
+        {label: _('is greater than'), value: '>', 'data-testid': 'relation_greater_than'},
+        {label: _('is less than'), value: '<', 'data-testid': 'relation_less_than'},
       ]}
     />
   );
diff --git a/src/web/components/powerfilter/resultsperpagegroup.jsx b/src/web/components/powerfilter/resultsperpagegroup.jsx
index 6af601b62b..15a8d97b50 100644
--- a/src/web/components/powerfilter/resultsperpagegroup.jsx
+++ b/src/web/components/powerfilter/resultsperpagegroup.jsx
@@ -27,6 +27,7 @@ const ResultsPerPageGroup = ({rows, filter, onChange, name = 'rows'}) => {
         value={rows}
         size="5"
         onChange={onChange}
+        data-testid="results_per_page"
       />
     </FormGroup>
   );
diff --git a/src/web/components/powerfilter/severitylevelsgroup.jsx b/src/web/components/powerfilter/severitylevelsgroup.jsx
index 4aaee31991..661b433974 100644
--- a/src/web/components/powerfilter/severitylevelsgroup.jsx
+++ b/src/web/components/powerfilter/severitylevelsgroup.jsx
@@ -63,6 +63,7 @@ class SeverityLevelsFilterGroup extends React.Component {
             checked={levels.includes('h')}
             name="h"
             onChange={this.handleLevelChange}
+            data-testid="severity_filter_h"
           >
             <SeverityClassLabel.High />
           </Checkbox>
@@ -70,6 +71,7 @@ class SeverityLevelsFilterGroup extends React.Component {
             checked={levels.includes('m')}
             name="m"
             onChange={this.handleLevelChange}
+            data-testid="severity_filter_m"
           >
             <SeverityClassLabel.Medium />
           </Checkbox>
@@ -77,6 +79,7 @@ class SeverityLevelsFilterGroup extends React.Component {
             checked={levels.includes('l')}
             name="l"
             onChange={this.handleLevelChange}
+            data-testid="severity_filter_l"
           >
             <SeverityClassLabel.Low />
           </Checkbox>
@@ -84,6 +87,7 @@ class SeverityLevelsFilterGroup extends React.Component {
             checked={levels.includes('g')}
             name="g"
             onChange={this.handleLevelChange}
+            data-testid="severity_filter_g"
           >
             <SeverityClassLabel.Log />
           </Checkbox>
@@ -91,6 +95,7 @@ class SeverityLevelsFilterGroup extends React.Component {
             checked={levels.includes('f')}
             name="f"
             onChange={this.handleLevelChange}
+            data-testid="severity_filter_f"
           >
             <SeverityClassLabel.FalsePositive />
           </Checkbox>
diff --git a/src/web/components/powerfilter/severityvaluesgroup.jsx b/src/web/components/powerfilter/severityvaluesgroup.jsx
index 4b530c81d7..48a857ce09 100644
--- a/src/web/components/powerfilter/severityvaluesgroup.jsx
+++ b/src/web/components/powerfilter/severityvaluesgroup.jsx
@@ -53,6 +53,7 @@ const SeverityValuesGroup = ({filter, name, title, onChange}) => {
           onChange={(value = severity, name = keyword) =>
             onChange(value, name, rel)
           }
+          data-testid="severity_value_filter"
         />
       </Divider>
     </FormGroup>
diff --git a/src/web/components/powerfilter/solutiontypegroup.jsx b/src/web/components/powerfilter/solutiontypegroup.jsx
index 69cb52ba0f..2d82cff39d 100644
--- a/src/web/components/powerfilter/solutiontypegroup.jsx
+++ b/src/web/components/powerfilter/solutiontypegroup.jsx
@@ -63,6 +63,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={!isDefined(solutionType) || solutionType === 'All'}
                     name="All"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_all"
                   >
                     <span>{_('All')}</span>
                   </Radio>
@@ -72,6 +73,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={solutionType === 'Workaround'}
                     name="Workaround"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_workaround"
                   >
                     <SolutionTypeIcon type="Workaround" />
                     <span>{_('Workaround')}</span>
@@ -82,6 +84,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={solutionType === 'Mitigation'}
                     name="Mitigation"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_mitigation"
                   >
                     <SolutionTypeIcon type="Mitigation" />
                     <span>{_('Mitigation')}</span>
@@ -94,6 +97,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={solutionType === 'VendorFix'}
                     name="VendorFix"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_vendorfix"
                   >
                     <SolutionTypeIcon type="VendorFix" />
                     <span>{_('Vendor fix')}</span>
@@ -104,6 +108,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={solutionType === 'NoneAvailable'}
                     name="NoneAvailable"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_none_available"
                   >
                     <SolutionTypeIcon type="NoneAvailable" />
                     <span>{_('None available')}</span>
@@ -114,6 +119,7 @@ class SolutionTypesFilterGroup extends React.Component {
                     checked={solutionType === 'WillNotFix'}
                     name="WillNotFix"
                     onChange={this.handleSolutionTypeChange}
+                    data-testid="filter_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 175c705b1f..46e485894e 100644
--- a/src/web/components/powerfilter/sortbygroup.jsx
+++ b/src/web/components/powerfilter/sortbygroup.jsx
@@ -39,6 +39,7 @@ class SortByGroup extends React.Component {
           value={by}
           items={this.renderSortFieldItems()}
           onChange={onSortByChange}
+          data-testid="sort_by_select"
         />
         <Radio
           name="sort_order"
@@ -46,6 +47,7 @@ class SortByGroup extends React.Component {
           checked={order === 'sort'}
           title={_('Ascending')}
           onChange={onSortOrderChange}
+          data-testid="select_sort_ascending"
         />
         <Radio
           name="sort_order"
@@ -53,6 +55,7 @@ class SortByGroup extends React.Component {
           checked={order === 'sort-reverse'}
           title={_('Descending')}
           onChange={onSortOrderChange}
+          data-testid="select_sort_decending"
         />
       </FormGroup>
     );
diff --git a/src/web/components/powerfilter/tasktrendgroup.jsx b/src/web/components/powerfilter/tasktrendgroup.jsx
index 97c46db235..88f57e4d39 100644
--- a/src/web/components/powerfilter/tasktrendgroup.jsx
+++ b/src/web/components/powerfilter/tasktrendgroup.jsx
@@ -27,11 +27,11 @@ const TaskTrendGroup = ({trend, name = 'trend', filter, onChange}) => {
         value={trend}
         onChange={onChange}
         items={[
-          {label: _('Severity increased'), value: 'up'},
-          {label: _('Severity decreased'), value: 'down'},
-          {label: _('Vulnerability count increased'), value: 'more'},
-          {label: _('Vulnerability count decreased'), value: 'less'},
-          {label: _('Vulnerabilities did not change'), value: 'same'},
+          {label: _('Severity increased'), value: 'up', 'data-testid': 'trend_up'},
+          {label: _('Severity decreased'), value: 'down', 'data-testid': 'trend_down'},
+          {label: _('Vulnerability count increased'), value: 'more', 'data-testid': 'trend_more'},
+          {label: _('Vulnerability count decreased'), value: 'less', 'data-testid': 'trend_less'},
+          {label: _('Vulnerabilities did not change'), value: 'same', 'data-testid': 'trend_same'},
         ]}
       />
     </FormGroup>
diff --git a/src/web/components/powerfilter/ticketstatusgroup.jsx b/src/web/components/powerfilter/ticketstatusgroup.jsx
index 7ac7586119..cd3034c947 100644
--- a/src/web/components/powerfilter/ticketstatusgroup.jsx
+++ b/src/web/components/powerfilter/ticketstatusgroup.jsx
@@ -32,10 +32,10 @@ const TicketStatusFilterGroup = ({
         value={status}
         onChange={onChange}
         items={[
-          {label: _('Open'), value: 'Open'},
-          {label: _('Fixed'), value: 'Fixed'},
-          {label: _('Fix Verified'), value: '"Fix Verified"'}, // this is the way I found that has the filter returned as status="Fix Verified". All the single word terms are fine.
-          {label: _('Closed'), value: 'Closed'},
+          {label: _('Open'), value: 'Open', value: 'same', 'data-testid': 'ticket_status_open'},
+          {label: _('Fixed'), value: 'Fixed', 'data-testid': 'ticket_status_fixed'},
+          {label: _('Fix Verified'), value: '"Fix Verified"', 'data-testid': 'ticket_status_fix_verified'}, // this is the way I found that has the filter returned as status="Fix Verified". All the single word terms are fine.
+          {label: _('Closed'), value: 'Closed', 'data-testid': 'ticket_status_closed'},
         ]}
       />
     </FormGroup>
diff --git a/src/web/components/qod/qod.jsx b/src/web/components/qod/qod.jsx
index 07a328b8ca..4630e45ded 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">{value} %</Span>;
 
 Qod.propTypes = {
   value: PropTypes.numberOrNumberString.isRequired,
diff --git a/src/web/components/section/header.jsx b/src/web/components/section/header.jsx
index 9d217752e4..c4a445893e 100644
--- a/src/web/components/section/header.jsx
+++ b/src/web/components/section/header.jsx
@@ -48,7 +48,7 @@ const SectionHeader = ({
   img,
 }) => {
   return (
-    <HeaderLayout flex align={align} className="section-header">
+    <HeaderLayout flex align={align} className="section-header" data-testid="header">
       <HeaderHeading align={['start', 'stretch']}>
         {isDefined(img) && (
           <HeaderIconLayout flex align={['start', 'end']}>
diff --git a/src/web/components/table/detailstable.jsx b/src/web/components/table/detailstable.jsx
index cbdc573ef9..5f6a648f59 100644
--- a/src/web/components/table/detailstable.jsx
+++ b/src/web/components/table/detailstable.jsx
@@ -13,7 +13,7 @@ import PropTypes from 'web/utils/proptypes';
 import InfoTable from './infotable';
 
 const DetailsTable = ({children, size = 'full', ...props}) => (
-  <InfoTable {...props} size={size}>
+  <InfoTable {...props} size={size} data-testid="detailstable">
     <colgroup>
       <Col width="10%" />
       <Col width="90%" />
diff --git a/src/web/entity/note.jsx b/src/web/entity/note.jsx
index 3901edab8b..27ab47f86e 100644
--- a/src/web/entity/note.jsx
+++ b/src/web/entity/note.jsx
@@ -20,8 +20,8 @@ import EntityBox from './box';
 const NoteBox = ({note, detailsLink = true}) => {
   const toolbox = detailsLink ? (
     <IconDivider>
-      <DetailsLink id={note.id} type="note" title={_('Note Details')}>
-        <DetailsIcon />
+      <DetailsLink id={note.id} type="note" title={_('Note Details')} data-testid="details_link">
+        <DetailsIcon data-testid="detailsicon"/>
       </DetailsLink>
     </IconDivider>
   ) : (
diff --git a/src/web/entity/override.jsx b/src/web/entity/override.jsx
index 4bfe31bc25..111d682b0e 100644
--- a/src/web/entity/override.jsx
+++ b/src/web/entity/override.jsx
@@ -45,8 +45,9 @@ const OverrideBox = ({override, detailsLink = true}) => {
         id={override.id}
         type="override"
         title={_('Override Details')}
+        data-testid="override_details"
       >
-        <DetailsIcon />
+        <DetailsIcon data-testid="override_details_icon"/>
       </DetailsLink>
     </IconDivider>
   ) : (

From 343193a9eb260bf94afddae8b126722725968ad9 Mon Sep 17 00:00:00 2001
From: Chris <christian.piske@greenbone.net>
Date: Thu, 28 Nov 2024 14:43:24 +0100
Subject: [PATCH 2/2] Remove wrong value

Co-authored-by: daniele-mng <daniele.mangiagli@greenbone.net>
---
 src/web/components/powerfilter/ticketstatusgroup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/components/powerfilter/ticketstatusgroup.jsx b/src/web/components/powerfilter/ticketstatusgroup.jsx
index cd3034c947..6036003558 100644
--- a/src/web/components/powerfilter/ticketstatusgroup.jsx
+++ b/src/web/components/powerfilter/ticketstatusgroup.jsx
@@ -32,7 +32,7 @@ const TicketStatusFilterGroup = ({
         value={status}
         onChange={onChange}
         items={[
-          {label: _('Open'), value: 'Open', value: 'same', 'data-testid': 'ticket_status_open'},
+          {label: _('Open'), value: 'Open',  'data-testid': 'ticket_status_open'},
           {label: _('Fixed'), value: 'Fixed', 'data-testid': 'ticket_status_fixed'},
           {label: _('Fix Verified'), value: '"Fix Verified"', 'data-testid': 'ticket_status_fix_verified'}, // this is the way I found that has the filter returned as status="Fix Verified". All the single word terms are fine.
           {label: _('Closed'), value: 'Closed', 'data-testid': 'ticket_status_closed'},