diff --git a/app/agent/components/node-selector/nodeSelector.html b/app/agent/components/node-selector/nodeSelector.html
index 4ab9e75bb..7cf98152b 100644
--- a/app/agent/components/node-selector/nodeSelector.html
+++ b/app/agent/components/node-selector/nodeSelector.html
@@ -1,6 +1,6 @@
 <div class="form-group">
   <label for="target_node" class="col-sm-1 control-label text-left">Node</label>
   <div class="col-sm-11">
-    <select class="form-control" ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents"></select>
+    <select class="form-control" ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents" data-cy="target-node-c"></select>
   </div>
 </div>
diff --git a/app/docker/components/container-restart-policy/container-restart-policy.html b/app/docker/components/container-restart-policy/container-restart-policy.html
index 43444f6ad..6b8a2066e 100644
--- a/app/docker/components/container-restart-policy/container-restart-policy.html
+++ b/app/docker/components/container-restart-policy/container-restart-policy.html
@@ -5,7 +5,8 @@
         <span>Name</span>
       </td>
       <td>
-        <select class="form-control" ng-model="$ctrl.state.editModel.name" disable-authorization="DockerContainerUpdate">
+        <select class="form-control" ng-model="$ctrl.state.editModel.name" disable-authorization="DockerContainerUpdate" data-cy="container-restart-policy-select">
+          >
           <option value="no">None</option>
           <option value="on-failure">On Failure</option>
           <option value="always">Always</option>
@@ -19,7 +20,7 @@
     <tr ng-if="$ctrl.state.editModel.name === 'on-failure'">
       <td class="col-md-3">Maximum Retry Count</td>
       <td colspan="2">
-        <input type="number" class="form-control" ng-model="$ctrl.state.editModel.maximumRetryCount" />
+        <input type="number" class="form-control" ng-model="$ctrl.state.editModel.maximumRetryCount" data-cy="container-restart-max-retry-input" />
       </td>
     </tr>
   </table>
diff --git a/app/docker/components/host-view-panels/node-availability-select/node-availability-select.html b/app/docker/components/host-view-panels/node-availability-select/node-availability-select.html
index b37f7d9d6..fd910dac6 100644
--- a/app/docker/components/host-view-panels/node-availability-select/node-availability-select.html
+++ b/app/docker/components/host-view-panels/node-availability-select/node-availability-select.html
@@ -1,5 +1,6 @@
 <div class="input-group input-group-sm">
-  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()">
+  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()" data-cy="node-availability-select">
+    >
     <option value="active">Active</option>
     <option value="pause">Pause</option>
     <option value="drain">Drain</option>
diff --git a/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
index 9a953fba8..b08d4a31b 100644
--- a/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
+++ b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
@@ -4,11 +4,18 @@
   <div ng-repeat="label in $ctrl.labels" class="mt-1">
     <div class="input-group col-sm-5 input-group-sm">
       <span class="input-group-addon">name</span>
-      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="$ctrl.updateLabel(label)" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="label.key"
+        placeholder="e.g. com.example.foo"
+        ng-change="$ctrl.updateLabel(label)"
+        data-cy="node-label-input_{{ $index }}"
+      />
     </div>
     <div class="input-group col-sm-5 input-group-sm">
       <span class="input-group-addon">value</span>
-      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" />
+      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" data-cy="node-label-value_{{ $index }}" />
     </div>
     <button class="btn btn-light" type="button" ng-click="$ctrl.removeLabel($index)">
       <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index b62036f4d..7da57762a 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -4,6 +4,7 @@
     <label for="image_registry" class="control-label col-sm-3 col-lg-2 text-left" ng-class="$ctrl.labelClass"> Registry </label>
     <div ng-class="$ctrl.inputClass" class="col-sm-8">
       <select
+        data-cy="component-registrySelect"
         ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Id"
         ng-model="$ctrl.model.Registry"
         id="image_registry"
@@ -19,6 +20,7 @@
         <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
         <input
           type="text"
+          data-cy="component-imageInput"
           class="form-control"
           aria-describedby="registry-name"
           uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
@@ -27,7 +29,6 @@
           placeholder="e.g. my-image:my-tag"
           ng-change="$ctrl.onImageChange()"
           required
-          data-cy="component-imageInput"
         />
         <span ng-if="$ctrl.isDockerHubRegistry()" class="input-group-btn">
           <a
@@ -51,7 +52,15 @@
       </span>
       <label for="image_name" ng-class="$ctrl.labelClass" class="control-label col-sm-3 col-lg-2 required text-left">Image </label>
       <div ng-class="$ctrl.inputClass" class="col-sm-8">
-        <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.model.Image"
+          name="image_name"
+          placeholder="e.g. registry:port/my-image:my-tag"
+          required
+          data-cy="component-imageInput"
+        />
       </div>
     </div>
   </div>
diff --git a/app/docker/components/network-macvlan-form/networkMacvlanForm.html b/app/docker/components/network-macvlan-form/networkMacvlanForm.html
index 8c689d971..0bcb634a5 100644
--- a/app/docker/components/network-macvlan-form/networkMacvlanForm.html
+++ b/app/docker/components/network-macvlan-form/networkMacvlanForm.html
@@ -19,6 +19,7 @@
         <div class="col-sm-9 col-lg-10">
           <input
             type="text"
+            data-cy="macvlan-network-card-input"
             class="form-control"
             name="network_card"
             ng-model="$ctrl.data.ParentNetworkCard"
@@ -69,6 +70,7 @@
             ng-model="$ctrl.data.SelectedNetworkConfig"
             name="config_network"
             ng-required="$ctrl.requiredConfigSelection()"
+            data-cy="macvlanConfigNetworkSelector"
           >
             <option selected disabled hidden value="">Select a network</option>
           </select>
diff --git a/app/docker/components/volumesCIFSForm/volumesCifsForm.html b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
index 01e82b3dc..7a749f7bd 100644
--- a/app/docker/components/volumesCIFSForm/volumesCifsForm.html
+++ b/app/docker/components/volumesCIFSForm/volumesCifsForm.html
@@ -6,7 +6,15 @@
     <div class="form-group col-md-12">
       <label for="cifs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="cifs_address" placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.data.serverAddress"
+          name="cifs_address"
+          placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx"
+          required
+          data-cy="cifs-address-input"
+        />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_address.$invalid">
@@ -21,7 +29,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_share" class="col-sm-2 col-md-1 control-label required text-left">Share</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required data-cy="cifs-share-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_share.$invalid">
@@ -36,7 +44,14 @@
     <div class="form-group col-md-12">
       <label for="cifs_version" class="col-sm-2 col-md-1 control-label text-left">CIFS Version</label>
       <div class="col-sm-10 col-md-11">
-        <select class="form-control" ng-model="$ctrl.data.version" name="cifs_version" ng-options="version for version in $ctrl.data.versions" required></select>
+        <select
+          class="form-control"
+          ng-model="$ctrl.data.version"
+          name="cifs_version"
+          ng-options="version for version in $ctrl.data.versions"
+          required
+          data-cy="cifs-version-select"
+        ></select>
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_version.$invalid">
@@ -51,7 +66,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_username" class="col-sm-2 col-md-1 control-label required text-left">Username</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required data-cy="cifs-username-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_username.$invalid">
@@ -66,7 +81,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_password" class="col-sm-2 col-md-1 control-label text-left">Password</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.password" name="cifs_password" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.password" name="cifs_password" required data-cy="cifs-password-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.password.$invalid">
diff --git a/app/docker/components/volumesNFSForm/volumesnfsForm.html b/app/docker/components/volumesNFSForm/volumesnfsForm.html
index ea143411b..dfb3eb88d 100644
--- a/app/docker/components/volumesNFSForm/volumesnfsForm.html
+++ b/app/docker/components/volumesNFSForm/volumesnfsForm.html
@@ -6,7 +6,15 @@
     <div class="form-group col-md-12">
       <label for="nfs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.data.serverAddress"
+          name="nfs_address"
+          placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx"
+          required
+          data-cy="nfs-address-input"
+        />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_address.$invalid">
@@ -21,7 +29,14 @@
     <div class="form-group col-md-12">
       <label for="nfs_version" class="col-sm-2 col-md-1 control-label text-left">NFS Version</label>
       <div class="col-sm-10 col-md-11">
-        <select class="form-control" ng-model="$ctrl.data.version" name="nfs_version" ng-options="version for version in $ctrl.data.versions" required></select>
+        <select
+          class="form-control"
+          ng-model="$ctrl.data.version"
+          name="nfs_version"
+          ng-options="version for version in $ctrl.data.versions"
+          required
+          data-cy="nfs-version-select"
+        ></select>
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_version.$invalid">
@@ -38,6 +53,7 @@
       <div class="col-sm-10 col-md-11">
         <input
           type="text"
+          data-cy="nfs-mountpoint-input"
           class="form-control"
           ng-model="$ctrl.data.mountPoint"
           name="nfs_mountpoint"
@@ -61,7 +77,7 @@
         <portainer-tooltip message="'Comma separated list of options'"></portainer-tooltip>
       </label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required data-cy="nfs-options-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_options.$invalid">
diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index 402b1eda0..945330c06 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="config_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig" />
+              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig" data-cy="config-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -37,11 +37,11 @@
               <div ng-repeat="label in ctrl.formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" data-cy="config-label-input_{{ $index }}" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="config-label-value_{{ $index }}" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="ctrl.removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
diff --git a/app/docker/views/containers/console/exec.html b/app/docker/views/containers/console/exec.html
index 7be43080f..e92d8ba45 100644
--- a/app/docker/views/containers/console/exec.html
+++ b/app/docker/views/containers/console/exec.html
@@ -26,7 +26,7 @@
                     <pr-icon ng-if="imageOS == 'linux'" icon="'svg-linux'"></pr-icon>
                     <pr-icon ng-if="imageOS == 'windows'" icon="'layout-grid'"></pr-icon>
                   </span>
-                  <select class="form-control" ng-model="formValues.command" id="command">
+                  <select class="form-control" ng-model="formValues.command" id="command" data-cy="command-select">
                     <option value="ash" ng-if="imageOS == 'linux'">/bin/ash</option>
                     <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
                     <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
@@ -35,7 +35,15 @@
                     <option ng-repeat="command in containerCommands" value="{{ command.command }}">{{ command.title }}: {{ command.command }}</option>
                   </select>
                 </div>
-                <input class="form-control" ng-if="formValues.isCustomCommand" type="text" name="custom-command" ng-model="formValues.customCommand" placeholder="e.g. ps aux" />
+                <input
+                  class="form-control"
+                  ng-if="formValues.isCustomCommand"
+                  type="text"
+                  name="custom-command"
+                  ng-model="formValues.customCommand"
+                  placeholder="e.g. ps aux"
+                  data-cy="custom-command"
+                />
               </div>
             </div>
             <!-- !command-list -->
@@ -53,7 +61,7 @@
                 <portainer-tooltip message="'Format is one of: user, user:group, uid or uid:gid'"></portainer-tooltip>
               </label>
               <div class="col-lg-11 col-sm-10">
-                <input class="form-control" type="text" ng-model="formValues.user" placeholder="root" />
+                <input class="form-control" type="text" ng-model="formValues.user" placeholder="root" data-cy="container-exec-user" />
               </div>
             </div>
             <div class="form-group">
@@ -70,8 +78,8 @@
           </div>
           <div ng-if="state !== states.disconnected">
             <label
-              >Exec into container as <code class="!text-sm align-baseline">{{ ::formValues.user || 'default user' }}</code> using command
-              <code class="!text-sm align-baseline">{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code>
+              >Exec into container as <code class="align-baseline !text-sm">{{ ::formValues.user || 'default user' }}</code> using command
+              <code class="align-baseline !text-sm">{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code>
               <terminal-tooltip class="align-sub"> </terminal-tooltip>
             </label>
             <button type="button" class="btn btn-primary" ng-click="disconnect()">
diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html
index e765d8548..9dbac0cdd 100644
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@@ -72,7 +72,7 @@
     <rd-widget>
       <rd-widget-header icon="box" title-text="Container status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
-        <table class="table">
+        <table class="table" data-cy="container-status-table">
           <tbody>
             <tr>
               <td class="col-xs-6 col-sm-4 col-md-3 col-lg-3">ID</td>
@@ -88,7 +88,7 @@
               </td>
               <td ng-if="container.edit">
                 <form ng-submit="renameContainer()">
-                  <input type="text" class="containerNameInput" ng-model="container.newContainerName" />
+                  <input type="text" class="containerNameInput" ng-model="container.newContainerName" data-cy="containerNameInput" />
                   <a href="" ng-click="container.edit = false;">
                     <pr-icon icon="'x'"></pr-icon>
                   </a>
@@ -327,7 +327,7 @@
     <rd-widget>
       <rd-widget-header icon="database" title-text="Volumes"></rd-widget-header>
       <rd-widget-body classes="no-padding">
-        <table class="table">
+        <table class="table" data-cy="container-volumes-table">
           <thead>
             <tr>
               <th>Host/volume</th>
diff --git a/app/docker/views/containers/stats/containerstats.html b/app/docker/views/containers/stats/containerstats.html
index 5ce40dd46..109b03931 100644
--- a/app/docker/views/containers/stats/containerstats.html
+++ b/app/docker/views/containers/stats/containerstats.html
@@ -27,7 +27,7 @@
           <div class="form-group">
             <label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
             <div class="col-sm-3 col-md-2">
-              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control" data-cy="docker-containers-stats-refresh-rate">
                 <option value="1">1s</option>
                 <option value="3">3s</option>
                 <option value="5">5s</option>
diff --git a/app/docker/views/images/build/buildimage.html b/app/docker/views/images/build/buildimage.html
index 928a19393..28d60ce02 100644
--- a/app/docker/views/images/build/buildimage.html
+++ b/app/docker/views/images/build/buildimage.html
@@ -40,7 +40,15 @@
                         <!-- name-input -->
                         <div class="input-group col-sm-5 input-group-sm">
                           <span class="input-group-addon">name</span>
-                          <input type="text" class="form-control" ng-model="item.Name" ng-change="checkName($index)" placeholder="e.g. my-image:my-tag" auto-focus />
+                          <input
+                            type="text"
+                            class="form-control"
+                            ng-model="item.Name"
+                            ng-change="checkName($index)"
+                            placeholder="e.g. my-image:my-tag"
+                            auto-focus
+                            data-cy="image-name-input"
+                          />
                           <span class="input-group-addon" ng-if="!item.Valid">
                             <pr-icon icon="'x'" mode="'danger'"></pr-icon>
                           </span>
@@ -101,9 +109,7 @@
                       </span>
                     </div>
                     <button class="btn btn-sm btn-primary" ngf-select="selectAdditionalFiles($files)" ngf-multiple="true">Select files</button>
-                    <span ng-repeat="item in formValues.AdditionalFiles track by $index" class="mx-2">
-                      {{ item.name }}
-                    </span>
+                    <span ng-repeat="item in formValues.AdditionalFiles track by $index" class="mx-2"> {{ item.name }} </span>
                   </div>
                 </div>
               </div>
@@ -133,7 +139,7 @@
                   <div class="form-group">
                     <label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
                     <div class="col-sm-10">
-                      <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
+                      <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" data-cy="image-path-input" />
                     </div>
                   </div>
                 </div>
@@ -156,6 +162,7 @@
                   <div class="col-sm-10">
                     <input
                       type="text"
+                      data-cy="image-url-input"
                       class="form-control"
                       ng-model="formValues.URL"
                       id="image_url"
@@ -172,7 +179,7 @@
                 <div class="form-group">
                   <label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
                   <div class="col-sm-10">
-                    <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
+                    <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" data-cy="image-path-input" />
                   </div>
                 </div>
               </div>
diff --git a/app/docker/views/networks/create/createnetwork.html b/app/docker/views/networks/create/createnetwork.html
index 7f0c555d8..ba3a74cd3 100644
--- a/app/docker/views/networks/create/createnetwork.html
+++ b/app/docker/views/networks/create/createnetwork.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="network_name" class="col-sm-2 col-lg-1 control-label text-left">Name</label>
             <div class="col-sm-10 col-lg-11">
-              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork" />
+              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork" data-cy="network-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -18,10 +18,24 @@
           <div class="form-group">
             <label for="network_driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
             <div class="col-sm-10 col-lg-11">
-              <select class="form-control" ng-options="driver for driver in availableNetworkDrivers" ng-model="config.Driver" ng-if="availableNetworkDrivers.length > 0">
+              <select
+                class="form-control"
+                ng-options="driver for driver in availableNetworkDrivers"
+                ng-model="config.Driver"
+                ng-if="availableNetworkDrivers.length > 0"
+                data-cy="network-driver-select"
+              >
                 <option disabled hidden value="">Select a driver</option>
               </select>
-              <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName" ng-if="availableNetworkDrivers.length === 0" />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="config.Driver"
+                id="network_driver"
+                placeholder="e.g. driverName"
+                ng-if="availableNetworkDrivers.length === 0"
+                data-cy="network-driver-input"
+              />
             </div>
           </div>
           <!-- !driver-input -->
@@ -38,11 +52,17 @@
               <div ng-repeat="option in formValues.DriverOptions" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="option.name"
+                    placeholder="e.g. com.docker.network.bridge.enable_icc"
+                    data-cy="network-driver-option-name-input"
+                  />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" data-cy="network-driver-option-value-input" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeDriverOption($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -64,11 +84,25 @@
             <div class="form-group">
               <label for="ipv4_network_subnet" class="col-sm-2 col-lg-1 control-label text-left">Subnet</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.Subnet" id="ipv4_network_subnet" placeholder="e.g. 172.20.0.0/16" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.Subnet"
+                  id="ipv4_network_subnet"
+                  placeholder="e.g. 172.20.0.0/16"
+                  data-cy="network-ipv4-subnet-input"
+                />
               </div>
               <label for="ipv4_network_gateway" class="col-sm-2 col-lg-1 control-label text-left">Gateway</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.Gateway" id="ipv4_network_gateway" placeholder="e.g. 172.20.10.11" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.Gateway"
+                  id="ipv4_network_gateway"
+                  placeholder="e.g. 172.20.10.11"
+                  data-cy="network-ipv4-gateway-input"
+                />
               </div>
             </div>
             <!-- !subnet-gateway-inputs -->
@@ -76,7 +110,14 @@
             <div class="form-group">
               <label for="ipv4_network_iprange" class="col-sm-2 col-lg-1 control-label text-left">IP range</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.IPRange" id="ipv4_network_iprange" placeholder="e.g. 172.20.10.128/25" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.IPRange"
+                  id="ipv4_network_iprange"
+                  placeholder="e.g. 172.20.10.128/25"
+                  data-cy="network-ipv4-iprange-input"
+                />
               </div>
             </div>
             <div ng-repeat="auxAddress in formValues.IPV4.AuxiliaryAddresses track by $index" class="form-group">
@@ -84,6 +125,7 @@
               <div class="col-sm-4 col-lg-5">
                 <input
                   type="text"
+                  data-cy="network-ipv4-auxaddr-input"
                   class="form-control"
                   ng-model="formValues.IPV4.AuxiliaryAddresses[$index]"
                   ng-change="checkIPV4AuxiliaryAddress($index)"
@@ -111,11 +153,25 @@
             <div class="form-group">
               <label for="ipv6_network_subnet" class="col-sm-2 col-lg-1 control-label text-left">Subnet</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.Subnet" id="ipv6_network_subnet" placeholder="e.g. 2001:db8::/48" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.Subnet"
+                  id="ipv6_network_subnet"
+                  placeholder="e.g. 2001:db8::/48"
+                  data-cy="network-ipv6-subnet-input"
+                />
               </div>
               <label for="ipv6_network_gateway" class="col-sm-2 col-lg-1 control-label text-left">Gateway</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.Gateway" id="ipv6_network_gateway" placeholder="e.g. 2001:db8::1" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.Gateway"
+                  id="ipv6_network_gateway"
+                  placeholder="e.g. 2001:db8::1"
+                  data-cy="network-ipv6-gateway-input"
+                />
               </div>
             </div>
             <!-- !subnet-gateway-inputs -->
@@ -123,7 +179,14 @@
             <div class="form-group">
               <label for="ipv6_network_iprange" class="col-sm-2 col-lg-1 control-label text-left">IP range</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.IPRange" id="ipv6_network_iprange" placeholder="e.g. 2001:db8::/64" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.IPRange"
+                  id="ipv6_network_iprange"
+                  placeholder="e.g. 2001:db8::/64"
+                  data-cy="network-ipv6-iprange-input"
+                />
               </div>
             </div>
             <div ng-repeat="auxAddress in formValues.IPV6.AuxiliaryAddresses track by $index" class="form-group">
@@ -131,6 +194,7 @@
               <div class="col-sm-4 col-lg-5">
                 <input
                   type="text"
+                  data-cy="network-ipv6-auxaddr-input"
                   class="form-control"
                   ng-model="formValues.IPV6.AuxiliaryAddresses[$index]"
                   ng-change="checkIPV6AuxiliaryAddress($index)"
@@ -160,11 +224,11 @@
               <div ng-repeat="label in formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="network-label-key-input" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="network-label-value-input" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)"> <pr-icon icon="'trash-2'" size="'md'"></pr-icon> </button
                   ></span>
diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index 1404683bc..886db498d 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="secret_name" class="col-sm-2 control-label text-left">Name</label>
             <div class="col-sm-10">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret" data-cy="createSecret-nameInput" />
             </div>
           </div>
           <!-- !name-input -->
@@ -17,7 +17,7 @@
           <div class="form-group">
             <label for="secret_data" class="col-sm-2 control-label text-left">Secret</label>
             <div class="col-sm-10">
-              <textarea class="form-control" rows="5" ng-model="formValues.Data" ng-trim="false"></textarea>
+              <textarea class="form-control" rows="5" ng-model="formValues.Data" ng-trim="false" data-cy="createSecret-secretDataInput"></textarea>
             </div>
           </div>
           <!-- !secret-data -->
@@ -45,11 +45,11 @@
               <div ng-repeat="label in formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="createSecret-labelNameInput" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="createSecret-labelValueInput" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
diff --git a/app/docker/views/services/create/createservice.html b/app/docker/views/services/create/createservice.html
index 12e814dbc..cbaf5c671 100644
--- a/app/docker/views/services/create/createservice.html
+++ b/app/docker/views/services/create/createservice.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="service_name" class="col-sm-2 control-label text-left">Name</label>
             <div class="col-sm-8">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService" data-cy="service-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -42,7 +42,7 @@
             <div>
               <label class="control-label col-sm-2 text-left"> Replicas </label>
               <div class="col-sm-8">
-                <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" />
+                <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" data-cy="docker-service-create-replica-count-input" />
               </div>
             </div>
           </div>
@@ -59,7 +59,7 @@
                 <!-- host-port -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">host</span>
-                  <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" />
+                  <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" data-cy="host-port-input" />
                 </div>
                 <!-- !host-port -->
                 <span style="margin: 0 10px 0 10px">
@@ -68,7 +68,7 @@
                 <!-- container-port -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">container</span>
-                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" />
+                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" data-cy="container-port-input" />
                 </div>
                 <!-- !container-port -->
                 <!-- protocol-actions -->
@@ -159,7 +159,14 @@
               <div class="form-group">
                 <label for="service_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
                 <div class="col-sm-9">
-                  <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="formValues.Command"
+                    id="service_command"
+                    placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf"
+                    data-cy="service-command-input"
+                  />
                 </div>
               </div>
               <!-- !command-input -->
@@ -167,7 +174,14 @@
               <div class="form-group">
                 <label for="service_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entrypoint</label>
                 <div class="col-sm-9">
-                  <input type="text" class="form-control" ng-model="formValues.EntryPoint" id="service_entrypoint" placeholder="e.g. /bin/sh -c" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="formValues.EntryPoint"
+                    id="service_entrypoint"
+                    placeholder="e.g. /bin/sh -c"
+                    data-cy="service-entrypoint-input"
+                  />
                 </div>
               </div>
               <!-- !entrypoint-input -->
@@ -175,11 +189,11 @@
               <div class="form-group">
                 <label for="service_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
                 <div class="col-sm-4">
-                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp" />
+                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp" data-cy="service-workingdir-input" />
                 </div>
                 <label for="service_user" class="col-sm-1 control-label text-left">User</label>
                 <div class="col-sm-4">
-                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx" />
+                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx" data-cy="service-user-input" />
                 </div>
               </div>
               <!-- !workdir-user-input -->
@@ -188,7 +202,7 @@
               <div class="form-group">
                 <label for="log-driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
                 <div class="col-sm-4">
-                  <select class="form-control" ng-model="formValues.LogDriverName" id="log-driver">
+                  <select class="form-control" ng-model="formValues.LogDriverName" id="log-driver" data-cy="service-creation-logging-driver">
                     <option selected value="">Default logging driver</option>
                     <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>
                     <option value="none">none</option>
@@ -226,11 +240,11 @@
                   <div ng-repeat="opt in formValues.LogDriverOpts" class="mt-1">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">option</span>
-                      <input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" />
+                      <input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" data-cy="service-creation-logging-driver-option" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" data-cy="service-creation-logging-driver-option-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -264,7 +278,13 @@
                         <div class="input-group col-sm-6">
                           <div class="input-group input-group-sm w-full">
                             <span class="input-group-addon">container</span>
-                            <input type="text" class="form-control" ng-model="volume.Target" placeholder="e.g. /path/in/container" />
+                            <input
+                              type="text"
+                              class="form-control"
+                              ng-model="volume.Target"
+                              placeholder="e.g. /path/in/container"
+                              data-cy="service-creation-volume-container-path"
+                            />
                           </div>
                           <div class="small text-warning" ng-show="!volume.Target"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Target is required. </div>
                         </div>
@@ -295,6 +315,7 @@
                               class="form-control"
                               ng-model="volume.Source"
                               ng-options="vol as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30)) for vol in availableVolumes"
+                              data-cy="volume-source-select"
                             >
                               <option selected disabled value="">Select a volume</option>
                             </select>
@@ -306,7 +327,7 @@
                         <div class="input-group input-group-sm col-sm-6" ng-if="volume.Type === 'bind'">
                           <div class="input-group input-group-sm w-full">
                             <span class="input-group-addon">host</span>
-                            <input type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host" />
+                            <input type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host" data-cy="service-creation-volume-host-path" />
                           </div>
                           <div class="small text-warning" ng-show="!volume.Source"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Source is required. </div>
                         </div>
@@ -337,7 +358,7 @@
               <div class="form-group">
                 <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
                 <div class="col-sm-9">
-                  <select class="form-control" ng-model="formValues.Network">
+                  <select class="form-control" ng-model="formValues.Network" data-cy="create-service-network-select">
                     <option selected disabled hidden value="">Select a network</option>
                     <option ng-repeat="net in availableNetworks | orderBy: 'Name'" ng-value="net.Name">{{ net.Name }}</option>
                   </select>
@@ -356,7 +377,7 @@
                 <!-- network-input-list -->
                 <div class="col-sm-12 form-inline" style="margin-top: 10px">
                   <div ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 2px">
-                    <select class="form-control" ng-model="network.Name">
+                    <select class="form-control" ng-model="network.Name" data-cy="create-service-extra-network-select-{{ $index }}">
                       <option selected disabled hidden value="">Select a network</option>
                       <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
                     </select>
@@ -381,7 +402,7 @@
                   <div ng-repeat="variable in formValues.HostsEntries" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" />
+                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" data-cy="service-creation-hosts-entry" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -421,11 +442,11 @@
                   <div ng-repeat="label in formValues.Labels" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="service-creation-label" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="service-creation-label-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -448,11 +469,11 @@
                   <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="service-creation-container-label" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="service-creation-container-label-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
diff --git a/app/docker/views/services/create/includes/config.html b/app/docker/views/services/create/includes/config.html
index edbf2c367..3352690d9 100644
--- a/app/docker/views/services/create/includes/config.html
+++ b/app/docker/views/services/create/includes/config.html
@@ -14,7 +14,13 @@
       <div ng-repeat="config in formValues.Configs" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">config</span>
-          <select class="form-control" ng-change="checkIfConfigDuplicated()" ng-model="config.model" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
+          <select
+            class="form-control"
+            ng-change="checkIfConfigDuplicated()"
+            ng-model="config.model"
+            ng-options="config.Name for config in availableConfigs | orderBy: 'Name'"
+            data-cy="docker-stack-configs-select"
+          >
             <option value="" selected="selected">Select a config</option>
           </select>
         </div>
diff --git a/app/docker/views/services/create/includes/resources-placement.html b/app/docker/views/services/create/includes/resources-placement.html
index 9a29d5c46..16cd4c7de 100644
--- a/app/docker/views/services/create/includes/resources-placement.html
+++ b/app/docker/views/services/create/includes/resources-placement.html
@@ -4,10 +4,17 @@
   <div class="form-group">
     <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> Memory reservation </label>
     <div class="col-sm-3">
-      <slider model="formValues.MemoryReservation" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+      <slider
+        model="formValues.MemoryReservation"
+        floor="0"
+        ceil="state.sliderMaxMemory"
+        step="256"
+        ng-if="state.sliderMaxMemory"
+        data-cy="docker-services-create-memory-reservation-slider"
+      ></slider>
     </div>
     <div class="col-sm-2">
-      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryReservation" />
+      <input type="number" data-cy="docker-services-create-memory-reservation-input" min="0" class="form-control" ng-model="formValues.MemoryReservation" />
     </div>
     <div class="col-sm-4">
       <p class="small text-muted" style="margin-top: 7px"> Minimum memory available on a node to run a task (<b>MB</b>) </p>
@@ -18,10 +25,17 @@
   <div class="form-group">
     <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> Memory limit </label>
     <div class="col-sm-3">
-      <slider model="formValues.MemoryLimit" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+      <slider
+        model="formValues.MemoryLimit"
+        floor="0"
+        ceil="state.sliderMaxMemory"
+        step="256"
+        ng-if="state.sliderMaxMemory"
+        data-cy="docker-services-create-memory-limit-slider"
+      ></slider>
     </div>
     <div class="col-sm-2">
-      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryLimit" />
+      <input type="number" data-cy="docker-services-create-memory-limit-input" min="0" class="form-control" ng-model="formValues.MemoryLimit" />
     </div>
     <div class="col-sm-4" style="margin-top: 7px">
       <p class="small text-muted"> Maximum memory usage per task (<b>MB</b>) </p>
@@ -32,7 +46,15 @@
   <div class="form-group">
     <label for="cpu-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU reservation </label>
     <div class="col-sm-5">
-      <slider model="formValues.CpuReservation" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+      <slider
+        model="formValues.CpuReservation"
+        floor="0"
+        ceil="state.sliderMaxCpu"
+        step="0.25"
+        precision="2"
+        ng-if="state.sliderMaxCpu"
+        data-cy="docker-services-create-cpu-reservation-slider"
+      ></slider>
     </div>
     <div class="col-sm-4" style="margin-top: 20px">
       <p class="small text-muted"> Minimum CPU available on a node to run a task </p>
@@ -43,7 +65,15 @@
   <div class="form-group">
     <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU limit </label>
     <div class="col-sm-5">
-      <slider model="formValues.CpuLimit" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+      <slider
+        model="formValues.CpuLimit"
+        floor="0"
+        ceil="state.sliderMaxCpu"
+        step="0.25"
+        precision="2"
+        ng-if="state.sliderMaxCpu"
+        data-cy="docker-services-create-cpu-limit-slider"
+      ></slider>
     </div>
     <div class="col-sm-4" style="margin-top: 20px">
       <p class="small text-muted"> Maximum CPU usage per task </p>
@@ -63,17 +93,17 @@
       <div ng-repeat="constraint in formValues.PlacementConstraints" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">name</span>
-          <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" />
+          <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" data-cy="docker-services-create-placement-constraint-name-{{ $index }}" />
         </div>
         <div class="input-group col-sm-1 input-group-sm">
-          <select name="constraintOperator" class="form-control" ng-model="constraint.operator">
+          <select name="constraintOperator" class="form-control" ng-model="constraint.operator" data-cy="docker-services-create-placement-constraint-operator-">
             <option value="==">==</option>
             <option value="!=">!=</option>
           </select>
         </div>
         <div class="input-group col-sm-5 input-group-sm">
           <span class="input-group-addon">value</span>
-          <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" />
+          <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" data-cy="docker-services-create-placement-constraint-value-{{ $index }}" />
         </div>
         <button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint($index)">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -94,11 +124,23 @@
       <div ng-repeat="preference in formValues.PlacementPreferences" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">strategy</span>
-          <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. spread" />
+          <input
+            type="text"
+            class="form-control"
+            ng-model="preference.strategy"
+            placeholder="e.g. spread"
+            data-cy="docker-services-create-placement-preference-strategy-{{ $index }}"
+          />
         </div>
         <div class="input-group col-sm-5 input-group-sm">
           <span class="input-group-addon">value</span>
-          <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. node.labels.datacenter" />
+          <input
+            type="text"
+            class="form-control"
+            ng-model="preference.value"
+            placeholder="e.g. node.labels.datacenter"
+            data-cy="docker-services-create-placement-preference-value-{{ $index }}"
+          />
         </div>
         <button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference($index)">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
diff --git a/app/docker/views/services/create/includes/secret.html b/app/docker/views/services/create/includes/secret.html
index 9875ed075..a82cf254a 100644
--- a/app/docker/views/services/create/includes/secret.html
+++ b/app/docker/views/services/create/includes/secret.html
@@ -20,7 +20,13 @@
       <div ng-repeat="secret in formValues.Secrets track by $index" style="margin-top: 4px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">secret</span>
-          <select class="form-control" ng-model="secret.model" ng-change="checkIfSecretDuplicated()" ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'">
+          <select
+            class="form-control"
+            ng-model="secret.model"
+            ng-change="checkIfSecretDuplicated()"
+            ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'"
+            data-cy="docker-stack-secrets-select"
+          >
             <option value="" selected="selected">Select a secret</option>
           </select>
         </div>
diff --git a/app/docker/views/services/create/includes/update-restart.html b/app/docker/views/services/create/includes/update-restart.html
index aedd5f217..c9f944f53 100644
--- a/app/docker/views/services/create/includes/update-restart.html
+++ b/app/docker/views/services/create/includes/update-restart.html
@@ -4,7 +4,7 @@
   <div class="form-group">
     <label for="parallelism" class="col-sm-3 col-lg-2 control-label text-left">Update parallelism</label>
     <div class="col-sm-4 col-lg-3">
-      <input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1" />
+      <input type="number" data-cy="docker-service-update-parallelism-input" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1" />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Maximum number of tasks to be updated simultaneously (0 to update all at once). </p>
@@ -18,7 +18,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.UpdateDelay"
+        id="update-delay"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-update-delay-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Amount of time between updates expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 0s, 0 seconds. </p>
@@ -77,7 +85,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.RestartDelay" id="restart-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.RestartDelay"
+        id="restart-delay"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-restart-delay-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Delay between restart attempts expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 5s, 5 seconds. </p>
@@ -88,7 +104,14 @@
   <div class="form-group">
     <label for="restart-max-attempts" class="col-sm-3 col-lg-2 control-label text-left">Restart max attempts</label>
     <div class="col-sm-4 col-lg-3">
-      <input type="number" class="form-control" ng-model="formValues.RestartMaxAttempts" id="restart-max-attempts" placeholder="e.g. 0" />
+      <input
+        type="number"
+        data-cy="docker-service-restart-max-attempts-input"
+        class="form-control"
+        ng-model="formValues.RestartMaxAttempts"
+        id="restart-max-attempts"
+        placeholder="e.g. 0"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Maximum attempts to restart a given task before giving up (default value is 0, which means unlimited). </p>
@@ -102,7 +125,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.RestartWindow" id="restart-window" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.RestartWindow"
+        id="restart-window"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-restart-window-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted">
diff --git a/app/docker/views/services/edit/includes/configs.html b/app/docker/views/services/edit/includes/configs.html
index d3c242110..7793d34a9 100644
--- a/app/docker/views/services/edit/includes/configs.html
+++ b/app/docker/views/services/edit/includes/configs.html
@@ -4,7 +4,12 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a config:
-        <select class="form-control !h-[30px] !text-[13px]" ng-options="config.Name for config in filterConfigs(configs) | orderBy: 'Name'" ng-model="newConfig">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-options="config.Name for config in filterConfigs(configs) | orderBy: 'Name'"
+          ng-model="newConfig"
+          data-cy="service-configs-select"
+        >
           <option selected disabled hidden value="">Select a config</option>
         </select>
         <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'"></pr-icon> add config </a>
diff --git a/app/docker/views/services/edit/includes/constraints.html b/app/docker/views/services/edit/includes/constraints.html
index 73ffe9d8b..b076558cd 100644
--- a/app/docker/views/services/edit/includes/constraints.html
+++ b/app/docker/views/services/edit/includes/constraints.html
@@ -25,6 +25,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-constraint-key-input-{{ $index }}"
                   class="form-control"
                   ng-model="constraint.key"
                   placeholder="e.g. node.role"
@@ -43,6 +44,7 @@
                   ng-change="updatePlacementConstraint(service, constraint)"
                   ng-disabled="isUpdating"
                   disable-authorization="DockerServiceUpdate"
+                  data-cy="placement-constraint-operator=selectoer"
                 >
                   <option value="==">==</option>
                   <option value="!=">!=</option>
@@ -53,6 +55,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-constraint-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="constraint.value"
                   placeholder="e.g. manager"
diff --git a/app/docker/views/services/edit/includes/containerlabels.html b/app/docker/views/services/edit/includes/containerlabels.html
index 4a713abea..a999fa2e4 100644
--- a/app/docker/views/services/edit/includes/containerlabels.html
+++ b/app/docker/views/services/edit/includes/containerlabels.html
@@ -25,6 +25,7 @@
                 <span class="input-group-addon fit-text-size">name</span>
                 <input
                   type="text"
+                  data-cy="container-label-key-{{ $index }}"
                   class="form-control"
                   ng-model="label.key"
                   placeholder="e.g. com.example.foo"
@@ -39,6 +40,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="container-label-value_{{ $index }}"
                   class="form-control"
                   ng-model="label.value"
                   placeholder="e.g. bar"
diff --git a/app/docker/views/services/edit/includes/hosts.html b/app/docker/views/services/edit/includes/hosts.html
index ec7da6ccc..5f12b798a 100644
--- a/app/docker/views/services/edit/includes/hosts.html
+++ b/app/docker/views/services/edit/includes/hosts.html
@@ -25,6 +25,7 @@
                 <input
                   type="text"
                   class="form-control"
+                  data-cy="hosts-entry-hostname-input-{{ $index }}"
                   ng-model="entry.hostname"
                   placeholder="e.g. example.com"
                   ng-change="updateHostsEntry(service, entry)"
@@ -37,6 +38,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="hosts-entry-ip-input-{{ $index }}"
                   class="form-control"
                   ng-model="entry.ip"
                   placeholder="e.g. 10.0.1.1"
diff --git a/app/docker/views/services/edit/includes/logging.html b/app/docker/views/services/edit/includes/logging.html
index 663b0c897..98b57fce3 100644
--- a/app/docker/views/services/edit/includes/logging.html
+++ b/app/docker/views/services/edit/includes/logging.html
@@ -4,7 +4,13 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Driver:
-        <select class="form-control !h-[30px] !text-[13px]" ng-model="service.LogDriverName" ng-change="updateLogDriverName(service)" ng-disabled="isUpdating">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-model="service.LogDriverName"
+          ng-change="updateLogDriverName(service)"
+          ng-disabled="isUpdating"
+          data-cy="logging-driver-selector"
+        >
           <option selected value="">Default logging driver</option>
           <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>
           <option value="none">none</option>
@@ -25,7 +31,14 @@
             <td class="w-1/2">
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">name</span>
-                <input type="text" class="form-control" ng-model="option.key" ng-disabled="option.added || isUpdating" placeholder="e.g. FOO" />
+                <input
+                  type="text"
+                  data-cy="service-logging-driver-option-name-input-{{ $index }}"
+                  class="form-control"
+                  ng-model="option.key"
+                  ng-disabled="option.added || isUpdating"
+                  placeholder="e.g. FOO"
+                />
               </div>
             </td>
             <td>
@@ -33,6 +46,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="service-logging-driver-option-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="option.value"
                   ng-change="updateLogDriverOpt(service, option)"
diff --git a/app/docker/views/services/edit/includes/mounts.html b/app/docker/views/services/edit/includes/mounts.html
index 56ed1340a..1676bec4a 100644
--- a/app/docker/views/services/edit/includes/mounts.html
+++ b/app/docker/views/services/edit/includes/mounts.html
@@ -24,6 +24,7 @@
             <td class="!pt-6 !align-top" ng-if="isAdmin || allowBindMounts">
               <select
                 name="mountType"
+                data-cy="mount-type-selector"
                 class="form-control !h-[30px] !text-[13px]"
                 ng-model="mount.Type"
                 ng-change="onChangeMountType(service, mount)"
@@ -43,11 +44,13 @@
                   ng-options="vol.Id as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30))  for vol in availableVolumes"
                   ng-if="mount.Type === 'volume'"
                   disable-authorization="DockerServiceUpdate"
+                  data-cy="volume-selector"
                 >
                   <option selected disabled hidden value="">Select a volume</option>
                 </select>
                 <input
                   type="text"
+                  data-cy="bind-mount-source-input-{{ index }}"
                   class="form-control !h-[30px] !text-[13px]"
                   name=""
                   ng-model="mount.Source"
@@ -64,6 +67,7 @@
             <td class="!pb-0 !pt-6 !align-top">
               <input
                 type="text"
+                data-cy="mount-target-input-{{ index }}"
                 class="form-control mb-6 !h-[30px] !text-[13px]"
                 ng-model="mount.Target"
                 placeholder="e.g. /tmp/portainer/data"
diff --git a/app/docker/views/services/edit/includes/networks.html b/app/docker/views/services/edit/includes/networks.html
index 6c3df7a9f..c8c154009 100644
--- a/app/docker/views/services/edit/includes/networks.html
+++ b/app/docker/views/services/edit/includes/networks.html
@@ -29,6 +29,7 @@
                 ng-options="net.Id as net.Name for net in filterNetworks(swarmNetworks, network)"
                 disable-authorization="DockerServiceUpdate"
                 style="width: initial; min-width: 50%"
+                data-cy="network-selector_{{ network.Name }}"
               >
                 <option disabled value="" selected>Select a network</option>
               </select>
@@ -37,9 +38,7 @@
             <td>
               <a ui-sref="docker.networks.network({id: network.Id})">{{ network.Id }}</a>
             </td>
-            <td>
-              {{ network.Addr }}
-            </td>
+            <td> {{ network.Addr }} </td>
             <td ng-if="network.Editable" authorization="DockerServiceUpdate">
               <span class="input-group-btn">
                 <button class="btn btn-sm btn-dangerlight" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
diff --git a/app/docker/views/services/edit/includes/placementPreferences.html b/app/docker/views/services/edit/includes/placementPreferences.html
index b1fb65b82..856dd6a32 100644
--- a/app/docker/views/services/edit/includes/placementPreferences.html
+++ b/app/docker/views/services/edit/includes/placementPreferences.html
@@ -24,6 +24,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-preference-strategy-input-{{ $index }}"
                   class="form-control"
                   ng-model="preference.strategy"
                   placeholder="e.g. node.role"
@@ -37,6 +38,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-preference-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="preference.value"
                   placeholder="e.g. manager"
diff --git a/app/docker/views/services/edit/includes/resources.html b/app/docker/views/services/edit/includes/resources.html
index 266b4e34e..edd7ce490 100644
--- a/app/docker/views/services/edit/includes/resources.html
+++ b/app/docker/views/services/edit/includes/resources.html
@@ -10,6 +10,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-memory-reservation-input"
                 step="0.125"
                 min="0"
                 ng-model="service.ReservationMemoryBytes"
@@ -27,6 +28,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-memory-limit-input"
                 step="0.125"
                 min="0"
                 ng-model="service.LimitMemoryBytes"
@@ -44,6 +46,7 @@
             </td>
             <td>
               <slider
+                data-cy="docker-service-cpu-reservation-slider"
                 model="service.ReservationNanoCPUs"
                 floor="0"
                 ceil="state.sliderMaxCpu"
@@ -64,6 +67,7 @@
             </td>
             <td>
               <slider
+                data-cy="docker-service-cpu-limit-slider"
                 model="service.LimitNanoCPUs"
                 floor="0"
                 ceil="state.sliderMaxCpu"
diff --git a/app/docker/views/services/edit/includes/restart.html b/app/docker/views/services/edit/includes/restart.html
index b6d8cc6a0..566977d74 100644
--- a/app/docker/views/services/edit/includes/restart.html
+++ b/app/docker/views/services/edit/includes/restart.html
@@ -10,6 +10,7 @@
               <div class="input-group input-group-sm">
                 <select
                   class="selectpicker form-control !rounded"
+                  data-cy="docker-service-restart-condition-select"
                   ng-model="service.RestartCondition"
                   ng-change="updateServiceAttribute(service, 'RestartCondition')"
                   disable-authorization="DockerServiceUpdate"
@@ -30,6 +31,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-restart-delay-input"
                 ng-model="service.RestartDelay"
                 ng-change="updateServiceAttribute(service, 'RestartDelay')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
@@ -48,6 +50,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-restart-max-attempts-input"
                 ng-model="service.RestartMaxAttempts"
                 ng-change="updateServiceAttribute(service, 'RestartMaxAttempts')"
                 disable-authorization="DockerServiceUpdate"
@@ -63,6 +66,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-restart-window-input"
                 ng-model="service.RestartWindow"
                 ng-change="updateServiceAttribute(service, 'RestartWindow')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
diff --git a/app/docker/views/services/edit/includes/secrets.html b/app/docker/views/services/edit/includes/secrets.html
index 2967f7178..6c4c2a8da 100644
--- a/app/docker/views/services/edit/includes/secrets.html
+++ b/app/docker/views/services/edit/includes/secrets.html
@@ -4,7 +4,12 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a secret:
-        <select class="form-control !h-[30px] !text-[13px]" ng-options="secret.Name for secret in secrets | orderBy: 'Name'" ng-model="state.addSecret.secret">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-options="secret.Name for secret in secrets | orderBy: 'Name'"
+          ng-model="state.addSecret.secret"
+          data-cy="service-secrets-select"
+        >
           <option selected disabled hidden value="">Select a secret</option>
         </select>
         <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.3 && state.addSecret.override">
diff --git a/app/docker/views/services/edit/includes/servicelabels.html b/app/docker/views/services/edit/includes/servicelabels.html
index 75afdd54e..6a1a66dab 100644
--- a/app/docker/views/services/edit/includes/servicelabels.html
+++ b/app/docker/views/services/edit/includes/servicelabels.html
@@ -23,6 +23,7 @@
                 <span class="input-group-addon fit-text-size">name</span>
                 <input
                   type="text"
+                  data-cy="service-label-key-{{ $index }}"
                   class="form-control"
                   ng-model="label.key"
                   placeholder="e.g. com.example.foo"
@@ -37,6 +38,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="service-label-value_{{ $index }}"
                   class="form-control"
                   ng-model="label.value"
                   placeholder="e.g. bar"
diff --git a/app/docker/views/services/edit/includes/updateconfig.html b/app/docker/views/services/edit/includes/updateconfig.html
index d3fa21eac..13ba971aa 100644
--- a/app/docker/views/services/edit/includes/updateconfig.html
+++ b/app/docker/views/services/edit/includes/updateconfig.html
@@ -10,6 +10,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-update-parallelism-input"
                 ng-model="service.UpdateParallelism"
                 ng-change="updateServiceAttribute(service, 'UpdateParallelism')"
                 disable-authorization="DockerServiceUpdate"
@@ -25,6 +26,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-update-delay-input"
                 ng-model="service.UpdateDelay"
                 ng-change="updateServiceAttribute(service, 'UpdateDelay')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
@@ -43,6 +45,7 @@
                   <input
                     type="radio"
                     name="failure_action"
+                    data-cy="update-failure-action-continue"
                     ng-model="service.UpdateFailureAction"
                     value="continue"
                     ng-change="updateServiceAttribute(service, 'UpdateFailureAction')"
@@ -54,6 +57,7 @@
                   <input
                     type="radio"
                     name="failure_action"
+                    data-cy="update-failure-action-pause"
                     ng-model="service.UpdateFailureAction"
                     value="pause"
                     ng-change="updateServiceAttribute(service, 'UpdateFailureAction')"
@@ -75,6 +79,7 @@
                   <input
                     type="radio"
                     name="updateconfig_order"
+                    data-cy="update-order-start-first"
                     ng-model="service.UpdateOrder"
                     value="start-first"
                     ng-change="updateServiceAttribute(service, 'UpdateOrder')"
@@ -86,6 +91,7 @@
                   <input
                     type="radio"
                     name="updateconfig_order"
+                    data-cy="update-order-stop-first"
                     ng-model="service.UpdateOrder"
                     value="stop-first"
                     ng-change="updateServiceAttribute(service, 'UpdateOrder')"
diff --git a/app/docker/views/services/edit/service.html b/app/docker/views/services/edit/service.html
index 3343f351f..fc49a3e13 100644
--- a/app/docker/views/services/edit/service.html
+++ b/app/docker/views/services/edit/service.html
@@ -18,17 +18,20 @@
             <tr>
               <td class="w-1/5">Name</td>
               <td ng-if="applicationState.endpoint.apiVersion <= 1.24">
-                <input type="text" class="form-control" ng-model="service.Name" ng-change="updateServiceAttribute(service, 'Name')" ng-disabled="isUpdating" />
-              </td>
-              <td ng-if="applicationState.endpoint.apiVersion >= 1.25">
-                {{ service.Name }}
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="service.Name"
+                  ng-change="updateServiceAttribute(service, 'Name')"
+                  ng-disabled="isUpdating"
+                  data-cy="docker-service-edit-name"
+                />
               </td>
+              <td ng-if="applicationState.endpoint.apiVersion >= 1.25"> {{ service.Name }} </td>
             </tr>
             <tr>
               <td>ID</td>
-              <td>
-                {{ service.Id }}
-              </td>
+              <td> {{ service.Id }} </td>
             </tr>
             <tr ng-if="service.CreatedAt">
               <td>Created at</td>
@@ -53,6 +56,7 @@
                   <input
                     class="input-sm"
                     type="number"
+                    data-cy="docker-service-edit-replicas-input"
                     ng-model="service.Replicas"
                     ng-change="updateServiceAttribute(service, 'Replicas')"
                     disable-authorization="DockerServiceUpdate"
diff --git a/app/docker/views/swarm/visualizer/swarmvisualizer.html b/app/docker/views/swarm/visualizer/swarmvisualizer.html
index a4971c382..cd1a1d254 100644
--- a/app/docker/views/swarm/visualizer/swarmvisualizer.html
+++ b/app/docker/views/swarm/visualizer/swarmvisualizer.html
@@ -57,7 +57,7 @@
               <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" size="'sm'" style="display: none"></pr-icon>
             </label>
             <div class="col-sm-2">
-              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control" data-cy="swarm-refreshRate-select">
                 <option value="5">5s</option>
                 <option value="10">10s</option>
                 <option value="30">30s</option>
@@ -97,9 +97,7 @@
               <div class="node_labels" ng-if="node.Labels.length > 0 && state.DisplayNodeLabels">
                 <div>Labels</div>
                 <div class="node_label" ng-repeat="label in node.Labels">
-                  <span class="label_key">
-                    {{ label.key }}
-                  </span>
+                  <span class="label_key"> {{ label.key }} </span>
                   <span class="label_value" ng-if="label.value"> = {{ label.value }} </span>
                 </div>
               </div>
diff --git a/app/docker/views/volumes/create/createvolume.html b/app/docker/views/volumes/create/createvolume.html
index 177331023..38686aaff 100644
--- a/app/docker/views/volumes/create/createvolume.html
+++ b/app/docker/views/volumes/create/createvolume.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="volume_name" class="col-sm-2 col-md-1 control-label text-left">Name</label>
             <div class="col-sm-10 col-md-11">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume" data-cy="volume-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -18,10 +18,24 @@
           <div class="form-group">
             <label for="volume_driver" class="col-sm-2 col-md-1 control-label text-left">Driver</label>
             <div class="col-sm-10 col-md-11">
-              <select class="form-control" ng-options="driver for driver in availableVolumeDrivers" ng-model="formValues.Driver" ng-if="availableVolumeDrivers.length > 0">
+              <select
+                class="form-control"
+                ng-options="driver for driver in availableVolumeDrivers"
+                ng-model="formValues.Driver"
+                ng-if="availableVolumeDrivers.length > 0"
+                data-cy="volume-driver-select"
+              >
                 <option disabled hidden value="">Select a driver</option>
               </select>
-              <input type="text" class="form-control" ng-model="formValues.Driver" id="volume_driver" placeholder="e.g. driverName" ng-if="availableVolumeDrivers.length === 0" />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="formValues.Driver"
+                id="volume_driver"
+                placeholder="e.g. driverName"
+                ng-if="availableVolumeDrivers.length === 0"
+                data-cy="volume-driver-input"
+              />
             </div>
           </div>
           <!-- !driver-input -->
@@ -41,11 +55,11 @@
               <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint" />
+                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint" data-cy="driver-option-name-input" />
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host" />
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host" data-cy="driver-option-value-input" />
                 </div>
                 <button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
                   <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
diff --git a/app/edge/components/edge-job-form/edgeJobForm.html b/app/edge/components/edge-job-form/edgeJobForm.html
index 6d686db67..5af164f2d 100644
--- a/app/edge/components/edge-job-form/edgeJobForm.html
+++ b/app/edge/components/edge-job-form/edgeJobForm.html
@@ -6,6 +6,7 @@
     <div class="col-sm-10">
       <input
         type="text"
+        data-cy="edgejob-name-input"
         class="form-control"
         ng-model="$ctrl.model.Name"
         ng-pattern="/^[a-zA-Z0-9][a-zA-Z0-9_.-]+$/"
@@ -43,7 +44,9 @@
     <div class="form-group">
       <label for="recurring" class="col-sm-2 control-label text-left">Recurring Edge job</label>
       <div class="col-sm-10">
-        <label class="switch"><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" /><span class="slider round"></span></label>
+        <label class="switch"
+          ><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" data-cy="recurring-edge-job-checkbox" /><span class="slider round"></span
+        ></label>
       </div>
     </div>
     <!-- not-recurring -->
@@ -51,7 +54,7 @@
       <div class="form-group">
         <label for="edgejob_cron" class="col-sm-2 control-label text-left">Schedule date</label>
         <div class="col-sm-10">
-          <input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" />
+          <input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" data-cy="edge-job-date-time-picker" />
         </div>
         <div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
         <div ng-show="edgeJobForm.datepicker.$invalid">
@@ -73,6 +76,7 @@
         <div class="col-sm-10">
           <select
             id="edgejob_value"
+            data-cy="edge-job-time-select"
             name="edgejob_value"
             class="form-control"
             ng-model="$ctrl.formValues.scheduleValue"
@@ -101,6 +105,7 @@
       <div class="col-sm-10">
         <input
           type="text"
+          data-cy="edge-job-cron-input"
           class="form-control"
           ng-model="$ctrl.model.CronExpression"
           id="edgejob_cron"
@@ -193,9 +198,7 @@
         <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
         <span ng-show="$ctrl.actionInProgress">In progress...</span>
       </button>
-      <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError">
-        {{ $ctrl.state.formValidationError }}
-      </span>
+      <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError"> {{ $ctrl.state.formValidationError }} </span>
     </div>
   </div>
   <!-- !actions -->
diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html
index 315ce5c11..9bd0c0ffd 100644
--- a/app/edge/components/group-form/groupForm.html
+++ b/app/edge/components/group-form/groupForm.html
@@ -4,13 +4,13 @@
     <div class="col-sm-9 col-lg-10">
       <input
         type="text"
+        data-cy="edgeGroupCreate-groupNameInput"
         class="form-control"
         id="group_name"
         name="group_name"
         ng-model="$ctrl.model.Name"
         required
         auto-focus
-        data-cy="edgeGroupCreate-groupNameInput"
         placeholder="e.g. mygroup"
       />
       <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
index c7a992d5e..69b3fe494 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
@@ -11,6 +11,7 @@
             <div class="col-sm-11">
               <input
                 type="text"
+                data-cy="edgeStackCreate-nameInput"
                 class="form-control"
                 ng-model="$ctrl.formValues.Name"
                 id="stack_name"
@@ -19,7 +20,6 @@
                 placeholder="e.g. mystack"
                 auto-focus
                 required
-                data-cy="edgeStackCreate-nameInput"
               />
               <div class="help-block" ng-show="$ctrl.form.$invalid">
                 <div class="small text-warning">
@@ -90,9 +90,7 @@
                 <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
                 <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
               </button>
-              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
-                {{ $ctrl.state.formValidationError }}
-              </span>
+              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px"> {{ $ctrl.state.formValidationError }} </span>
             </div>
           </div>
           <!-- !actions -->
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
index 20ae067fe..7ca1eac52 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
@@ -21,7 +21,13 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox" ng-if="$ctrl.isAdmin">
-                      <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
+                      <input
+                        id="applications_setting_show_system"
+                        type="checkbox"
+                        ng-model="$ctrl.settings.showSystem"
+                        ng-change="$ctrl.onSettingsShowSystemChange()"
+                        data-cy="k8sApp-showSystemCheckbox"
+                      />
                       <label for="applications_setting_show_system">Show system resources</label>
                     </div>
                     <div class="md-checkbox">
@@ -100,20 +106,20 @@
           <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
           <input
             type="text"
+            data-cy="k8sApp-searchApplicationsInput"
             class="searchInput"
             ng-model="$ctrl.state.textFilter"
             ng-change="$ctrl.onTextFilterChange()"
             placeholder="Search..."
             auto-focus
             ng-model-options="{ debounce: 300 }"
-            data-cy="k8sApp-searchApplicationsInput"
           />
         </div>
       </div>
     </div>
     <div class="toolBar !pt-0">
       <div class="w-full">
-        <div class="form-group float-right !h-[30px] min-w-[140px] mr-2">
+        <div class="form-group float-right mr-2 !h-[30px] min-w-[140px]">
           <div class="input-group">
             <span class="input-group-addon">
               <div className="flex items-center gap-1">
@@ -218,7 +224,13 @@
                   <div class="menuHeader"> Filter by application type </div>
                   <div class="menuContent">
                     <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                      <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
+                      <input
+                        id="filter_state_{{ $index }}"
+                        type="checkbox"
+                        ng-model="filter.display"
+                        ng-change="$ctrl.onStateFilterChange()"
+                        data-cy="k8sApp-filter-state-{{ $index }}"
+                      />
                       <label for="filter_state_{{ $index }}">{{ filter.type }}</label>
                     </div>
                   </div>
@@ -261,6 +273,7 @@
               <input
                 id="select_{{ $index }}"
                 type="checkbox"
+                data-cy="k8sApp-checkbox-{{ item.Name }}"
                 ng-model="item.Checked"
                 ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()"
                 ng-disabled="$ctrl.isSystemNamespace(item)"
@@ -307,13 +320,9 @@
             >
             <span ng-if="item.KubernetesApplications">{{ item.Status }}</span>
           </td>
-          <td ng-if="item.ApplicationType === $ctrl.KubernetesApplicationTypes.Pod">
-            {{ item.Pods[0].Status }}
-          </td>
+          <td ng-if="item.ApplicationType === $ctrl.KubernetesApplicationTypes.Pod"> {{ item.Pods[0].Status }} </td>
           <td>
-            <span>
-              {{ item.Services.length === 0 ? 'No' : 'Yes' }}
-            </span>
+            <span> {{ item.Services.length === 0 ? 'No' : 'Yes' }} </span>
           </td>
           <td>{{ item.CreationDate | getisodate }} {{ item.ApplicationOwner ? 'by ' + item.ApplicationOwner : '' }}</td>
         </tr>
diff --git a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
index 008111d98..e68ca35ec 100644
--- a/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
@@ -10,13 +10,13 @@
       <pr-icon icon="'search'" class="vertical-center"></pr-icon>
       <input
         type="text"
+        data-cy="k8sConfigDetail-eventsTableSearchInput"
         class="searchInput ml-1"
         ng-model="$ctrl.state.textFilter"
         ng-change="$ctrl.onTextFilterChange()"
         placeholder="Search for an event..."
         auto-focus
         ng-model-options="{ debounce: 300 }"
-        data-cy="k8sConfigDetail-eventsTableSearchInput"
       />
     </div>
     <div class="settings">
@@ -28,12 +28,24 @@
             <div class="menuContent">
               <div>
                 <div class="md-checkbox">
-                  <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
+                  <input
+                    id="setting_auto_refresh"
+                    type="checkbox"
+                    ng-model="$ctrl.settings.repeater.autoRefresh"
+                    ng-change="$ctrl.onSettingsRepeaterChange()"
+                    data-cy="k8sConfigDetail-eventsTableAutoRefreshCheckbox"
+                  />
                   <label for="setting_auto_refresh">Auto refresh</label>
                 </div>
                 <div ng-if="$ctrl.settings.repeater.autoRefresh">
                   <label for="settings_refresh_rate"> Refresh rate </label>
-                  <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
+                  <select
+                    id="settings_refresh_rate"
+                    ng-model="$ctrl.settings.repeater.refreshRate"
+                    ng-change="$ctrl.onSettingsRepeaterChange()"
+                    class="small-select"
+                    data-cy="k8sConfigDetail-eventsTableRefreshRateSelect"
+                  >
                     <option value="10">10s</option>
                     <option value="30">30s</option>
                     <option value="60">1min</option>
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
index 5b2dd520a..8f3f2fb4a 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
@@ -1,12 +1,19 @@
 <section class="datatable" aria-label="Helm charts">
   <div class="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1 !px-0">
-    <div class="toolBarTitle vertical-center">
-      {{ $ctrl.titleText }}
-    </div>
+    <div class="toolBarTitle vertical-center"> {{ $ctrl.titleText }} </div>
 
     <div class="searchBar vertical-center !mr-0">
       <pr-icon icon="'search'" class="searchIcon"></pr-icon>
-      <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" aria-label="Search input" />
+      <input
+        type="text"
+        data-cy="helm-templates-search"
+        class="searchInput"
+        ng-model="$ctrl.state.textFilter"
+        placeholder="Search..."
+        auto-focus
+        ng-model-options="{ debounce: 300 }"
+        aria-label="Search input"
+      />
     </div>
     <div class="w-1/5">
       <por-select
@@ -20,7 +27,7 @@
     </div>
   </div>
   <div class="w-full">
-    <div class="mb-2 small text-muted"
+    <div class="small text-muted mb-2"
       >Select the Helm chart to use. Bring further Helm charts into your selection list via
       <a ui-sref="portainer.account({'#': 'helm-repositories'})">User settings - Helm repositories</a>.</div
     >
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 0acc26fc2..ca2caebef 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -72,6 +72,7 @@
       <div class="col-sm-8 col-lg-9">
         <input
           type="text"
+          data-cy="k8sConfigCreate-keyInput"
           class="form-control"
           maxlength="253"
           id="configuration_data_key_{{ index }}"
@@ -111,6 +112,7 @@
       <div class="col-sm-8 col-lg-9">
         <textarea
           class="form-control"
+          data-cy="k8sConfigCreate-configurationDataValue"
           rows="5"
           id="configuration_data_value_{{ index }}"
           name="configuration_data_value_{{ index }}"
@@ -156,7 +158,7 @@
   </div>
 
   <div class="form-group !px-[15px]" ng-if="!$ctrl.formValues.IsSimple">
-    <input type="text" ng-model="$ctrl.formValues.DataYaml" required style="display: none" />
+    <input type="text" ng-model="$ctrl.formValues.DataYaml" required style="display: none" data-cy="k8sConfigCreate-configurationDataYaml" />
 
     <web-editor-form
       identifier="kubernetes-configuration-editor"
diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index ef5b20eab..0aea1b55e 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@@ -142,6 +142,7 @@ export const ngModule = angular
       'identifier',
       'data',
       'hideMessage',
+      'data-cy',
     ])
   )
   .component(
@@ -227,6 +228,7 @@ export const ngModule = angular
       'onRefresh',
       'tableKey',
       'tableTitle',
+      'dataCy',
     ])
   );
 
diff --git a/app/kubernetes/views/applications/stats/stats.html b/app/kubernetes/views/applications/stats/stats.html
index dcc367cd9..1d3985137 100644
--- a/app/kubernetes/views/applications/stats/stats.html
+++ b/app/kubernetes/views/applications/stats/stats.html
@@ -57,7 +57,7 @@
           <div class="form-group">
             <label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
             <div class="col-sm-3 col-md-2">
-              <select id="refreshRate" ng-model="ctrl.state.refreshRate" ng-change="ctrl.changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="ctrl.state.refreshRate" ng-change="ctrl.changeUpdateRepeater()" class="form-control" data-cy="app-stats-refresh-rate">
                 <option value="30">30s</option>
                 <option value="60">60s</option>
               </select>
diff --git a/app/kubernetes/views/cluster/node/node.html b/app/kubernetes/views/cluster/node/node.html
index 0e7d30b29..7055f0d6b 100644
--- a/app/kubernetes/views/cluster/node/node.html
+++ b/app/kubernetes/views/cluster/node/node.html
@@ -40,19 +40,21 @@
                     <tr>
                       <td>Status</td>
                       <td>
-                        <span class="label label-{{ ctrl.node.Status | kubernetesNodeStatusColor }}">
-                          {{ ctrl.node.Status }}
-                        </span>
-                        <span ng-if="ctrl.node.Status == 'Warning'" class="text text-warning">
-                          {{ ctrl.node.Conditions | kubernetesNodeConditionsMessage }}
-                        </span>
+                        <span class="label label-{{ ctrl.node.Status | kubernetesNodeStatusColor }}"> {{ ctrl.node.Status }} </span>
+                        <span ng-if="ctrl.node.Status == 'Warning'" class="text text-warning"> {{ ctrl.node.Conditions | kubernetesNodeConditionsMessage }} </span>
                       </td>
                     </tr>
                     <tr>
                       <td class="col-xs-3"> Availability </td>
                       <td class="col-xs-9">
                         <div class="flex flex-col">
-                          <select class="form-control" name="availability" style="display: inline-block; width: 16rem" ng-model="ctrl.formValues.Availability">
+                          <select
+                            class="form-control"
+                            data-cy="node-availability-select"
+                            name="availability"
+                            style="display: inline-block; width: 16rem"
+                            ng-model="ctrl.formValues.Availability"
+                          >
                             <option>{{ ctrl.availabilities.ACTIVE }}</option>
                             <option>{{ ctrl.availabilities.PAUSE }}</option>
                             <option>{{ ctrl.availabilities.DRAIN }}</option>
@@ -99,6 +101,7 @@
                       <span class="input-group-addon">Key</span>
                       <input
                         type="text"
+                        data-cy="label-key-input-{{ $index }}"
                         class="form-control"
                         name="label_key_{{ $index }}"
                         ng-model="label.Key"
@@ -111,6 +114,7 @@
                       <span class="input-group-addon">Value</span>
                       <input
                         type="text"
+                        data-cy="label-value-input-{{ $index }}"
                         class="form-control"
                         name="label_value_{{ $index }}"
                         ng-change="ctrl.onChangeLabel($index)"
@@ -158,15 +162,31 @@
                   <div class="form-inline" ng-repeat="taint in ctrl.formValues.Taints" style="padding: 3px 0 3px 0">
                     <div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
                       <span class="input-group-addon">Key</span>
-                      <input type="text" class="form-control" name="taint_key_{{ $index }}" ng-model="taint.Key" ng-change="ctrl.onChangeTaintKey($index)" required />
+                      <input
+                        type="text"
+                        data-cy="taint-key-input-{{ $index }}"
+                        class="form-control"
+                        name="taint_key_{{ $index }}"
+                        ng-model="taint.Key"
+                        ng-change="ctrl.onChangeTaintKey($index)"
+                        required
+                      />
                     </div>
                     <div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
                       <span class="input-group-addon">Value</span>
-                      <input type="text" class="form-control" name="taint_value_{{ $index }}" ng-model="taint.Value" ng-change="ctrl.onChangeTaint($index)" />
+                      <input
+                        type="text"
+                        data-cy="taint-value-input-{{ $index }}"
+                        class="form-control"
+                        name="taint_value_{{ $index }}"
+                        ng-model="taint.Value"
+                        ng-change="ctrl.onChangeTaint($index)"
+                      />
                     </div>
                     <div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
                       <span class="input-group-addon">Effect</span>
                       <select
+                        data-cy="taint_effect_{{ $index }}"
                         id="taint_effect_{{ $index }}"
                         name="taint_effect_{{ $index }}"
                         class="form-control"
@@ -247,7 +267,7 @@
                 <div class="flex-center gap-1"> <pr-icon icon="'code'" size="'sm'"></pr-icon> YAML </div>
               </uib-tab-heading>
               <div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
-                <kube-yaml-inspector identifier="'node-yaml'" data="ctrl.node.Yaml" hide-message="true" />
+                <kube-yaml-inspector identifier="'node-yaml'" data="ctrl.node.Yaml" hide-message="true" data-cy="node-yaml-inspector" />
               </div>
             </uib-tab>
           </uib-tabset>
diff --git a/app/kubernetes/views/cluster/node/stats/stats.html b/app/kubernetes/views/cluster/node/stats/stats.html
index 42a14e8b5..7cd0412dd 100644
--- a/app/kubernetes/views/cluster/node/stats/stats.html
+++ b/app/kubernetes/views/cluster/node/stats/stats.html
@@ -45,7 +45,7 @@
           <div class="form-group">
             <label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
             <div class="col-sm-3 col-md-2">
-              <select id="refreshRate" ng-model="ctrl.state.refreshRate" ng-change="ctrl.changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="ctrl.state.refreshRate" ng-change="ctrl.changeUpdateRepeater()" class="form-control" data-cy="node-stats-refresh-rate">
                 <option value="30">30s</option>
                 <option value="60">60s</option>
               </select>
diff --git a/app/kubernetes/views/configurations/configmap/edit/configMap.html b/app/kubernetes/views/configurations/configmap/edit/configMap.html
index 92f30e8db..fdd9b1151 100644
--- a/app/kubernetes/views/configurations/configmap/edit/configMap.html
+++ b/app/kubernetes/views/configurations/configmap/edit/configMap.html
@@ -33,9 +33,7 @@
                   <tbody>
                     <tr>
                       <td class="w-[40%] !border-none !pl-0">Name</td>
-                      <td class="!border-none">
-                        {{ ctrl.configuration.Name }}
-                      </td>
+                      <td class="!border-none"> {{ ctrl.configuration.Name }} </td>
                     </tr>
                     <tr>
                       <td class="!pl-0">Namespace</td>
@@ -75,7 +73,7 @@
                 YAML
               </uib-tab-heading>
               <div class="px-5 !pt-5" ng-if="ctrl.state.showEditorTab">
-                <kube-yaml-inspector identifier="'configuration-yaml'" data="ctrl.configuration.Yaml" hide-message="true" />
+                <kube-yaml-inspector data-cy="k8sConfigDetail-yamlInspector" identifier="'configuration-yaml'" data="ctrl.configuration.Yaml" hide-message="true" />
               </div>
             </uib-tab>
           </uib-tabset>
diff --git a/app/kubernetes/views/configurations/secret/create/createSecret.html b/app/kubernetes/views/configurations/secret/create/createSecret.html
index 41f682048..f34bc5da0 100644
--- a/app/kubernetes/views/configurations/secret/create/createSecret.html
+++ b/app/kubernetes/views/configurations/secret/create/createSecret.html
@@ -48,6 +48,7 @@
               <div class="col-sm-8 col-lg-9 mb-0">
                 <input
                   type="text"
+                  data-cy="k8sConfigCreate-nameInput"
                   class="form-control"
                   id="configuration_name"
                   name="configuration_name"
@@ -57,7 +58,6 @@
                   placeholder="my-secret"
                   auto-focus
                   required
-                  data-cy="k8sConfigCreate-nameInput"
                 />
                 <div ng-show="kubernetesConfigurationCreationForm.configuration_name.$invalid || ctrl.state.alreadyExist">
                   <div class="help-block small text-warning">
@@ -102,6 +102,7 @@
                     ng-model="ctrl.formValues.Type"
                     ng-options="value.value as value.name for (name, value) in ctrl.KubernetesSecretTypeOptions"
                     ng-change="ctrl.onSecretTypeChange()"
+                    data-cy="k8sConfigCreate-typeDropdown"
                   ></select>
 
                   <div class="col-sm-3 col-lg-2"></div>
@@ -141,6 +142,7 @@
                 <div class="col-sm-8 col-lg-9">
                   <input
                     type="text"
+                    data-cy="k8sConfigCreate-customType-input"
                     name="custom_type"
                     class="form-control"
                     id="configuration_data_customtype"
diff --git a/app/kubernetes/views/configurations/secret/edit/secret.html b/app/kubernetes/views/configurations/secret/edit/secret.html
index 6052ee074..e0c0d43b5 100644
--- a/app/kubernetes/views/configurations/secret/edit/secret.html
+++ b/app/kubernetes/views/configurations/secret/edit/secret.html
@@ -47,9 +47,7 @@
                     </tr>
                     <tr ng-if="ctrl.secretTypeName">
                       <td class="!pl-0">Secret Type</td>
-                      <td>
-                        {{ ctrl.secretTypeName }}
-                      </td>
+                      <td> {{ ctrl.secretTypeName }} </td>
                     </tr>
                   </tbody>
                 </table>
@@ -82,7 +80,7 @@
                 YAML
               </uib-tab-heading>
               <div class="px-5 !pt-5" ng-if="ctrl.state.showEditorTab">
-                <kube-yaml-inspector identifier="'secret-yaml'" data="ctrl.configuration.Yaml" hide-message="true" />
+                <kube-yaml-inspector data-cy="k8sConfigDetail-yamlInspector" identifier="'secret-yaml'" data="ctrl.configuration.Yaml" hide-message="true" />
               </div>
             </uib-tab>
           </uib-tabset>
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index 27ec85ee2..8b94cb4bb 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -33,7 +33,7 @@
                   </label>
                   <div class="col-sm-8 vertical-center pt-3">
                     <label class="switch">
-                      <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" />
+                      <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" data-cy="use-namespce-from-menifest" />
                       <span class="slider round"></span>
                     </label>
                   </div>
@@ -44,6 +44,7 @@
                   <div class="col-sm-8">
                     <select
                       ng-if="!ctrl.formValues.namespace_toggle || ctrl.state.BuildMethod === ctrl.BuildMethods.HELM"
+                      data-cy="namespace-select"
                       ng-disabled="ctrl.formValues.namespace_toggle && ctrl.state.BuildMethod !== ctrl.BuildMethods.HELM"
                       class="form-control"
                       ng-model="ctrl.formValues.Namespace"
@@ -71,6 +72,7 @@
                   <div class="col-sm-8" ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.HELM">
                     <input
                       type="text"
+                      data-cy="name-input"
                       class="form-control"
                       ng-model="ctrl.formValues.Name"
                       id="name"
@@ -87,7 +89,7 @@
                 </div>
 
                 <div ng-if="!ctrl.deploymentOptions.hideStacksFunctionality && ctrl.state.BuildMethod !== ctrl.BuildMethods.HELM">
-                  <div class="w-fit mb-4">
+                  <div class="mb-4 w-fit">
                     <stack-name-label-insight></stack-name-label-insight>
                   </div>
                   <kube-stack-name stack-name="ctrl.formValues.StackName" set-stack-name="(ctrl.setStackName)" stacks="ctrl.stacks"></kube-stack-name>
@@ -175,11 +177,11 @@
                     <div class="col-sm-8">
                       <input
                         type="text"
+                        data-cy="k8sAppDeploy-urlFileUrl"
                         class="form-control"
                         ng-model="ctrl.formValues.ManifestURL"
                         id="manifest_url"
                         placeholder="https://raw.githubusercontent.com/kubernetes/website/main/content/en/examples/controllers/nginx-deployment.yaml"
-                        data-cy="k8sAppDeploy-urlFileUrl"
                       />
                     </div>
                   </div>
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index e531ecacc..f893c72ff 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -100,6 +100,7 @@
                         <input
                           name="memory_limit"
                           type="number"
+                          data-cy="k8sNamespaceEdit-memoryLimitInput"
                           min="{{ ctrl.ResourceQuotaDefaults.MemoryLimit }}"
                           max="{{ ctrl.state.sliderMaxMemory }}"
                           class="form-control"
@@ -188,9 +189,7 @@
 
                   <div class="form-group" ng-if="!ctrl.isAdmin || ctrl.isSystem">
                     <label class="col-sm-3 col-lg-2 control-label text-left" style="padding-top: 0"> Selected registries </label>
-                    <div class="col-sm-9 col-lg-4">
-                      {{ ctrl.selectedRegistries ? ctrl.selectedRegistries : 'None' }}
-                    </div>
+                    <div class="col-sm-9 col-lg-4"> {{ ctrl.selectedRegistries ? ctrl.selectedRegistries : 'None' }} </div>
                   </div>
 
                   <div ng-if="ctrl.isAdmin && !ctrl.isSystem">
@@ -300,7 +299,7 @@
             <uib-tab index="2" ng-if="ctrl.pool.Yaml" select="ctrl.showEditor()" classes="btn-sm">
               <uib-tab-heading class="vertical-center"><pr-icon icon="'code'"></pr-icon> YAML </uib-tab-heading>
               <div class="px-5" ng-if="ctrl.state.showEditorTab">
-                <kube-yaml-inspector identifier="'namespace-yaml'" data="ctrl.pool.Yaml" hide-message="true" />
+                <kube-yaml-inspector identifier="'namespace-yaml'" data="ctrl.pool.Yaml" data-cy="k8sNamespaceEdit-yamlEditor" hide-message="true" />
               </div>
             </uib-tab>
           </uib-tabset>
diff --git a/app/kubernetes/views/volumes/edit/volume.html b/app/kubernetes/views/volumes/edit/volume.html
index 5120f3b2a..2da384fe6 100644
--- a/app/kubernetes/views/volumes/edit/volume.html
+++ b/app/kubernetes/views/volumes/edit/volume.html
@@ -56,7 +56,7 @@
                       <td>Access Modes</td>
                       <td data-cy="k8sVolDetail-volAccessPolicy">
                         <div ng-repeat="(index, accessPolicy) in ctrl.state.volumeSharedAccessPolicies" class="flex flex-col gap-y-1">
-                          <div class="items-center flex gap-x-1">
+                          <div class="flex items-center gap-x-1">
                             {{ accessPolicy }}
                             <portainer-tooltip
                               ng-if="ctrl.state.volumeSharedAccessPolicyTooltips[index]"
@@ -95,6 +95,7 @@
                             <div class="input-group input-group-sm">
                               <input
                                 type="number"
+                                data-cy="k8sVolDetail-increaseSizeInput"
                                 class="form-control"
                                 name="size"
                                 ng-model="ctrl.state.volumeSize"
@@ -171,7 +172,7 @@
             <uib-tab index="2" ng-if="ctrl.volume.PersistentVolumeClaim.Yaml" select="ctrl.showEditor()" classes="btn-sm">
               <uib-tab-heading class="vertical-center" data-cy="k8sVolDetail-volYamlTab"> <pr-icon icon="'code'"></pr-icon> YAML </uib-tab-heading>
               <div class="px-5" ng-if="ctrl.state.showEditorTab">
-                <kube-yaml-inspector identifier="'volume-yaml'" data="ctrl.volume.PersistentVolumeClaim.Yaml" hide-message="true" />
+                <kube-yaml-inspector data-cy="k8sVolDetail-volYaml" identifier="'volume-yaml'" data="ctrl.volume.PersistentVolumeClaim.Yaml" hide-message="true" />
               </div>
             </uib-tab>
           </uib-tabset>
diff --git a/app/portainer/components/access-datatable/accessDatatable.html b/app/portainer/components/access-datatable/accessDatatable.html
index c27ac60ff..b8282f9a1 100644
--- a/app/portainer/components/access-datatable/accessDatatable.html
+++ b/app/portainer/components/access-datatable/accessDatatable.html
@@ -12,6 +12,7 @@
           <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
           <input
             type="text"
+            data-cy="accessDatatable-searchInput"
             class="searchInput"
             ng-model="$ctrl.state.textFilter"
             ng-change="$ctrl.onTextFilterChange()"
@@ -46,7 +47,7 @@
               <th>
                 <div class="vertical-center">
                   <span class="md-checkbox">
-                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="select-all-checkbox" />
                     <label for="select_all"></label>
                   </span>
                   <table-column-header
@@ -76,7 +77,14 @@
             >
               <td>
                 <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-disabled="$ctrl.disableRemove(item)" ng-click="$ctrl.selectItem(item, $event)" />
+                  <input
+                    id="select_{{ $index }}"
+                    type="checkbox"
+                    ng-model="item.Checked"
+                    ng-disabled="$ctrl.disableRemove(item)"
+                    ng-click="$ctrl.selectItem(item, $event)"
+                    data-cy="select-checkbox"
+                  />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 {{ item.Name }}
diff --git a/app/portainer/components/accessManagement/porAccessManagement.html b/app/portainer/components/accessManagement/porAccessManagement.html
index 05d070f55..eb1a46550 100644
--- a/app/portainer/components/accessManagement/porAccessManagement.html
+++ b/app/portainer/components/accessManagement/porAccessManagement.html
@@ -26,6 +26,7 @@
                 <div>
                   <select
                     class="form-control"
+                    data-cy="access-management-role-select"
                     ng-model="ctrl.formValues.selectedRole"
                     ng-options="role as ctrl.roleLabel(role) disable when ctrl.isRoleLimitedToBE(role) for role in ctrl.roles"
                   >
diff --git a/app/portainer/components/custom-template-selector/custom-template-selector.html b/app/portainer/components/custom-template-selector/custom-template-selector.html
index c4d21393f..d8dc031ec 100644
--- a/app/portainer/components/custom-template-selector/custom-template-selector.html
+++ b/app/portainer/components/custom-template-selector/custom-template-selector.html
@@ -4,6 +4,7 @@
     <div class="col-sm-8 vertical-center">
       <select
         ng-if="$ctrl.templates.length"
+        data-cy="custom-template-selector"
         class="form-control"
         ng-model="$ctrl.value"
         ng-options="template.Id as template.label for template in $ctrl.templates"
diff --git a/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html b/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
index b75cebc1a..20a4160fc 100644
--- a/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
+++ b/app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
@@ -7,7 +7,7 @@
       <div class="menuHeader"> Show / Hide Columns </div>
       <div class="menuContent">
         <div class="md-checkbox" ng-repeat="(key, value) in $ctrl.columns">
-          <input id="col_vis_{{::key}}" ng-change="$ctrl.onChange($ctrl.columns)" type="checkbox" ng-model="value.display" />
+          <input id="col_vis_{{::key}}" ng-change="$ctrl.onChange($ctrl.columns)" type="checkbox" ng-model="value.display" data-cy="column-visibility-checkbox" />
           <label for="col_vis_{{::key}}">{{ value.label }}</label>
         </div>
       </div>
diff --git a/app/portainer/components/datatables/filter/datatable-filter.html b/app/portainer/components/datatables/filter/datatable-filter.html
index d05d9b777..bef51f25c 100644
--- a/app/portainer/components/datatables/filter/datatable-filter.html
+++ b/app/portainer/components/datatables/filter/datatable-filter.html
@@ -14,13 +14,12 @@
           <input
             id="filter_{{ $ctrl.filterKey }}_{{ $index }}"
             type="checkbox"
+            data-cy="filter-checkbox"
             ng-value="filter.value"
             ng-checked="$ctrl.state.includes(filter.value)"
             ng-click="$ctrl.onChangeItem(filter.value)"
           />
-          <label for="filter_{{ $ctrl.filterKey }}_{{ $index }}">
-            {{ filter.label }}
-          </label>
+          <label for="filter_{{ $ctrl.filterKey }}_{{ $index }}"> {{ filter.label }} </label>
         </div>
       </div>
       <div>
diff --git a/app/portainer/components/datatables/pagination/pagination.html b/app/portainer/components/datatables/pagination/pagination.html
index 60c5d30eb..94b46b4e2 100644
--- a/app/portainer/components/datatables/pagination/pagination.html
+++ b/app/portainer/components/datatables/pagination/pagination.html
@@ -2,7 +2,7 @@
   <form class="form-inline">
     <span class="limitSelector">
       <span style="margin-right: 5px"> Items per page </span>
-      <select class="form-control" ng-model="$ctrl.limit" ng-change="$ctrl.onChangeLimit($ctrl.limit)">
+      <select class="form-control" ng-model="$ctrl.limit" ng-change="$ctrl.onChangeLimit($ctrl.limit)" data-cy="pagination-limit-select">
         <option ng-if="$ctrl.enableNoLimit" ng-value="0">All</option>
         <option ng-value="10">10</option>
         <option ng-value="25">25</option>
diff --git a/app/portainer/components/forms/group-form/groupForm.html b/app/portainer/components/forms/group-form/groupForm.html
index 76f935329..cee7bde75 100644
--- a/app/portainer/components/forms/group-form/groupForm.html
+++ b/app/portainer/components/forms/group-form/groupForm.html
@@ -3,7 +3,7 @@
   <div class="form-group">
     <label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus />
+      <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus data-cy="group-name-input" />
       <div class="help-block" ng-show="endpointGroupForm.group_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="endpointGroupForm.group_name.$error">
@@ -21,7 +21,14 @@
   <div class="form-group">
     <label for="group_description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="group_description" ng-model="$ctrl.model.Description" placeholder="e.g. production environments..." />
+      <input
+        type="text"
+        class="form-control"
+        id="group_description"
+        ng-model="$ctrl.model.Description"
+        placeholder="e.g. production environments..."
+        data-cy="group-description-input"
+      />
     </div>
   </div>
   <!-- !description-input -->
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
index dc2dd92cb..6f930db1a 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
@@ -13,7 +13,17 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_name"
+        name="registry_name"
+        ng-model="$ctrl.model.Name"
+        placeholder="my-ecr-registry"
+        required
+        auto-focus
+        data-cy="registry-name-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormEcr.registry_name.$error">
@@ -41,6 +51,7 @@
     <div class="col-sm-9 col-lg-10">
       <input
         type="text"
+        data-cy="registry-url-input"
         class="form-control"
         id="registry_url"
         name="registry_url"
@@ -83,7 +94,7 @@
     <div class="form-group">
       <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label required text-left">AWS Access Key</label>
       <div class="col-sm-9 col-lg-10">
-        <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
+        <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required data-cy="registry-access-key-input" />
         <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
           <div class="small text-warning">
             <div ng-messages="$ctrl.registryFormEcr.registry_access_key.$error">
@@ -121,7 +132,16 @@
     <div class="form-group">
       <label for="registry_region" class="col-sm-3 col-lg-2 control-label required text-left">Region</label>
       <div class="col-sm-9 col-lg-10">
-        <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
+        <input
+          type="text"
+          class="form-control"
+          id="registry_region"
+          name="registry_region"
+          placeholder="us-west-1"
+          ng-model="$ctrl.model.Ecr.Region"
+          required
+          data-cy="registry-region-input"
+        />
         <div class="help-block" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
           <div class="small text-warning">
             <div ng-messages="$ctrl.registryFormEcr.registry_region.$error">
diff --git a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
index 5d0438f29..478c831ee 100644
--- a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
+++ b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
@@ -4,7 +4,17 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_name"
+        name="registry_name"
+        ng-model="$ctrl.model.Name"
+        placeholder="my-azure-registry"
+        required
+        auto-focus
+        data-cy="registry-name-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormAzure.registry_name.$error">
@@ -29,7 +39,16 @@
       <portainer-tooltip message="'URL of an Azure Container Registry. Any protocol will be stripped.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="myproject.azurecr.io" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_url"
+        name="registry_url"
+        ng-model="$ctrl.model.URL"
+        placeholder="myproject.azurecr.io"
+        required
+        data-cy="registry-url-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormAzure.registry_url.$error">
@@ -47,7 +66,7 @@
   <div class="form-group">
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required data-cy="registry-username-input" />
       <div class="help-block" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormAzure.registry_username.$error">
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
index 483a57715..00954502d 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
@@ -11,7 +11,17 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-custom-registry" required auto-focus />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_name"
+        name="registry_name"
+        ng-model="$ctrl.model.Name"
+        placeholder="my-custom-registry"
+        required
+        auto-focus
+        data-cy="component-registryNameInput"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormCustom.registry_name.$error">
@@ -36,7 +46,16 @@
       <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="10.0.0.10:5000 or myregistry.domain.tld" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_url"
+        name="registry_url"
+        ng-model="$ctrl.model.URL"
+        placeholder="10.0.0.10:5000 or myregistry.domain.tld"
+        required
+        data-cy="component-registryUrlInput"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormCustom.registry_url.$error">
@@ -70,7 +89,15 @@
     <div class="form-group">
       <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
       <div class="col-sm-9 col-lg-10">
-        <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+        <input
+          type="text"
+          class="form-control"
+          id="registry_username"
+          name="registry_username"
+          ng-model="$ctrl.model.Username"
+          required
+          data-cy="component-registryUsernameInput"
+        />
         <div class="help-block" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
           <div class="small text-warning">
             <div ng-messages="$ctrl.registryFormCustom.registry_username.$error">
diff --git a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
index 5e6a64e4d..7be121d62 100644
--- a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
+++ b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
@@ -13,7 +13,16 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_name"
+        name="registry_name"
+        ng-model="$ctrl.model.Name"
+        placeholder="dockerhub-prod-us"
+        required
+        data-cy="component-registryName"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormDockerhub.registry_name.$error">
@@ -35,7 +44,7 @@
   <div class="form-group">
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">DockerHub username</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required data-cy="component-registryUsername" />
       <div class="help-block" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormDockerhub.registry_username.$error">
diff --git a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
index 6fb6515c6..370498ce2 100644
--- a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
+++ b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
@@ -13,7 +13,7 @@
   <div class="form-group">
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required data-cy="registry-username-input" />
       <div class="help-block" ng-show="registryFormGitlab.registry_username.$invalid">
         <div class="small text-warning">
           <div ng-messages="registryFormGitlab.registry_username.$error">
@@ -76,7 +76,16 @@
       <portainer-tooltip message="'URL of Gitlab instance.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="instance_url" name="instance_url" ng-model="$ctrl.model.Gitlab.InstanceURL" placeholder="https://gitlab.com" required />
+      <input
+        type="text"
+        class="form-control"
+        id="instance_url"
+        name="instance_url"
+        ng-model="$ctrl.model.Gitlab.InstanceURL"
+        placeholder="https://gitlab.com"
+        required
+        data-cy="instance-url-input"
+      />
       <div class="help-block" ng-show="registryFormGitlab.instance_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="registryFormGitlab.instance_url.$error">
@@ -97,7 +106,16 @@
       <portainer-tooltip message="'URL of Gitlab registry instance.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="https://registry.gitlab.com" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_url"
+        name="registry_url"
+        ng-model="$ctrl.model.URL"
+        placeholder="https://registry.gitlab.com"
+        required
+        data-cy="registry-url-input"
+      />
       <div class="help-block" ng-show="registryFormGitlab.registry_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="registryFormGitlab.registry_url.$error">
diff --git a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
index 2df7e3986..3da38e1b3 100644
--- a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
+++ b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
@@ -11,7 +11,17 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="proget-registry" required auto-focus />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_name"
+        name="registry_name"
+        ng-model="$ctrl.model.Name"
+        placeholder="proget-registry"
+        required
+        auto-focus
+        data-cy="registry-name-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormProGet.registry_name.$error">
@@ -36,7 +46,16 @@
       <portainer-tooltip message="'The URL of the ProGet registry including the Feed name'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="proget.example.com/example-registry" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_url"
+        name="registry_url"
+        ng-model="$ctrl.model.URL"
+        placeholder="proget.example.com/example-registry"
+        required
+        data-cy="registry-url-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormProGet.registry_url.$error">
@@ -57,7 +76,16 @@
       <portainer-tooltip message="'The base URL of the ProGet registry'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_base_url" name="registry_base_url" ng-model="$ctrl.model.BaseURL" placeholder="proget.example.com" required />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_base_url"
+        name="registry_base_url"
+        ng-model="$ctrl.model.BaseURL"
+        placeholder="proget.example.com"
+        required
+        data-cy="registry-base-url-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_base_url.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormProGet.registry_base_url.$error">
@@ -76,7 +104,7 @@
     <div class="form-group">
       <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
       <div class="col-sm-9 col-lg-10">
-        <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+        <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required data-cy="registry-username-input" />
         <div class="help-block" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
           <div class="small text-warning">
             <div ng-messages="$ctrl.registryFormProGet.registry_username.$error">
diff --git a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
index ffd80e095..6253eee1d 100644
--- a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
+++ b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
@@ -4,7 +4,7 @@
   <div class="form-group">
     <label for="registry_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required />
+      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required data-cy="registry-name-input" />
       <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormQuay.registry_name.$error">
@@ -26,7 +26,16 @@
   <div class="form-group">
     <label for="registry_username" class="col-sm-3 col-lg-2 control-label required text-left">Username</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
+      <input
+        type="text"
+        class="form-control"
+        id="registry_username"
+        name="registry_username"
+        ng-model="$ctrl.model.Username"
+        required
+        auto-focus
+        data-cy="registry-username-input"
+      />
       <div class="help-block" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
         <div class="small text-warning">
           <div ng-messages="$ctrl.registryFormQuay.registry_username.$error">
@@ -76,7 +85,15 @@
     <div class="form-group">
       <label for="organisation_name" class="col-sm-3 col-lg-2 control-label required text-left">Organization name</label>
       <div class="col-sm-9 col-lg-10">
-        <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
+        <input
+          type="text"
+          class="form-control"
+          id="organisation_name"
+          name="organisation_name"
+          ng-model="$ctrl.model.Quay.organisationName"
+          required
+          data-cy="registry-organisation-name-input"
+        />
         <div class="help-block" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
           <div class="small text-warning">
             <div ng-messages="$ctrl.registryFormQuay.organisation_name.$error">
diff --git a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
index 1644ab032..d77e358c8 100644
--- a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
+++ b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
@@ -16,7 +16,16 @@
         <div class="form-group">
           <label for="template_name" class="col-sm-2 control-label text-left">Name</label>
           <div class="col-sm-6">
-            <input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required />
+            <input
+              type="text"
+              name="template_name"
+              class="form-control"
+              ng-model="$ctrl.formValues.name"
+              ng-pattern="$ctrl.nameRegex"
+              placeholder="e.g. myStack"
+              required
+              data-cy="stack-name-input"
+            />
             <div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
               <div class="col-sm-12 small text-warning">
                 <div ng-messages="stackTemplateForm.template_name.$error">
@@ -39,8 +48,8 @@
             <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
           </label>
           <div class="col-sm-6">
-            <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
-            <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}">
+            <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="stackFromTemplateForm-input" />
+            <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="stackFromTemplateForm-select">
               <option selected disabled hidden value="">Select value</option>
               <option ng-repeat="choice in var.select" value="{{ choice.value }}">{{ choice.text }}</option>
             </select>
diff --git a/app/portainer/environments/azure-endpoint-config/azureEndpointConfig.html b/app/portainer/environments/azure-endpoint-config/azureEndpointConfig.html
index b6ee79f3d..585296a09 100644
--- a/app/portainer/environments/azure-endpoint-config/azureEndpointConfig.html
+++ b/app/portainer/environments/azure-endpoint-config/azureEndpointConfig.html
@@ -4,7 +4,15 @@
   <div class="form-group">
     <label for="azure_credential_appid" class="col-sm-3 col-lg-2 control-label text-left">Application ID</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="azure_credential_appid" ng-model="$ctrl.applicationId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
+      <input
+        type="text"
+        class="form-control"
+        name="azure_credential_appid"
+        ng-model="$ctrl.applicationId"
+        placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+        required
+        data-cy="azure-credential-appid-input"
+      />
     </div>
   </div>
   <!-- !applicationId-input -->
@@ -12,7 +20,15 @@
   <div class="form-group">
     <label for="azure_credential_tenantid" class="col-sm-3 col-lg-2 control-label text-left">Tenant ID</label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" name="azure_credential_tenantid" ng-model="$ctrl.tenantId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
+      <input
+        type="text"
+        class="form-control"
+        name="azure_credential_tenantid"
+        ng-model="$ctrl.tenantId"
+        placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+        required
+        data-cy="azure-credential-tenantid-input"
+      />
     </div>
   </div>
   <!-- !tenantId-input -->
@@ -22,6 +38,7 @@
     <div class="col-sm-9 col-lg-10">
       <input
         type="text"
+        data-cy="azure-credential-authkey-input"
         class="form-control"
         name="azure_credential_authkey"
         ng-model="$ctrl.authenticationKey"
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index 63d8c5598..c19654122 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -65,6 +65,7 @@
             ng-disabled="$ctrl.settings.OAuthAutoMapTeamMemberships"
             ng-model="$ctrl.settings.DefaultTeamID"
             ng-options="team.Id as team.Name for team in $ctrl.teams"
+            data-cy="default-team-select"
           >
             <option value="">No team</option>
           </select>
@@ -106,7 +107,14 @@
       </label>
       <div class="col-sm-9 col-lg-10">
         <div class="col-xs-11 col-lg-10">
-          <input type="text" class="form-control" id="oauth_token_claim_name" ng-model="$ctrl.settings.TeamMemberships.OAuthClaimName" placeholder="groups" />
+          <input
+            type="text"
+            class="form-control"
+            id="oauth_token_claim_name"
+            ng-model="$ctrl.settings.TeamMemberships.OAuthClaimName"
+            placeholder="groups"
+            data-cy="oauth-token-claim-name"
+          />
         </div>
       </div>
     </div>
@@ -122,13 +130,14 @@
         <div class="col-sm-12 form-inline" ng-repeat="mapping in $ctrl.settings.TeamMemberships.OAuthClaimMappings" style="margin-top: 0.75em">
           <div class="input-group input-group-sm col-sm-5">
             <span class="input-group-addon">claim value regex</span>
-            <input type="text" class="form-control" ng-model="mapping.ClaimValRegex" />
+            <input type="text" class="form-control" ng-model="mapping.ClaimValRegex" data-cy="claim-value-regex" />
           </div>
           <span style="margin: 0px 0.5em">maps to</span>
           <div class="input-group input-group-sm col-sm-3 col-lg-4">
             <span class="input-group-addon">team</span>
             <select
               class="form-control"
+              data-cy="team-select"
               ng-init="mapping.Team = mapping.Team || $ctrl.settings.DefaultTeamID"
               ng-model="mapping.Team"
               ng-options="team.Id as team.Name for team in $ctrl.teams"
@@ -159,7 +168,7 @@
 
       <div class="col-sm-9" ng-if="$ctrl.teams.length > 0">
         <div class="col-xs-11">
-          <select class="form-control" ng-model="$ctrl.settings.DefaultTeamID" ng-options="team.Id as team.Name for team in $ctrl.teams">
+          <select class="form-control" ng-model="$ctrl.settings.DefaultTeamID" ng-options="team.Id as team.Name for team in $ctrl.teams" data-cy="default-team-select">
             <option value="">No team</option>
           </select>
         </div>
@@ -191,9 +200,7 @@
     </div>
 
     <div class="form-group">
-      <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
-        {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
-      </label>
+      <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left"> {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }} </label>
       <div class="col-sm-9 col-lg-10">
         <input
           type="password"
@@ -217,6 +224,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-authorization-uri"
           class="form-control"
           id="oauth_authorization_uri"
           ng-model="$ctrl.settings.AuthorizationURI"
@@ -235,6 +243,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-access-token-uri"
           class="form-control"
           id="oauth_access_token_uri"
           ng-model="$ctrl.settings.AccessTokenURI"
@@ -253,6 +262,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-resource-uri"
           class="form-control"
           id="oauth_resource_uri"
           ng-model="$ctrl.settings.ResourceURI"
@@ -273,6 +283,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-redirect-uri"
           class="form-control"
           id="oauth_redirect_uri"
           ng-model="$ctrl.settings.RedirectURI"
@@ -293,6 +304,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-logout-url"
           class="form-control"
           id="oauth_logout_url"
           ng-model="$ctrl.settings.LogoutURI"
@@ -312,6 +324,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-user-identifier"
           class="form-control"
           id="oauth_user_identifier"
           ng-model="$ctrl.settings.UserIdentifier"
@@ -332,6 +345,7 @@
       <div class="col-sm-9 col-lg-10">
         <input
           type="text"
+          data-cy="oauth-scopes"
           class="form-control"
           id="oauth_scopes"
           ng-model="$ctrl.settings.Scopes"
@@ -364,6 +378,7 @@
         <div class="col-sm-9 col-lg-10">
           <input
             type="text"
+            data-cy="oauth-microsoft-tenant-id"
             class="form-control"
             id="oauth_microsoft_tenant_id"
             placeholder="xxxxxxxxxxxxxxxxxxxx"
@@ -386,6 +401,7 @@
         <div class="col-sm-9 col-lg-10">
           <input
             type="text"
+            data-cy="oauth-client-id"
             id="oauth_client_id"
             ng-model="$ctrl.settings.ClientID"
             placeholder="xxxxxxxxxxxxxxxxxxxx"
@@ -397,9 +413,7 @@
       </div>
 
       <div class="form-group">
-        <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
-          {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
-        </label>
+        <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left"> {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }} </label>
         <div class="col-sm-9 col-lg-10">
           <input
             type="password"
diff --git a/app/portainer/react/components/file-upload-field.ts b/app/portainer/react/components/file-upload-field.ts
index 518263eb9..6b1be70a1 100644
--- a/app/portainer/react/components/file-upload-field.ts
+++ b/app/portainer/react/components/file-upload-field.ts
@@ -9,6 +9,7 @@ export const fileUploadField = r2a(FileUploadField, [
   'required',
   'accept',
   'inputId',
+  'data-cy',
   'color',
   'name',
 ]);
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 4eae9025b..24559a6ef 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -78,6 +78,7 @@ export const ngModule = angular
       'buttonText',
       'className',
       'buttonClassName',
+      'data-cy',
     ])
   )
   .component(
@@ -224,6 +225,7 @@ export const ngModule = angular
       'onChange',
       'value',
       'height',
+      'data-cy',
     ])
   )
   .component(
diff --git a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
index 28cdbfee6..53324bd4b 100644
--- a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
+++ b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
@@ -6,7 +6,7 @@
   <div class="col-sm-12 vertical-center">
     <label for="tls" class="control-label !pt-0 text-left"> Automatic user provisioning </label>
     <label class="switch my-0 ml-6">
-      <input type="checkbox" ng-model="$ctrl.ngModel" />
+      <input type="checkbox" ng-model="$ctrl.ngModel" data-cy="auto-user-provision-toggle" />
       <span class="slider round"></span>
     </label>
   </div>
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
index 1c55a9ff6..83cf281cd 100644
--- a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
@@ -48,6 +48,7 @@
           <div ng-repeat="url in $ctrl.settings.URLs track by $index" style="display: flex; margin-bottom: 10px">
             <input
               type="text"
+              data-cy="ldap-url"
               class="form-control"
               id="ldap_url"
               ng-model="$ctrl.settings.URLs[$index]"
@@ -77,6 +78,7 @@
         <div class="col-sm-9">
           <input
             type="text"
+            data-cy="ldap-username"
             class="form-control"
             id="ldap_username"
             ng-model="$ctrl.settings.ReaderDN"
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index 94afdcd23..77d6cb908 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
@@ -17,6 +17,7 @@
         <div class="col-sm-8 col-md-4">
           <input
             type="text"
+            data-cy="ldap-admin-group-basedn"
             class="form-control"
             id="ldap_admin_group_basedn_{{ $index }}"
             ng-model="config.GroupBaseDN"
@@ -35,6 +36,7 @@
         <div class="col-sm-8 col-md-4">
           <input
             type="text"
+            data-cy="ldap-admin-group-att"
             class="form-control"
             id="ldap_admin_group_att_{{ $index }}"
             ng-model="config.GroupAttribute"
@@ -54,6 +56,7 @@
         <div class="col-sm-8 col-md-10 vertical-center">
           <input
             type="text"
+            data-cy="ldap-admin-group-filter"
             class="form-control"
             id="ldap_admin_group_filter_{{ $index }}"
             ng-model="config.GroupFilter"
@@ -102,7 +105,14 @@
           Assign admin rights to group(s)
         </label>
         <label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
-          <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
+          <input
+            id="admin-auto-populate"
+            ng-disabled="!$ctrl.enableAssignAdminGroup"
+            name="admin-auto-populate"
+            type="checkbox"
+            ng-model="$ctrl.settings.AdminAutoPopulate"
+            data-cy="admin-auto-populate"
+          />
           <span class="slider round before:content-['']"></span>
         </label>
       </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index 9583a476e..655a39a51 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -12,7 +12,14 @@
         <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input type="text" class="form-control" id="ldap_group_basedn_{{ $index }}" ng-model="config.GroupBaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_group_basedn_{{ $index }}"
+          ng-model="config.GroupBaseDN"
+          placeholder="dc=ldap,dc=domain,dc=tld"
+          data-cy="ldap-group-basedn-input"
+        />
       </div>
 
       <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
@@ -20,7 +27,7 @@
         <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" />
+        <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" data-cy="ldap-group-attribute-input" />
       </div>
     </div>
     <div class="form-group">
@@ -29,7 +36,14 @@
         <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-10 vertical-center">
-        <input type="text" class="form-control" id="ldap_group_filter_{{ $index }}" ng-model="config.GroupFilter" placeholder="(objectClass=account)" />
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_group_filter_{{ $index }}"
+          ng-model="config.GroupFilter"
+          placeholder="(objectClass=account)"
+          data-cy="ldap-group-filter-input"
+        />
         <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
         </button>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index d1c7843d8..7f8324797 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -12,7 +12,7 @@
         <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for users.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
+        <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" data-cy="ldap-basedn-input" />
       </div>
 
       <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
@@ -20,7 +20,7 @@
         <portainer-tooltip message="'LDAP attribute which denotes the username.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-3 col-lg-4">
-        <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" />
+        <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" data-cy="ldap-username-attribute-input" />
       </div>
     </div>
     <div class="form-group">
@@ -29,7 +29,7 @@
         <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-10 vertical-center">
-        <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" />
+        <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" data-cy="ldap-filter-input" />
         <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
         </button>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
index 86a28abeb..81de550b9 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
@@ -22,9 +22,7 @@
 
   <div class="form-group">
     <label class="col-sm-4 col-md-2 control-label text-left"> Group Base DN </label>
-    <div class="col-sm-8 col-md-10">
-      {{ $ctrl.config.GroupBaseDN }}
-    </div>
+    <div class="col-sm-8 col-md-10"> {{ $ctrl.config.GroupBaseDN }} </div>
   </div>
 
   <div class="form-group">
@@ -39,7 +37,14 @@
       <div class="w-full px-5 pt-3">
         <div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.groups">
           <div class="col-sm-4">
-            <select class="form-control" ng-model="entry.type" ng-change="$ctrl.onGroupsChange()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+            <select
+              class="form-control"
+              data-cy="ldap-group-search-item-select"
+              ng-model="entry.type"
+              ng-change="$ctrl.onGroupsChange()"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-tabindex="-1"
+            >
               <option value="ou">OU Name</option>
               <option value="cn">Folder Name</option>
             </select>
@@ -71,8 +76,6 @@
 
   <div class="form-group no-margin-last-child">
     <label class="col-sm-4 col-md-2 control-label text-left"> Group Filter </label>
-    <div class="col-sm-8 col-md-10">
-      {{ $ctrl.config.GroupFilter }}
-    </div>
+    <div class="col-sm-8 col-md-10"> {{ $ctrl.config.GroupFilter }} </div>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
index edd6841e0..4c92e3183 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -21,7 +21,15 @@
   <label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left"> LDAP Server </label>
   <div class="col-sm-9 col-lg-10">
     <div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
-      <input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
+      <input
+        type="text"
+        class="form-control"
+        id="ldap_url"
+        ng-model="$ctrl.settings.URLs[$index]"
+        placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389"
+        required
+        data-cy="ldap-url-input"
+      />
       <button ng-if="$index > 0" class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLDAPUrl($index)">
         <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
       </button>
@@ -45,7 +53,14 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <input
+        type="checkbox"
+        id="anonymous_mode"
+        ng-model="$ctrl.settings.AnonymousMode"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+        data-cy="anonymous-mode-checkbox"
+      />
       <span class="slider round"></span>
     </label>
   </div>
@@ -59,7 +74,7 @@
       <portainer-tooltip message="'Account that will be used to search for users.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="ldap_username" ng-model="$ctrl.settings.ReaderDN" placeholder="cn=user,dc=domain,dc=tld" />
+      <input type="text" class="form-control" id="ldap_username" ng-model="$ctrl.settings.ReaderDN" placeholder="cn=user,dc=domain,dc=tld" data-cy="ldap-username-input" />
     </div>
   </div>
 
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
index 3175c88d5..7f9ffe794 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
@@ -18,7 +18,15 @@
       <rd-widget-body>
         <div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.entries">
           <div class="col-sm-4">
-            <select class="form-control" ng-model="entry.type" ng-change="$ctrl.onEntriesChange()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+            <select
+              class="form-control"
+              ng-model="entry.type"
+              ng-change="$ctrl.onEntriesChange()"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-tabindex="-1"
+              data-cy="ldap-dn-builder-select"
+            >
+              >
               <option value="ou">OU Name</option>
               <option value="cn">Folder Name</option>
             </select>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
index 48d272923..828168f7f 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
@@ -3,6 +3,7 @@
   <div class="col-sm-7" style="padding-left: 0">
     <input
       type="text"
+      data-cy="group-name-input"
       class="form-control"
       id="group-name-input"
       ng-model="$ctrl.groupName"
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
index 4b71e8d0e..b43ba1a6f 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -40,6 +40,7 @@
           <div ng-repeat="url in $ctrl.settings.URLs track by $index" style="display: flex; margin-bottom: 10px">
             <input
               type="text"
+              data-cy="ldap-url"
               class="form-control"
               id="ldap_url"
               ng-model="$ctrl.settings.URLs[$index]"
@@ -71,7 +72,14 @@
 
           <div class="col-sm-9 col-lg-10">
             <label class="switch">
-              <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+              <input
+                type="checkbox"
+                id="anonymous_mode"
+                ng-model="$ctrl.settings.AnonymousMode"
+                limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+                limited-feature-tabindex="-1"
+                data-cy="ldap-anonymous-mode"
+              />
               <span class="slider round"></span>
             </label>
           </div>
@@ -88,6 +96,7 @@
           <div class="col-sm-9 col-lg-10">
             <input
               type="text"
+              data-cy="ldap-reader-dn"
               class="form-control"
               id="ldap_username"
               ng-model="$ctrl.settings.ReaderDN"
@@ -124,6 +133,7 @@
         <div class="col-sm-9">
           <input
             type="text"
+            data-cy="ldap-domain-root"
             class="form-control"
             id="ldap_domain_root"
             ng-model="$ctrl.domainSuffix"
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
index be0e6cbd8..13f2e38aa 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
@@ -1,6 +1,4 @@
-<div class="col-sm-12 form-section-title">
-  {{ $ctrl.title || 'LDAP security' }}
-</div>
+<div class="col-sm-12 form-section-title"> {{ $ctrl.title || 'LDAP security' }} </div>
 
 <!-- starttls -->
 <div class="form-group" ng-if="!$ctrl.settings.TLSConfig.TLS">
@@ -10,7 +8,7 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" data-cy="starttls-toggle" />
       <span class="slider round"></span>
     </label>
   </div>
@@ -25,7 +23,7 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" data-cy="tls-toggle" />
       <span class="slider round"></span>
     </label>
   </div>
@@ -40,7 +38,13 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <input
+        type="checkbox"
+        ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+        data-cy="tls-skip-verify-toggle"
+      />
       <span class="slider round"></span>
     </label>
   </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
index a1e595b33..36241c467 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
@@ -22,6 +22,7 @@
           limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
           ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
           limited-feature-tabindex="-1"
+          data-cy="ldap-test-username"
         />
       </div>
 
diff --git a/app/portainer/views/auth/auth.html b/app/portainer/views/auth/auth.html
index 77de57f9a..09dadf050 100644
--- a/app/portainer/views/auth/auth.html
+++ b/app/portainer/views/auth/auth.html
@@ -62,11 +62,11 @@
               <input
                 id="username"
                 type="text"
+                data-cy="auth-usernameInput"
                 class="form-control"
                 name="username"
                 ng-model="ctrl.formValues.Username"
                 auto-focus
-                data-cy="auth-usernameInput"
                 placeholder="Enter your username"
               />
             </div>
diff --git a/app/portainer/views/devices/import/importDevice.html b/app/portainer/views/devices/import/importDevice.html
index acfd85f35..0fba94119 100644
--- a/app/portainer/views/devices/import/importDevice.html
+++ b/app/portainer/views/devices/import/importDevice.html
@@ -70,6 +70,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="deviceImport-deviceNameInput"
                   class="form-control"
                   name="device_name"
                   placeholder="e.g. FDO-Test01"
@@ -77,7 +78,6 @@
                   ng-required="state.vouchersUploaded"
                   ng-disabled="!state.vouchersUploaded"
                   auto-focus
-                  data-cy="deviceImport-deviceNameInput"
                 />
               </div>
             </div>
@@ -104,6 +104,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="deviceImport-suffixInput"
                   class="form-control"
                   name="suffix"
                   ng-model="formValues.Suffix"
@@ -112,7 +113,6 @@
                   ng-pattern="/^[0-9]+$/"
                   placeholder="1"
                   required
-                  data-cy="deviceImport-suffixInput"
                 />
               </div>
             </div>
@@ -140,6 +140,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="deviceImport-portainerServerUrlInput"
                   class="form-control"
                   name="endpoint_url"
                   ng-model="formValues.PortainerURL"
@@ -147,7 +148,6 @@
                   ng-disabled="!state.vouchersUploaded"
                   placeholder="e.g. https://10.0.0.10:9443"
                   required
-                  data-cy="deviceImport-portainerServerUrlInput"
                 />
               </div>
             </div>
@@ -167,7 +167,14 @@
           <div class="form-group">
             <label for="device_profile" class="col-sm-3 col-lg-2 control-label text-left">Device Profile</label>
             <div class="col-sm-9 col-lg-10">
-              <select id="device_profile" ng-model="formValues.DeviceProfile" class="form-control" ng-required="state.vouchersUploaded" ng-disabled="!state.vouchersUploaded">
+              <select
+                id="device_profile"
+                data-cy="deviceImport-deviceProfileSelect"
+                ng-model="formValues.DeviceProfile"
+                class="form-control"
+                ng-required="state.vouchersUploaded"
+                ng-disabled="!state.vouchersUploaded"
+              >
                 <option selected disabled hidden value="">Select a profile for your device</option>
                 <option ng-repeat="profile in profiles | orderBy: 'name'" ng-value="profile.id">{{ profile.name }}</option>
               </select>
@@ -190,6 +197,7 @@
               <div class="col-sm-9 col-lg-10">
                 <select
                   class="form-control"
+                  data-cy="deviceImport-deviceGroupSelect"
                   ng-options="group.Id as group.Name for group in groups"
                   ng-model="formValues.GroupId"
                   id="device_group"
diff --git a/app/portainer/views/devices/profiles/add/addProfile.html b/app/portainer/views/devices/profiles/add/addProfile.html
index 4b64b269c..05d192a49 100644
--- a/app/portainer/views/devices/profiles/add/addProfile.html
+++ b/app/portainer/views/devices/profiles/add/addProfile.html
@@ -10,7 +10,16 @@
           <div class="form-group">
             <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="formValues.name" id="profile_name" name="profile_name" placeholder="e.g. myprofile" auto-focus />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="formValues.name"
+                id="profile_name"
+                name="profile_name"
+                placeholder="e.g. myprofile"
+                auto-focus
+                data-cy="profile-name-input"
+              />
             </div>
           </div>
           <!-- !name-input -->
diff --git a/app/portainer/views/devices/profiles/edit/editProfile.html b/app/portainer/views/devices/profiles/edit/editProfile.html
index e3845f3d3..1e811e475 100644
--- a/app/portainer/views/devices/profiles/edit/editProfile.html
+++ b/app/portainer/views/devices/profiles/edit/editProfile.html
@@ -10,7 +10,16 @@
           <div class="form-group">
             <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="formValues.name" id="profile_name" name="profile_name" placeholder="e.g. myprofile" auto-focus />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="formValues.name"
+                id="profile_name"
+                name="profile_name"
+                placeholder="e.g. myprofile"
+                auto-focus
+                data-cy="profile-name-input"
+              />
             </div>
           </div>
           <!-- !name-input -->
diff --git a/app/portainer/views/endpoints/edit/endpoint.html b/app/portainer/views/endpoints/edit/endpoint.html
index 7b3ecbcc6..3fcdc4d9a 100644
--- a/app/portainer/views/endpoints/edit/endpoint.html
+++ b/app/portainer/views/endpoints/edit/endpoint.html
@@ -73,7 +73,14 @@
           <div class="form-group">
             <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
             <div class="col-sm-9 col-lg-10">
-              <input type="text" class="form-control" id="container_name" ng-model="endpoint.Name" placeholder="e.g. kubernetes-cluster01 / docker-prod01" />
+              <input
+                type="text"
+                data-cy="container-name-input"
+                class="form-control"
+                id="container_name"
+                ng-model="endpoint.Name"
+                placeholder="e.g. kubernetes-cluster01 / docker-prod01"
+              />
             </div>
           </div>
           <!-- !name-input -->
@@ -93,6 +100,7 @@
               <input
                 ng-disabled="endpointType === 'local' || state.azureEndpoint"
                 type="text"
+                data-cy="endpoint-url-input"
                 class="form-control"
                 id="endpoint_url"
                 ng-model="endpoint.URL"
@@ -109,7 +117,14 @@
               </portainer-tooltip>
             </label>
             <div class="col-sm-9 col-lg-10">
-              <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com" />
+              <input
+                type="text"
+                class="form-control"
+                id="endpoint_public_url"
+                ng-model="endpoint.PublicURL"
+                placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com"
+                data-cy="public-url-input"
+              />
             </div>
           </div>
 
@@ -138,7 +153,13 @@
           <div class="form-group">
             <label for="endpoint_group" class="col-sm-3 col-lg-2 control-label text-left"> Group </label>
             <div class="col-sm-9 col-lg-10">
-              <select ng-options="group.Id as group.Name for group in groups" ng-model="endpoint.GroupId" id="endpoint_group" class="form-control"></select>
+              <select
+                ng-options="group.Id as group.Name for group in groups"
+                ng-model="endpoint.GroupId"
+                id="endpoint_group"
+                class="form-control"
+                data-cy="endpoint-group-select"
+              ></select>
             </div>
           </div>
           <!-- !group -->
@@ -152,14 +173,30 @@
             <div class="form-group">
               <label for="endpoint_managementinfoVersion" class="col-sm-3 col-lg-2 control-label text-left"> AMT Version </label>
               <div class="col-sm-9 col-lg-10">
-                <input type="text" ng-disabled="true" class="form-control" id="endpoint_managementinfoVersion" ng-model="endpoint.ManagementInfo['AMT']" placeholder="Loading..." />
+                <input
+                  type="text"
+                  ng-disabled="true"
+                  class="form-control"
+                  id="endpoint_managementinfoVersion"
+                  ng-model="endpoint.ManagementInfo['AMT']"
+                  placeholder="Loading..."
+                  data-cy="endpoint-managementinfoVersion"
+                />
               </div>
             </div>
 
             <div class="form-group">
               <label for="endpoint_managementinfoUUID" class="col-sm-3 col-lg-2 control-label text-left"> UUID </label>
               <div class="col-sm-9 col-lg-10">
-                <input type="text" ng-disabled="true" class="form-control" id="endpoint_managementinfoUUID" ng-model="endpoint.ManagementInfo['UUID']" placeholder="Loading..." />
+                <input
+                  type="text"
+                  ng-disabled="true"
+                  class="form-control"
+                  id="endpoint_managementinfoUUID"
+                  ng-model="endpoint.ManagementInfo['UUID']"
+                  placeholder="Loading..."
+                  data-cy="endpoint-managementinfoUUID"
+                />
               </div>
             </div>
 
@@ -168,6 +205,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="endpoint-managementinfoBuildNumber"
                   ng-disabled="true"
                   class="form-control"
                   id="endpoint_managementinfoBuildNumber"
@@ -182,6 +220,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="endpoint-managementinfoControlMode"
                   ng-disabled="true"
                   class="form-control"
                   id="endpoint_managementinfoControlMode"
@@ -196,6 +235,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="endpoint-managementinfoDNSSuffix"
                   ng-disabled="true"
                   class="form-control"
                   id="endpoint_managementinfoDNSSuffix"
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index d842824a9..b5cfcfeb4 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -36,7 +36,7 @@
             <div class="form-group">
               <label for="username" class="col-sm-4 control-label text-left"> Username </label>
               <div class="col-sm-8">
-                <input type="text" class="form-control" id="username" ng-model="formValues.Username" placeholder="e.g. admin" />
+                <input type="text" class="form-control" id="username" ng-model="formValues.Username" placeholder="e.g. admin" data-cy="init-username" />
               </div>
             </div>
             <!-- !username-input -->
@@ -92,7 +92,7 @@
             <!-- enableTelemetry-->
             <div class="form-group">
               <div class="col-sm-12 vertical-center">
-                <input type="checkbox" name="toggle_enableTelemetry" ng-model="formValues.enableTelemetry" />
+                <input type="checkbox" name="toggle_enableTelemetry" ng-model="formValues.enableTelemetry" data-cy="init-enableTelemetry" />
                 <span class="text-muted small"
                   >Allow collection of anonymous statistics. You can find more information about this in our
                   <a class="hyperlink" href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.</span
@@ -192,12 +192,12 @@
                 <div class="col-sm-9">
                   <input
                     type="password"
+                    data-cy="init-secretAccessKeyInput"
                     class="form-control"
                     id="secret_access_key"
                     name="secret_access_key"
                     ng-model="formValues.SecretAccessKey"
                     required
-                    data-cy="init-secretAccessKeyInput"
                   />
                 </div>
               </div>
@@ -208,12 +208,12 @@
                 <div class="col-sm-9">
                   <input
                     type="text"
+                    data-cy="init-s3RegionInput"
                     class="form-control"
                     placeholder="default region is us-east-1 if left empty"
                     id="backup-s3-region"
                     name="backup-s3-region"
                     ng-model="formValues.Region"
-                    data-cy="init-s3RegionInput"
                   />
                 </div>
               </div>
@@ -235,12 +235,12 @@
                 <div class="col-sm-9">
                   <input
                     type="text"
+                    data-cy="init-s3CompatibleHostInput"
                     class="form-control"
                     id="s3-compatible-host"
                     name="s3-compatible-host"
                     ng-model="formValues.S3CompatibleHost"
                     placeholder="leave empty for AWS S3"
-                    data-cy="init-s3CompatibleHostInput"
                   />
                 </div>
               </div>
@@ -251,12 +251,12 @@
                 <div class="col-sm-9">
                   <input
                     type="text"
+                    data-cy="init-backupFilenameInput"
                     class="form-control"
                     id="backup-s3-filename"
                     name="backup-s3-filename"
                     ng-model="formValues.Filename"
                     required
-                    data-cy="init-backupFilenameInput"
                   />
                 </div>
               </div>
diff --git a/app/portainer/views/registries/edit/registry.html b/app/portainer/views/registries/edit/registry.html
index 026a32173..fbdc9c3c7 100644
--- a/app/portainer/views/registries/edit/registry.html
+++ b/app/portainer/views/registries/edit/registry.html
@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Provider</label>
             <div class="col-sm-9 col-lg-10">
-              <input type="text" class="form-control" ng-model="$ctrl.provider" disabled />
+              <input type="text" class="form-control" ng-model="$ctrl.provider" disabled data-cy="registries-provider-input" />
             </div>
           </div>
 
@@ -19,6 +19,7 @@
             <div class="col-sm-9 col-lg-10">
               <input
                 type="text"
+                data-cy="registry-name-input"
                 class="form-control"
                 id="registry_name"
                 name="registry_name"
@@ -59,6 +60,7 @@
             <div class="col-sm-9 col-lg-10">
               <input
                 type="text"
+                data-cy="registry-url-input"
                 class="form-control"
                 id="registry_url"
                 name="registry_url"
@@ -90,6 +92,7 @@
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="text"
+                  data-cy="registry-base-url-input"
                   class="form-control"
                   id="registry_base_url"
                   name="registry_base_url"
@@ -141,7 +144,15 @@
                 {{ $ctrl.registry.Type === $ctrl.RegistryTypes.ECR ? 'AWS Access Key' : 'Username' }}
               </label>
               <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="credentials_username" name="credentials_username" ng-model="$ctrl.registry.Username" required />
+                <input
+                  type="text"
+                  class="form-control"
+                  id="credentials_username"
+                  name="credentials_username"
+                  ng-model="$ctrl.registry.Username"
+                  required
+                  data-cy="registries-username-credential-input"
+                />
               </div>
             </div>
             <div class="form-group" ng-show="editRegistry.credentials_username.$invalid">
@@ -157,9 +168,7 @@
             <!-- !credentials-user -->
             <!-- credentials-password -->
             <div class="form-group">
-              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">
-                {{ $ctrl.passwordLabel() }}
-              </label>
+              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left"> {{ $ctrl.passwordLabel() }} </label>
               <div class="col-sm-9 col-lg-10">
                 <input
                   type="password"
@@ -187,7 +196,16 @@
               <div class="form-group">
                 <label for="registry_region" class="col-sm-3 col-lg-2 control-label required text-left">Region</label>
                 <div class="col-sm-9 col-lg-10">
-                  <input type="text" class="form-control" id="registry_region" name="registry_region" ng-model="$ctrl.registry.Ecr.Region" placeholder="us-west-1" required />
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="registry_region"
+                    name="registry_region"
+                    ng-model="$ctrl.registry.Ecr.Region"
+                    placeholder="us-west-1"
+                    required
+                    data-cy="registries-region-credential-input"
+                  />
                 </div>
               </div>
               <div class="form-group" ng-show="editRegistry.registry_region.$invalid">
@@ -224,7 +242,15 @@
               <div class="form-group">
                 <label for="organisation_name" class="col-sm-3 col-lg-2 control-label required text-left">Organization name</label>
                 <div class="col-sm-9 col-lg-10">
-                  <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.registry.Quay.OrganisationName" required />
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="organisation_name"
+                    name="organisation_name"
+                    ng-model="$ctrl.registry.Quay.OrganisationName"
+                    required
+                    data-cy="registries-organisation-credential-input"
+                  />
                 </div>
               </div>
               <div class="form-group" ng-show="editRegistry.organisation_name.$invalid">
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index 60e042657..5a349797a 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -15,6 +15,7 @@
             <div class="col-sm-10">
               <select
                 id="user_timeout"
+                data-cy="user-timeout-select"
                 class="form-control"
                 ng-model="settings.UserSessionTimeout"
                 ng-options="opt.value as opt.key for opt in state.availableUserSessionTimeoutOptions"
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index ffd860c44..9799f349c 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -11,6 +11,7 @@
             <div class="col-sm-11">
               <input
                 type="text"
+                data-cy="stack-name-input"
                 class="form-control"
                 ng-model="formValues.Name"
                 id="stack_name"
diff --git a/app/portainer/views/tags/tags.html b/app/portainer/views/tags/tags.html
index f8deb85f2..fbbd65cfa 100644
--- a/app/portainer/views/tags/tags.html
+++ b/app/portainer/views/tags/tags.html
@@ -12,6 +12,7 @@
             <div class="col-sm-10">
               <input
                 type="text"
+                data-cy="tag-name-input"
                 class="form-control"
                 name="name"
                 ng-model="formValues.Name"
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index 3e2901821..354f63fa2 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -31,7 +31,7 @@
           <div class="form-group">
             <label for="container_name" class="col-sm-2 control-label text-left">Name</label>
             <div class="col-sm-6">
-              <input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)" />
+              <input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)" data-cy="container-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -39,7 +39,7 @@
           <div class="form-group">
             <label for="container_network" class="col-sm-2 control-label text-left">Network</label>
             <div class="col-sm-6">
-              <select class="form-control" ng-options="net.Name for net in availableNetworks | orderBy: 'Name'" ng-model="formValues.network">
+              <select class="form-control" ng-options="net.Name for net in availableNetworks | orderBy: 'Name'" ng-model="formValues.network" data-cy="network-select">
                 <option disabled hidden value="">Select a network</option>
               </select>
             </div>
@@ -52,8 +52,8 @@
               <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
             </label>
             <div class="col-sm-6">
-              <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
-              <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}">
+              <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="env-input-{{ $index}" />
+              <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="env-select-{{ $index }}">
                 <option selected disabled hidden value="">Select value</option>
                 <option ng-repeat="choice in var.select" value="{{ choice.value }}">{{ choice.text }}</option>
               </select>
@@ -82,14 +82,20 @@
                     <!-- host-port -->
                     <div class="input-group col-sm-4 input-group-sm">
                       <span class="input-group-addon">host</span>
-                      <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" />
+                      <input
+                        type="text"
+                        class="form-control"
+                        ng-model="portBinding.hostPort"
+                        placeholder="e.g. 80 or 1.2.3.4:80 (optional)"
+                        data-cy="host-port-input-{{ $index }}"
+                      />
                     </div>
                     <!-- !host-port -->
                     <pr-icon icon="'arrow-right'"></pr-icon>
                     <!-- container-port -->
                     <div class="input-group col-sm-4 input-group-sm">
                       <span class="input-group-addon">container</span>
-                      <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80" />
+                      <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80" data-cy="container-port-input-{{ $index }}" />
                     </div>
                     <!-- !container-port -->
                     <!-- protocol-actions -->
@@ -125,7 +131,7 @@
                       <!-- container-path -->
                       <div class="input-group input-group-sm col-sm-6">
                         <span class="input-group-addon">container</span>
-                        <input type="text" class="form-control" ng-model="volume.container" placeholder="e.g. /path/in/container" />
+                        <input type="text" class="form-control" ng-model="volume.container" placeholder="e.g. /path/in/container" data-cy="container-path-input-{{ $index }}" />
                       </div>
                       <!-- !container-path -->
                       <!-- volume-type -->
@@ -150,7 +156,7 @@
                         <div class="col-sm-12 input-group">
                           <span class="input-group-addon">volume</span>
                           <div class="col-sm-12 input-group">
-                            <select class="form-control" ng-model="volume.bind" ng-options="vol.Name as vol.Name for vol in availableVolumes">
+                            <select class="form-control" ng-model="volume.bind" ng-options="vol.Name as vol.Name for vol in availableVolumes" data-cy="volume-bind-select">
                               <option value="" disabled selected>Select a volume</option>
                             </select>
                           </div>
@@ -160,7 +166,7 @@
                       <!-- bind -->
                       <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'bind'">
                         <span class="input-group-addon">host</span>
-                        <input type="text" class="form-control" ng-model="volume.bind" placeholder="e.g. /path/on/host" />
+                        <input type="text" class="form-control" ng-model="volume.bind" placeholder="e.g. /path/on/host" data-cy="host-path-input-{{ $index }}" />
                       </div>
                       <!-- !bind -->
                       <!-- read-only -->
@@ -192,7 +198,7 @@
                   <div class="form-inline mt-2" ng-repeat="(idx, host) in state.selectedTemplate.Hosts track by $index">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="state.selectedTemplate.Hosts[idx]" placeholder="e.g. host:IP" />
+                      <input type="text" class="form-control" ng-model="state.selectedTemplate.Hosts[idx]" placeholder="e.g. host:IP" data-cy="host-input-{{ $index }}" />
                     </div>
                     <button class="btn btn-light" type="button" ng-click="removeExtraHost($index)">
                       <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
@@ -216,11 +222,11 @@
                   <div class="form-inline mt-2" ng-repeat="label in state.selectedTemplate.Labels">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
+                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" data-cy="label-name-input-{{ $index }}" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="label-value-input-{{ $index }}" />
                     </div>
                     <button class="btn btn-light" type="button" ng-click="removeLabel($index)">
                       <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
@@ -238,7 +244,14 @@
             <div class="form-group mt-4">
               <label for="container_hostname" class="col-sm-2 control-label text-left">Hostname</label>
               <div class="col-sm-6">
-                <input type="text" name="container_hostname" class="form-control" ng-model="state.selectedTemplate.Hostname" placeholder="leave empty to use docker default" />
+                <input
+                  type="text"
+                  name="container_hostname"
+                  class="form-control"
+                  ng-model="state.selectedTemplate.Hostname"
+                  placeholder="leave empty to use docker default"
+                  data-cy="hostname-input"
+                />
               </div>
             </div>
             <!-- !hostname -->
diff --git a/app/portainer/views/users/users.html b/app/portainer/views/users/users.html
index 4b59705b0..1eb9f3b19 100644
--- a/app/portainer/views/users/users.html
+++ b/app/portainer/views/users/users.html
@@ -16,13 +16,13 @@
               <div class="input-group">
                 <input
                   type="text"
+                  data-cy="user-usernameInput"
                   class="form-control"
                   id="username"
                   ng-model="formValues.Username"
                   ng-change="checkUsernameValidity()"
                   placeholder="e.g. jdoe"
                   auto-focus
-                  data-cy="user-usernameInput"
                 />
                 <span class="input-group-addon">
                   <pr-icon mode="'success'" icon="'check'" ng-if="state.validUsername"></pr-icon>
diff --git a/app/react/azure/DashboardView/DashboardView.tsx b/app/react/azure/DashboardView/DashboardView.tsx
index 56d561427..7300d2d43 100644
--- a/app/react/azure/DashboardView/DashboardView.tsx
+++ b/app/react/azure/DashboardView/DashboardView.tsx
@@ -34,6 +34,7 @@ export function DashboardView() {
           <DashboardGrid>
             <DashboardItem
               value={subscriptionsCount as number}
+              dataCy="subscriptions-count"
               isLoading={subscriptionsQuery.isLoading}
               isRefetching={subscriptionsQuery.isRefetching}
               icon={Subscription}
@@ -42,6 +43,7 @@ export function DashboardView() {
             {!resourceGroupsQuery.isError && !resourceGroupsQuery.isLoading && (
               <DashboardItem
                 value={resourceGroupsCount}
+                dataCy="resource-groups-count"
                 isLoading={resourceGroupsQuery.isLoading}
                 icon={Package}
                 type="Resource group"
diff --git a/app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.tsx b/app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.tsx
index 477ba4dee..bca2d1e81 100644
--- a/app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.tsx
+++ b/app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.tsx
@@ -197,6 +197,7 @@ export function CreateContainerInstanceForm() {
                 isLoading={isSubmitting}
                 loadingText="Deployment in progress..."
                 icon={Plus}
+                data-cy="aci-create-button"
               >
                 Deploy the container
               </LoadingButton>
diff --git a/app/react/azure/container-instances/CreateView/PortsMappingField.tsx b/app/react/azure/container-instances/CreateView/PortsMappingField.tsx
index 04b2d6f59..c6e5fa220 100644
--- a/app/react/azure/container-instances/CreateView/PortsMappingField.tsx
+++ b/app/react/azure/container-instances/CreateView/PortsMappingField.tsx
@@ -49,6 +49,7 @@ export function PortsMappingField({
         errors={errors}
         disabled={disabled}
         readOnly={readOnly}
+        data-cy="aci-ports-mapping"
       />
       {typeof errors === 'string' && (
         <div className="form-group col-md-12">
@@ -65,6 +66,7 @@ function Item({
   error,
   disabled,
   readOnly,
+  index,
 }: ItemProps<PortMapping>) {
   return (
     <div className={styles.item}>
@@ -80,6 +82,7 @@ function Item({
             disabled={disabled}
             readOnly={readOnly}
             type="number"
+            data-cy={`aci-ports-mapping-host-input_${index}`}
           />
         </InputGroup>
 
@@ -98,6 +101,7 @@ function Item({
             disabled={disabled}
             readOnly={readOnly}
             type="number"
+            data-cy={`aci-ports-mapping-container-port-input_${index}`}
           />
         </InputGroup>
 
diff --git a/app/react/azure/container-instances/ItemView/ItemView.tsx b/app/react/azure/container-instances/ItemView/ItemView.tsx
index 3a9e52394..a64883ca6 100644
--- a/app/react/azure/container-instances/ItemView/ItemView.tsx
+++ b/app/react/azure/container-instances/ItemView/ItemView.tsx
@@ -82,6 +82,7 @@ export function ItemView() {
                   id="subscription-input"
                   value={container.subscriptionName}
                   readOnly
+                  data-cy="aci-container-subscription-input"
                 />
               </FormControl>
 
@@ -91,6 +92,7 @@ export function ItemView() {
                   id="resourceGroup-input"
                   value={container.resourceGroupName}
                   readOnly
+                  data-cy="aci-container-resourceGroup-input"
                 />
               </FormControl>
 
@@ -100,6 +102,7 @@ export function ItemView() {
                   id="location-input"
                   value={container.location}
                   readOnly
+                  data-cy="aci-container-location-input"
                 />
               </FormControl>
 
@@ -111,6 +114,7 @@ export function ItemView() {
                   id="name-input"
                   readOnly
                   value={container.name}
+                  data-cy="aci-container-name-input"
                 />
               </FormControl>
 
@@ -120,6 +124,7 @@ export function ItemView() {
                   id="image-input"
                   value={container.imageName}
                   readOnly
+                  data-cy="aci-container-image-input"
                 />
               </FormControl>
 
@@ -129,6 +134,7 @@ export function ItemView() {
                   id="os-input"
                   readOnly
                   value={container.osType}
+                  data-cy="aci-container-os-input"
                 />
               </FormControl>
 
@@ -140,6 +146,7 @@ export function ItemView() {
                   id="public-ip"
                   readOnly
                   value={container.ipAddress}
+                  data-cy="aci-container-public-ip"
                 />
               </FormControl>
 
@@ -153,6 +160,7 @@ export function ItemView() {
                   placeholder="1"
                   readOnly
                   value={container.cpu}
+                  data-cy="aci-container-cpu-input"
                 />
               </FormControl>
 
@@ -164,6 +172,7 @@ export function ItemView() {
                   placeholder="1"
                   readOnly
                   value={container.memory}
+                  data-cy="aci-container-memory-input"
                 />
               </FormControl>
             </WidgetBody>
diff --git a/app/react/azure/container-instances/ListView/ContainersDatatable.tsx b/app/react/azure/container-instances/ListView/ContainersDatatable.tsx
index f207d288b..534616257 100644
--- a/app/react/azure/container-instances/ListView/ContainersDatatable.tsx
+++ b/app/react/azure/container-instances/ListView/ContainersDatatable.tsx
@@ -31,11 +31,13 @@ export function ContainersDatatable({ dataset, onRemoveClick }: Props) {
       titleIcon={Box}
       getRowId={(container) => container.id}
       emptyContentLabel="No container available."
+      data-cy="containers-datatable"
       renderTableActions={(selectedRows) => (
         <div className="flex gap-2">
           <Authorized authorizations="AzureContainerGroupDelete">
             <DeleteButton
               disabled={selectedRows.length === 0}
+              data-cy="remove-containers-button"
               onConfirmed={() =>
                 handleRemoveClick(selectedRows.map((r) => r.id))
               }
@@ -44,7 +46,7 @@ export function ContainersDatatable({ dataset, onRemoveClick }: Props) {
           </Authorized>
 
           <Authorized authorizations="AzureContainerGroupCreate">
-            <AddButton>Add container</AddButton>
+            <AddButton data-cy="add-container-button">Add container</AddButton>
           </Authorized>
         </div>
       )}
diff --git a/app/react/azure/container-instances/ListView/columns/name.tsx b/app/react/azure/container-instances/ListView/columns/name.tsx
index 978e177b3..bb4ed33bf 100644
--- a/app/react/azure/container-instances/ListView/columns/name.tsx
+++ b/app/react/azure/container-instances/ListView/columns/name.tsx
@@ -21,6 +21,7 @@ export function NameCell({
       to="azure.containerinstances.container"
       params={{ id: container.id }}
       className="hover:underline"
+      data-cy={`aci-container-${container.id}`}
     >
       {name}
     </Link>
diff --git a/app/react/common/stacks/ItemView/StackContainersDatatable.tsx b/app/react/common/stacks/ItemView/StackContainersDatatable.tsx
index 3d686b3f6..39c4e7d18 100644
--- a/app/react/common/stacks/ItemView/StackContainersDatatable.tsx
+++ b/app/react/common/stacks/ItemView/StackContainersDatatable.tsx
@@ -68,6 +68,7 @@ export function StackContainersDatatable({ environment, stackName }: Props) {
             />
           )}
           initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
+          data-cy="stack-containers-datatable"
           renderTableSettings={(tableInstance) => (
             <>
               <ColumnVisibilityMenu<DockerContainer>
diff --git a/app/react/common/stacks/common/confirm-stack-update.ts b/app/react/common/stacks/common/confirm-stack-update.ts
index d0e67db71..e06233dc6 100644
--- a/app/react/common/stacks/common/confirm-stack-update.ts
+++ b/app/react/common/stacks/common/confirm-stack-update.ts
@@ -14,6 +14,7 @@ export async function confirmStackUpdate(
       confirmButton: buildConfirmButton('Update'),
       modalType: ModalType.Warn,
       defaultValue,
+      'data-cy': 'confirm-stack-update',
     }
   );
 
diff --git a/app/react/components/BETeaserButton.tsx b/app/react/components/BETeaserButton.tsx
index 6764de1c0..80c43a4fe 100644
--- a/app/react/components/BETeaserButton.tsx
+++ b/app/react/components/BETeaserButton.tsx
@@ -1,11 +1,12 @@
 import { Briefcase } from 'lucide-react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
+import { AutomationTestingProps } from '@/types';
 
 import { Button } from '@@/buttons';
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
-interface Props {
+interface Props extends AutomationTestingProps {
   featureId: FeatureId;
   heading: string;
   message: string;
@@ -21,6 +22,7 @@ export function BETeaserButton({
   buttonText,
   className,
   buttonClassName,
+  'data-cy': dataCy,
 }: Props) {
   return (
     <TooltipWithChildren
@@ -38,6 +40,7 @@ export function BETeaserButton({
           size="small"
           onClick={() => {}}
           disabled
+          data-cy={dataCy}
         >
           {buttonText}
         </Button>
diff --git a/app/react/components/Code/Code.tsx b/app/react/components/Code/Code.tsx
index 885254a38..72db4adeb 100644
--- a/app/react/components/Code/Code.tsx
+++ b/app/react/components/Code/Code.tsx
@@ -19,7 +19,12 @@ export function Code({ children, showCopyButton }: Props) {
       <code className={styles.code}>{children}</code>
 
       {showCopyButton && (
-        <Button color="link" className={styles.copyButton} onClick={handleCopy}>
+        <Button
+          color="link"
+          className={styles.copyButton}
+          onClick={handleCopy}
+          data-cy="code-copy-button"
+        >
           <Icon
             icon={copiedSuccessfully ? Check : Copy}
             className="!ml-1"
diff --git a/app/react/components/CodeEditor.tsx b/app/react/components/CodeEditor.tsx
index e9f4e0cf8..acdc57460 100644
--- a/app/react/components/CodeEditor.tsx
+++ b/app/react/components/CodeEditor.tsx
@@ -7,12 +7,14 @@ import { useMemo } from 'react';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as highlightTags } from '@lezer/highlight';
 
+import { AutomationTestingProps } from '@/types';
+
 import { CopyButton } from '@@/buttons/CopyButton';
 
 import styles from './CodeEditor.module.css';
 import { TextTip } from './Tip/TextTip';
 
-interface Props {
+interface Props extends AutomationTestingProps {
   id: string;
   placeholder?: string;
   yaml?: boolean;
@@ -67,6 +69,7 @@ export function CodeEditor({
   yaml: isYaml,
   dockerFile: isDockerFile,
   shell: isShell,
+  'data-cy': dataCy,
 }: Props) {
   const extensions = useMemo(() => {
     const extensions = [];
@@ -90,6 +93,7 @@ export function CodeEditor({
         </div>
 
         <CopyButton
+          data-cy={`copy-code-button-${id}`}
           fadeDelay={2500}
           copyText={value}
           color="link"
@@ -112,6 +116,7 @@ export function CodeEditor({
           highlightSelectionMatches: false,
           autocompletion: false,
         }}
+        data-cy={dataCy}
       />
     </>
   );
diff --git a/app/react/components/DashboardItem/DashboardItem.stories.tsx b/app/react/components/DashboardItem/DashboardItem.stories.tsx
index 34ddc79f4..e0522d13b 100644
--- a/app/react/components/DashboardItem/DashboardItem.stories.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.stories.tsx
@@ -19,7 +19,14 @@ interface StoryProps {
 }
 
 function Template({ value, icon, type }: StoryProps) {
-  return <DashboardItem value={value} icon={icon} type={type} />;
+  return (
+    <DashboardItem
+      value={value}
+      icon={icon}
+      type={type}
+      dataCy="data-cy-example"
+    />
+  );
 }
 
 export const Primary: Story<StoryProps> = Template.bind({});
@@ -31,15 +38,25 @@ Primary.args = {
 
 export function WithLink() {
   return (
-    <Link to="example.page">
-      <DashboardItem value={1} icon={List} type="Example resource" />
+    <Link to="example.page" data-cy="data-cy-example">
+      <DashboardItem
+        value={1}
+        icon={List}
+        type="Example resource"
+        dataCy="data-cy-example"
+      />
     </Link>
   );
 }
 
 export function WithChildren() {
   return (
-    <DashboardItem value={1} icon={List} type="Example resource">
+    <DashboardItem
+      value={1}
+      icon={List}
+      type="Example resource"
+      dataCy="data-cy-example"
+    >
       <div>Children</div>
     </DashboardItem>
   );
diff --git a/app/react/components/DashboardItem/DashboardItem.test.tsx b/app/react/components/DashboardItem/DashboardItem.test.tsx
index e32e19b2a..00d164d7a 100644
--- a/app/react/components/DashboardItem/DashboardItem.test.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.test.tsx
@@ -26,5 +26,7 @@ test('should have accessibility label created from the provided resource type',
 });
 
 function renderComponent(value = 0, icon = User, type = '') {
-  return render(<DashboardItem value={value} icon={icon} type={type} />);
+  return render(
+    <DashboardItem value={value} icon={icon} type={type} dataCy="example" />
+  );
 }
diff --git a/app/react/components/DashboardItem/DashboardItem.tsx b/app/react/components/DashboardItem/DashboardItem.tsx
index 73be79c04..0cd96255a 100644
--- a/app/react/components/DashboardItem/DashboardItem.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.tsx
@@ -16,7 +16,7 @@ interface Props extends IconProps {
   to?: string;
   params?: object;
   children?: ReactNode;
-  dataCy?: string;
+  dataCy: string;
 }
 
 export function DashboardItem({
@@ -103,7 +103,12 @@ export function DashboardItem({
 
   if (to) {
     return (
-      <Link to={to} className="!no-underline" params={params}>
+      <Link
+        to={to}
+        className="!no-underline"
+        params={params}
+        data-cy={`${dataCy}-link`}
+      >
         {Item}
       </Link>
     );
diff --git a/app/react/components/DetailsTable/DetailsTable.stories.tsx b/app/react/components/DetailsTable/DetailsTable.stories.tsx
index 6cca0bdd1..679cb41bf 100644
--- a/app/react/components/DetailsTable/DetailsTable.stories.tsx
+++ b/app/react/components/DetailsTable/DetailsTable.stories.tsx
@@ -17,7 +17,7 @@ export default {
 
 function Template({ key1, val1, key2, val2 }: Args) {
   return (
-    <DetailsTable>
+    <DetailsTable dataCy="details-table">
       <DetailsRow label={key1}>{val1}</DetailsRow>
       <DetailsRow label={key2}>{val2}</DetailsRow>
     </DetailsTable>
diff --git a/app/react/components/DetailsTable/DetailsTable.test.tsx b/app/react/components/DetailsTable/DetailsTable.test.tsx
index a00108729..a4ede2fc4 100644
--- a/app/react/components/DetailsTable/DetailsTable.test.tsx
+++ b/app/react/components/DetailsTable/DetailsTable.test.tsx
@@ -10,7 +10,7 @@ test('should display child row elements', () => {
   };
 
   const { queryByText } = render(
-    <DetailsTable>
+    <DetailsTable dataCy="details-table">
       <DetailsTable.Row label="Name">{person.name}</DetailsTable.Row>
       <DetailsTable.Row label="Id">{person.id}</DetailsTable.Row>
     </DetailsTable>
diff --git a/app/react/components/DetailsTable/DetailsTable.tsx b/app/react/components/DetailsTable/DetailsTable.tsx
index 846d75fc2..766bddd91 100644
--- a/app/react/components/DetailsTable/DetailsTable.tsx
+++ b/app/react/components/DetailsTable/DetailsTable.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { Children, PropsWithChildren } from 'react';
 
 type Props = {
+  dataCy: string;
   headers?: string[];
-  dataCy?: string;
   className?: string;
   emptyMessage?: string;
 };
diff --git a/app/react/components/ImageConfigFieldset/AdvancedForm.tsx b/app/react/components/ImageConfigFieldset/AdvancedForm.tsx
index 53132cde0..a1a21754e 100644
--- a/app/react/components/ImageConfigFieldset/AdvancedForm.tsx
+++ b/app/react/components/ImageConfigFieldset/AdvancedForm.tsx
@@ -34,6 +34,7 @@ export function AdvancedForm({
           }}
           placeholder="e.g. registry:port/my-image:my-tag"
           required
+          data-cy="image-config-advanced-input"
         />
       </FormControl>
     </>
diff --git a/app/react/components/ImageConfigFieldset/ImageConfigFieldset.tsx b/app/react/components/ImageConfigFieldset/ImageConfigFieldset.tsx
index e77fef1d0..bb0c383a4 100644
--- a/app/react/components/ImageConfigFieldset/ImageConfigFieldset.tsx
+++ b/app/react/components/ImageConfigFieldset/ImageConfigFieldset.tsx
@@ -46,6 +46,7 @@ export function ImageConfigFieldset({
               icon={Globe}
               className="!ml-0 p-0 hover:no-underline"
               onClick={() => setFieldValue('useRegistry', false)}
+              data-cy="image-config-advanced-button"
             >
               Advanced mode
             </Button>
@@ -56,6 +57,7 @@ export function ImageConfigFieldset({
               icon={Database}
               className="!ml-0 p-0 hover:no-underline"
               onClick={() => setFieldValue('useRegistry', true)}
+              data-cy="image-config-simple-button"
             >
               Simple mode
             </Button>
diff --git a/app/react/components/ImageConfigFieldset/InputSearch.tsx b/app/react/components/ImageConfigFieldset/InputSearch.tsx
index 3c3117d2d..fbda3cee1 100644
--- a/app/react/components/ImageConfigFieldset/InputSearch.tsx
+++ b/app/react/components/ImageConfigFieldset/InputSearch.tsx
@@ -11,6 +11,7 @@ export function InputSearch({
   options,
   placeholder,
   inputId,
+  'data-cy': dataCy,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -34,6 +35,7 @@ export function InputSearch({
       onChange={onChange}
       placeholder={placeholder}
       inputId={inputId}
+      data-cy={dataCy}
     />
   );
 }
diff --git a/app/react/components/ImageConfigFieldset/RateLimits.tsx b/app/react/components/ImageConfigFieldset/RateLimits.tsx
index 64771c896..e7d42bbef 100644
--- a/app/react/components/ImageConfigFieldset/RateLimits.tsx
+++ b/app/react/components/ImageConfigFieldset/RateLimits.tsx
@@ -93,8 +93,13 @@ function RateLimitsInner({
                     You are currently using an anonymous account to pull images
                     from DockerHub and will be limited to 100 pulls every 6
                     hours. You can configure DockerHub authentication in the{' '}
-                    <Link to="portainer.registries">Registries View</Link>.
-                    Remaining pulls:{' '}
+                    <Link
+                      to="portainer.registries"
+                      data-cy="image-registry-rate-limits-registries-view-link"
+                    >
+                      Registries View
+                    </Link>
+                    . Remaining pulls:{' '}
                     <span className="font-bold">
                       {pullRateLimits.remaining}/{pullRateLimits.limit}
                     </span>
diff --git a/app/react/components/ImageConfigFieldset/SimpleForm.tsx b/app/react/components/ImageConfigFieldset/SimpleForm.tsx
index bbb914686..94d0840ab 100644
--- a/app/react/components/ImageConfigFieldset/SimpleForm.tsx
+++ b/app/react/components/ImageConfigFieldset/SimpleForm.tsx
@@ -91,6 +91,7 @@ export function SimpleForm({
                   rel: 'noreferrer',
                 }}
                 icon={DockerIcon}
+                data-cy="component-dockerHubSearchButton"
               >
                 Search
               </Button>
@@ -189,6 +190,7 @@ function ImageField({
       value={value}
       onChange={(e) => onChange(e.target.value)}
       id={inputId}
+      data-cy="image-field-simple-input"
     />
   );
 }
diff --git a/app/react/components/InformationPanel.tsx b/app/react/components/InformationPanel.tsx
index b440585d7..e1f9aff0f 100644
--- a/app/react/components/InformationPanel.tsx
+++ b/app/react/components/InformationPanel.tsx
@@ -29,7 +29,12 @@ export function InformationPanel({
                   <span>{title}</span>
                   {!!onDismiss && (
                     <span className="small" style={{ float: 'right' }}>
-                      <Button color="link" icon={X} onClick={() => onDismiss()}>
+                      <Button
+                        color="link"
+                        icon={X}
+                        onClick={() => onDismiss()}
+                        data-cy="dismiss-information-panel-button"
+                      >
                         dismiss
                       </Button>
                     </span>
diff --git a/app/react/components/InsightsBox/InsightsBox.tsx b/app/react/components/InsightsBox/InsightsBox.tsx
index 392759dc3..81db52d11 100644
--- a/app/react/components/InsightsBox/InsightsBox.tsx
+++ b/app/react/components/InsightsBox/InsightsBox.tsx
@@ -63,6 +63,7 @@ export function InsightsBox({
       {insightCloseId && (
         <Button
           icon={X}
+          data-cy={`insight-close-${insightCloseId}`}
           className={clsx(
             'absolute right-2 top-3 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5',
             type === 'slim' && insightCloseId && 'top-1'
diff --git a/app/react/components/Link.tsx b/app/react/components/Link.tsx
index 42f012577..86a91e8e6 100644
--- a/app/react/components/Link.tsx
+++ b/app/react/components/Link.tsx
@@ -5,10 +5,12 @@ interface Props {
   title?: string;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
   rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+  'data-cy': AnchorHTMLAttributes<HTMLAnchorElement>['data-cy'];
 }
 
 export function Link({
   children,
+  'data-cy': dataCy,
   to,
   params,
   options,
@@ -18,7 +20,7 @@ export function Link({
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <a onClick={onClick} href={href} {...props}>
+    <a onClick={onClick} href={href} data-cy={dataCy} {...props}>
       {children}
     </a>
   );
diff --git a/app/react/components/LinkButton.tsx b/app/react/components/LinkButton.tsx
index dd3ef7f4e..7bae0bcdc 100644
--- a/app/react/components/LinkButton.tsx
+++ b/app/react/components/LinkButton.tsx
@@ -11,6 +11,7 @@ export function LinkButton({
   className,
   children,
   title = '',
+  'data-cy': dataCy,
   ...props
 }: ComponentProps<typeof Button> & ComponentProps<typeof Link>) {
   return (
@@ -24,7 +25,9 @@ export function LinkButton({
       props={{
         to,
         params,
+        'data-cy': `${dataCy}-link`,
       }}
+      data-cy={`${dataCy}-button`}
     >
       {children}
     </Button>
diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
index 538ffa584..d1c7a7e26 100644
--- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
+++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
@@ -43,6 +43,7 @@ function renderCrumb(crumb: Crumb | string) {
         to={crumb.link}
         params={crumb.linkParams}
         className="text-blue-9 hover:text-blue-11 hover:underline th-highcontrast:text-blue-5 th-dark:text-blue-7 th-dark:hover:text-blue-9"
+        data-cy={`breadcrumb-${crumb.label}`}
       >
         {crumb.label}
       </Link>
diff --git a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
index 26b44fcde..dbfc4203d 100644
--- a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
+++ b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
@@ -25,6 +25,7 @@ export function ContextHelp() {
         )}
         title="Help"
         rel="noreferrer"
+        data-cy="context-help-button"
       >
         <HelpCircle className="lucide" />
       </a>
diff --git a/app/react/components/PageHeader/HeaderTitle.tsx b/app/react/components/PageHeader/HeaderTitle.tsx
index 43ece0244..f8f457673 100644
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@@ -16,7 +16,10 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
   return (
     <div className="flex justify-between whitespace-normal pt-3">
       <div className="flex items-center gap-2">
-        <h1 className="m-0 text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
+        <h1
+          className="m-0 text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white"
+          data-cy="page-title"
+        >
           {title}
         </h1>
         {children && <>{children}</>}
diff --git a/app/react/components/PageHeader/NotificationsMenu.tsx b/app/react/components/PageHeader/NotificationsMenu.tsx
index e9639ddfe..9e668e4b0 100644
--- a/app/react/components/PageHeader/NotificationsMenu.tsx
+++ b/app/react/components/PageHeader/NotificationsMenu.tsx
@@ -97,19 +97,25 @@ export function NotificationsMenu() {
         {reducedNotifications?.length > 0 ? (
           <>
             <div className={notificationStyles.notifications}>
-              {reducedNotifications.map((notification) => (
+              {reducedNotifications.map((notification, index) => (
                 <MenuLink
                   to="portainer.notifications"
                   params={{ id: notification.id }}
                   notification={notification}
                   key={notification.id}
                   onDelete={() => onDelete(notification.id)}
+                  data-cy={`notification-delete-button_${index}`}
                 />
               ))}
             </div>
 
             <div className={notificationStyles.notificationLink}>
-              <Link to="portainer.notifications">View all notifications</Link>
+              <Link
+                to="portainer.notifications"
+                data-cy="notifications-see-all-link"
+              >
+                View all notifications
+              </Link>
             </div>
           </>
         ) : (
diff --git a/app/react/components/PageHeader/PageHeader.tsx b/app/react/components/PageHeader/PageHeader.tsx
index 53f13ef0e..a9f0b9e11 100644
--- a/app/react/components/PageHeader/PageHeader.tsx
+++ b/app/react/components/PageHeader/PageHeader.tsx
@@ -44,6 +44,7 @@ export function PageHeader({
             className="m-0 p-0 focus:text-inherit"
             disabled={loading}
             title="Refresh page"
+            data-cy="refresh-page-button"
           >
             <RefreshCw className="icon" />
           </Button>
diff --git a/app/react/components/PaginationControls/PageInput.tsx b/app/react/components/PaginationControls/PageInput.tsx
index a7f25aa29..56d0e1e82 100644
--- a/app/react/components/PaginationControls/PageInput.tsx
+++ b/app/react/components/PaginationControls/PageInput.tsx
@@ -38,8 +38,13 @@ export function PageInput({ onChange, totalPages }: Props) {
         step={1}
         onChange={handleChange}
         onKeyPress={preventNotNumber}
+        data-cy="pagination-go-to-page-input"
       />
-      <Button type="submit" disabled={!isValid}>
+      <Button
+        type="submit"
+        disabled={!isValid}
+        data-cy="pagination-go-to-page-button"
+      >
         Go
       </Button>
     </form>
diff --git a/app/react/components/RadioGroup/RadioGroup.tsx b/app/react/components/RadioGroup/RadioGroup.tsx
index f416bbc4a..f45d0c0d1 100644
--- a/app/react/components/RadioGroup/RadioGroup.tsx
+++ b/app/react/components/RadioGroup/RadioGroup.tsx
@@ -27,6 +27,7 @@ export function RadioGroup<T extends string | number = string>({
             checked={selectedOption === option.value}
             onChange={() => onOptionChange(option.value)}
             style={{ margin: '0 4px 0 0' }}
+            data-cy={`radio-${option.value}`}
           />
           {option.label}
         </label>
diff --git a/app/react/components/Stepper/Stepper.stories.tsx b/app/react/components/Stepper/Stepper.stories.tsx
index c73ab23c9..90d10145c 100644
--- a/app/react/components/Stepper/Stepper.stories.tsx
+++ b/app/react/components/Stepper/Stepper.stories.tsx
@@ -26,12 +26,14 @@ function Template({ totalSteps = 5 }: Args) {
       <Stepper currentStep={currentStep} steps={steps} />
       <Button
         onClick={() => setCurrentStep(currentStep - 1)}
+        data-cy="previous-button"
         disabled={currentStep <= 1}
       >
         Previous
       </Button>
       <Button
         onClick={() => setCurrentStep(currentStep + 1)}
+        data-cy="next-button"
         disabled={currentStep >= steps.length}
       >
         Next
diff --git a/app/react/components/TLSFieldset/TLSFieldset.tsx b/app/react/components/TLSFieldset/TLSFieldset.tsx
index c444a9a64..d3d0019c0 100644
--- a/app/react/components/TLSFieldset/TLSFieldset.tsx
+++ b/app/react/components/TLSFieldset/TLSFieldset.tsx
@@ -21,9 +21,10 @@ export function TLSFieldset({ values, onChange, errors }: Props) {
         <div className="col-sm-12">
           <SwitchField
             label="TLS"
-            labelClass="col-sm-3 col-lg-2"
+            data-cy="enable-tls-switch"
             checked={values.tls}
             onChange={(checked) => handleChange({ tls: checked })}
+            labelClass="col-sm-3 col-lg-2"
           />
         </div>
       </div>
@@ -34,6 +35,7 @@ export function TLSFieldset({ values, onChange, errors }: Props) {
             <div className="col-sm-12">
               <SwitchField
                 label="Skip Certification Verification"
+                data-cy="skip-verify-switch"
                 checked={!!values.skipVerify}
                 onChange={(checked) => handleChange({ skipVerify: checked })}
                 labelClass="col-sm-3 col-lg-2"
@@ -50,6 +52,7 @@ export function TLSFieldset({ values, onChange, errors }: Props) {
               >
                 <FileUploadField
                   inputId="ca-cert-field"
+                  data-cy="ca-cert-file-upload"
                   onChange={(file) => handleChange({ caCertFile: file })}
                   value={values.caCertFile}
                 />
@@ -61,6 +64,7 @@ export function TLSFieldset({ values, onChange, errors }: Props) {
               >
                 <FileUploadField
                   inputId="cert-field"
+                  data-cy="cert-file-upload"
                   onChange={(file) => handleChange({ certFile: file })}
                   value={values.certFile}
                 />
@@ -72,6 +76,7 @@ export function TLSFieldset({ values, onChange, errors }: Props) {
               >
                 <FileUploadField
                   inputId="tls-key-field"
+                  data-cy="tls-key-file-upload"
                   onChange={(file) => handleChange({ keyFile: file })}
                   value={values.keyFile}
                 />
diff --git a/app/react/components/TagSelector/TagSelector.tsx b/app/react/components/TagSelector/TagSelector.tsx
index b2a979682..4c30bf604 100644
--- a/app/react/components/TagSelector/TagSelector.tsx
+++ b/app/react/components/TagSelector/TagSelector.tsx
@@ -45,7 +45,11 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
       <div className="form-group">
         <div className="col-sm-12 small text-muted">
           No tags available. Head over to the
-          <Link to="portainer.tags" className="space-right space-left">
+          <Link
+            to="portainer.tags"
+            className="space-right space-left"
+            data-cy="environment-tags-view-link"
+          >
             Tags view
           </Link>
           to add tags
@@ -82,6 +86,7 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
           formatCreateLabel={(inputValue) => `Create "${inputValue}"`}
           onCreateOption={handleCreateOption}
           aria-label="Tags"
+          data-cy="environment-tags-selector"
         />
       </FormControl>
     </>
diff --git a/app/react/components/TeamsSelector/TeamsSelector.stories.tsx b/app/react/components/TeamsSelector/TeamsSelector.stories.tsx
index e89d87d53..46ddf1270 100644
--- a/app/react/components/TeamsSelector/TeamsSelector.stories.tsx
+++ b/app/react/components/TeamsSelector/TeamsSelector.stories.tsx
@@ -23,6 +23,7 @@ function Example() {
       onChange={(value) => setSelectedTeams(value)}
       teams={teams}
       placeholder="Select one or more teams"
+      dataCy="teams-selector"
     />
   );
 }
diff --git a/app/react/components/TeamsSelector/TeamsSelector.tsx b/app/react/components/TeamsSelector/TeamsSelector.tsx
index 0158b8b06..8b00686e6 100644
--- a/app/react/components/TeamsSelector/TeamsSelector.tsx
+++ b/app/react/components/TeamsSelector/TeamsSelector.tsx
@@ -7,7 +7,7 @@ interface Props {
   value: TeamId[] | readonly TeamId[];
   onChange(value: readonly TeamId[]): void;
   teams: Team[];
-  dataCy?: string;
+  dataCy: string;
   inputId?: string;
   placeholder?: string;
   disabled?: boolean;
diff --git a/app/react/components/UsersSelector/UsersSelector.stories.tsx b/app/react/components/UsersSelector/UsersSelector.stories.tsx
index 557b363ed..84233bafc 100644
--- a/app/react/components/UsersSelector/UsersSelector.stories.tsx
+++ b/app/react/components/UsersSelector/UsersSelector.stories.tsx
@@ -24,6 +24,7 @@ function Example() {
       onChange={setSelectedUsers}
       users={users}
       placeholder="Select one or more users"
+      dataCy="users-selector"
     />
   );
 }
diff --git a/app/react/components/UsersSelector/UsersSelector.tsx b/app/react/components/UsersSelector/UsersSelector.tsx
index 4edb68028..88bbd6de0 100644
--- a/app/react/components/UsersSelector/UsersSelector.tsx
+++ b/app/react/components/UsersSelector/UsersSelector.tsx
@@ -7,7 +7,7 @@ interface Props {
   value: UserId[];
   onChange(value: UserId[]): void;
   users: User[];
-  dataCy?: string;
+  dataCy: string;
   inputId?: string;
   placeholder?: string;
   disabled?: boolean;
diff --git a/app/react/components/WebEditorForm.tsx b/app/react/components/WebEditorForm.tsx
index 140cd9788..a58962710 100644
--- a/app/react/components/WebEditorForm.tsx
+++ b/app/react/components/WebEditorForm.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren, useEffect, useMemo } from 'react';
 import { useTransitionHook } from '@uirouter/react';
 
 import { BROWSER_OS_PLATFORM } from '@/react/constants';
+import { AutomationTestingProps } from '@/types';
 
 import { CodeEditor } from '@@/CodeEditor';
 import { Tooltip } from '@@/Tip/Tooltip';
@@ -51,7 +52,7 @@ export const editorConfig = {
   win: otherEditorConfig,
 } as const;
 
-interface Props {
+interface Props extends AutomationTestingProps {
   value: string;
   onChange: (value: string) => void;
 
@@ -77,6 +78,7 @@ export function WebEditorForm({
   children,
   error,
   height,
+  'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
     <div>
@@ -105,6 +107,7 @@ export function WebEditorForm({
               value={value}
               onChange={onChange}
               height={height}
+              data-cy={dataCy}
             />
           </div>
         </div>
diff --git a/app/react/components/Widget/WidgetTabs.tsx b/app/react/components/Widget/WidgetTabs.tsx
index 93fb64339..4ccc6d81f 100644
--- a/app/react/components/Widget/WidgetTabs.tsx
+++ b/app/react/components/Widget/WidgetTabs.tsx
@@ -46,6 +46,7 @@ export function WidgetTabs({ currentTabIndex, tabs }: Props) {
                     currentTabIndex !== index,
                 }
               )}
+              data-cy={`tab-${index}`}
             >
               <Icon icon={icon} />
               {name}
diff --git a/app/react/components/buttons/AddButton.stories.tsx b/app/react/components/buttons/AddButton.stories.tsx
index 42a29fa76..780aa1c44 100644
--- a/app/react/components/buttons/AddButton.stories.tsx
+++ b/app/react/components/buttons/AddButton.stories.tsx
@@ -12,7 +12,7 @@ type Args = {
 };
 
 function Template({ label }: Args) {
-  return <AddButton>{label}</AddButton>;
+  return <AddButton data-cy="add-">{label}</AddButton>;
 }
 
 export const Primary: Story<Args> = Template.bind({});
diff --git a/app/react/components/buttons/AddButton.test.tsx b/app/react/components/buttons/AddButton.test.tsx
index 0bfa80408..12abb760b 100644
--- a/app/react/components/buttons/AddButton.test.tsx
+++ b/app/react/components/buttons/AddButton.test.tsx
@@ -28,7 +28,11 @@ function renderDefault({
     ],
     route: 'root',
   });
-  return render(<Wrapped to="">{label}</Wrapped>);
+  return render(
+    <Wrapped to="" data-cy="wrapped">
+      {label}
+    </Wrapped>
+  );
 }
 
 test('should display a AddButton component', async () => {
diff --git a/app/react/components/buttons/AddButton.tsx b/app/react/components/buttons/AddButton.tsx
index 9891839f8..6f222342c 100644
--- a/app/react/components/buttons/AddButton.tsx
+++ b/app/react/components/buttons/AddButton.tsx
@@ -25,10 +25,10 @@ export function AddButton({
   return (
     <Button
       as={Link}
-      props={{ to, params }}
+      props={{ to, params, 'data-cy': `${dataCy}-link` }}
       icon={Plus}
       className="!m-0"
-      data-cy={dataCy}
+      data-cy={`${dataCy}-button`}
       color={color}
       disabled={disabled}
     >
diff --git a/app/react/components/buttons/Button.stories.tsx b/app/react/components/buttons/Button.stories.tsx
index fd55d4fbd..f64814e5e 100644
--- a/app/react/components/buttons/Button.stories.tsx
+++ b/app/react/components/buttons/Button.stories.tsx
@@ -50,6 +50,7 @@ export function DifferentTheme() {
                 {states.map((state) => (
                   <Button
                     color={color}
+                    data-cy="button"
                     key={state}
                     disabled={state === 'disabled'}
                   >
@@ -72,7 +73,13 @@ function Template({
   disabled,
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
-    <Button onClick={onClick} color={color} size={size} disabled={disabled}>
+    <Button
+      onClick={onClick}
+      color={color}
+      size={size}
+      disabled={disabled}
+      data-cy="button"
+    >
       Primary Button
     </Button>
   );
@@ -90,7 +97,7 @@ Primary.args = {
 
 export function Disabled() {
   return (
-    <Button color="primary" onClick={() => {}} disabled>
+    <Button color="primary" onClick={() => {}} disabled data-cy="button">
       Disabled Button
     </Button>
   );
@@ -98,7 +105,7 @@ export function Disabled() {
 
 export function Danger() {
   return (
-    <Button color="danger" onClick={() => {}}>
+    <Button color="danger" onClick={() => {}} data-cy="button">
       Danger Button
     </Button>
   );
@@ -106,7 +113,7 @@ export function Danger() {
 
 export function ButtonIcon() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download}>
+    <Button color="primary" onClick={() => {}} icon={Download} data-cy="button">
       Button with an icon
     </Button>
   );
@@ -114,7 +121,13 @@ export function ButtonIcon() {
 
 export function ButtonIconLarge() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="large">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="large"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -122,7 +135,13 @@ export function ButtonIconLarge() {
 
 export function ButtonIconMedium() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="medium">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="medium"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -130,7 +149,13 @@ export function ButtonIconMedium() {
 
 export function ButtonIconXSmall() {
   return (
-    <Button color="primary" onClick={() => {}} icon={Download} size="xsmall">
+    <Button
+      color="primary"
+      onClick={() => {}}
+      icon={Download}
+      size="xsmall"
+      data-cy="button"
+    >
       Button with an icon
     </Button>
   );
@@ -138,7 +163,7 @@ export function ButtonIconXSmall() {
 
 export function Default() {
   return (
-    <Button color="default" onClick={() => {}}>
+    <Button color="default" onClick={() => {}} data-cy="button">
       Default
     </Button>
   );
@@ -146,7 +171,7 @@ export function Default() {
 
 export function Link() {
   return (
-    <Button color="link" onClick={() => {}}>
+    <Button color="link" onClick={() => {}} data-cy="button">
       Link Button
     </Button>
   );
@@ -154,7 +179,7 @@ export function Link() {
 
 export function XSmall() {
   return (
-    <Button color="primary" onClick={() => {}} size="xsmall">
+    <Button color="primary" onClick={() => {}} size="xsmall" data-cy="button">
       XSmall Button
     </Button>
   );
@@ -162,7 +187,7 @@ export function XSmall() {
 
 export function Small() {
   return (
-    <Button color="primary" onClick={() => {}} size="small">
+    <Button color="primary" onClick={() => {}} size="small" data-cy="button">
       Small Button
     </Button>
   );
@@ -170,7 +195,7 @@ export function Small() {
 
 export function Large() {
   return (
-    <Button color="primary" onClick={() => {}} size="large">
+    <Button color="primary" onClick={() => {}} size="large" data-cy="button">
       Large Button
     </Button>
   );
diff --git a/app/react/components/buttons/Button.test.tsx b/app/react/components/buttons/Button.test.tsx
index 0c8847590..a1a68120c 100644
--- a/app/react/components/buttons/Button.test.tsx
+++ b/app/react/components/buttons/Button.test.tsx
@@ -14,6 +14,7 @@ function renderDefault({
   return render(
     <Button
       type={type}
+      data-cy="button"
       color={color}
       size={size}
       disabled={disabled}
diff --git a/app/react/components/buttons/ButtonGroup.stories.tsx b/app/react/components/buttons/ButtonGroup.stories.tsx
index 6d7aa84b5..0ed049941 100644
--- a/app/react/components/buttons/ButtonGroup.stories.tsx
+++ b/app/react/components/buttons/ButtonGroup.stories.tsx
@@ -15,19 +15,30 @@ function Template({
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
     <ButtonGroup size={size}>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
-      <Button icon={Play} color="primary" disabled onClick={() => {}}>
+      <Button
+        icon={Play}
+        color="primary"
+        disabled
+        onClick={() => {}}
+        data-cy="button"
+      >
         Resume
       </Button>
-      <Button icon={Trash2} color="danger" onClick={() => {}}>
+      <Button icon={Trash2} color="danger" onClick={() => {}} data-cy="button">
         Remove
       </Button>
     </ButtonGroup>
@@ -42,16 +53,21 @@ Primary.args = {
 export function Xsmall() {
   return (
     <ButtonGroup size="xsmall">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>
@@ -61,16 +77,21 @@ export function Xsmall() {
 export function Small() {
   return (
     <ButtonGroup size="small">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>
@@ -80,16 +101,21 @@ export function Small() {
 export function Large() {
   return (
     <ButtonGroup size="large">
-      <Button icon={Play} color="primary" onClick={() => {}}>
+      <Button icon={Play} color="primary" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={Square} color="danger" onClick={() => {}}>
+      <Button icon={Square} color="danger" onClick={() => {}} data-cy="button">
         Stop
       </Button>
-      <Button icon={Play} color="light" onClick={() => {}}>
+      <Button icon={Play} color="light" onClick={() => {}} data-cy="button">
         Start
       </Button>
-      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
+      <Button
+        icon={RefreshCw}
+        color="primary"
+        onClick={() => {}}
+        data-cy="button"
+      >
         Restart
       </Button>
     </ButtonGroup>
diff --git a/app/react/components/buttons/CopyButton/CopyButton.stories.tsx b/app/react/components/buttons/CopyButton/CopyButton.stories.tsx
index 3a05833e4..42368f9b0 100644
--- a/app/react/components/buttons/CopyButton/CopyButton.stories.tsx
+++ b/app/react/components/buttons/CopyButton/CopyButton.stories.tsx
@@ -14,7 +14,11 @@ function Template({
   children,
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
-    <CopyButton copyText={copyText} displayText={displayText}>
+    <CopyButton
+      copyText={copyText}
+      displayText={displayText}
+      data-cy="copy-button"
+    >
       {children}
     </CopyButton>
   );
diff --git a/app/react/components/buttons/CopyButton/CopyButton.test.tsx b/app/react/components/buttons/CopyButton/CopyButton.test.tsx
index ee6a0ee8b..8075f3a06 100644
--- a/app/react/components/buttons/CopyButton/CopyButton.test.tsx
+++ b/app/react/components/buttons/CopyButton/CopyButton.test.tsx
@@ -5,7 +5,9 @@ import { CopyButton } from './CopyButton';
 test('should display a CopyButton with children', async () => {
   const children = 'test button children';
   const { findByText } = render(
-    <CopyButton copyText="">{children}</CopyButton>
+    <CopyButton copyText="" data-cy="copy-button">
+      {children}
+    </CopyButton>
   );
 
   const button = await findByText(children);
@@ -25,7 +27,9 @@ test('CopyButton should copy text to clipboard', async () => {
   const children = 'button';
   const copyText = 'text successfully copied to clipboard';
   const { findByText } = render(
-    <CopyButton copyText={copyText}>{children}</CopyButton>
+    <CopyButton copyText={copyText} data-cy="copy-button">
+      {children}
+    </CopyButton>
   );
 
   const button = await findByText(children);
diff --git a/app/react/components/buttons/CopyButton/CopyButton.tsx b/app/react/components/buttons/CopyButton/CopyButton.tsx
index a97b0c9ba..1d4693049 100644
--- a/app/react/components/buttons/CopyButton/CopyButton.tsx
+++ b/app/react/components/buttons/CopyButton/CopyButton.tsx
@@ -2,6 +2,8 @@ import { ComponentProps, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Check, Copy } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Icon } from '@@/Icon';
 
 import { Button } from '../Button';
@@ -9,7 +11,7 @@ import { Button } from '../Button';
 import styles from './CopyButton.module.css';
 import { useCopy } from './useCopy';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   copyText: string;
   fadeDelay?: number;
   displayText?: string;
@@ -26,6 +28,7 @@ export function CopyButton({
   color,
   indicatorPosition = 'right',
   children,
+  'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
 
@@ -57,6 +60,7 @@ export function CopyButton({
         type="button"
         icon={Copy}
         disabled={!copyText}
+        data-cy={dataCy}
       >
         {children}
       </Button>
diff --git a/app/react/components/buttons/DeleteButton.tsx b/app/react/components/buttons/DeleteButton.tsx
index bd8968f6d..7b5ff652d 100644
--- a/app/react/components/buttons/DeleteButton.tsx
+++ b/app/react/components/buttons/DeleteButton.tsx
@@ -23,8 +23,8 @@ type ConfirmOrClick =
 export function DeleteButton({
   disabled,
   size,
-  'data-cy': dataCy,
   children,
+  'data-cy': dataCy,
   ...props
 }: PropsWithChildren<
   AutomationTestingProps &
diff --git a/app/react/components/buttons/LoadingButton.stories.tsx b/app/react/components/buttons/LoadingButton.stories.tsx
index 8970333dd..bbde235fe 100644
--- a/app/react/components/buttons/LoadingButton.stories.tsx
+++ b/app/react/components/buttons/LoadingButton.stories.tsx
@@ -17,6 +17,7 @@ function Template({ loadingText, isLoading }: Args) {
   return (
     <LoadingButton
       loadingText={loadingText}
+      data-cy="loading-button"
       isLoading={isLoading}
       icon={Download}
     >
@@ -34,7 +35,12 @@ export const Example = Template.bind({});
 
 export function IsLoading() {
   return (
-    <LoadingButton loadingText="loading" isLoading icon={Download}>
+    <LoadingButton
+      loadingText="loading"
+      isLoading
+      icon={Download}
+      data-cy="loading-button"
+    >
       Download
     </LoadingButton>
   );
diff --git a/app/react/components/buttons/LoadingButton.test.tsx b/app/react/components/buttons/LoadingButton.test.tsx
index 919ec345b..fe564c672 100644
--- a/app/react/components/buttons/LoadingButton.test.tsx
+++ b/app/react/components/buttons/LoadingButton.test.tsx
@@ -7,7 +7,7 @@ test('when isLoading is true should show spinner and loading text', async () =>
   const children = 'not visible';
 
   const { queryByText, findByText, container } = render(
-    <LoadingButton loadingText={loadingText} isLoading>
+    <LoadingButton loadingText={loadingText} isLoading data-cy="loading-button">
       {children}
     </LoadingButton>
   );
@@ -27,7 +27,11 @@ test('should show children when false', async () => {
   const children = 'visible';
 
   const { queryByText, container } = render(
-    <LoadingButton loadingText={loadingText} isLoading={false}>
+    <LoadingButton
+      loadingText={loadingText}
+      isLoading={false}
+      data-cy="loading-button"
+    >
       {children}
     </LoadingButton>
   );
diff --git a/app/react/components/datatables/ColumnVisibilityMenu.tsx b/app/react/components/datatables/ColumnVisibilityMenu.tsx
index cb4daaa5c..af8a9053c 100644
--- a/app/react/components/datatables/ColumnVisibilityMenu.tsx
+++ b/app/react/components/datatables/ColumnVisibilityMenu.tsx
@@ -47,6 +47,7 @@ export function ColumnVisibilityMenu<D extends object>({
                   <div key={column.id}>
                     <Checkbox
                       checked={column.getIsVisible()}
+                      data-cy="column-visibility-checkbox"
                       label={
                         typeof column.columnDef.header === 'string'
                           ? column.columnDef.header
diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx
index e4e277b55..081023f2e 100644
--- a/app/react/components/datatables/Datatable.tsx
+++ b/app/react/components/datatables/Datatable.tsx
@@ -108,7 +108,8 @@ export function Datatable<D extends DefaultType>({
   );
 
   const allColumns = useMemo(
-    () => _.compact([!disableSelect && createSelectColumn<D>(), ...columns]),
+    () =>
+      _.compact([!disableSelect && createSelectColumn<D>(dataCy), ...columns]),
     [disableSelect, columns]
   );
 
@@ -179,6 +180,7 @@ export function Datatable<D extends DefaultType>({
         description={description}
         renderTableActions={() => renderTableActions(selectedItems)}
         renderTableSettings={() => renderTableSettings(tableInstance)}
+        data-cy={`${dataCy}-header`}
       />
 
       <DatatableContent<D>
diff --git a/app/react/components/datatables/DatatableHeader.tsx b/app/react/components/datatables/DatatableHeader.tsx
index 1edd8e43c..bba2cf405 100644
--- a/app/react/components/datatables/DatatableHeader.tsx
+++ b/app/react/components/datatables/DatatableHeader.tsx
@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { IconProps } from '@@/Icon';
 
 import { SearchBar } from './SearchBar';
@@ -14,7 +16,7 @@ type Props = {
   renderTableActions?(): ReactNode;
   description?: ReactNode;
   titleId?: string;
-};
+} & AutomationTestingProps;
 
 export function DatatableHeader({
   onSearchChange,
@@ -25,12 +27,19 @@ export function DatatableHeader({
   titleIcon,
   description,
   titleId,
+  'data-cy': dataCy,
 }: Props) {
   if (!title) {
     return null;
   }
 
-  const searchBar = <SearchBar value={searchValue} onChange={onSearchChange} />;
+  const searchBar = (
+    <SearchBar
+      value={searchValue}
+      onChange={onSearchChange}
+      data-cy={`${dataCy}-search-input`}
+    />
+  );
   const tableActions = !!renderTableActions && (
     <Table.Actions>{renderTableActions()}</Table.Actions>
   );
@@ -44,6 +53,7 @@ export function DatatableHeader({
       label={title}
       icon={titleIcon}
       description={description}
+      data-cy={dataCy}
     >
       {searchBar}
       {tableActions}
diff --git a/app/react/components/datatables/Filter.tsx b/app/react/components/datatables/Filter.tsx
index 7a763b047..cb0b3f90b 100644
--- a/app/react/components/datatables/Filter.tsx
+++ b/app/react/components/datatables/Filter.tsx
@@ -48,6 +48,7 @@ export function MultipleSelectionFilter({
                     type="checkbox"
                     checked={value.includes(option)}
                     onChange={() => handleChange(option)}
+                    data-cy={`filter_${filterKey}_${index}`}
                   />
                   <label htmlFor={`filter_${filterKey}_${index}`}>
                     {option}
diff --git a/app/react/components/datatables/NestedDatatable.tsx b/app/react/components/datatables/NestedDatatable.tsx
index 68a4a8ef2..dfa7f6d54 100644
--- a/app/react/components/datatables/NestedDatatable.tsx
+++ b/app/react/components/datatables/NestedDatatable.tsx
@@ -8,13 +8,15 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
+import { AutomationTestingProps } from '@/types';
+
 import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
 import { NestedTable } from './NestedTable';
 import { DatatableContent } from './DatatableContent';
 import { BasicTableSettings, DefaultType } from './types';
 
-interface Props<D extends DefaultType> {
+interface Props<D extends DefaultType> extends AutomationTestingProps {
   dataset: D[];
   columns: TableOptions<D>['columns'];
 
@@ -41,6 +43,7 @@ export function NestedDatatable<D extends DefaultType>({
   isLoading,
   initialSortBy,
   search,
+  'data-cy': dataCy,
   'aria-label': ariaLabel,
 }: Props<D>) {
   const tableInstance = useReactTable<D>({
@@ -74,6 +77,7 @@ export function NestedDatatable<D extends DefaultType>({
           emptyContentLabel={emptyContentLabel}
           renderRow={(row) => <Table.Row<D> cells={row.getVisibleCells()} />}
           aria-label={ariaLabel}
+          data-cy={dataCy}
         />
       </Table.Container>
     </NestedTable>
diff --git a/app/react/components/datatables/QuickActionsSettings.tsx b/app/react/components/datatables/QuickActionsSettings.tsx
index 4a538eae1..73acca39e 100644
--- a/app/react/components/datatables/QuickActionsSettings.tsx
+++ b/app/react/components/datatables/QuickActionsSettings.tsx
@@ -25,6 +25,7 @@ export function QuickActionsSettings({ actions }: Props) {
       {actions.map(({ id, label }) => (
         <Checkbox
           key={id}
+          data-cy="quick-actions-checkbox"
           label={label}
           id={`quick-actions-${id}`}
           checked={!settings.hiddenQuickActions.includes(id)}
diff --git a/app/react/components/datatables/SearchBar.tsx b/app/react/components/datatables/SearchBar.tsx
index b8dab65ea..2042c6522 100644
--- a/app/react/components/datatables/SearchBar.tsx
+++ b/app/react/components/datatables/SearchBar.tsx
@@ -37,15 +37,21 @@ export function SearchBar({
       <Search className="searchIcon lucide shrink-0" />
       <input
         type="text"
+        data-cy={dataCy}
         className="searchInput"
         value={searchValue}
         onChange={(e) => setSearchValue(e.target.value)}
         placeholder={placeholder}
-        data-cy={dataCy}
         aria-label="Search input"
       />
       {children}
-      <Button onClick={onClear} icon={X} color="none" disabled={!searchValue} />
+      <Button
+        onClick={onClear}
+        icon={X}
+        color="none"
+        disabled={!searchValue}
+        data-cy={`${dataCy}-clear-button`}
+      />
     </div>
   );
 }
diff --git a/app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx b/app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx
index 279ea86b2..a8206f5e2 100644
--- a/app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx
+++ b/app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx
@@ -21,6 +21,7 @@ export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
     <>
       <Checkbox
         id="settings-auto-refresh"
+        data-cy="settings-auto-refresh"
         label="Auto refresh"
         checked={isEnabled}
         onChange={(e) => onChange(e.target.checked ? 10 : 0)}
@@ -30,6 +31,7 @@ export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
         <div>
           <label htmlFor="settings_refresh_rate">Refresh rate</label>
           <select
+            data-cy="settings-refresh-rate"
             id="settings_refresh_rate"
             className="small-select"
             value={value}
diff --git a/app/react/components/datatables/buildNameColumn.tsx b/app/react/components/datatables/buildNameColumn.tsx
index 72ba4b93d..bc8ecc1b0 100644
--- a/app/react/components/datatables/buildNameColumn.tsx
+++ b/app/react/components/datatables/buildNameColumn.tsx
@@ -8,6 +8,7 @@ import { defaultGetRowId } from './defaultGetRowId';
 export function buildNameColumn<T extends DefaultType>(
   nameKey: keyof T,
   path: string,
+  dataCy: string,
   idParam = 'id',
   idGetter: (row: T) => string = defaultGetRowId<T>
 ): ColumnDef<T> {
@@ -35,6 +36,7 @@ export function buildNameColumn<T extends DefaultType>(
           to={path}
           params={{ [idParam]: idGetter(row.original) }}
           title={name}
+          data-cy={`${dataCy}_${name}`}
         >
           {name}
         </Link>
diff --git a/app/react/components/datatables/expand-column.tsx b/app/react/components/datatables/expand-column.tsx
index f373087b5..a4678760e 100644
--- a/app/react/components/datatables/expand-column.tsx
+++ b/app/react/components/datatables/expand-column.tsx
@@ -18,6 +18,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
             color="none"
             icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
             title="Expand all"
+            data-cy="expand-all-rows-button"
             aria-label="Expand all rows"
           />
         )
@@ -35,6 +36,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
           color="none"
           icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
           title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
+          data-cy={`expand-row-button_${row.index}`}
           aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
           aria-expanded={row.getIsExpanded()}
         />
diff --git a/app/react/components/datatables/select-column.tsx b/app/react/components/datatables/select-column.tsx
index 0d255e6d7..6e5b4a920 100644
--- a/app/react/components/datatables/select-column.tsx
+++ b/app/react/components/datatables/select-column.tsx
@@ -2,7 +2,7 @@ import { ColumnDef, Row } from '@tanstack/react-table';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 
-export function createSelectColumn<T>(): ColumnDef<T> {
+export function createSelectColumn<T>(dataCy: string): ColumnDef<T> {
   let lastSelectedId = '';
 
   return {
@@ -10,6 +10,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
     header: ({ table }) => (
       <Checkbox
         id="select-all"
+        data-cy={`select-all-checkbox-${dataCy}`}
         checked={table.getIsAllRowsSelected()}
         indeterminate={table.getIsSomeRowsSelected()}
         onChange={table.getToggleAllRowsSelectedHandler()}
@@ -24,6 +25,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
     cell: ({ row, table }) => (
       <Checkbox
         id={`select-row-${row.id}`}
+        data-cy={`select-row-checkbox_${row.id}`}
         checked={row.getIsSelected()}
         indeterminate={row.getIsSomeSelected()}
         onChange={row.getToggleSelectedHandler()}
diff --git a/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx b/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
index c44e88efa..07fc5def0 100644
--- a/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
+++ b/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
@@ -11,6 +11,7 @@ import {
 import clsx from 'clsx';
 
 import { useDebounce } from '@/react/hooks/useDebounce';
+import { AutomationTestingProps } from '@/types';
 
 import { Option } from '@@/form-components/PortainerSelect';
 
@@ -23,6 +24,7 @@ export function AutocompleteSelect({
   searchResults,
   readOnly,
   inputId,
+  'data-cy': dataCy,
 }: {
   value: string;
   /**
@@ -35,7 +37,7 @@ export function AutocompleteSelect({
   searchResults?: Option<string>[];
   readOnly?: boolean;
   inputId: string;
-}) {
+} & AutomationTestingProps) {
   const [searchTerm, setSearchTerm] = useDebounce(value, onChange);
   const [selected, setSelected] = useState(false);
 
@@ -54,6 +56,7 @@ export function AutocompleteSelect({
         readOnly={readOnly}
         id={inputId}
         autoComplete="off"
+        data-cy={dataCy}
       />
       {!selected && searchResults && searchResults.length > 0 && (
         <ComboboxPopover>
diff --git a/app/react/components/form-components/ButtonSelector/ButtonSelector.tsx b/app/react/components/form-components/ButtonSelector/ButtonSelector.tsx
index 1a1e10d6f..23b94d5f8 100644
--- a/app/react/components/form-components/ButtonSelector/ButtonSelector.tsx
+++ b/app/react/components/form-components/ButtonSelector/ButtonSelector.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { PropsWithChildren, ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { ButtonGroup, Size } from '@@/buttons/ButtonGroup';
 import { Button } from '@@/buttons';
 
@@ -42,6 +44,7 @@ export function ButtonSelector<T extends string | number | boolean>({
       {options.map((option) => (
         <OptionItem
           key={option.value.toString()}
+          data-cy={`button-selector-option-${option.value}`}
           selected={value === option.value}
           onChange={() => onChange(option.value)}
           disabled={disabled || option.disabled}
@@ -67,7 +70,8 @@ function OptionItem({
   onChange,
   disabled,
   readOnly,
-}: PropsWithChildren<OptionItemProps>) {
+  'data-cy': dataCy,
+}: PropsWithChildren<OptionItemProps> & AutomationTestingProps) {
   return (
     <Button
       color="light"
@@ -79,10 +83,12 @@ function OptionItem({
         },
         '!static !z-auto'
       )}
+      data-cy={dataCy}
     >
       {children}
       <input
         type="radio"
+        data-cy={`${dataCy}-radio-input`}
         checked={selected}
         onChange={onChange}
         disabled={disabled}
diff --git a/app/react/components/form-components/Checkbox.tsx b/app/react/components/form-components/Checkbox.tsx
index 6e81acbe6..3e01222b8 100644
--- a/app/react/components/form-components/Checkbox.tsx
+++ b/app/react/components/form-components/Checkbox.tsx
@@ -18,6 +18,7 @@ interface Props extends HTMLProps<HTMLInputElement> {
   role?: string;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   bold?: boolean;
+  'data-cy': string;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, Props>(
@@ -30,6 +31,7 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(
       checked,
       onChange,
       bold = true,
+      'data-cy': dataCy,
       ...props
     }: Props,
     ref
@@ -58,6 +60,7 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(
           ref={resolvedRef}
           onChange={onChange}
           checked={checked}
+          data-cy={dataCy}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...props}
         />
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx
index 86322b700..7deac19ee 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx
@@ -1,5 +1,7 @@
 import { List } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { CodeEditor } from '@@/CodeEditor';
 import { TextTip } from '@@/Tip/TextTip';
 import { Button } from '@@/buttons';
@@ -11,11 +13,12 @@ export function AdvancedMode({
   value,
   onChange,
   onSimpleModeClick,
+  'data-cy': dataCy,
 }: {
   value: Values;
   onChange: (value: Values) => void;
   onSimpleModeClick: () => void;
-}) {
+} & AutomationTestingProps) {
   const editorValue = convertToArrayOfStrings(value).join('\n');
 
   return (
@@ -26,6 +29,7 @@ export function AdvancedMode({
         icon={List}
         className="!ml-0 p-0 hover:no-underline"
         onClick={onSimpleModeClick}
+        data-cy="env-simple-mode-button"
       >
         Simple mode
       </Button>
@@ -40,6 +44,7 @@ export function AdvancedMode({
         value={editorValue}
         onChange={handleEditorChange}
         placeholder="e.g. key=value"
+        data-cy={dataCy}
       />
     </>
   );
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx
index 9fe71212f..8b1f11df7 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx
@@ -18,6 +18,7 @@ export function EnvironmentVariableItem({
         <div className="w-1/2">
           <InputLabeled
             className="w-full"
+            data-cy={`env-name_${index}`}
             label="name"
             required
             value={item.name}
@@ -31,7 +32,7 @@ export function EnvironmentVariableItem({
           />
           {error && (
             <div>
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                 {Object.values(error)[0]}
               </FormError>
             </div>
@@ -39,6 +40,7 @@ export function EnvironmentVariableItem({
         </div>
         <InputLabeled
           className="w-1/2"
+          data-cy={`env-value_${index}`}
           label="value"
           value={item.value}
           onChange={(e) => handleChange({ value: e.target.value })}
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx
index 55b25b83c..602c55903 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx
@@ -34,6 +34,7 @@ export function EnvironmentVariablesFieldset({
       ) : (
         <AdvancedMode
           onSimpleModeClick={() => setSimpleMode(true)}
+          data-cy="env-var-advanced-mode"
           onChange={onChange}
           value={values}
         />
diff --git a/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx b/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx
index 960257a71..08db41a2b 100644
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx
@@ -34,6 +34,7 @@ export function SimpleMode({
         icon={Edit}
         className="!ml-0 p-0 hover:no-underline"
         onClick={onAdvancedModeClick}
+        data-cy="environment-variables-advanced-mode-button"
       >
         Advanced mode
       </Button>
@@ -50,6 +51,7 @@ export function SimpleMode({
         item={EnvironmentVariableItem}
         errors={errors}
         canUndoDelete={canUndoDelete}
+        data-cy="simple-environment-variable-fieldset"
       />
 
       <div className="flex gap-2">
@@ -60,6 +62,7 @@ export function SimpleMode({
           className="!ml-0"
           color="default"
           icon={Plus}
+          data-cy="add-environment-variable-button"
         >
           Add an environment variable
         </Button>
@@ -84,6 +87,7 @@ function FileEnv({ onChooseFile }: { onChooseFile: (file: Values) => void }) {
         accept=".env"
         value={file}
         color="default"
+        data-cy="load-environment-variables-from-file-button"
       />
 
       {fileTooBig && (
diff --git a/app/react/components/form-components/FileUpload/FileUploadField.stories.tsx b/app/react/components/form-components/FileUpload/FileUploadField.stories.tsx
index 66e990fda..5f61efb14 100644
--- a/app/react/components/form-components/FileUpload/FileUploadField.stories.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadField.stories.tsx
@@ -28,6 +28,7 @@ function Example({ title }: Args) {
       value={value}
       title={title}
       inputId="file-field"
+      data-cy="file-upload-field"
     />
   );
 }
diff --git a/app/react/components/form-components/FileUpload/FileUploadField.test.tsx b/app/react/components/form-components/FileUpload/FileUploadField.test.tsx
index 617ac7c5e..d19f895e1 100644
--- a/app/react/components/form-components/FileUpload/FileUploadField.test.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadField.test.tsx
@@ -7,6 +7,7 @@ test('render should make the file button clickable and fire onChange event after
   const { findByText, findByLabelText } = render(
     <FileUploadField
       title="test button"
+      data-cy="file-input"
       onChange={onClick}
       inputId="file-field"
     />
diff --git a/app/react/components/form-components/FileUpload/FileUploadField.tsx b/app/react/components/form-components/FileUpload/FileUploadField.tsx
index 6bbed545d..0122ee16b 100644
--- a/app/react/components/form-components/FileUpload/FileUploadField.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadField.tsx
@@ -1,12 +1,14 @@
 import { ChangeEvent, ComponentProps, createRef } from 'react';
 import { Upload, XCircle } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
 
 import styles from './FileUploadField.module.css';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   onChange(value: File): void;
   value?: File | null;
   accept?: string;
@@ -26,6 +28,7 @@ export function FileUploadField({
   inputId,
   color = 'primary',
   name,
+  'data-cy': dataCy,
 }: Props) {
   const fileRef = createRef<HTMLInputElement>();
 
@@ -47,6 +50,7 @@ export function FileUploadField({
         color={color}
         onClick={handleButtonClick}
         className={styles.fileButton}
+        data-cy={dataCy}
         icon={Upload}
       >
         {title}
diff --git a/app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx b/app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx
index 690c9beb6..b829197ff 100644
--- a/app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx
@@ -31,6 +31,7 @@ function Example({ title }: Args) {
         description={
           <span>You can upload a Compose file from your computer.</span>
         }
+        data-cy="file-upload-form"
       />
     </div>
   );
diff --git a/app/react/components/form-components/FileUpload/FileUploadForm.test.tsx b/app/react/components/form-components/FileUpload/FileUploadForm.test.tsx
index c275cdeab..ac2f4cca6 100644
--- a/app/react/components/form-components/FileUpload/FileUploadForm.test.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadForm.test.tsx
@@ -9,6 +9,7 @@ test('render should include description', async () => {
       title="test button"
       onChange={onClick}
       description={<span>test description</span>}
+      data-cy="test"
     />
   );
 
diff --git a/app/react/components/form-components/FileUpload/FileUploadForm.tsx b/app/react/components/form-components/FileUpload/FileUploadForm.tsx
index ad9942e25..da601d610 100644
--- a/app/react/components/form-components/FileUpload/FileUploadForm.tsx
+++ b/app/react/components/form-components/FileUpload/FileUploadForm.tsx
@@ -1,5 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { FileUploadField } from '@@/form-components/FileUpload/FileUploadField';
 
@@ -17,7 +19,8 @@ export function FileUploadForm({
   title = 'Select a file',
   required = false,
   description,
-}: PropsWithChildren<Props>) {
+  'data-cy': dataCy,
+}: PropsWithChildren<Props> & AutomationTestingProps) {
   return (
     <div className="file-upload-form">
       <FormSectionTitle>Upload</FormSectionTitle>
@@ -28,6 +31,7 @@ export function FileUploadForm({
         <div className="col-sm-12">
           <FileUploadField
             inputId="file-upload-field"
+            data-cy={dataCy}
             onChange={onChange}
             value={value}
             title={title}
diff --git a/app/react/components/form-components/FormControl/FormControl.stories.tsx b/app/react/components/form-components/FormControl/FormControl.stories.tsx
index db628381f..29f57b0e1 100644
--- a/app/react/components/form-components/FormControl/FormControl.stories.tsx
+++ b/app/react/components/form-components/FormControl/FormControl.stories.tsx
@@ -42,6 +42,7 @@ function TextField({
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
+        data-cy="input"
       />
     </FormControl>
   );
@@ -79,6 +80,7 @@ function SelectField({
     >
       <Select
         className="form-control"
+        data-cy="select"
         value={value}
         onChange={(e) => setValue(parseInt(e.target.value, 10))}
         options={options}
diff --git a/app/react/components/form-components/Input/Input.stories.tsx b/app/react/components/form-components/Input/Input.stories.tsx
index 24e2db81a..76b836a3b 100644
--- a/app/react/components/form-components/Input/Input.stories.tsx
+++ b/app/react/components/form-components/Input/Input.stories.tsx
@@ -22,6 +22,7 @@ export function TextField({ disabled }: Args) {
       value={value}
       onChange={(e) => setValue(e.target.value)}
       disabled={disabled}
+      data-cy="docker-logging-options-input"
     />
   );
 }
diff --git a/app/react/components/form-components/Input/Input.tsx b/app/react/components/form-components/Input/Input.tsx
index 1bd02e01f..670c6a4aa 100644
--- a/app/react/components/form-components/Input/Input.tsx
+++ b/app/react/components/form-components/Input/Input.tsx
@@ -1,9 +1,11 @@
 import clsx from 'clsx';
 import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 export const InputWithRef = forwardRef<
   HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
+  InputHTMLAttributes<HTMLInputElement> & AutomationTestingProps
 >(
   // eslint-disable-next-line react/jsx-props-no-spreading
   (props, ref) => <Input {...props} mRef={ref} />
@@ -14,10 +16,11 @@ export function Input({
   mRef: ref,
   value,
   type,
+  'data-cy': dataCy,
   ...props
 }: InputHTMLAttributes<HTMLInputElement> & {
   mRef?: Ref<HTMLInputElement>;
-}) {
+} & AutomationTestingProps) {
   return (
     <input
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -26,6 +29,7 @@ export function Input({
       value={type === 'number' && Number.isNaN(value) ? '' : value} // avoid the `"NaN" cannot be parsed, or is out of range.` error for an empty number input
       ref={ref}
       className={clsx('form-control', className)}
+      data-cy={dataCy}
     />
   );
 }
diff --git a/app/react/components/form-components/Input/InputLabeled.stories.tsx b/app/react/components/form-components/Input/InputLabeled.stories.tsx
index 246967289..04cacdfd2 100644
--- a/app/react/components/form-components/Input/InputLabeled.stories.tsx
+++ b/app/react/components/form-components/Input/InputLabeled.stories.tsx
@@ -16,6 +16,7 @@ function TextInput() {
   return (
     <InputLabeled
       label="label"
+      data-cy="input"
       value={value}
       onChange={(e) => setValue(e.target.value)}
     />
@@ -28,6 +29,7 @@ function NumberInput() {
   return (
     <InputLabeled
       label="label"
+      data-cy="input"
       type="number"
       value={value}
       onChange={(e) => setValue(e.target.valueAsNumber)}
diff --git a/app/react/components/form-components/Input/InputLabeled.tsx b/app/react/components/form-components/Input/InputLabeled.tsx
index 2992470ff..23406f526 100644
--- a/app/react/components/form-components/Input/InputLabeled.tsx
+++ b/app/react/components/form-components/Input/InputLabeled.tsx
@@ -1,6 +1,8 @@
 import { ComponentProps, InputHTMLAttributes } from 'react';
 import clsx from 'clsx';
 
+import { AutomationTestingProps } from '@/types';
+
 import { InputGroup } from '../InputGroup';
 
 export function InputLabeled({
@@ -17,7 +19,8 @@ export function InputLabeled({
   className?: string;
   size?: ComponentProps<typeof InputGroup>['size'];
   needsDeletion?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'>) {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'> &
+  AutomationTestingProps) {
   return (
     <InputGroup
       className={clsx(className, needsDeletion && 'striked')}
diff --git a/app/react/components/form-components/Input/Select.stories.tsx b/app/react/components/form-components/Input/Select.stories.tsx
index dc1407d8c..ed539b02f 100644
--- a/app/react/components/form-components/Input/Select.stories.tsx
+++ b/app/react/components/form-components/Input/Select.stories.tsx
@@ -23,6 +23,7 @@ export function Example({ disabled }: Args) {
   return (
     <Select
       value={value}
+      data-cy="select"
       onChange={(e) => setValue(parseInt(e.target.value, 10))}
       disabled={disabled}
       options={options}
diff --git a/app/react/components/form-components/Input/Select.tsx b/app/react/components/form-components/Input/Select.tsx
index d6a6db344..561de3cd2 100644
--- a/app/react/components/form-components/Input/Select.tsx
+++ b/app/react/components/form-components/Input/Select.tsx
@@ -1,18 +1,23 @@
 import clsx from 'clsx';
 import { SelectHTMLAttributes } from 'react';
 
-export interface Option<T extends string | number> {
+import { AutomationTestingProps } from '@/types';
+
+export interface Option<T extends string | number>
+  extends Partial<AutomationTestingProps> {
   value: T;
   label: string;
+  disabled?: boolean;
 }
 
-interface Props<T extends string | number> {
+interface Props<T extends string | number> extends AutomationTestingProps {
   options: Option<T>[];
 }
 
 export function Select<T extends number | string>({
   options,
   className,
+  'data-cy': dataCy,
   ...props
 }: Props<T> & SelectHTMLAttributes<HTMLSelectElement>) {
   return (
@@ -20,9 +25,15 @@ export function Select<T extends number | string>({
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       className={clsx('form-control', className)}
+      data-cy={dataCy}
     >
       {options.map((item) => (
-        <option value={item.value} key={item.value}>
+        <option
+          value={item.value}
+          key={item.value}
+          disabled={item.disabled}
+          data-cy={`${dataCy}-${item.value}`}
+        >
           {item.label}
         </option>
       ))}
diff --git a/app/react/components/form-components/Input/Select.tsx.rej b/app/react/components/form-components/Input/Select.tsx.rej
new file mode 100644
index 000000000..6edb9f9ef
--- /dev/null
+++ b/app/react/components/form-components/Input/Select.tsx.rej
@@ -0,0 +1,10 @@
+diff a/app/react/components/form-components/Input/Select.tsx b/app/react/components/form-components/Input/Select.tsx	(rejected hunks)
+@@ -10,7 +10,7 @@ export interface Option<T extends string | number>
+   disabled?: boolean;
+ }
+ 
+-interface Props<T extends string | number> {
++interface Props<T extends string | number> extends AutomationTestingProps {
+   options: Option<T>[];
+ }
+ 
diff --git a/app/react/components/form-components/Input/Textarea.tsx b/app/react/components/form-components/Input/Textarea.tsx
index 6306960b2..b532bbd69 100644
--- a/app/react/components/form-components/Input/Textarea.tsx
+++ b/app/react/components/form-components/Input/Textarea.tsx
@@ -1,10 +1,12 @@
 import clsx from 'clsx';
 import { TextareaHTMLAttributes } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 export function TextArea({
   className,
   ...props
-}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+}: TextareaHTMLAttributes<HTMLTextAreaElement> & AutomationTestingProps) {
   return (
     <textarea
       // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/app/react/components/form-components/InputGroup/InputGroup.stories.tsx b/app/react/components/form-components/InputGroup/InputGroup.stories.tsx
index 221cac3ae..1b468ebdc 100644
--- a/app/react/components/form-components/InputGroup/InputGroup.stories.tsx
+++ b/app/react/components/form-components/InputGroup/InputGroup.stories.tsx
@@ -20,6 +20,7 @@ function BasicExample() {
         <InputGroup.Addon>@</InputGroup.Addon>
         <InputGroup.Input
           value={value1}
+          data-cy="input"
           onChange={(e) => setValue1(e.target.value)}
           placeholder="Username"
           aria-describedby="basic-addon1"
@@ -29,6 +30,7 @@ function BasicExample() {
       <InputGroup>
         <InputGroup.Input
           value={value1}
+          data-cy="input"
           onChange={(e) => setValue1(e.target.value)}
           placeholder="Recipient's username"
           aria-describedby="basic-addon2"
@@ -40,6 +42,7 @@ function BasicExample() {
         <InputGroup.Addon>$</InputGroup.Addon>
         <InputGroup.Input
           type="number"
+          data-cy="input"
           value={valueNumber}
           onChange={(e) => setValueNumber(parseInt(e.target.value, 10))}
           aria-label="Amount (to the nearest dollar)"
@@ -52,6 +55,7 @@ function BasicExample() {
         <InputGroup.Addon>https://example.com/users/</InputGroup.Addon>
         <InputGroup.Input
           value={value1}
+          data-cy="input"
           onChange={(e) => setValue1(e.target.value)}
           id="basic-url"
           aria-describedby="basic-addon3"
@@ -75,6 +79,7 @@ function Addons() {
           </InputGroup.ButtonWrapper>
           <InputGroup.Input
             value={value1}
+            data-cy="input"
             onChange={(e) => setValue1(e.target.value)}
           />
         </InputGroup>
@@ -83,10 +88,11 @@ function Addons() {
         <InputGroup>
           <InputGroup.Input
             value={value2}
+            data-cy="input"
             onChange={(e) => setValue2(e.target.value)}
           />
           <InputGroup.Addon>
-            <input type="checkbox" />
+            <input type="checkbox" data-cy="checkbox" />
           </InputGroup.Addon>
         </InputGroup>
       </div>
@@ -102,6 +108,7 @@ function Sizing() {
         <InputGroup.Addon>Small</InputGroup.Addon>
         <InputGroup.Input
           value={value}
+          data-cy="input"
           onChange={(e) => setValue(e.target.value)}
         />
       </InputGroup>
@@ -110,6 +117,7 @@ function Sizing() {
         <InputGroup.Addon>Default</InputGroup.Addon>
         <InputGroup.Input
           value={value}
+          data-cy="input"
           onChange={(e) => setValue(e.target.value)}
         />
       </InputGroup>
@@ -118,6 +126,7 @@ function Sizing() {
         <InputGroup.Addon>Large</InputGroup.Addon>
         <InputGroup.Input
           value={value}
+          data-cy="input"
           onChange={(e) => setValue(e.target.value)}
         />
       </InputGroup>
diff --git a/app/react/components/form-components/InputList/InputList.stories.tsx b/app/react/components/form-components/InputList/InputList.stories.tsx
index 9689f27fa..684555299 100644
--- a/app/react/components/form-components/InputList/InputList.stories.tsx
+++ b/app/react/components/form-components/InputList/InputList.stories.tsx
@@ -22,6 +22,7 @@ function Defaults() {
       label="default example"
       value={values}
       onChange={(value) => setValues(value)}
+      data-cy="input-list-default-example"
     />
   );
 }
@@ -37,6 +38,7 @@ function ListWithUndoDeletion() {
       value={values}
       onChange={(value) => setValues(value)}
       canUndoDelete
+      data-cy="input-list-with-undo-deletion"
     />
   );
 }
@@ -71,6 +73,7 @@ function ListWithInputAndSelect({
       movable={movable}
       itemBuilder={() => ({ value: 0, select: '', id: values.length })}
       tooltip={tooltip}
+      data-cy="input-list-with-select-and-input"
     />
   );
 }
@@ -96,9 +99,11 @@ function SelectAndInputItem({
         onChange={(e) =>
           onChange({ ...item, value: parseInt(e.target.value, 10) })
         }
+        data-cy="input"
       />
       <Select
         onChange={(e) => onChange({ ...item, select: e.target.value })}
+        data-cy="select"
         options={[
           { label: 'option1', value: 'option1' },
           { label: 'option2', value: 'option2' },
diff --git a/app/react/components/form-components/InputList/InputList.tsx b/app/react/components/form-components/InputList/InputList.tsx
index 7a0d485ce..6b6a4551c 100644
--- a/app/react/components/form-components/InputList/InputList.tsx
+++ b/app/react/components/form-components/InputList/InputList.tsx
@@ -3,6 +3,8 @@ import { FormikErrors } from 'formik';
 import { ArrowDown, ArrowUp, Plus, RotateCw, Trash2 } from 'lucide-react';
 import clsx from 'clsx';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Button } from '@@/buttons';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { TextTip } from '@@/Tip/TextTip';
@@ -53,10 +55,11 @@ type RenderItemFunction<T> = (
   item: T,
   onChange: (value: T) => void,
   index: number,
+  dataCy: string,
   error?: ItemError<T>
 ) => React.ReactNode;
 
-interface Props<T> {
+interface Props<T> extends AutomationTestingProps {
   label?: string;
   value: T[];
   onChange(value: T[], e: OnChangeEvent<T>): void;
@@ -71,9 +74,7 @@ interface Props<T> {
   errors?: ArrayError<T[]>;
   textTip?: string;
   isAddButtonHidden?: boolean;
-  addButtonDataCy?: string;
   isDeleteButtonHidden?: boolean;
-  deleteButtonDataCy?: string;
   disabled?: boolean;
   addButtonError?: string;
   readOnly?: boolean;
@@ -95,9 +96,8 @@ export function InputList<T = DefaultType>({
   errors,
   textTip,
   isAddButtonHidden = false,
-  addButtonDataCy,
   isDeleteButtonHidden = false,
-  deleteButtonDataCy,
+  'data-cy': dataCy,
   disabled,
   addButtonError,
   readOnly,
@@ -161,6 +161,7 @@ export function InputList<T = DefaultType>({
                     item,
                     (value: T) => handleChangeItem(key, value),
                     index,
+                    dataCy,
                     error
                   )
                 )}
@@ -173,6 +174,7 @@ export function InputList<T = DefaultType>({
                         onClick={() => handleMoveUp(index)}
                         className="vertical-center btn-only-icon"
                         icon={ArrowUp}
+                        data-cy={`${dataCy}-move-up_${index}`}
                       />
                       <Button
                         size="medium"
@@ -181,6 +183,7 @@ export function InputList<T = DefaultType>({
                         onClick={() => handleMoveDown(index)}
                         className="vertical-center btn-only-icon"
                         icon={ArrowDown}
+                        data-cy={`${dataCy}-move-down_${index}`}
                       />
                     </>
                   )}
@@ -190,7 +193,7 @@ export function InputList<T = DefaultType>({
                       size="medium"
                       onClick={() => handleRemoveItem(key, item)}
                       className="vertical-center btn-only-icon"
-                      data-cy={`${deleteButtonDataCy}_${index}`}
+                      data-cy={`${dataCy}RemoveButton_${index}`}
                       icon={Trash2}
                     />
                   )}
@@ -203,7 +206,7 @@ export function InputList<T = DefaultType>({
                         initialItemsCount={initialItemsCount.current}
                         handleRemoveItem={handleRemoveItem}
                         handleToggleNeedsDeletion={toggleNeedsDeletion}
-                        dataCy={`${deleteButtonDataCy}_${index}`}
+                        dataCy={`${dataCy}RemoveButton_${index}`}
                       />
                     )}
                 </div>
@@ -224,7 +227,7 @@ export function InputList<T = DefaultType>({
               className="!ml-0"
               size="small"
               icon={Plus}
-              data-cy={addButtonDataCy}
+              data-cy={`${dataCy}AddButton`}
             >
               {addLabel}
             </Button>
@@ -332,7 +335,9 @@ function DefaultItem({
   error,
   disabled,
   readOnly,
-}: ItemProps<DefaultType>) {
+  index,
+  'data-cy': dataCy,
+}: ItemProps<DefaultType> & AutomationTestingProps) {
   return (
     <>
       <Input
@@ -341,6 +346,7 @@ function DefaultItem({
         className={clsx('!w-full', item.needsDeletion && 'striked')}
         disabled={disabled || item.needsDeletion}
         readOnly={readOnly}
+        data-cy={`${dataCy}RemoveButton_${index}`}
       />
       {error && <FormError>{error}</FormError>}
     </>
@@ -351,10 +357,17 @@ function renderDefaultItem(
   item: DefaultType,
   onChange: (value: DefaultType) => void,
   index: number,
+  dataCy: string,
   error?: ItemError<DefaultType>
 ) {
   return (
-    <DefaultItem item={item} onChange={onChange} error={error} index={index} />
+    <DefaultItem
+      item={item}
+      onChange={onChange}
+      error={error}
+      index={index}
+      data-cy={dataCy}
+    />
   );
 }
 
diff --git a/app/react/components/form-components/Slider/Slider.tsx b/app/react/components/form-components/Slider/Slider.tsx
index c0059c978..8d75f5b57 100644
--- a/app/react/components/form-components/Slider/Slider.tsx
+++ b/app/react/components/form-components/Slider/Slider.tsx
@@ -14,7 +14,7 @@ export interface Props {
   step: number;
   value: number;
   onChange: (value: number | number[]) => void;
-  dataCy?: string;
+  dataCy: string;
   // true if you want to always show the tooltip
   visibleTooltip?: boolean;
   disabled?: boolean;
diff --git a/app/react/components/form-components/SwitchField/Switch.stories.tsx b/app/react/components/form-components/SwitchField/Switch.stories.tsx
index ffe2776ed..6b980d203 100644
--- a/app/react/components/form-components/SwitchField/Switch.stories.tsx
+++ b/app/react/components/form-components/SwitchField/Switch.stories.tsx
@@ -13,7 +13,15 @@ export function Example() {
     setIsChecked(!isChecked);
   }
 
-  return <Switch name="name" checked={isChecked} onChange={onChange} id="id" />;
+  return (
+    <Switch
+      name="name"
+      data-cy="switch"
+      checked={isChecked}
+      onChange={onChange}
+      id="id"
+    />
+  );
 }
 
 interface Args {
@@ -21,7 +29,15 @@ interface Args {
 }
 
 function Template({ checked }: Args) {
-  return <Switch name="name" checked={checked} onChange={() => {}} id="id" />;
+  return (
+    <Switch
+      name="name"
+      data-cy="switch"
+      checked={checked}
+      onChange={() => {}}
+      id="id"
+    />
+  );
 }
 
 export const Checked: Story<Args> = Template.bind({});
diff --git a/app/react/components/form-components/SwitchField/Switch.test.tsx b/app/react/components/form-components/SwitchField/Switch.test.tsx
index 1be505ed6..ce4c10a50 100644
--- a/app/react/components/form-components/SwitchField/Switch.test.tsx
+++ b/app/react/components/form-components/SwitchField/Switch.test.tsx
@@ -8,7 +8,13 @@ function renderDefault({
   checked = false,
 }: Partial<PropsWithChildren<Props>> = {}) {
   return render(
-    <Switch id="id" name={name} checked={checked} onChange={() => {}} />
+    <Switch
+      id="id"
+      name={name}
+      checked={checked}
+      onChange={() => {}}
+      data-cy="switch"
+    />
   );
 }
 
diff --git a/app/react/components/form-components/SwitchField/SwitchField.stories.tsx b/app/react/components/form-components/SwitchField/SwitchField.stories.tsx
index 4c952d809..634f79f2f 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.stories.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.stories.tsx
@@ -16,6 +16,7 @@ export function Example() {
   return (
     <SwitchField
       name="name"
+      data-cy="switch-field-example"
       checked={isChecked}
       onChange={onChange}
       label="Example"
@@ -33,6 +34,7 @@ function Template({ checked, label, labelClass }: Args) {
   return (
     <SwitchField
       name="name"
+      data-cy="switch-field-example"
       checked={checked}
       onChange={() => {}}
       label={label}
diff --git a/app/react/components/form-components/SwitchField/SwitchField.test.tsx b/app/react/components/form-components/SwitchField/SwitchField.test.tsx
index 74f06e888..4c72cff14 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.test.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.test.tsx
@@ -12,6 +12,7 @@ function renderDefault({
   return render(
     <SwitchField
       label={label}
+      data-cy="switch-field"
       name={name}
       checked={checked}
       onChange={onChange}
diff --git a/app/react/components/modals/Dialog.tsx b/app/react/components/modals/Dialog.tsx
index 39c5e033e..d5552a935 100644
--- a/app/react/components/modals/Dialog.tsx
+++ b/app/react/components/modals/Dialog.tsx
@@ -69,6 +69,7 @@ export function Dialog<T>({
             color={button.color}
             key={index}
             size="medium"
+            data-cy={button.dataCy}
           >
             {button.label} {button.timeout && count ? `(${count})` : null}
           </Button>
diff --git a/app/react/components/modals/SwitchPrompt.tsx b/app/react/components/modals/SwitchPrompt.tsx
index c7810a177..c00523aee 100644
--- a/app/react/components/modals/SwitchPrompt.tsx
+++ b/app/react/components/modals/SwitchPrompt.tsx
@@ -1,5 +1,7 @@
 import { ReactNode, useState } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { SwitchField } from '@@/form-components/SwitchField';
 
 import { ModalType, type ButtonOptions } from './types';
@@ -16,6 +18,7 @@ function SwitchPrompt({
   modalType,
   message,
   defaultValue = false,
+  'data-cy': dataCy,
 }: {
   onSubmit: OnSubmit<{ value: boolean }>;
   title: string;
@@ -24,7 +27,7 @@ function SwitchPrompt({
   modalType?: ModalType;
   message?: ReactNode;
   defaultValue?: boolean;
-}) {
+} & AutomationTestingProps) {
   const [value, setValue] = useState(defaultValue);
 
   return (
@@ -36,6 +39,7 @@ function SwitchPrompt({
           {message && <div className="mb-3">{message}</div>}
           <SwitchField
             name="value"
+            data-cy={dataCy}
             label={switchLabel}
             checked={value}
             onChange={setValue}
@@ -56,12 +60,15 @@ export async function openSwitchPrompt(
     modalType,
     message,
     defaultValue,
+    'data-cy': dataCy,
   }: {
     confirmButton?: ButtonOptions<true>;
     modalType?: ModalType;
     message?: ReactNode;
     defaultValue?: boolean;
-  } = {}
+  } & AutomationTestingProps = {
+    'data-cy': 'switch-prompt',
+  }
 ) {
   return openModal(SwitchPrompt, {
     confirmButton,
@@ -70,5 +77,6 @@ export async function openSwitchPrompt(
     modalType,
     message,
     defaultValue,
+    'data-cy': dataCy,
   });
 }
diff --git a/app/react/components/modals/types.ts b/app/react/components/modals/types.ts
index b56a3a352..bdf3012c2 100644
--- a/app/react/components/modals/types.ts
+++ b/app/react/components/modals/types.ts
@@ -8,6 +8,7 @@ export interface ButtonOptions<TValue = undefined> {
   color?: ComponentProps<typeof Button>['color'];
   value?: TValue;
   timeout?: number;
+  dataCy: string;
 }
 
 export interface ButtonsOptions<T> {
diff --git a/app/react/components/modals/utils.ts b/app/react/components/modals/utils.ts
index ec0f7d5c7..00ac3b694 100644
--- a/app/react/components/modals/utils.ts
+++ b/app/react/components/modals/utils.ts
@@ -7,15 +7,20 @@ import { ButtonOptions } from './types';
 export function buildConfirmButton(
   label = 'Confirm',
   color: ComponentProps<typeof Button>['color'] = 'primary',
-  timeout = 0
+  timeout = 0,
+  dataCy = 'modal-confirm-button'
 ): ButtonOptions<true> {
-  return { label, color, value: true, timeout };
+  return { label, color, value: true, timeout, dataCy };
 }
 
-export function buildCancelButton(label = 'Cancel'): ButtonOptions<false> {
+export function buildCancelButton(
+  label = 'Cancel',
+  dataCy = 'modal-cancel-button'
+): ButtonOptions<false> {
   return {
     label,
     color: 'default',
     value: false,
+    dataCy,
   };
 }
diff --git a/app/react/docker/agent/NodeSelector.tsx b/app/react/docker/agent/NodeSelector.tsx
index c17f26ca2..0cafcba34 100644
--- a/app/react/docker/agent/NodeSelector.tsx
+++ b/app/react/docker/agent/NodeSelector.tsx
@@ -42,6 +42,7 @@ export function NodeSelector({
         value={value}
         onChange={onChange}
         options={nodesQuery.data || []}
+        data-cy="docker-agent-node-selector"
       />
     </FormControl>
   );
diff --git a/app/react/docker/components/FilesTable/FilesTable.tsx b/app/react/docker/components/FilesTable/FilesTable.tsx
index 01c951815..385ab93d4 100644
--- a/app/react/docker/components/FilesTable/FilesTable.tsx
+++ b/app/react/docker/components/FilesTable/FilesTable.tsx
@@ -36,6 +36,7 @@ function goToParent(onClick: () => void): FileData {
         color="link"
         icon={CornerLeftUp}
         className="!m-0 !p-0"
+        data-cy="component-goToParentButton"
       >
         Go to parent
       </Button>
@@ -95,6 +96,7 @@ export function FilesTable({
         onDelete,
       })}
       disableSelect
+      data-cy="files-datatable"
       renderTableActions={() => {
         if (!isUploadAllowed) {
           return null;
@@ -103,7 +105,12 @@ export function FilesTable({
         return (
           <Authorized authorizations="DockerAgentBrowsePut">
             <div className="flex flex-row items-center">
-              <Button color="light" icon={Upload} as="label">
+              <Button
+                color="light"
+                icon={Upload}
+                as="label"
+                data-cy="docker-agent-file-upload-button"
+              >
                 <input
                   type="file"
                   className="hidden"
diff --git a/app/react/docker/components/FilesTable/columns/ActionsCell.tsx b/app/react/docker/components/FilesTable/columns/ActionsCell.tsx
index 74ea258e4..1e635c8ee 100644
--- a/app/react/docker/components/FilesTable/columns/ActionsCell.tsx
+++ b/app/react/docker/components/FilesTable/columns/ActionsCell.tsx
@@ -26,6 +26,7 @@ export function ActionsCell({
             onClick={() => meta.onDownload(item.Name)}
             icon={Download}
             className="!m-0"
+            data-cy={`docker-files-download-${item.Name}`}
           >
             Download
           </Button>
@@ -38,6 +39,7 @@ export function ActionsCell({
           icon={Edit}
           onClick={() => meta.setIsEdit(item.Name, true)}
           className="!m-0"
+          data-cy={`docker-files-rename-${item.Name}`}
         >
           Rename
         </Button>
@@ -49,6 +51,7 @@ export function ActionsCell({
           icon={Trash2}
           onClick={() => meta.onDelete(item.Name)}
           className="!m-0"
+          data-cy={`docker-files-delete-${item.Name}`}
         >
           Delete
         </Button>
diff --git a/app/react/docker/components/FilesTable/columns/NameCell.tsx b/app/react/docker/components/FilesTable/columns/NameCell.tsx
index 2e262f7ec..33742b33e 100644
--- a/app/react/docker/components/FilesTable/columns/NameCell.tsx
+++ b/app/react/docker/components/FilesTable/columns/NameCell.tsx
@@ -42,6 +42,7 @@ export function NameCell({
           className="!ml-0 p-0"
           onClick={() => meta.onBrowse(name)}
           icon={Folder}
+          data-cy={`file-browse-${name}`}
         >
           {name}
         </Button>
@@ -86,11 +87,22 @@ function EditForm({
             value={values.name}
             onChange={(e) => setFieldValue('name', e.target.value)}
             className="input-sm w-auto"
+            data-cy={`file-rename-${originalName}`}
           />
 
-          <Button color="none" type="reset" icon={X} />
+          <Button
+            color="none"
+            type="reset"
+            icon={X}
+            data-cy={`file-reset-button-${originalName}`}
+          />
 
-          <Button color="none" type="submit" icon={Check} />
+          <Button
+            color="none"
+            type="submit"
+            icon={Check}
+            data-cy={`file-submit-button-${originalName}`}
+          />
         </Form>
       )}
     </Formik>
diff --git a/app/react/docker/configs/ListView/ConfigsDatatable/ConfigsDatatable.tsx b/app/react/docker/configs/ListView/ConfigsDatatable/ConfigsDatatable.tsx
index cccc25405..0e48e7386 100644
--- a/app/react/docker/configs/ListView/ConfigsDatatable/ConfigsDatatable.tsx
+++ b/app/react/docker/configs/ListView/ConfigsDatatable/ConfigsDatatable.tsx
@@ -50,19 +50,23 @@ export function ConfigsDatatable({ dataset, onRefresh, onRemoveClick }: Props) {
         </TableSettingsMenu>
       )}
       disableSelect={!hasWriteAccessQuery.authorized}
+      data-cy="configs-datatable"
       renderTableActions={(selectedRows) =>
         hasWriteAccessQuery.authorized && (
           <div className="flex items-center gap-3">
             <Authorized authorizations="DockerConfigDelete">
               <DeleteButton
                 disabled={selectedRows.length === 0}
+                data-cy="remove-docker-configs-button"
                 onConfirmed={() => onRemoveClick(selectedRows)}
                 confirmMessage="Do you want to remove the selected config(s)?"
               />
             </Authorized>
 
             <Authorized authorizations="DockerConfigCreate">
-              <AddButton>Add config</AddButton>
+              <AddButton data-cy="add-docker-config-button">
+                Add config
+              </AddButton>
             </Authorized>
           </div>
         )
diff --git a/app/react/docker/configs/ListView/ConfigsDatatable/columns.tsx b/app/react/docker/configs/ListView/ConfigsDatatable/columns.tsx
index 63c086d8f..0249e91ca 100644
--- a/app/react/docker/configs/ListView/ConfigsDatatable/columns.tsx
+++ b/app/react/docker/configs/ListView/ConfigsDatatable/columns.tsx
@@ -10,7 +10,11 @@ import { DockerConfig } from '../../types';
 const columnHelper = createColumnHelper<DockerConfig>();
 
 export const columns = [
-  buildNameColumn<DockerConfig>('Name', 'docker.configs.config'),
+  buildNameColumn<DockerConfig>(
+    'Name',
+    'docker.configs.config',
+    'docker-configs-name'
+  ),
   columnHelper.accessor('CreatedAt', {
     header: 'Creation Date',
     cell: ({ getValue }) => {
diff --git a/app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx b/app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx
index 3ab6f8af5..757cb1073 100644
--- a/app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx
+++ b/app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx
@@ -84,6 +84,7 @@ export function BaseForm({
               setFieldValue('name', name);
             }}
             placeholder="e.g. myContainer"
+            data-cy="container-name-input"
           />
         </FormControl>
 
@@ -108,6 +109,7 @@ export function BaseForm({
                     setFieldValue('alwaysPull', alwaysPull)
                   }
                   labelClass="col-sm-3 col-lg-2"
+                  data-cy="always-pull-switch"
                 />
               </div>
             </div>
@@ -121,6 +123,7 @@ export function BaseForm({
                 <div className="col-sm-12">
                   <SwitchField
                     label="Create a container webhook"
+                    data-cy="container-webhook-switch"
                     tooltip="Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container."
                     checked={values.enableWebhook}
                     onChange={(enableWebhook) =>
@@ -140,6 +143,7 @@ export function BaseForm({
             <div className="col-sm-12">
               <SwitchField
                 label="Publish all exposed ports to random host ports"
+                data-cy="publish-all-ports-switch"
                 tooltip="When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile."
                 checked={values.publishAllPorts}
                 onChange={(publishAllPorts) =>
@@ -179,6 +183,7 @@ export function BaseForm({
           <div className="col-sm-12">
             <SwitchField
               label="Auto remove"
+              data-cy="container-auto-remove-switch"
               tooltip="When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once."
               checked={values.autoRemove}
               onChange={(autoRemove) => setFieldValue('autoRemove', autoRemove)}
@@ -191,6 +196,7 @@ export function BaseForm({
           <div className="col-sm-12">
             <LoadingButton
               loadingText="Deployment in progress..."
+              data-cy="deploy-container-button"
               isLoading={isLoading}
               disabled={!isValid}
             >
diff --git a/app/react/docker/containers/CreateView/BaseForm/PortsMappingField.tsx b/app/react/docker/containers/CreateView/BaseForm/PortsMappingField.tsx
index c13aacf43..4a2e32d75 100644
--- a/app/react/docker/containers/CreateView/BaseForm/PortsMappingField.tsx
+++ b/app/react/docker/containers/CreateView/BaseForm/PortsMappingField.tsx
@@ -50,6 +50,7 @@ export function PortsMappingField({
         disabled={disabled}
         readOnly={readOnly}
         tooltip="When a range of ports on the host and a single port on the container is specified, Docker will randomly choose a single available port in the defined range and forward that to the container port."
+        data-cy="docker-containers-ports-mapping"
       />
       {typeof errors === 'string' && (
         <div className="form-group col-md-12">
@@ -73,6 +74,7 @@ function Item({
       <div className="flex items-center gap-2">
         <InputLabeled
           size="small"
+          data-cy={`hostPort-${index}`}
           disabled={disabled}
           readOnly={readOnly}
           value={item.hostPort}
@@ -97,6 +99,7 @@ function Item({
           placeholder="e.g. 80"
           className="w-1/2"
           id={`containerPort-${index}`}
+          data-cy={`containerPort-${index}`}
         />
 
         <ButtonSelector<Protocol>
diff --git a/app/react/docker/containers/CreateView/CapabilitiesTab/CapabilitiesTab.tsx b/app/react/docker/containers/CreateView/CapabilitiesTab/CapabilitiesTab.tsx
index cf8b0fc09..a2745e862 100644
--- a/app/react/docker/containers/CreateView/CapabilitiesTab/CapabilitiesTab.tsx
+++ b/app/react/docker/containers/CreateView/CapabilitiesTab/CapabilitiesTab.tsx
@@ -19,6 +19,7 @@ export function CapabilitiesTab({
           <div key={cap.key} className="w-1/3 text-center">
             <SwitchField
               labelClass="col-sm-6"
+              data-cy="docker-container-capability-switch"
               tooltip={cap.description}
               checked={values.includes(cap.key)}
               label={cap.key}
diff --git a/app/react/docker/containers/CreateView/CommandsTab/CommandsTab.tsx b/app/react/docker/containers/CreateView/CommandsTab/CommandsTab.tsx
index e9ed94f80..a722f2ea0 100644
--- a/app/react/docker/containers/CreateView/CommandsTab/CommandsTab.tsx
+++ b/app/react/docker/containers/CreateView/CommandsTab/CommandsTab.tsx
@@ -61,6 +61,7 @@ export function CommandsTab({
             value={values.workingDir}
             onChange={(e) => setFieldValue('workingDir', e.target.value)}
             placeholder="e.g. /myapp"
+            data-cy="working-dir-input"
           />
         </FormControl>
         <FormControl
@@ -73,6 +74,7 @@ export function CommandsTab({
             value={values.user}
             onChange={(e) => setFieldValue('user', e.target.value)}
             placeholder="e.g. nginx"
+            data-cy="user-input"
           />
         </FormControl>
       </div>
diff --git a/app/react/docker/containers/CreateView/CommandsTab/ConsoleSettings.tsx b/app/react/docker/containers/CreateView/CommandsTab/ConsoleSettings.tsx
index e182f7962..983e2ad40 100644
--- a/app/react/docker/containers/CreateView/CommandsTab/ConsoleSettings.tsx
+++ b/app/react/docker/containers/CreateView/CommandsTab/ConsoleSettings.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { mixed } from 'yup';
 import { ContainerConfig } from 'docker-types/generated/1.41';
 
+import { AutomationTestingProps } from '@/types';
+
 import { FormControl } from '@@/form-components/FormControl';
 
 const consoleSettingTypes = ['tty', 'interactive', 'both', 'none'] as const;
@@ -28,6 +30,7 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-interactive-tty"
       />
       <Item
         value="interactive"
@@ -38,6 +41,7 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-interactive"
       />
       <Item
         value="tty"
@@ -48,12 +52,14 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-tty"
       />
       <Item
         value="none"
         onChange={handleChange}
         label={<>None</>}
         selected={value}
+        data-cy="container-console-none"
       />
     </FormControl>
   );
@@ -68,16 +74,18 @@ function Item({
   selected,
   onChange,
   label,
+  'data-cy': dataCy,
 }: {
   value: ConsoleSetting;
   selected: ConsoleSetting;
   onChange(value: ConsoleSetting): void;
   label: ReactNode;
-}) {
+} & AutomationTestingProps) {
   return (
     <label className="radio-inline !m-0 w-1/2">
       <input
         type="radio"
+        data-cy={dataCy}
         name="container_console"
         value={value}
         checked={value === selected}
diff --git a/app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx b/app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx
index 7466f79cb..c6f472f8e 100644
--- a/app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx
+++ b/app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx
@@ -52,6 +52,7 @@ export function LoggerConfig({
           value={value.type}
           onChange={(type) => onChange({ ...value, type: type || '' })}
           options={pluginOptions}
+          data-cy="docker-logging-driver-selector"
         />
       </FormControl>
 
@@ -82,6 +83,7 @@ export function LoggerConfig({
         itemBuilder={() => ({ option: '', value: '' })}
         disabled={isDisabled}
         errors={errors?.options}
+        data-cy="docker-logging-options"
       />
     </FormSection>
   );
@@ -95,6 +97,7 @@ function Item({
   item: { option, value },
   onChange,
   error,
+  index,
 }: ItemProps<{ option: string; value: string }>) {
   return (
     <div>
@@ -105,6 +108,7 @@ function Item({
             value={option}
             onChange={(e) => handleChange({ option: e.target.value })}
             placeholder="e.g. FOO"
+            data-cy={`docker-logging-option_${index}`}
           />
         </InputGroup>
         <InputGroup className="w-1/2">
@@ -113,6 +117,7 @@ function Item({
             value={value}
             onChange={(e) => handleChange({ value: e.target.value })}
             placeholder="e.g bar"
+            data-cy={`docker-logging-value_${index}`}
           />
         </InputGroup>
       </div>
diff --git a/app/react/docker/containers/CreateView/CommandsTab/OverridableInput.tsx b/app/react/docker/containers/CreateView/CommandsTab/OverridableInput.tsx
index 672d50646..421847850 100644
--- a/app/react/docker/containers/CreateView/CommandsTab/OverridableInput.tsx
+++ b/app/react/docker/containers/CreateView/CommandsTab/OverridableInput.tsx
@@ -21,6 +21,7 @@ export function OverridableInput({
       <InputGroup.ButtonWrapper>
         <Button
           color="light"
+          data-cy={`docker-container-default-${id}`}
           size="medium"
           className={clsx('!ml-0', { active: !override })}
           onClick={() => onChange(null)}
@@ -29,6 +30,7 @@ export function OverridableInput({
         </Button>
         <Button
           color="light"
+          data-cy={`docker-container-override-${id}`}
           size="medium"
           className={clsx({ active: override })}
           onClick={() => onChange('')}
@@ -38,6 +40,7 @@ export function OverridableInput({
       </InputGroup.ButtonWrapper>
       <InputGroup.Input
         disabled={!override}
+        data-cy={`docker-container-input-${id}`}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         id={id}
diff --git a/app/react/docker/containers/CreateView/LabelsTab/Item.tsx b/app/react/docker/containers/CreateView/LabelsTab/Item.tsx
index 98c40fcb9..ec5ea41f7 100644
--- a/app/react/docker/containers/CreateView/LabelsTab/Item.tsx
+++ b/app/react/docker/containers/CreateView/LabelsTab/Item.tsx
@@ -4,7 +4,7 @@ import { ItemProps } from '@@/form-components/InputList';
 
 import { Label } from './types';
 
-export function Item({ item, onChange, error }: ItemProps<Label>) {
+export function Item({ item, onChange, error, index }: ItemProps<Label>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
@@ -12,6 +12,7 @@ export function Item({ item, onChange, error }: ItemProps<Label>) {
           <InputGroup.Addon>name</InputGroup.Addon>
           <InputGroup.Input
             value={item.name}
+            data-cy={`label-name_${index}`}
             onChange={(e) => onChange({ ...item, name: e.target.value })}
             placeholder="e.g. com.example.foo"
           />
@@ -20,6 +21,7 @@ export function Item({ item, onChange, error }: ItemProps<Label>) {
           <InputGroup.Addon>value</InputGroup.Addon>
           <InputGroup.Input
             value={item.value}
+            data-cy={`label-value${index}`}
             onChange={(e) => onChange({ ...item, value: e.target.value })}
             placeholder="e.g. bar"
           />
diff --git a/app/react/docker/containers/CreateView/LabelsTab/LabelsTab.tsx b/app/react/docker/containers/CreateView/LabelsTab/LabelsTab.tsx
index 4499bd551..e79065f12 100644
--- a/app/react/docker/containers/CreateView/LabelsTab/LabelsTab.tsx
+++ b/app/react/docker/containers/CreateView/LabelsTab/LabelsTab.tsx
@@ -21,6 +21,7 @@ export function LabelsTab({
       value={values}
       item={Item}
       itemBuilder={() => ({ name: '', value: '' })}
+      data-cy="docker-container-labels"
     />
   );
 
diff --git a/app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx b/app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx
index e93da7ec9..47ff08d82 100644
--- a/app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx
+++ b/app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx
@@ -31,6 +31,7 @@ export function ContainerSelector({
       onChange={onChange}
       options={containersQuery.data || []}
       isLoading={containersQuery.isLoading}
+      data-cy="docker-container-selector"
     />
   );
 }
diff --git a/app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx b/app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx
index e47b54709..2e94e63bb 100644
--- a/app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx
+++ b/app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx
@@ -44,6 +44,7 @@ export function NetworkTab({
           value={values.hostname}
           onChange={(e) => setFieldValue('hostname', e.target.value)}
           placeholder="e.g. web01"
+          data-cy="docker-container-hostname-input"
         />
       </FormControl>
 
@@ -52,6 +53,7 @@ export function NetworkTab({
           value={values.domain}
           onChange={(e) => setFieldValue('domain', e.target.value)}
           placeholder="e.g. example.com"
+          data-cy="docker-container-domain-input"
         />
       </FormControl>
 
@@ -60,6 +62,7 @@ export function NetworkTab({
           value={values.macAddress}
           onChange={(e) => setFieldValue('macAddress', e.target.value)}
           placeholder="e.g. 12-34-56-78-9a-bc"
+          data-cy="docker-container-mac-address-input"
         />
       </FormControl>
 
@@ -68,6 +71,7 @@ export function NetworkTab({
           value={values.ipv4Address}
           onChange={(e) => setFieldValue('ipv4Address', e.target.value)}
           placeholder="e.g. 172.20.0.7"
+          data-cy="docker-container-ipv4-address-input"
         />
       </FormControl>
 
@@ -76,6 +80,7 @@ export function NetworkTab({
           value={values.ipv6Address}
           onChange={(e) => setFieldValue('ipv6Address', e.target.value)}
           placeholder="e.g. a:b:c:d::1234"
+          data-cy="docker-container-ipv6-address-input"
         />
       </FormControl>
 
@@ -84,6 +89,7 @@ export function NetworkTab({
           value={values.primaryDns}
           onChange={(e) => setFieldValue('primaryDns', e.target.value)}
           placeholder="e.g. 1.1.1.1, 2606:4700:4700::1111"
+          data-cy="docker-container-primary-dns-input"
         />
       </FormControl>
 
@@ -92,6 +98,7 @@ export function NetworkTab({
           value={values.secondaryDns}
           onChange={(e) => setFieldValue('secondaryDns', e.target.value)}
           placeholder="e.g. 1.0.0.1, 2606:4700:4700::1001"
+          data-cy="docker-container-secondary-dns-input"
         />
       </FormControl>
 
@@ -104,6 +111,7 @@ export function NetworkTab({
         errors={errors?.hostsFileEntries}
         item={HostsFileEntryItem}
         itemBuilder={() => ''}
+        data-cy="docker-container-hosts-file-entries"
       />
     </div>
   );
@@ -115,6 +123,7 @@ function HostsFileEntryItem({
   disabled,
   error,
   readOnly,
+  index,
 }: ItemProps<string>) {
   return (
     <div>
@@ -125,6 +134,7 @@ function HostsFileEntryItem({
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
           readOnly={readOnly}
+          data-cy={`docker-container-hosts-file-entry_${index}`}
         />
       </InputGroup>
 
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/DevicesField.tsx b/app/react/docker/containers/CreateView/ResourcesTab/DevicesField.tsx
index b264b52a3..d76ce0186 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/DevicesField.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/DevicesField.tsx
@@ -31,16 +31,18 @@ export function DevicesField({
       label="Devices"
       errors={errors}
       itemBuilder={() => ({ pathOnHost: '', pathInContainer: '' })}
+      data-cy="docker-container-devices"
     />
   );
 }
 
-function Item({ item, onChange, error }: ItemProps<Device>) {
+function Item({ item, onChange, error, index }: ItemProps<Device>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
         <InputLabeled
           value={item.pathOnHost}
+          data-cy={`device-path-on-host_${index}`}
           onChange={(e) => onChange({ ...item, pathOnHost: e.target.value })}
           label="host"
           placeholder="e.g. /dev/tty0"
@@ -49,6 +51,7 @@ function Item({ item, onChange, error }: ItemProps<Device>) {
         />
         <InputLabeled
           value={item.pathInContainer}
+          data-cy={`device-path-on-container_${index}`}
           onChange={(e) =>
             onChange({ ...item, pathInContainer: e.target.value })
           }
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx b/app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx
index 9b9c35b78..6591d8903 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx
@@ -73,6 +73,7 @@ export function EditResourcesForm({
             <div className="col-sm-12 flex items-center gap-4">
               <LoadingButton
                 isLoading={updateMutation.isLoading}
+                data-cy="update-limits-button"
                 disabled={isImageInvalid || !dirty}
                 loadingText="Update in progress..."
                 type="button"
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx b/app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx
index ceb8c89c1..09d1fada8 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx
@@ -136,6 +136,7 @@ export function GpuFieldset({
             onChange={toggleEnableGpu}
             className="ml-2"
             disabled={!enableGpuManagement}
+            data-cy="docker-containers-gpu-enabled-switch"
           />
         </div>
         {enableGpuManagement && values.enabled && (
@@ -150,6 +151,7 @@ export function GpuFieldset({
               onChange={onChangeSelectedGpus}
               options={options}
               components={{ MultiValueRemove }}
+              data-cy="docker-containers-gpu-select"
             />
           </div>
         )}
@@ -170,6 +172,7 @@ export function GpuFieldset({
                 options={NvidiaCapabilitiesOptions}
                 components={{ Option }}
                 onChange={onChangeSelectedCaps}
+                data-cy="docker-containers-gpu-capabilities-select"
               />
             </div>
           </div>
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
index e2bc40ddc..078d26eef 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
@@ -69,6 +69,7 @@ export function ResourceFieldset({
           min={0}
           max={maxCpu}
           step={0.1}
+          dataCy="k8sNamespaceCreate-resourceCpu"
         />
       </FormControl>
     </FormSection>
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesTab.tsx b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesTab.tsx
index 0f304cc4e..ea0de972d 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesTab.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesTab.tsx
@@ -99,6 +99,7 @@ export function ResourcesTab({
               setFieldValue('sharedMemorySize', e.target.valueAsNumber)
             }
             className="w-32"
+            data-cy="shared-memory-size"
           />
           <div className="small text-muted">
             Size of /dev/shm (<b>MB</b>)
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSection.tsx b/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSection.tsx
index 07030d3f1..17a4250b8 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSection.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSection.tsx
@@ -30,6 +30,7 @@ export function RuntimeSection({
           <div className="col-sm-12">
             <SwitchField
               labelClass="col-sm-2"
+              data-cy="docker-privileged-switch"
               label="Privileged mode"
               checked={values.privileged}
               onChange={(privileged) => handleChange({ privileged })}
@@ -43,6 +44,7 @@ export function RuntimeSection({
           <div className="col-sm-12">
             <SwitchField
               labelClass="col-sm-2"
+              data-cy="docker-init-switch"
               label="Init"
               checked={values.init}
               onChange={(init) => handleChange({ init })}
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx b/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx
index fea803e99..3651503c5 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx
@@ -26,6 +26,7 @@ export function RuntimeSelector({
       options={infoQuery.data || []}
       isLoading={infoQuery.isLoading}
       disabled={infoQuery.isLoading}
+      data-cy="docker-runtime-selector"
     />
   );
 }
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/SysctlsField.tsx b/app/react/docker/containers/CreateView/ResourcesTab/SysctlsField.tsx
index 6c8ad02f2..8180dafa0 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/SysctlsField.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/SysctlsField.tsx
@@ -30,11 +30,12 @@ export function SysctlsField({
       label="Sysctls"
       errors={errors}
       itemBuilder={() => ({ name: '', value: '' })}
+      data-cy="docker-container-sysctls"
     />
   );
 }
 
-function Item({ item, onChange, error }: ItemProps<Sysctls>) {
+function Item({ item, onChange, error, index }: ItemProps<Sysctls>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
@@ -45,6 +46,7 @@ function Item({ item, onChange, error }: ItemProps<Sysctls>) {
           placeholder="e.g. FOO"
           className="w-1/2"
           size="small"
+          data-cy={`docker-container-sysctl-name_${index}`}
         />
         <InputLabeled
           value={item.value}
@@ -53,6 +55,7 @@ function Item({ item, onChange, error }: ItemProps<Sysctls>) {
           placeholder="e.g. bar"
           className="w-1/2"
           size="small"
+          data-cy={`docker-container-sysctl-value_${index}`}
         />
       </div>
       {error && <FormError>{Object.values(error)[0]}</FormError>}
diff --git a/app/react/docker/containers/CreateView/VolumesTab/Item.tsx b/app/react/docker/containers/CreateView/VolumesTab/Item.tsx
index 4be1a662c..677c7aa92 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/Item.tsx
+++ b/app/react/docker/containers/CreateView/VolumesTab/Item.tsx
@@ -31,6 +31,7 @@ export function Item({
           size="small"
           className="flex-1"
           id={`container-path-${index}`}
+          data-cy={`container-path_${index}`}
         />
 
         {allowBindMounts && (
@@ -73,6 +74,7 @@ export function Item({
             value={volume.name}
             onChange={(e) => setValue({ name: e.target.value })}
             id={`host-path-${index}`}
+            data-cy={`host-path_${index}`}
           />
         )}
 
diff --git a/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx b/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
index ef85fafa5..6f02e0679 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
+++ b/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
@@ -40,6 +40,7 @@ export function VolumeSelector({
       value={selectedValue}
       onChange={(vol) => onChange(vol?.Name)}
       inputId={inputId}
+      data-cy="docker-containers-volume-selector"
     />
   );
 }
diff --git a/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx b/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
index 67692e442..73136c800 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
+++ b/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
@@ -31,6 +31,7 @@ export function VolumesTab({
           name: '',
           readOnly: false,
         })}
+        data-cy="docker-container-volumes"
       />
     </InputContext.Provider>
   );
diff --git a/app/react/docker/containers/ItemView/ConfirmRecreationModal.tsx b/app/react/docker/containers/ItemView/ConfirmRecreationModal.tsx
index c0f7de111..2024e15a2 100644
--- a/app/react/docker/containers/ItemView/ConfirmRecreationModal.tsx
+++ b/app/react/docker/containers/ItemView/ConfirmRecreationModal.tsx
@@ -29,6 +29,7 @@ function ConfirmRecreationModal({ onSubmit, cannotPullImage }: Props) {
         </p>
         <SwitchField
           name="pullLatest"
+          data-cy="recreate-pull-latest-switch"
           label="Re-pull image"
           checked={pullLatest}
           onChange={setPullLatest}
@@ -44,10 +45,18 @@ function ConfirmRecreationModal({ onSubmit, cannotPullImage }: Props) {
         )}
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={() => onSubmit()} color="default">
+        <Button
+          onClick={() => onSubmit()}
+          color="default"
+          data-cy="cancel-recreate"
+        >
           Cancel
         </Button>
-        <Button onClick={() => onSubmit({ pullLatest })} color="danger">
+        <Button
+          onClick={() => onSubmit({ pullLatest })}
+          color="danger"
+          data-cy="confirm-recreate"
+        >
           Recreate
         </Button>
       </Modal.Footer>
diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx
index 4b6da4c9b..b8e4bd0e3 100644
--- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx
+++ b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ConnectNetworkForm.tsx
@@ -55,6 +55,7 @@ export function ConnectNetworkForm({
               </div>
               <LoadingButton
                 loadingText="Joining network..."
+                data-cy="connect-network-button"
                 isLoading={connectMutation.isLoading}
               >
                 Join Network
diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx
index 41446216a..3520b26c7 100644
--- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx
+++ b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx
@@ -62,6 +62,7 @@ export function ContainerNetworksDatatable({
         table: 'container-networks',
         containerId: container.Id,
       })}
+      data-cy="container-networks-datatable"
     />
   );
 }
diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx
index b5a3dcbf4..687859a77 100644
--- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx
+++ b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/actions.tsx
@@ -29,6 +29,7 @@ function Cell({
     <Authorized authorizations="DockerNetworkDisconnect">
       <LoadingButton
         color="dangerlight"
+        data-cy="disconnect-network-button"
         isLoading={disconnectMutation.isLoading}
         loadingText="Leaving network..."
         type="button"
diff --git a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx
index 7d3a8d82d..bb7579f28 100644
--- a/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx
+++ b/app/react/docker/containers/ItemView/ContainerNetworksDatatable/columns.tsx
@@ -8,7 +8,11 @@ import { actions } from './actions';
 export const columns = [
   buildExpandColumn<TableNetwork>(),
   {
-    ...buildNameColumn<TableNetwork>('name', 'docker.networks.network'),
+    ...buildNameColumn<TableNetwork>(
+      'name',
+      'docker.networks.network',
+      'docker-networks-name'
+    ),
     header: 'Network',
   },
   columnHelper.accessor((item) => item.IPAddress || '-', {
diff --git a/app/react/docker/containers/ItemView/HealthStatus.tsx b/app/react/docker/containers/ItemView/HealthStatus.tsx
index 86705a888..347e1826d 100644
--- a/app/react/docker/containers/ItemView/HealthStatus.tsx
+++ b/app/react/docker/containers/ItemView/HealthStatus.tsx
@@ -25,7 +25,7 @@ export function HealthStatus({ health }: Props) {
     <TableContainer>
       <TableTitle label="Container health" icon={Server} />
 
-      <DetailsTable>
+      <DetailsTable dataCy="health-status-table">
         <DetailsTable.Row label="Status">
           <div className="vertical-center">
             <Icon
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
index 13da9b724..b7d0ba8f0 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
@@ -70,6 +70,7 @@ export function ContainersDatatable({
           isLoading={containersQuery.isLoading}
           isRowSelectable={(row) => !row.original.IsPortainer}
           initialTableState={getColumnVisibilityState(tableState.hiddenColumns)}
+          data-cy="docker-containers-datatable"
           renderTableSettings={(tableInstance) => (
             <>
               <ColumnVisibilityMenu<DockerContainer>
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
index 580551073..205f2ae06 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx
@@ -82,6 +82,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerStart">
           <Button
             color="light"
+            data-cy="start-docker-container-button"
             onClick={() => onStartClick(selectedItems)}
             disabled={selectedItemCount === 0 || !hasStoppedItemsSelected}
             icon={Play}
@@ -93,6 +94,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerStop">
           <Button
             color="light"
+            data-cy="stop-docker-container-button"
             onClick={() => onStopClick(selectedItems)}
             disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
             icon={Square}
@@ -104,6 +106,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerKill">
           <Button
             color="light"
+            data-cy="kill-docker-container-button"
             onClick={() => onKillClick(selectedItems)}
             disabled={selectedItemCount === 0 || hasStoppedItemsSelected}
             icon={Slash}
@@ -115,6 +118,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerRestart">
           <Button
             color="light"
+            data-cy="restart-docker-container-button"
             onClick={() => onRestartClick(selectedItems)}
             disabled={selectedItemCount === 0}
             icon={RefreshCw}
@@ -126,6 +130,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerPause">
           <Button
             color="light"
+            data-cy="pause-docker-container-button"
             onClick={() => onPauseClick(selectedItems)}
             disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
             icon={Pause}
@@ -137,6 +142,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerUnpause">
           <Button
             color="light"
+            data-cy="resume-docker-container-button"
             onClick={() => onResumeClick(selectedItems)}
             disabled={selectedItemCount === 0 || !hasPausedItemsSelected}
             icon={Play}
@@ -148,6 +154,7 @@ export function ContainersDatatableActions({
         <Authorized authorizations="DockerContainerDelete">
           <Button
             color="dangerlight"
+            data-cy="remove-docker-container-button"
             onClick={() => onRemoveClick(selectedItems)}
             disabled={selectedItemCount === 0}
             icon={Trash2}
@@ -159,7 +166,9 @@ export function ContainersDatatableActions({
       {isAddActionVisible && (
         <div className="space-left">
           <Authorized authorizations="DockerContainerCreate">
-            <AddButton>Add container</AddButton>
+            <AddButton data-cy="add-docker-container-button">
+              Add container
+            </AddButton>
           </Authorized>
         </div>
       )}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings.tsx
index 297ce9180..0146aaa49 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings.tsx
@@ -16,7 +16,8 @@ export function ContainersDatatableSettings({
   return (
     <>
       <Checkbox
-        id="settings-container-truncate-nae"
+        id="settings-container-truncate-name"
+        data-cy="settings-container-truncate-name"
         label="Truncate container name"
         checked={settings.truncateContainerName > 0}
         onChange={() =>
diff --git a/app/react/docker/containers/LogView/LogView.tsx b/app/react/docker/containers/LogView/LogView.tsx
index cd9bd8c77..ae1961e1b 100644
--- a/app/react/docker/containers/LogView/LogView.tsx
+++ b/app/react/docker/containers/LogView/LogView.tsx
@@ -36,6 +36,7 @@ function LogsDisabledInfoPanel() {
         <Link
           to="docker.containers.new"
           params={{ from: containerId, nodeName }}
+          data-cy="redeploy-container-link"
         >
           redeploy your container
         </Link>{' '}
diff --git a/app/react/docker/containers/StatsView/ProcessesDatatable.tsx b/app/react/docker/containers/StatsView/ProcessesDatatable.tsx
index 63f479fde..0ec2a67d7 100644
--- a/app/react/docker/containers/StatsView/ProcessesDatatable.tsx
+++ b/app/react/docker/containers/StatsView/ProcessesDatatable.tsx
@@ -53,6 +53,7 @@ export function ProcessesDatatable({
       disableSelect
       isLoading={!dataset}
       emptyContentLabel="No processes found."
+      data-cy="docker-container-stats-processes-datatable"
     />
   );
 }
diff --git a/app/react/docker/containers/common/confirm-container-delete-modal.ts b/app/react/docker/containers/common/confirm-container-delete-modal.ts
index 10afa5541..588c274bf 100644
--- a/app/react/docker/containers/common/confirm-container-delete-modal.ts
+++ b/app/react/docker/containers/common/confirm-container-delete-modal.ts
@@ -9,6 +9,7 @@ export async function confirmContainerDeletion(title: string) {
     {
       confirmButton: buildConfirmButton('Remove', 'danger'),
       modalType: ModalType.Destructive,
+      'data-cy': 'confirm-container-delete-button',
     }
   );
 
diff --git a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
index 891f40a7a..fe2da97d5 100644
--- a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
+++ b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
@@ -45,6 +45,7 @@ export function ContainerQuickActions({
             to="docker.containers.container.logs"
             params={{ id: containerId, nodeName }}
             title="Logs"
+            data-cy={`container-logs-${containerId}`}
           >
             <Icon icon={FileText} className="space-right" />
           </Link>
@@ -57,6 +58,7 @@ export function ContainerQuickActions({
             to="docker.containers.container.inspect"
             params={{ id: containerId, nodeName }}
             title="Inspect"
+            data-cy={`container-inspect-${containerId}`}
           >
             <Icon icon={Info} className="space-right" />
           </Link>
@@ -69,6 +71,7 @@ export function ContainerQuickActions({
             to="docker.containers.container.stats"
             params={{ id: containerId, nodeName }}
             title="Stats"
+            data-cy={`container-stats-${containerId}`}
           >
             <Icon icon={BarChart} className="space-right" />
           </Link>
@@ -81,6 +84,7 @@ export function ContainerQuickActions({
             to="docker.containers.container.exec"
             params={{ id: containerId, nodeName }}
             title="Exec Console"
+            data-cy={`container-exec-${containerId}`}
           >
             <Icon icon={Terminal} className="space-right" />
           </Link>
@@ -93,6 +97,7 @@ export function ContainerQuickActions({
             to="docker.containers.container.attach"
             params={{ id: containerId, nodeName }}
             title="Attach Console"
+            data-cy={`container-attach-${containerId}`}
           >
             <Icon icon={Paperclip} className="space-right" />
           </Link>
diff --git a/app/react/docker/containers/components/NetworkSelector.tsx b/app/react/docker/containers/components/NetworkSelector.tsx
index 40cdfe52a..846c0d830 100644
--- a/app/react/docker/containers/components/NetworkSelector.tsx
+++ b/app/react/docker/containers/components/NetworkSelector.tsx
@@ -44,6 +44,7 @@ export function NetworkSelector({
       isLoading={networksQuery.isLoading}
       bindToBody
       placeholder="Select a network"
+      data-cy="docker-network-selector"
     />
   );
 }
diff --git a/app/react/docker/events/EventsDatatables.tsx b/app/react/docker/events/EventsDatatables.tsx
index d7c4cfd31..e73ab3a43 100644
--- a/app/react/docker/events/EventsDatatables.tsx
+++ b/app/react/docker/events/EventsDatatables.tsx
@@ -49,6 +49,7 @@ export function EventsDatatable({ dataset }: { dataset: Array<DockerEvent> }) {
       titleIcon={Clock}
       disableSelect
       emptyContentLabel="No event available."
+      data-cy="docker-events-datatable"
     />
   );
 }
diff --git a/app/react/docker/host/SetupView/GpusList.tsx b/app/react/docker/host/SetupView/GpusList.tsx
index 1f3397cb7..982cbde70 100644
--- a/app/react/docker/host/SetupView/GpusList.tsx
+++ b/app/react/docker/host/SetupView/GpusList.tsx
@@ -17,7 +17,7 @@ interface Props {
   onChange(value: Gpu[]): void;
 }
 
-function Item({ item, onChange }: ItemProps<Gpu>) {
+function Item({ item, onChange, index }: ItemProps<Gpu>) {
   return (
     <div className="flex flex-grow gap-2">
       <InputGroup size="small" className="flex-grow">
@@ -28,6 +28,7 @@ function Item({ item, onChange }: ItemProps<Gpu>) {
           onChange={(e) => {
             onChange({ ...item, name: e.target.value });
           }}
+          data-cy={`docker-gpu-name_${index}`}
         />
       </InputGroup>
 
@@ -39,6 +40,7 @@ function Item({ item, onChange }: ItemProps<Gpu>) {
           onChange={(e) => {
             onChange({ ...item, value: e.target.value });
           }}
+          data-cy={`docker-gpu-value_${index}`}
         />
       </InputGroup>
     </div>
@@ -55,6 +57,7 @@ export function GpusList({ value, onChange }: Props) {
       itemBuilder={() => ({ value: '', name: '' })}
       addLabel="Add GPU"
       item={Item}
+      data-cy="docker-containers-gpus"
     />
   );
 }
diff --git a/app/react/docker/images/ItemView/DockerfileDetails.tsx b/app/react/docker/images/ItemView/DockerfileDetails.tsx
index cda285f23..33ed5528f 100644
--- a/app/react/docker/images/ItemView/DockerfileDetails.tsx
+++ b/app/react/docker/images/ItemView/DockerfileDetails.tsx
@@ -22,7 +22,7 @@ export function DockerfileDetails({ image }: Props) {
   return (
     <TableContainer>
       <TableTitle label="Dockerfile details" icon={List} />
-      <DetailsTable>
+      <DetailsTable dataCy="dockerfile-details-table">
         <DetailsTable.Row label="CMD">
           <code>{image.Command ? joinCommand(image.Command) : '-'}</code>
         </DetailsTable.Row>
diff --git a/app/react/docker/images/ItemView/RegistrySelectPrompt.tsx b/app/react/docker/images/ItemView/RegistrySelectPrompt.tsx
index de1c8541d..aa6c6c2e3 100644
--- a/app/react/docker/images/ItemView/RegistrySelectPrompt.tsx
+++ b/app/react/docker/images/ItemView/RegistrySelectPrompt.tsx
@@ -26,13 +26,22 @@ function RegistrySelectPrompt({ onSubmit, defaultValue, registries }: Props) {
           onChange={setRegistryId}
           value={registryId}
           options={options}
+          data-cy="registry-select-selector"
         />
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={() => onSubmit()} color="default">
+        <Button
+          onClick={() => onSubmit()}
+          color="default"
+          data-cy="registry-select-cancel-button"
+        >
           Cancel
         </Button>
-        <Button onClick={() => onSubmit(registryId)} color="primary">
+        <Button
+          onClick={() => onSubmit(registryId)}
+          color="primary"
+          data-cy="registry-select-update-button"
+        >
           Update
         </Button>
       </Modal.Footer>
diff --git a/app/react/docker/images/ListView/ImagesDatatable/ImagesDatatable.tsx b/app/react/docker/images/ListView/ImagesDatatable/ImagesDatatable.tsx
index 16fa0ead0..dfa0da397 100644
--- a/app/react/docker/images/ListView/ImagesDatatable/ImagesDatatable.tsx
+++ b/app/react/docker/images/ListView/ImagesDatatable/ImagesDatatable.tsx
@@ -64,6 +64,7 @@ export function ImagesDatatable({
     <Datatable
       title="Images"
       titleIcon={List}
+      data-cy="docker-images-datatable"
       renderTableActions={(selectedItems) => (
         <div className="flex items-center gap-2">
           <RemoveButtonMenu selectedItems={selectedItems} onRemove={onRemove} />
@@ -130,6 +131,7 @@ function RemoveButtonMenu({
             color="dangerlight"
             disabled={selectedItems.length === 0}
             icon={ChevronDown}
+            data-cy="image-toggleRemoveButtonMenu"
           >
             <span className="sr-only">Toggle Dropdown</span>
           </MenuButton>
@@ -169,7 +171,10 @@ function ImportExportButtons({
           data-cy="image-importImageButton"
           icon={Upload}
           disabled={isExportInProgress}
-          props={{ to: 'docker.images.import' }}
+          props={{
+            to: 'docker.images.import',
+            'data-cy': 'image-importImageLink',
+          }}
         >
           Import
         </Button>
diff --git a/app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx b/app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx
index 7a3f7e8ac..35cf79de5 100644
--- a/app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx
+++ b/app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx
@@ -39,6 +39,7 @@ export function MacvlanNodesSelector({
       isLoading={!dataset}
       emptyContentLabel="No node available"
       settingsManager={tableState}
+      data-cy="macvlan-nodes-selector-datatable"
       extendTableOptions={mergeOptions(
         withMeta({
           table: 'nodes',
diff --git a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
index 481acf43d..5ee349225 100644
--- a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
@@ -56,6 +56,7 @@ export function NetworkContainersTable({
                   nodeName,
                 }}
                 title={container.Name}
+                data-cy={`networkDetails-containerName-${container.Name}`}
               >
                 {container.Name}
               </Link>
diff --git a/app/react/docker/networks/ListView/NestedNetwordsTable.tsx b/app/react/docker/networks/ListView/NestedNetwordsTable.tsx
index f70802be1..f3f47646a 100644
--- a/app/react/docker/networks/ListView/NestedNetwordsTable.tsx
+++ b/app/react/docker/networks/ListView/NestedNetwordsTable.tsx
@@ -21,6 +21,7 @@ export function NestedNetworksDatatable({
       columns={columns}
       dataset={dataset}
       aria-label="Networks table"
+      data-cy="docker-networks-nested-datatable"
     />
   );
 }
diff --git a/app/react/docker/networks/ListView/NetworksDatatable.tsx b/app/react/docker/networks/ListView/NetworksDatatable.tsx
index 9c37e5818..9e223a8a0 100644
--- a/app/react/docker/networks/ListView/NetworksDatatable.tsx
+++ b/app/react/docker/networks/ListView/NetworksDatatable.tsx
@@ -82,6 +82,7 @@ export function NetworksDatatable({ dataset, onRemove, onRefresh }: Props) {
           >
             <DeleteButton
               disabled={selectedRows.length === 0}
+              data-cy="network-removeNetworkButton"
               confirmMessage="Do you want to remove the selected network(s)?"
               onConfirmed={() => onRemove(selectedRows)}
             />
@@ -102,6 +103,7 @@ export function NetworksDatatable({ dataset, onRemove, onRefresh }: Props) {
         </TableSettingsMenu>
       )}
       getRowId={(row) => `${row.Name}-${row.Id}`}
+      data-cy="networks-datatable"
     />
   );
 }
diff --git a/app/react/docker/networks/ListView/columns/name.tsx b/app/react/docker/networks/ListView/columns/name.tsx
index 5da36bb0b..baad2611c 100644
--- a/app/react/docker/networks/ListView/columns/name.tsx
+++ b/app/react/docker/networks/ListView/columns/name.tsx
@@ -15,6 +15,7 @@ export const name = columnHelper.accessor('Name', {
           to=".network"
           params={{ id: item.Id, nodeName: item.NodeName }}
           title={item.Name}
+          data-cy={`network-link-${item.Name}`}
         >
           {truncate(item.Name, 40)}
         </Link>
diff --git a/app/react/docker/secrets/ListView/SecretsDatatable.tsx b/app/react/docker/secrets/ListView/SecretsDatatable.tsx
index cc53ddac1..4661ff3cb 100644
--- a/app/react/docker/secrets/ListView/SecretsDatatable.tsx
+++ b/app/react/docker/secrets/ListView/SecretsDatatable.tsx
@@ -24,7 +24,7 @@ import { createOwnershipColumn } from '../../components/datatable/createOwnershi
 const columnHelper = createColumnHelper<SecretViewModel>();
 
 const columns = [
-  buildNameColumn<SecretViewModel>('Name', '.secret'),
+  buildNameColumn<SecretViewModel>('Name', '.secret', 'docker-secrets-name'),
   columnHelper.accessor((item) => isoDate(item.CreatedAt), {
     header: 'Creation Date',
   }),
@@ -69,6 +69,7 @@ export function SecretsDatatable({
       disableSelect={!hasWriteAccessQuery.authorized}
       settingsManager={tableState}
       emptyContentLabel="No secret available."
+      data-cy="docker-secrets-datatable"
       renderTableActions={(selectedItems) =>
         hasWriteAccessQuery.authorized && (
           <TableActions selectedItems={selectedItems} onRemove={onRemove} />
diff --git a/app/react/docker/services/ItemView/PortMappingField/PortsMappingField.tsx b/app/react/docker/services/ItemView/PortMappingField/PortsMappingField.tsx
index 794f73c22..4d2bf5022 100644
--- a/app/react/docker/services/ItemView/PortMappingField/PortsMappingField.tsx
+++ b/app/react/docker/services/ItemView/PortMappingField/PortsMappingField.tsx
@@ -64,7 +64,7 @@ export function PortsMappingField({
       isValid={!errors}
     >
       {values.length > 0 ? (
-        <Table>
+        <Table data-cy="service-published-ports-table">
           <thead>
             <tr>
               <th>Host port</th>
@@ -123,6 +123,7 @@ function Item({
               onChange={(value) => handleChange('hostPort', value)}
               id={`hostPort-${index}`}
               label="host"
+              data-cy={`hostPort-${index}`}
             />
           </div>
         </td>
@@ -132,6 +133,7 @@ function Item({
             onChange={(value) => handleChange('containerPort', value)}
             id={`containerPort-${index}`}
             label="container"
+            data-cy={`containerPort-${index}`}
           />
         </td>
         <td>
@@ -154,6 +156,7 @@ function Item({
             ]}
             disabled={disabled}
             aria-label="publish mode"
+            data-cy={`publishMode-${index}`}
           />
         </td>
         <td>
@@ -161,6 +164,7 @@ function Item({
             icon={Trash2}
             color="dangerlight"
             onClick={() => onRemove()}
+            data-cy={`remove-port-${index}`}
           />
         </td>
       </tr>
diff --git a/app/react/docker/services/ItemView/PortMappingField/RangeOrNumberField.tsx b/app/react/docker/services/ItemView/PortMappingField/RangeOrNumberField.tsx
index 6d034eb25..c4b773590 100644
--- a/app/react/docker/services/ItemView/PortMappingField/RangeOrNumberField.tsx
+++ b/app/react/docker/services/ItemView/PortMappingField/RangeOrNumberField.tsx
@@ -1,3 +1,5 @@
+import { AutomationTestingProps } from '@/types';
+
 import { InputLabeled } from '@@/form-components/Input/InputLabeled';
 import { Checkbox } from '@@/form-components/Checkbox';
 
@@ -10,6 +12,7 @@ export function RangeOrNumberField({
   readOnly,
   id,
   label,
+  'data-cy': dataCy,
 }: {
   value: Range | number | undefined;
   onChange: (value: Range | number | undefined) => void;
@@ -17,10 +20,10 @@ export function RangeOrNumberField({
   readOnly?: boolean;
   id: string;
   label: string;
-}) {
+} & AutomationTestingProps) {
   return (
     <div className="flex gap-2 items-center">
-      <RangeCheckbox value={value} onChange={onChange} />
+      <RangeCheckbox value={value} onChange={onChange} data-cy={dataCy} />
       {isRange(value) ? (
         <RangeInput
           value={value}
@@ -29,6 +32,7 @@ export function RangeOrNumberField({
           disabled={disabled}
           readOnly={readOnly}
           id={id}
+          data-cy={dataCy}
         />
       ) : (
         <InputLabeled
@@ -42,6 +46,7 @@ export function RangeOrNumberField({
           value={value || ''}
           type="number"
           onChange={(e) => onChange(getNumber(e.target.valueAsNumber))}
+          data-cy={dataCy}
         />
       )}
     </div>
@@ -55,6 +60,7 @@ function RangeInput({
   readOnly,
   id,
   label,
+  'data-cy': dataCy,
 }: {
   value: Range;
   onChange: (value: Range) => void;
@@ -62,7 +68,7 @@ function RangeInput({
   readOnly?: boolean;
   id: string;
   label: string;
-}) {
+} & AutomationTestingProps) {
   return (
     <div className="flex items-center gap-2">
       <label className="font-normal m-0">{label}</label>
@@ -77,6 +83,7 @@ function RangeInput({
         readOnly={readOnly}
         id={id}
         type="number"
+        data-cy={`${dataCy}-start`}
       />
 
       <InputLabeled
@@ -90,6 +97,7 @@ function RangeInput({
         readOnly={readOnly}
         id={id}
         type="number"
+        data-cy={`${dataCy}-end`}
       />
     </div>
   );
@@ -106,10 +114,11 @@ function getNumber(value: number) {
 function RangeCheckbox({
   value,
   onChange,
+  'data-cy': dataCy,
 }: {
   value: Range | number | undefined;
   onChange: (value: Range | number | undefined) => void;
-}) {
+} & AutomationTestingProps) {
   const isValueRange = isRange(value);
   return (
     <Checkbox
@@ -122,6 +131,7 @@ function RangeCheckbox({
           onChange(value.start);
         }
       }}
+      data-cy={`${dataCy}-range-checkbox`}
     />
   );
 }
diff --git a/app/react/docker/services/ItemView/ServiceWidget.tsx b/app/react/docker/services/ItemView/ServiceWidget.tsx
index 171d37cdf..c5a5ce93a 100644
--- a/app/react/docker/services/ItemView/ServiceWidget.tsx
+++ b/app/react/docker/services/ItemView/ServiceWidget.tsx
@@ -36,7 +36,13 @@ export function ServiceWidget({
     <Widget aria-label={title}>
       <Widget.Title icon={titleIcon} title={title}>
         <Authorized authorizations="DockerServiceUpdate">
-          <Button color="secondary" size="small" onClick={onAdd} icon={Plus}>
+          <Button
+            color="secondary"
+            size="small"
+            onClick={onAdd}
+            icon={Plus}
+            data-cy="service-add-button"
+          >
             {labelForAddButton}
           </Button>
         </Authorized>
@@ -51,6 +57,7 @@ export function ServiceWidget({
               type="button"
               onClick={onSubmit}
               disabled={!hasChanges || !isValid}
+              data-cy="service-apply-changes-button"
             >
               Apply changes
             </Button>
@@ -61,6 +68,7 @@ export function ServiceWidget({
                 size="small"
                 color="default"
                 icon={ChevronDown}
+                data-cy="service-reset-changes-button"
               >
                 <span className="sr-only">Toggle Dropdown</span>
               </MenuButton>
diff --git a/app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx b/app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx
index f2c0334f0..bcd533621 100644
--- a/app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx
+++ b/app/react/docker/services/ItemView/TasksDatatable/TasksDatatable.tsx
@@ -32,6 +32,7 @@ export function TasksDatatable({
       dataset={dataset}
       emptyContentLabel="No task available."
       extendTableOptions={withMeta({ table: 'tasks', serviceName })}
+      data-cy="docker-service-tasks-datatable"
     />
   );
 }
diff --git a/app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx b/app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx
index 5defb3116..5d4212ae3 100644
--- a/app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx
+++ b/app/react/docker/services/ItemView/TasksDatatable/columns/task.tsx
@@ -40,11 +40,17 @@ function Cell({
       to="docker.containers.container"
       params={{ id: item.Container.Id, nodeName: item.Container.NodeName }}
       className="monospaced"
+      data-cy="docker-container-task-link"
     >
       {name}
     </Link>
   ) : (
-    <Link to="docker.tasks.task" params={{ id: value }} className="monospaced">
+    <Link
+      to="docker.tasks.task"
+      params={{ id: value }}
+      className="monospaced"
+      data-cy="docker-task-link"
+    >
       {name}
     </Link>
   );
diff --git a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx b/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
index 776397533..dfecb90eb 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
@@ -108,6 +108,7 @@ export function ServicesDatatable({
         }),
         withGlobalFilter(filter)
       )}
+      data-cy="services-datatable"
     />
   );
 }
diff --git a/app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx b/app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx
index 147cc9b95..ba47abf08 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/TableActions.tsx
@@ -56,7 +56,7 @@ export function TableActions({
 
       {isAddActionVisible && (
         <Authorized authorizations="DockerServiceCreate">
-          <AddButton>Add service</AddButton>
+          <AddButton data-cy="docker-add-service-button">Add service</AddButton>
         </Authorized>
       )}
     </div>
diff --git a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
index 5292b6f33..f89b38fc5 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/TasksDatatable.tsx
@@ -25,6 +25,7 @@ export function TasksDatatable({
       search={search}
       emptyContentLabel="No task matching filter."
       aria-label="Tasks table"
+      data-cy="docker-service-tasks-nested-datatable"
     />
   );
 }
diff --git a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx
index 8a3db86d7..b2c34ce55 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/TasksDatatable/task-column.tsx
@@ -30,6 +30,7 @@ function Cell({
       to="docker.containers.container"
       params={{ id: item.Container.Id, nodeName: item.Container.NodeName }}
       className="monospaced"
+      data-cy="docker-task-container-link"
     >
       {value}
     </Link>
@@ -38,6 +39,7 @@ function Cell({
       to="docker.tasks.task"
       params={{ id: item.Id }}
       className="monospaced"
+      data-cy="docker-task-link"
     >
       {value}
     </Link>
diff --git a/app/react/docker/services/ListView/ServicesDatatable/columns/index.ts b/app/react/docker/services/ListView/ServicesDatatable/columns/index.ts
index 599d71026..85204f23d 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/index.ts
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/index.ts
@@ -18,7 +18,11 @@ export function useColumns(isStackColumnVisible?: boolean) {
     () =>
       _.compact([
         buildExpandColumn<ServiceViewModel>(),
-        buildNameColumn<ServiceViewModel>('Name', 'docker.services.service'),
+        buildNameColumn<ServiceViewModel>(
+          'Name',
+          'docker.services.service',
+          'docker-services-name'
+        ),
         isStackColumnVisible &&
           columnHelper.accessor((item) => item.StackName || '-', {
             header: 'Stack',
diff --git a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
index 716903838..b7a43a478 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
@@ -45,9 +45,15 @@ export function ScaleForm({
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
           />
-          <Button color="none" icon={X} onClick={() => onClose()} />
+          <Button
+            color="none"
+            icon={X}
+            onClick={() => onClose()}
+            data-cy={`scale-service-cancel-button-${service.Name}`}
+          />
           <LoadingButton
             isLoading={mutation.isLoading}
+            data-cy={`scale-service-submit-button-${service.Name}`}
             disabled={
               values.replicas === service.Replicas ||
               values.replicas < 0 ||
diff --git a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton.tsx b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton.tsx
index 2f72f0b06..89d36ca20 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton.tsx
@@ -14,7 +14,12 @@ export function ScaleServiceButton({ service }: { service: ServiceViewModel }) {
   if (!isEdit) {
     return (
       <Authorized authorizations="DockerServiceUpdate">
-        <Button color="none" icon={Minimize2} onClick={() => setIsEdit(true)}>
+        <Button
+          color="none"
+          icon={Minimize2}
+          onClick={() => setIsEdit(true)}
+          data-cy="scale-service-button"
+        >
           Scale
         </Button>
       </Authorized>
diff --git a/app/react/docker/services/common/TaskTableQuickActions.tsx b/app/react/docker/services/common/TaskTableQuickActions.tsx
index 367c4bc27..28a3628a8 100644
--- a/app/react/docker/services/common/TaskTableQuickActions.tsx
+++ b/app/react/docker/services/common/TaskTableQuickActions.tsx
@@ -28,6 +28,7 @@ export function TaskTableQuickActions({
             to="docker.tasks.task.logs"
             params={{ id: taskId }}
             title="Logs"
+            data-cy="docker-task-logs-link"
           >
             <Icon icon={FileText} className="space-right" />
           </Link>
@@ -36,7 +37,12 @@ export function TaskTableQuickActions({
 
       {state.showQuickActionInspect && (
         <Authorized authorizations="DockerTaskInspect">
-          <Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect">
+          <Link
+            to="docker.tasks.task"
+            params={{ id: taskId }}
+            title="Inspect"
+            data-cy="docker-task-inspect-link"
+          >
             <Icon icon={Info} className="space-right" />
           </Link>
         </Authorized>
diff --git a/app/react/docker/services/common/update-service-modal.ts b/app/react/docker/services/common/update-service-modal.ts
index 299d3823c..e9107b99a 100644
--- a/app/react/docker/services/common/update-service-modal.ts
+++ b/app/react/docker/services/common/update-service-modal.ts
@@ -7,6 +7,7 @@ export async function confirmServiceForceUpdate(message: string) {
     message,
     confirmButton: buildConfirmButton('Update'),
     modalType: ModalType.Warn,
+    'data-cy': 'confirm-service-force-update',
   });
 
   return result ? { pullLatest: result.value } : undefined;
diff --git a/app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx b/app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx
index 1406c1a52..7ff0bcf15 100644
--- a/app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx
+++ b/app/react/docker/stacks/ListView/StacksDatatable/StacksDatatable.tsx
@@ -70,6 +70,7 @@ export function StacksDatatable({
         ),
       }}
       extendTableOptions={withGlobalFilter(globalFilterFn)}
+      data-cy="docker-stacks-datatable"
     />
   );
 }
diff --git a/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx b/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx
index 61b708684..a1cfb3b76 100644
--- a/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx
+++ b/app/react/docker/stacks/ListView/StacksDatatable/TableSettingsMenus.tsx
@@ -30,6 +30,7 @@ export function TableSettingsMenus({
         <Authorized authorizations="EndpointResourcesAccess">
           <Checkbox
             id="setting_all_orphaned_stacks"
+            data-cy="show-all-orphaned-stacks"
             label="Show all orphaned stacks"
             checked={tableState.showOrphanedStacks}
             onChange={(e) => {
diff --git a/app/react/docker/stacks/ListView/StacksDatatable/columns/name.tsx b/app/react/docker/stacks/ListView/StacksDatatable/columns/name.tsx
index a8f800fa1..5d0bcd65e 100644
--- a/app/react/docker/stacks/ListView/StacksDatatable/columns/name.tsx
+++ b/app/react/docker/stacks/ListView/StacksDatatable/columns/name.tsx
@@ -81,6 +81,7 @@ function NameLink({ item }: { item: DecoratedStack }) {
           external: true,
         }}
         title={name}
+        data-cy="docker-external-stack-link"
       >
         {name}
       </Link>
@@ -103,6 +104,7 @@ function NameLink({ item }: { item: DecoratedStack }) {
         orphanedRunning: item.OrphanedRunning,
       }}
       title={name}
+      data-cy={`docker-stack-link-${item.Name}`}
     >
       {name}
     </Link>
diff --git a/app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx b/app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx
index e339f991a..edb1c2a0d 100644
--- a/app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx
+++ b/app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx
@@ -65,6 +65,7 @@ export function NodesDatatable({
           />
         </TableSettingsMenu>
       )}
+      data-cy="swarm-nodes-datatable"
     />
   );
 }
diff --git a/app/react/docker/swarm/SwarmView/NodesDatatable/columns/name.tsx b/app/react/docker/swarm/SwarmView/NodesDatatable/columns/name.tsx
index ffb99a51a..1d1f5fc6f 100644
--- a/app/react/docker/swarm/SwarmView/NodesDatatable/columns/name.tsx
+++ b/app/react/docker/swarm/SwarmView/NodesDatatable/columns/name.tsx
@@ -31,7 +31,11 @@ function Cell({
   }
 
   return (
-    <Link to="docker.nodes.node" params={{ id: item.Id }}>
+    <Link
+      to="docker.nodes.node"
+      params={{ id: item.Id }}
+      data-cy={`node-link-${item.Id}`}
+    >
       {value}
     </Link>
   );
diff --git a/app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx b/app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx
index 9c75f743c..f236562aa 100644
--- a/app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx
+++ b/app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx
@@ -67,6 +67,7 @@ export function VolumesDatatable({
         table: 'volumes',
         isBrowseVisible,
       })}
+      data-cy="docker-volumes-datatable"
     />
   );
 }
diff --git a/app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx b/app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx
index 5b1dbe940..eff498af9 100644
--- a/app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx
+++ b/app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx
@@ -85,6 +85,7 @@ function Cell({
           nodeName: item.NodeName,
         }}
         className="monospaced"
+        data-cy={`volume-link-${name}`}
       >
         {truncate(name, 40)}
       </Link>
@@ -102,7 +103,9 @@ function Cell({
                 id: item.Id,
                 nodeName: item.NodeName,
               },
+              'data-cy': `volume-browse-link-${name}`,
             }}
+            data-cy={`volume-browse-button-${name}`}
           >
             browse
           </Button>
diff --git a/app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx b/app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx
index 79e795852..8b766bdde 100644
--- a/app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx
+++ b/app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx
@@ -54,6 +54,7 @@ export function AssociatedEdgeEnvironmentsSelector({
                   );
                 }
               }}
+              data-cy="edgeGroupCreate-associatedEndpointsTable"
             />
           </div>
         </div>
diff --git a/app/react/edge/components/EdgeAsyncIntervalsForm.tsx b/app/react/edge/components/EdgeAsyncIntervalsForm.tsx
index a20ef8615..a6c721069 100644
--- a/app/react/edge/components/EdgeAsyncIntervalsForm.tsx
+++ b/app/react/edge/components/EdgeAsyncIntervalsForm.tsx
@@ -96,6 +96,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.PingInterval}
+          data-cy="edge-checkin-ping-interval-select"
           name="PingInterval"
           onChange={handleChange}
           options={pingIntervalOptions}
@@ -110,6 +111,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.SnapshotInterval}
+          data-cy="edge-checkin-snapshot-interval-select"
           name="SnapshotInterval"
           onChange={handleChange}
           options={snapshotIntervalOptions}
@@ -124,6 +126,7 @@ export function EdgeAsyncIntervalsForm({
       >
         <Select
           value={values.CommandInterval}
+          data-cy="edge-checkin-command-interval-select"
           name="CommandInterval"
           onChange={handleChange}
           options={commandIntervalOptions}
diff --git a/app/react/edge/components/EdgeCheckInIntervalField.tsx b/app/react/edge/components/EdgeCheckInIntervalField.tsx
index d3cb38a8e..344bab940 100644
--- a/app/react/edge/components/EdgeCheckInIntervalField.tsx
+++ b/app/react/edge/components/EdgeCheckInIntervalField.tsx
@@ -56,6 +56,7 @@ export function EdgeCheckinIntervalField({
     >
       <Select
         value={value}
+        data-cy="edge-checkin-interval-select"
         onChange={(e) => {
           onChange(parseInt(e.currentTarget.value, 10));
         }}
diff --git a/app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx b/app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx
index 0f0c87ead..3aed3f6bd 100644
--- a/app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx
+++ b/app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx
@@ -55,10 +55,11 @@ export function EdgeScriptSettingsFieldset({
           >
             <Input
               type="text"
-              name="edgeIdGenerator"
               value={values.edgeIdGenerator}
+              name="edgeIdGenerator"
               id="edge-id-generator-input"
               onChange={(e) => setFieldValue(e.target.name, e.target.value)}
+              data-cy="edge-id-generator-input"
             />
           </FormControl>
           <div className="form-group">
@@ -89,6 +90,7 @@ export function EdgeScriptSettingsFieldset({
         <div className="col-sm-12">
           <SwitchField
             checked={values.allowSelfSignedCertificates}
+            data-cy="allow-self-signed-certs-switch"
             onChange={(value) =>
               setFieldValue('allowSelfSignedCertificates', value)
             }
diff --git a/app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx b/app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx
index f076bb080..94ec3e8a7 100644
--- a/app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx
+++ b/app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx
@@ -60,7 +60,9 @@ export function ScriptTabs({
         <>
           <Code>{cmd}</Code>
           <div className="mt-2">
-            <CopyButton copyText={cmd}>Copy</CopyButton>
+            <CopyButton copyText={cmd} data-cy="copy-edge-script-button">
+              Copy
+            </CopyButton>
           </div>
         </>
       ),
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx
index 3747ef229..c8dccd5dc 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/AssignmentDialog.tsx
@@ -71,6 +71,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned group"
+                        data-cy="override-group-checkbox"
                         id="overrideGroup"
                         bold={false}
                         checked={values.overrideGroup}
@@ -94,6 +95,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned edge groups"
+                        data-cy="override-edge-groups-checkbox"
                         bold={false}
                         id="overrideEdgeGroups"
                         checked={values.overrideEdgeGroups}
@@ -124,6 +126,7 @@ export function AssignmentDialog({
                     <div className="mt-2">
                       <Checkbox
                         label="Override pre-assigned tags"
+                        data-cy="override-tags-checkbox"
                         bold={false}
                         id="overrideTags"
                         checked={values.overrideTags}
@@ -137,11 +140,16 @@ export function AssignmentDialog({
               </div>
             </Modal.Body>
             <Modal.Footer>
-              <Button onClick={() => onSubmit()} color="default">
+              <Button
+                onClick={() => onSubmit()}
+                color="default"
+                data-cy="waiting-room-cancel-assignment-button"
+              >
                 Cancel
               </Button>
               <LoadingButton
                 isLoading={assignRelationsMutation.isLoading}
+                data-cy="waiting-room-associate-button"
                 loadingText="Associating..."
               >
                 Associate
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx
index b354f38dd..5666b0260 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx
@@ -42,6 +42,7 @@ export function CreatableSelector({
       isLoading={isLoading}
       isDisabled={isLoading}
       closeMenuOnSelect={false}
+      data-cy="edge-devices-assignment-selector"
     />
   );
 
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
index 8556b0074..7630c0991 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
@@ -53,6 +53,7 @@ export function GroupSelector() {
       isDisabled={createMutation.isLoading}
       placeholder="Select a group"
       isClearable
+      data-cy="edge-devices-assignment-selector"
     />
   );
 
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
index 7b0611146..c370807c7 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
@@ -2,6 +2,8 @@ import { Datatable as GenericDatatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 
+import { WaitingRoomEnvironment } from '../types';
+
 import { columns } from './columns';
 import { Filter } from './Filter';
 import { TableActions } from './TableActions';
@@ -26,7 +28,7 @@ export function Datatable() {
   });
 
   return (
-    <GenericDatatable
+    <GenericDatatable<WaitingRoomEnvironment>
       settingsManager={tableState}
       columns={columns}
       dataset={environments}
@@ -41,6 +43,7 @@ export function Datatable() {
       onPageChange={setPage}
       totalCount={totalCount}
       description={<Filter />}
+      data-cy="edge-devices-waiting-room-datatable"
     />
   );
 }
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx
index 2655858ca..1d5d894f6 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx
@@ -62,6 +62,7 @@ export function Filter() {
         value={filterStore.checkIn}
         options={checkInOptions}
         bindToBody
+        data-cy="edge-devices-check-in-filter"
       />
     </div>
   );
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx
index 98b2db24e..131f296f9 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/TableActions.tsx
@@ -38,6 +38,7 @@ export function TableActions({
       <DeleteButton
         onConfirmed={() => handleRemoveDevice(selectedRows)}
         disabled={selectedRows.length === 0}
+        data-cy="remove-device-button"
         confirmMessage="You're about to remove edge device(s) from waiting room, which will not be shown until next agent startup."
       >
         Remove Device
@@ -58,6 +59,7 @@ export function TableActions({
         <span>
           <Button
             onClick={() => handleAssociateAndAssign(selectedRows)}
+            data-cy="associate-and-assign-button"
             disabled={
               selectedRows.length === 0 || licenseOverused || !isPureAdmin
             }
@@ -84,6 +86,7 @@ export function TableActions({
         <span>
           <Button
             onClick={() => handleAssociateDevice(selectedRows)}
+            data-cy="associate-device-button"
             disabled={selectedRows.length === 0 || licenseOverused}
             icon={Check}
           >
diff --git a/app/react/edge/edge-devices/WaitingRoomView/WaitingRoomView.tsx b/app/react/edge/edge-devices/WaitingRoomView/WaitingRoomView.tsx
index 9f375fe21..8ee498b10 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/WaitingRoomView.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/WaitingRoomView.tsx
@@ -36,8 +36,13 @@ function WaitingRoomView() {
             <Alert color="warn">
               Associating all nodes in waiting room will exceed the node limit
               of your current license. Go to{' '}
-              <Link to="portainer.licenses">Licenses</Link> page to view the
-              current usage.
+              <Link
+                to="portainer.licenses"
+                data-cy="waitingRoom-portainerLicensesLink"
+              >
+                Licenses
+              </Link>{' '}
+              page to view the current usage.
             </Alert>
           </div>
         </div>
diff --git a/app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx b/app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx
index 8a7d98761..3fdc48ed2 100644
--- a/app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx
+++ b/app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx
@@ -32,6 +32,7 @@ export function EdgeGroupsDatatable() {
       isRowSelectable={({ original: item }) =>
         !(item.HasEdgeStack || item.HasEdgeJob || item.HasEdgeConfig)
       }
+      data-cy="edge-groups-datatable"
     />
   );
 }
diff --git a/app/react/edge/edge-groups/ListView/TableActions.tsx b/app/react/edge/edge-groups/ListView/TableActions.tsx
index 5d38e45b3..44d9744ed 100644
--- a/app/react/edge/edge-groups/ListView/TableActions.tsx
+++ b/app/react/edge/edge-groups/ListView/TableActions.tsx
@@ -20,9 +20,10 @@ export function TableActions({
         confirmMessage="Do you want to remove the selected Edge Group(s)?"
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
+        data-cy="remove-edge-group-button"
       />
 
-      <AddButton>Add Edge group</AddButton>
+      <AddButton data-cy="add-edge-group-button">Add Edge group</AddButton>
     </div>
   );
 
diff --git a/app/react/edge/edge-groups/ListView/columns/name.tsx b/app/react/edge/edge-groups/ListView/columns/name.tsx
index a92fb9b08..e4ce8b49f 100644
--- a/app/react/edge/edge-groups/ListView/columns/name.tsx
+++ b/app/react/edge/edge-groups/ListView/columns/name.tsx
@@ -23,7 +23,12 @@ function NameCell({
 
   return (
     <>
-      <Link to=".edit" params={{ groupId: item.Id }} title={name}>
+      <Link
+        to=".edit"
+        params={{ groupId: item.Id }}
+        title={name}
+        data-cy={`edge-group-link-${name}`}
+      >
         {name}
       </Link>
       {(item.HasEdgeJob || item.HasEdgeStack) && (
diff --git a/app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx b/app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx
index 68d520675..14dd5c2ca 100644
--- a/app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx
+++ b/app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx
@@ -57,6 +57,7 @@ export function ResultsDatatable({
         downloadLogs: onDownloadLogs,
         clearLogs: onClearLogs,
       })}
+      data-cy="edge-job-results-datatable"
     />
   );
 
diff --git a/app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx b/app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx
index 7edfc3b0b..36b22cdc8 100644
--- a/app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx
+++ b/app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx
@@ -41,10 +41,16 @@ function ActionsCell({
     case LogsStatus.Collected:
       return (
         <>
-          <Button onClick={() => tableMeta.downloadLogs(item.EndpointId)}>
+          <Button
+            onClick={() => tableMeta.downloadLogs(item.EndpointId)}
+            data-cy={`edge-job-download-logs-${item.Endpoint.Name}`}
+          >
             Download logs
           </Button>
-          <Button onClick={() => tableMeta.clearLogs(item.EndpointId)}>
+          <Button
+            onClick={() => tableMeta.clearLogs(item.EndpointId)}
+            data-cy={`edge-job-clear-logs-${item.Endpoint.Name}`}
+          >
             Clear logs
           </Button>
         </>
@@ -52,7 +58,10 @@ function ActionsCell({
     case LogsStatus.Idle:
     default:
       return (
-        <Button onClick={() => tableMeta.collectLogs(item.EndpointId)}>
+        <Button
+          onClick={() => tableMeta.collectLogs(item.EndpointId)}
+          data-cy={`edge-job-retrieve-logs-${item.Endpoint.Name}`}
+        >
           Retrieve logs
         </Button>
       );
diff --git a/app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx b/app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx
index 85095e335..32fd5f23b 100644
--- a/app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx
+++ b/app/react/edge/edge-jobs/ListView/EdgeJobsDatatable.tsx
@@ -29,6 +29,7 @@ export function EdgeJobsDatatable() {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} />
       )}
+      data-cy="edge-jobs-datatable"
     />
   );
 }
diff --git a/app/react/edge/edge-jobs/ListView/TableActions.tsx b/app/react/edge/edge-jobs/ListView/TableActions.tsx
index 88d74fa1c..fb82730f4 100644
--- a/app/react/edge/edge-jobs/ListView/TableActions.tsx
+++ b/app/react/edge/edge-jobs/ListView/TableActions.tsx
@@ -20,9 +20,10 @@ export function TableActions({
         confirmMessage="Do you want to remove the selected Edge Job(s)?"
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
+        data-cy="remove-edge-jobs-button"
       />
 
-      <AddButton>Add Edge job</AddButton>
+      <AddButton data-cy="add-edge-job-button">Add Edge job</AddButton>
     </div>
   );
 
diff --git a/app/react/edge/edge-jobs/ListView/columns.ts b/app/react/edge/edge-jobs/ListView/columns.ts
index cba54bbd3..c75d70cf6 100644
--- a/app/react/edge/edge-jobs/ListView/columns.ts
+++ b/app/react/edge/edge-jobs/ListView/columns.ts
@@ -9,7 +9,7 @@ import { EdgeJob } from '../types';
 const columnHelper = createColumnHelper<EdgeJob>();
 
 export const columns = [
-  buildNameColumn<EdgeJob>('Name', '.job'),
+  buildNameColumn<EdgeJob>('Name', '.job', 'edge-job-name'),
   columnHelper.accessor('CronExpression', {
     header: 'Cron Expression',
   }),
diff --git a/app/react/edge/edge-stacks/CreateView/NameField.tsx b/app/react/edge/edge-stacks/CreateView/NameField.tsx
index 27e9a9239..c38e646ef 100644
--- a/app/react/edge/edge-stacks/CreateView/NameField.tsx
+++ b/app/react/edge/edge-stacks/CreateView/NameField.tsx
@@ -24,6 +24,7 @@ export function NameField({
         onChange={(e) => onChange(e.target.value)}
         value={value}
         required
+        data-cy="edge-stack-create-name-input"
       />
     </FormControl>
   );
diff --git a/app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx b/app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx
index dd570614f..f6506c2bd 100644
--- a/app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx
+++ b/app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx
@@ -60,6 +60,7 @@ function Item({
       {option.select ? (
         <Select
           value={value}
+          data-cy={`env-var-select-${option.name}`}
           onChange={(e) => onChange(e.target.value)}
           options={option.select.map((o) => ({
             label: o.text,
@@ -74,6 +75,7 @@ function Item({
           onChange={(e) => onChange(e.target.value)}
           disabled={option.preset}
           id={inputId}
+          data-cy="env-var-input"
         />
       )}
     </FormControl>
diff --git a/app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx b/app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx
index 76f348a3d..f7b556ed3 100644
--- a/app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx
+++ b/app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx
@@ -50,6 +50,7 @@ export function TemplateSelector({
           onChange({ template, type } as SelectedTemplateValue);
         }}
         options={options}
+        data-cy="edge-stacks-create-template-selector"
       />
     </FormControl>
   );
diff --git a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx
index 28776e35e..94d477ce2 100644
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx
@@ -54,6 +54,7 @@ export function ComposeForm({
       )}
 
       <WebEditorForm
+        data-cy="compose-editor"
         value={values.content}
         yaml
         id="compose-editor"
diff --git a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
index c4787429d..85bf4f1f2 100644
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
@@ -159,6 +159,7 @@ function InnerForm({
               <div className="col-sm-12">
                 <SwitchField
                   label="Create an Edge stack webhook"
+                  data-cy="edge-stack-enable-webhook-switch"
                   checked={values.webhookEnabled}
                   labelClass="col-sm-3 col-lg-2"
                   onChange={(value) => setFieldValue('webhookEnabled', value)}
@@ -212,6 +213,7 @@ function InnerForm({
           <div className="col-sm-12">
             <LoadingButton
               className="!ml-0"
+              data-cy="update-stack-button"
               size="small"
               disabled={!isValid}
               isLoading={isSubmitting}
diff --git a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx
index 76d6b2406..962c178c9 100644
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx
@@ -273,6 +273,7 @@ function InnerForm({
       <FormSection title="Actions">
         <LoadingButton
           disabled={dirty || !isValid || isLoading}
+          data-cy="pull-and-update-stack-button"
           isLoading={isUpdateVersion && isLoading}
           loadingText="updating stack..."
         >
@@ -285,6 +286,7 @@ function InnerForm({
           isLoading={!isUpdateVersion && isLoading}
           loadingText="updating settings..."
           onClick={onUpdateSettingsClick}
+          data-cy="edge-stack-update-settings-button"
         >
           Update settings
         </LoadingButton>
diff --git a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx
index aab1504a3..2a7f658d8 100644
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx
@@ -20,6 +20,7 @@ export function KubernetesForm({
         <div className="col-sm-12">
           <SwitchField
             label="Use namespace(s) specified from manifest"
+            data-cy="use-manifest-namespaces-switch"
             tooltip="If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment"
             checked={values.useManifestNamespaces}
             onChange={(value) => setFieldValue('useManifestNamespaces', value)}
@@ -28,6 +29,7 @@ export function KubernetesForm({
       </div>
 
       <WebEditorForm
+        data-cy="kube-manifest-editor"
         value={values.content}
         yaml
         id="kube-manifest-editor"
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
index d34452ad1..170c485eb 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
@@ -25,8 +25,13 @@ export function EnvironmentActions({ environment }: Props) {
           to="edge.browse.containers"
           params={{ environmentId: environment.Id, edgeStackId }}
           className="!text-inherit hover:!no-underline"
+          data-cy="browse-snapshot-link"
         >
-          <Button color="none" title="Browse Snapshot">
+          <Button
+            color="none"
+            title="Browse Snapshot"
+            data-cy="browse-snapshot-button"
+          >
             <Icon icon={Search} className="searchIcon" />
           </Button>
         </Link>
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
index 955cc6f67..2ba754b5d 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
@@ -116,9 +116,11 @@ export function EnvironmentsDatatable() {
             value={statusFilter}
             onChange={(e) => setStatusFilter(e ?? undefined)}
             options={envStatusSelectOptions}
+            data-cy="edge-stacks-environments-status-filter"
           />
         </div>
       }
+      data-cy="edge-stacks-environments-datatable"
     />
   );
 }
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
index 0886155ce..cc714e369 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
@@ -34,7 +34,12 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
 
   return (
     <>
-      <Button color="none" title="Retrieve logs" onClick={handleCollectLogs}>
+      <Button
+        color="none"
+        title="Retrieve logs"
+        onClick={handleCollectLogs}
+        data-cy="edge-stack-logs-collect-button"
+      >
         <Icon
           icon={clsx({
             'file-text': !collecting,
@@ -44,6 +49,7 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
       </Button>
       <Button
         color="none"
+        data-cy="edge-stack-logs-download-button"
         title="Download logs"
         disabled={status !== 'collected'}
         onClick={handleDownloadLogs}
@@ -60,6 +66,7 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         title="Delete logs"
         disabled={status !== 'collected'}
         onClick={handleDeleteLogs}
+        data-cy="edge-stack-logs-delete-button"
       >
         <Icon
           icon={clsx({
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
index 34a48c8a4..2e6626158 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
@@ -30,7 +30,11 @@ export const columns = _.compact([
     cell({ row: { original: env } }) {
       const { to, params } = getDashboardRoute(env);
       return (
-        <Link to={to} params={params}>
+        <Link
+          to={to}
+          params={params}
+          data-cy={`edge-stack-environment-link-${env.Name}`}
+        >
           {env.Name}
         </Link>
       );
@@ -112,7 +116,10 @@ export const columns = _.compact([
     : []),
 ]);
 
-function ErrorCell({ getValue }: CellContext<EdgeStackEnvironment, string>) {
+function ErrorCell({
+  getValue,
+  row,
+}: CellContext<EdgeStackEnvironment, string>) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const value = getValue();
@@ -125,6 +132,7 @@ function ErrorCell({ getValue }: CellContext<EdgeStackEnvironment, string>) {
       color="none"
       className="flex cursor-pointer"
       onClick={() => setIsExpanded(!isExpanded)}
+      data-cy={`edge-stack-environment-error-${row.index}`}
     >
       <div className="pr-1 pt-0.5">
         <Icon icon={isExpanded ? ChevronDown : ChevronRight} />
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx
index 5bc0279c0..91c0ed84f 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx
@@ -23,6 +23,7 @@ export function DeploymentCounterLink({
         className="hover:no-underline"
         to="edge.stacks.edit"
         params={{ stackId, tab: 1, status: type }}
+        data-cy="deployment-counter-link"
       >
         <DeploymentCounter count={count} type={type} total={total} />
       </Link>
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx
index 69512e201..d3e720672 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksDatatable.tsx
@@ -47,6 +47,7 @@ export function EdgeStacksDatatable() {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} />
       )}
+      data-cy="edge-stacks-datatable"
     />
   );
 }
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx
index 579060dc6..ea7ebf820 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/TableActions.tsx
@@ -19,6 +19,7 @@ export function TableActions({
         disabled={selectedItems.length === 0}
         onConfirmed={() => handleRemove(selectedItems)}
         confirmMessage="Are you sure you want to remove the selected Edge stack(s)?"
+        data-cy="edgeStack-removeStackButton"
       />
 
       <AddButton data-cy="edgeStack-addStackButton">Add stack</AddButton>
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx
index 545d7108f..623b15648 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx
+++ b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx
@@ -17,7 +17,12 @@ import { DeploymentCounter } from './DeploymentCounter';
 const columnHelper = createColumnHelper<DecoratedEdgeStack>();
 
 export const columns = _.compact([
-  buildNameColumn<DecoratedEdgeStack>('Name', 'edge.stacks.edit', 'stackId'),
+  buildNameColumn<DecoratedEdgeStack>(
+    'Name',
+    'edge.stacks.edit',
+    'edge-stacks-name',
+    'stackId'
+  ),
   columnHelper.accessor(
     (item) => item.aggregatedStatus[StatusType.Acknowledged] || 0,
     {
@@ -102,6 +107,7 @@ export const columns = _.compact([
                   tab: 1,
                   status: StatusType.Error,
                 }}
+                data-cy={`edge-stacks-error-${row.original.Id}`}
               >
                 ({count}/{row.original.NumDeployments})
               </Link>
diff --git a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
index 0e01b9514..45726bc64 100644
--- a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
+++ b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
@@ -85,11 +85,15 @@ function InnerSelector({
       }}
       placeholder="Select one or multiple group(s)"
       closeMenuOnSelect={false}
+      data-cy="edge-stacks-groups-selector"
     />
   ) : (
     <div className="small text-muted">
       No Edge groups are available. Head over to the{' '}
-      <Link to="edge.groups">Edge groups view</Link> to create one.
+      <Link to="edge.groups" data-cy="edge-stacks-groups-view-link">
+        Edge groups view
+      </Link>{' '}
+      to create one.
     </div>
   );
 }
diff --git a/app/react/edge/edge-stacks/components/PrePullToggle.tsx b/app/react/edge/edge-stacks/components/PrePullToggle.tsx
index 5809aaafb..616dc8ca0 100644
--- a/app/react/edge/edge-stacks/components/PrePullToggle.tsx
+++ b/app/react/edge/edge-stacks/components/PrePullToggle.tsx
@@ -12,6 +12,7 @@ export function PrePullToggle({
       <div className="col-sm-12">
         <SwitchField
           checked={value}
+          data-cy="kube-edge-stack-pre-pull-switch"
           name="prePullImage"
           label="Pre-pull images"
           tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
diff --git a/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx b/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
index d125a25ac..f6d952201 100644
--- a/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
+++ b/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
@@ -75,6 +75,7 @@ export function PrivateRegistryFieldset({
             label="Use Credentials"
             labelClass="col-sm-3 col-lg-2"
             disabled={formInvalid}
+            data-cy="private-registry-use-credentials-switch"
           />
         </div>
       </div>
@@ -100,6 +101,7 @@ export function PrivateRegistryFieldset({
                   getOptionValue={(registry) => registry.Id.toString()}
                   onChange={(value) => onSelect(value?.Id)}
                   className="w-full"
+                  data-cy="private-registry-selector"
                 />
                 {method !== 'repository' && (
                   <Button
@@ -107,6 +109,7 @@ export function PrivateRegistryFieldset({
                     title="Reload"
                     icon={RefreshCw}
                     color="light"
+                    data-cy="private-registry-reload-button"
                   />
                 )}
               </div>
diff --git a/app/react/edge/edge-stacks/components/RetryDeployToggle.tsx b/app/react/edge/edge-stacks/components/RetryDeployToggle.tsx
index aff254ec7..236a0f362 100644
--- a/app/react/edge/edge-stacks/components/RetryDeployToggle.tsx
+++ b/app/react/edge/edge-stacks/components/RetryDeployToggle.tsx
@@ -12,6 +12,7 @@ export function RetryDeployToggle({
       <div className="col-sm-12">
         <SwitchField
           checked={value}
+          data-cy="edge-stack-retry-deploy-toggle"
           name="retryDeploy"
           label="Retry deployment"
           tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
diff --git a/app/react/kubernetes/DeployView/StackName/StackName.tsx b/app/react/kubernetes/DeployView/StackName/StackName.tsx
index bf1e20f29..1980a9d11 100644
--- a/app/react/kubernetes/DeployView/StackName/StackName.tsx
+++ b/app/react/kubernetes/DeployView/StackName/StackName.tsx
@@ -39,7 +39,11 @@ export function StackName({
           <br />
           You can leave the stack name empty, or even turn off Kubernetes Stacks
           functionality entirely via{' '}
-          <Link to="portainer.settings" target="_blank">
+          <Link
+            to="portainer.settings"
+            target="_blank"
+            data-cy="k8s-deploy-stack-input-settings-link"
+          >
             Kubernetes Settings
           </Link>
           .
@@ -71,6 +75,7 @@ export function StackName({
             onChange={setStackName}
             placeholder="e.g. myStack"
             inputId="stack_name"
+            data-cy="k8s-deploy-stack-input"
           />
         </div>
       </div>
diff --git a/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx b/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx
index bac747632..5cc01244e 100644
--- a/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx
+++ b/app/react/kubernetes/DeployView/StackName/StackNameLabelInsight.tsx
@@ -13,7 +13,11 @@ export function StackNameLabelInsight() {
         <>
           <br />
           Kubernetes Stacks functionality can be turned off entirely via{' '}
-          <Link to="portainer.settings" target="_blank">
+          <Link
+            to="portainer.settings"
+            target="_blank"
+            data-cy="k8s-deploy-settings-link"
+          >
             Kubernetes Settings
           </Link>
           .
diff --git a/app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx b/app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx
index ebf5ead1f..b6d09a105 100644
--- a/app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx
+++ b/app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx
@@ -40,6 +40,7 @@ export function AnnotationsBeTeaser() {
           message="Allows specifying of annotations on this resource."
           featureId={FeatureId.K8S_ANNOTATIONS}
           buttonClassName="!ml-0"
+          data-cy="annotations-be-teaser"
         />
       </div>
     </div>
diff --git a/app/react/kubernetes/annotations/AnnotationsForm.tsx b/app/react/kubernetes/annotations/AnnotationsForm.tsx
index 834e9a995..14a099e2a 100644
--- a/app/react/kubernetes/annotations/AnnotationsForm.tsx
+++ b/app/react/kubernetes/annotations/AnnotationsForm.tsx
@@ -46,10 +46,11 @@ export function AnnotationsForm({
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   handleAnnotationChange(i, 'Key', e.target.value)
                 }
+                data-cy={`annotation-key-${i}`}
               />
             </div>
             {annotationErrors?.[i]?.Key && (
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                 {annotationErrors[i]?.Key}
               </FormError>
             )}
@@ -66,10 +67,11 @@ export function AnnotationsForm({
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   handleAnnotationChange(i, 'Value', e.target.value)
                 }
+                data-cy={`annotation-value-${i}`}
               />
             </div>
             {annotationErrors?.[i]?.Value && (
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                 {annotationErrors[i]?.Value}
               </FormError>
             )}
@@ -77,6 +79,7 @@ export function AnnotationsForm({
           <div className="col-sm-3 !m-0 !pl-0">
             <Button
               size="small"
+              data-cy={`remove-annotation-${i}`}
               color="dangerlight"
               className="btn-only-icon !ml-0"
               type="button"
diff --git a/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx b/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
index 636ca8ae2..8a7fb6331 100644
--- a/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
+++ b/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
@@ -11,6 +11,7 @@ import { PageHeader } from '@@/PageHeader';
 import { Widget, WidgetBody } from '@@/Widget';
 import { Icon } from '@@/Icon';
 import { Button } from '@@/buttons';
+import { Input } from '@@/form-components/Input';
 
 interface StringDictionary {
   [index: string]: string;
@@ -129,7 +130,7 @@ export function ConsoleView() {
                   <span className="input-group-addon">
                     <Icon icon={TerminalIcon} className="mr-1" />
                   </span>
-                  <input
+                  <Input
                     type="text"
                     className="form-control"
                     placeholder="/bin/bash"
@@ -141,12 +142,14 @@ export function ConsoleView() {
                     // https://portainer.atlassian.net/browse/EE-5752
                     // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus
+                    data-cy="console-command-input"
                   />
                 </div>
               </div>
               <div className="row mt-4">
                 <Button
                   className="btn btn-primary !ml-0"
+                  data-cy="connect-console-button"
                   onClick={
                     connectionStatus === 'closed'
                       ? connectConsole
diff --git a/app/react/kubernetes/applications/CreateView/UpdateIngressPrompt.tsx b/app/react/kubernetes/applications/CreateView/UpdateIngressPrompt.tsx
index e2c1c91ad..8693a238a 100644
--- a/app/react/kubernetes/applications/CreateView/UpdateIngressPrompt.tsx
+++ b/app/react/kubernetes/applications/CreateView/UpdateIngressPrompt.tsx
@@ -35,13 +35,18 @@ function UpdateIngressPrompt({
 
         <SwitchField
           name="noMatch"
+          data-cy="kube-update-ingress-prompt-switch"
           label={inputLabel}
           checked={value}
           onChange={setValue}
         />
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={() => onSubmit({ noMatch: value })} color="primary">
+        <Button
+          onClick={() => onSubmit({ noMatch: value })}
+          color="primary"
+          data-cy="update-ingress-confirm-button"
+        >
           Update
         </Button>
       </Modal.Footer>
diff --git a/app/react/kubernetes/applications/CreateView/application-services/cluster-ip/ClusterIpServiceForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/cluster-ip/ClusterIpServiceForm.tsx
index e95ec33d3..f8627628d 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/cluster-ip/ClusterIpServiceForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/cluster-ip/ClusterIpServiceForm.tsx
@@ -50,6 +50,7 @@ export function ClusterIpServiceForm({
           <div className="text-muted vertical-center">ClusterIP</div>
           <Button
             icon={Trash2}
+            data-cy={`remove-service_${serviceIndex}`}
             color="dangerlight"
             className="!ml-0"
             onClick={() => {
@@ -174,6 +175,7 @@ export function ClusterIpServiceForm({
           <div className="flex">
             <Button
               icon={Plus}
+              data-cy={`add-port_${serviceIndex}`}
               color="default"
               className="!ml-0"
               onClick={() => {
diff --git a/app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabs.tsx b/app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabs.tsx
index 39f730812..0956ffa94 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabs.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/components/ServiceTabs.tsx
@@ -27,6 +27,7 @@ export function ServiceTabs({
         >
           <input
             type="radio"
+            data-cy="service-type-radio"
             name="widget-tabs"
             className="hidden"
             value={serviceTypeOptions[index].value}
diff --git a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx
index 215470d16..44ed2aaa7 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx
@@ -121,12 +121,14 @@ export function AppIngressPathForm({
               };
               onChangeIngressPath(newIngressPath);
             }}
+            data-cy="k8sAppCreate-ingressPathHostSelect"
           />
           <InputGroup.ButtonWrapper>
             <Button
               icon={RefreshCw}
               color="default"
               onClick={() => ingressesQuery.refetch()}
+              data-cy="k8sAppCreate-ingressPathHostRefreshButton"
             />
           </InputGroup.ButtonWrapper>
         </InputGroup>
@@ -138,6 +140,7 @@ export function AppIngressPathForm({
               to="kubernetes.ingresses.create"
               target="_blank"
               rel="noopener noreferrer"
+              data-cy="k8sAppCreate-ingressPathCreateIngressLink"
             >
               create an ingress
             </Link>
@@ -153,6 +156,7 @@ export function AppIngressPathForm({
           <InputGroup.Addon required>Path</InputGroup.Addon>
           <InputGroup.Input
             value={ingressPath?.Path ?? ''}
+            data-cy={`k8sAppCreate-ingressPathPathInput-${ingressPath?.Host}`}
             placeholder="/example"
             onChange={(e) => {
               const newIngressPath = {
@@ -174,6 +178,7 @@ export function AppIngressPathForm({
           size="medium"
           className="!ml-0"
           onClick={() => onRemoveIngressPath()}
+          data-cy="k8sAppCreate-removeIngressPathButton"
         />
       </div>
     </div>
diff --git a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx
index e52324646..3a0eb4f24 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx
@@ -115,6 +115,7 @@ export function AppIngressPathsForm({
               to="kubernetes.ingresses"
               target="_blank"
               rel="noopener noreferrer"
+              data-cy="applicationCreate-ingressesLink"
             >
               Ingresses screen
             </Link>{' '}
@@ -153,6 +154,7 @@ export function AppIngressPathsForm({
         <div className="flex w-full flex-wrap gap-2">
           <Button
             icon={Plus}
+            data-cy={`applicationCreate-addIngressPath-${serviceIndex}-${portIndex}`}
             className="!ml-0"
             size="small"
             color="default"
diff --git a/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServiceForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServiceForm.tsx
index 6e2efc200..8389796f0 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServiceForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServiceForm.tsx
@@ -55,6 +55,7 @@ export function LoadBalancerServiceForm({
           <div className="text-muted vertical-center">LoadBalancer</div>
           <Button
             icon={Trash2}
+            data-cy={`remove-service-${serviceIndex}`}
             color="dangerlight"
             className="!ml-0"
             onClick={() => {
@@ -213,6 +214,7 @@ export function LoadBalancerServiceForm({
           <div className="flex">
             <Button
               icon={Plus}
+              data-cy={`k8sAppCreate-addPortButton_${serviceIndex}`}
               color="default"
               className="!ml-0"
               onClick={() => {
diff --git a/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServicesForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServicesForm.tsx
index 9bcc97c8b..f512663ac 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServicesForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/load-balancer/LoadBalancerServicesForm.tsx
@@ -76,6 +76,7 @@ export function LoadBalancerServicesForm({
                     to="kubernetes.cluster.setup"
                     target="_blank"
                     rel="noopener noreferrer"
+                    data-cy="k8sAppCreate-clusterSetupLink"
                   >
                     Cluster Setup
                   </Link>{' '}
@@ -88,6 +89,7 @@ export function LoadBalancerServicesForm({
             <div className="flex">
               <Button
                 icon={RefreshCw}
+                data-cy="k8sAppCreate-refreshLoadBalancerButton"
                 color="default"
                 className="!ml-0"
                 onClick={() => loadBalancerEnabledQuery.refetch()}
diff --git a/app/react/kubernetes/applications/CreateView/application-services/node-port/NodePortServiceForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/node-port/NodePortServiceForm.tsx
index bdcbf7fea..53d19ec5d 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/node-port/NodePortServiceForm.tsx
+++ b/app/react/kubernetes/applications/CreateView/application-services/node-port/NodePortServiceForm.tsx
@@ -56,6 +56,7 @@ export function NodePortServiceForm({
           <div className="text-muted vertical-center">NodePort</div>
           <Button
             icon={Trash2}
+            data-cy={`remove-service-${serviceIndex}`}
             color="dangerlight"
             className="!ml-0"
             onClick={() => {
@@ -214,6 +215,7 @@ export function NodePortServiceForm({
           <div className="flex">
             <Button
               icon={Plus}
+              data-cy={`k8sAppCreate-addNodePortButton_${serviceIndex}`}
               color="default"
               className="!ml-0"
               onClick={() => {
diff --git a/app/react/kubernetes/applications/DetailsView/AppYAMLEditor/ApplicationYAMLEditor.tsx b/app/react/kubernetes/applications/DetailsView/AppYAMLEditor/ApplicationYAMLEditor.tsx
index b14c3dd72..818b06391 100644
--- a/app/react/kubernetes/applications/DetailsView/AppYAMLEditor/ApplicationYAMLEditor.tsx
+++ b/app/react/kubernetes/applications/DetailsView/AppYAMLEditor/ApplicationYAMLEditor.tsx
@@ -35,6 +35,7 @@ export function ApplicationYAMLEditor() {
               identifier="application-yaml"
               data={fullApplicationYaml}
               hideMessage
+              data-cy="application-yaml"
             />
           </WidgetBody>
         </Widget>
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx
index 8e8fc67ae..33e2a0dad 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx
@@ -60,6 +60,7 @@ export function ApplicationContainersDatatable() {
       titleIcon={Server}
       getRowId={(row) => row.podName} // use pod name because it's unique (name is not unique)
       disableSelect
+      data-cy="k8s-application-containers-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx
index dcf596170..d3b06ca52 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx
@@ -18,6 +18,7 @@ export function getActions(isServerMetricsEnabled: boolean) {
             className="flex items-center gap-1"
             to="kubernetes.applications.application.stats"
             params={{ pod: container.podName, container: container.name }}
+            data-cy={`application-container-stats-${container.name}`}
           >
             <Icon icon={BarChart} />
             Stats
@@ -27,6 +28,7 @@ export function getActions(isServerMetricsEnabled: boolean) {
           className="flex items-center gap-1"
           to="kubernetes.applications.application.logs"
           params={{ pod: container.podName, container: container.name }}
+          data-cy={`application-container-logs-${container.name}`}
         >
           <Icon icon={FileText} />
           Logs
@@ -37,6 +39,7 @@ export function getActions(isServerMetricsEnabled: boolean) {
               className="flex items-center gap-1"
               to="kubernetes.applications.application.console"
               params={{ pod: container.podName, container: container.name }}
+              data-cy={`application-container-console-${container.name}`}
             >
               <Icon icon={Terminal} />
               Console
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/node.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/node.tsx
index 4bd45fa99..677dbdf9f 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/node.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/node.tsx
@@ -14,7 +14,11 @@ export const node = columnHelper.accessor('nodeName', {
         childrenUnauthorized={nodeName}
         adminOnlyCE
       >
-        <Link to="kubernetes.cluster.node" params={{ nodeName }}>
+        <Link
+          to="kubernetes.cluster.node"
+          params={{ nodeName }}
+          data-cy={`application-container-node-${nodeName}`}
+        >
           <div className="max-w-xs truncate" title={nodeName}>
             {nodeName}
           </div>
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx
index fcb705263..8f0d30ec4 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationDetailsWidget.tsx
@@ -67,7 +67,10 @@ export function ApplicationDetailsWidget() {
             {!isSystemNamespace && (
               <div className="mb-4 flex flex-wrap gap-2">
                 <Authorized authorizations="K8sApplicationDetailsW">
-                  <Link to="kubernetes.applications.application.edit">
+                  <Link
+                    to="kubernetes.applications.application.edit"
+                    data-cy="k8sAppDetail-editAppLink"
+                  >
                     <Button
                       type="button"
                       color="light"
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
index 65f306ae3..c1b7435f2 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationEnvVarsTable.tsx
@@ -98,6 +98,7 @@ export function ApplicationEnvVarsTable({ namespace, app }: Props) {
                           namespace,
                         }}
                         className="flex items-center"
+                        data-cy={`configmap-link-${envVar.resourseName}`}
                       >
                         <Icon
                           icon={envVar.type === 'configMap' ? FileCode : Lock}
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
index d22e7e701..9bbd2808e 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
@@ -48,6 +48,7 @@ export function ApplicationIngressesTable({
                 <Link
                   to="kubernetes.ingresses.edit"
                   params={{ name: ingressPath.ingressName, namespace }}
+                  data-cy={`ingress-link-${ingressPath.ingressName}`}
                 >
                   {ingressPath.ingressName}
                 </Link>
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationPersistentDataTable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationPersistentDataTable.tsx
index 0f5944c09..b77e40171 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationPersistentDataTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationPersistentDataTable.tsx
@@ -109,6 +109,7 @@ export function ApplicationPersistentDataTable({
                             name: `${persistedFolder.volume.persistentVolumeClaim.claimName}-${persistedFolder.volumeMount?.pod?.metadata?.name}`,
                             namespace,
                           }}
+                          data-cy={`k8sAppDetail-volMountPath-${index}`}
                         >
                           <Icon icon={Database} className="!mr-1 shrink-0" />
                           {`${persistedFolder.volume.persistentVolumeClaim.claimName}-${persistedFolder.volumeMount?.pod?.metadata?.name}`}
@@ -146,6 +147,7 @@ export function ApplicationPersistentDataTable({
                               .claimName,
                             namespace,
                           }}
+                          data-cy={`k8sAppDetail-volMountPath-${index}`}
                         >
                           <Icon icon={Database} className="!mr-1 shrink-0" />
                           {
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationVolumeConfigsTable.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationVolumeConfigsTable.tsx
index 45e43b9c7..bd5911f53 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationVolumeConfigsTable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationVolumeConfigsTable.tsx
@@ -81,6 +81,7 @@ export function ApplicationVolumeConfigsTable({ namespace, app }: Props) {
                     className="flex items-center"
                     to="kubernetes.secrets.secret"
                     params={{ name: volumeConfigName, namespace }}
+                    data-cy={`secret-link-${volumeConfigName}`}
                   >
                     <Icon icon={Plus} className="!mr-1" />
                     {volumeConfigName}
@@ -90,6 +91,7 @@ export function ApplicationVolumeConfigsTable({ namespace, app }: Props) {
                     className="flex items-center"
                     to="kubernetes.configmaps.configmap"
                     params={{ name: volumeConfigName, namespace }}
+                    data-cy={`config-link-${volumeConfigName}`}
                   >
                     <Icon icon={Plus} className="!mr-1" />
                     {volumeConfigName}
diff --git a/app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx b/app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx
index c868f00f4..e9f964cc9 100644
--- a/app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx
+++ b/app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx
@@ -100,7 +100,7 @@ export function ApplicationSummaryWidget() {
               <>
                 {failedCreateCondition && (
                   <div
-                    className="flex gap-1 items-start alert alert-danger mb-2"
+                    className="alert alert-danger mb-2 flex items-start gap-1"
                     data-cy="k8sAppDetail-failedCreateMessage"
                   >
                     <div className="mt-0.5">
@@ -118,7 +118,7 @@ export function ApplicationSummaryWidget() {
                     </div>
                   </div>
                 )}
-                <DetailsTable>
+                <DetailsTable dataCy="k8sAppDetail-table">
                   <tr>
                     <td>Name</td>
                     <td>
@@ -153,6 +153,7 @@ export function ApplicationSummaryWidget() {
                       >
                         <Link
                           to="kubernetes.resourcePools.resourcePool"
+                          data-cy="k8sAppDetail-namespaceLink"
                           params={{ id: namespace }}
                         >
                           {namespace}
diff --git a/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx b/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx
index 6dbc71ef7..2e2f57a9b 100644
--- a/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx
+++ b/app/react/kubernetes/applications/DetailsView/PlacementsDatatable/PlacementsDatatable.tsx
@@ -68,6 +68,7 @@ export function PlacementsDatatable({
       renderSubRow={(row) => (
         <SubRow node={row.original} cellCount={row.getVisibleCells().length} />
       )}
+      data-cy="kubernetes-application-placements-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
index b128501a2..74f41b95e 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
@@ -72,7 +72,7 @@ export function ApplicationsStacksDatatable({
       emptyContentLabel="No stack available."
       description={
         <div className="w-full">
-          <div className="min-w-[140px] float-right mr-2">
+          <div className="float-right mr-2 min-w-[140px]">
             <NamespaceFilter
               namespaces={namespaces}
               value={namespace}
@@ -96,6 +96,7 @@ export function ApplicationsStacksDatatable({
         />
       )}
       getRowId={(row) => `${row.Name}-${row.ResourcePool}`}
+      data-cy="applications-stacks-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/NamespaceFilter.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/NamespaceFilter.tsx
index 283983afa..c6b2b6f7d 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/NamespaceFilter.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/NamespaceFilter.tsx
@@ -56,6 +56,7 @@ export function NamespaceFilter({
       </InputGroup.Addon>
       <Select
         className="!h-[30px] py-1"
+        data-cy="app-stacks-namespace-filter"
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         options={[
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx
index d45a1a7ff..038a90d14 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx
@@ -31,6 +31,7 @@ export function SubRows({
               <Link
                 to="kubernetes.applications.application"
                 params={{ name: app.Name, namespace: app.ResourcePool }}
+                data-cy={`app-stack-application-link-${app.Name}`}
               >
                 {app.Name}
               </Link>
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
index d6174a6b1..b9db1842f 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
@@ -21,13 +21,14 @@ export const columns = [
   columnHelper.accessor('ResourcePool', {
     id: 'namespace',
     header: 'Namespace',
-    cell: ({ getValue }) => {
+    cell: ({ getValue, row }) => {
       const value = getValue();
       return (
         <div className="flex gap-2">
           <Link
             to="kubernetes.resourcePools.resourcePool"
             params={{ id: value }}
+            data-cy={`app-stack-namespace-link-${row.original.Name}`}
           >
             {value}
           </Link>
@@ -52,6 +53,7 @@ export const columns = [
         to="kubernetes.stacks.stack.logs"
         params={{ namespace: item.ResourcePool, name: item.Name }}
         className="flex items-center gap-1"
+        data-cy={`app-stack-logs-link-${item.Name}`}
       >
         <Icon icon={FileText} />
         Logs
diff --git a/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx b/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx
index 741392c3e..16a0cd5ce 100644
--- a/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx
+++ b/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx
@@ -29,6 +29,7 @@ export function AutoScalingFormSection({
       {!isMetricsEnabled && <NoMetricsServerWarning />}
       <SwitchField
         disabled={!isMetricsEnabled}
+        data-cy="k8sAppCreate-autoScaleSwitch"
         label="Enable auto scaling for this application"
         labelClass="col-sm-3 col-lg-2"
         checked={values.isUsed}
@@ -50,9 +51,9 @@ export function AutoScalingFormSection({
         }}
       />
       {values.isUsed && (
-        <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-x-4 gap-y-2 my-3">
-          <div className="flex flex-col min-w-fit">
-            <label htmlFor="min-instances" className="font-normal text-xs">
+        <div className="my-3 grid w-full grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-3">
+          <div className="flex min-w-fit flex-col">
+            <label htmlFor="min-instances" className="text-xs font-normal">
               Minimum instances
             </label>
             <Input
@@ -71,8 +72,8 @@ export function AutoScalingFormSection({
             />
             {errors?.minReplicas && <FormError>{errors.minReplicas}</FormError>}
           </div>
-          <div className="flex flex-col min-w-fit">
-            <label htmlFor="max-instances" className="font-normal text-xs">
+          <div className="flex min-w-fit flex-col">
+            <label htmlFor="max-instances" className="text-xs font-normal">
               Maximum instances
             </label>
             <Input
@@ -90,10 +91,10 @@ export function AutoScalingFormSection({
             />
             {errors?.maxReplicas && <FormError>{errors.maxReplicas}</FormError>}
           </div>
-          <div className="flex flex-col min-w-fit">
+          <div className="flex min-w-fit flex-col">
             <label
               htmlFor="cpu-threshold"
-              className="font-normal text-xs flex items-center"
+              className="flex items-center text-xs font-normal"
             >
               Target CPU usage (<b>%</b>)
               <Tooltip message="The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances." />
@@ -135,7 +136,10 @@ function NoMetricsServerWarning() {
       {isAdmin && (
         <>
           Server metrics features must be enabled in the{' '}
-          <Link to="kubernetes.cluster.setup">
+          <Link
+            to="kubernetes.cluster.setup"
+            data-cy="environment-configuration-view"
+          >
             environment configuration view
           </Link>
           .
diff --git a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection.tsx b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection.tsx
index fad3cdb12..84a9fd5e0 100644
--- a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection.tsx
+++ b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection.tsx
@@ -46,8 +46,7 @@ export function ConfigMapsFormSection({
         onChange={onChange}
         errors={errors}
         isDeleteButtonHidden
-        deleteButtonDataCy="k8sAppCreate-configRemoveButton"
-        addButtonDataCy="k8sAppCreate-configAddButton"
+        data-cy="k8sAppCreate-config"
         disabled={configMaps.length === 0}
         addButtonError={
           configMaps.length === 0
diff --git a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx
index 694a864de..6c51cabf8 100644
--- a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx
+++ b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx
@@ -74,6 +74,7 @@ export function ConfigurationItem({
               className={clsx('!ml-0', { active: !item.overriden })}
               onClick={() => onToggleOverride(false)}
               icon={RotateCw}
+              data-cy={`k8sAppCreate-add${configurationType}AutoButton_${index}`}
             >
               Auto
             </Button>
@@ -83,6 +84,7 @@ export function ConfigurationItem({
               className={clsx('!ml-0 mr-1', { active: item.overriden })}
               onClick={() => onToggleOverride(true)}
               icon={List}
+              data-cy={`k8sAppCreate-add${configurationType}OverrideButton_${index}`}
             >
               Override
             </Button>
@@ -92,8 +94,9 @@ export function ConfigurationItem({
           color="dangerlight"
           size="medium"
           onClick={onRemoveItem}
-          className="!ml-0 vertical-center btn-only-icon"
+          className="vertical-center btn-only-icon !ml-0"
           icon={Trash2}
+          data-cy={`k8sAppCreate-remove${configurationType}Button_${index}`}
         />
       </div>
       {!item.overriden && (
diff --git a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationKey.tsx b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationKey.tsx
index 377ff8f84..fda31c3dd 100644
--- a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationKey.tsx
+++ b/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationKey.tsx
@@ -36,10 +36,15 @@ export function ConfigurationData({
     ? overrideKeysErrors[keyIndex]
     : undefined;
   return (
-    <div className="flex items-start gap-x-2 gap-y-2 flex-wrap">
+    <div className="flex flex-wrap items-start gap-x-2 gap-y-2">
       <InputGroup size="small" className="min-w-[250px]">
         <InputGroup.Addon>Key</InputGroup.Addon>
-        <InputGroup.Input type="text" value={value.key} disabled />
+        <InputGroup.Input
+          type="text"
+          value={value.key}
+          disabled
+          data-cy={`k8sAppCreate-${dataCyType}KeyInput_${configurationIndex}_${keyIndex}`}
+        />
       </InputGroup>
       <InputGroup size="small">
         <InputGroup.ButtonWrapper>
diff --git a/app/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection.tsx b/app/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection.tsx
index 5f47ea199..2262550b1 100644
--- a/app/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection.tsx
+++ b/app/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection.tsx
@@ -46,8 +46,7 @@ export function SecretsFormSection({
         onChange={onChange}
         errors={errors}
         isDeleteButtonHidden
-        deleteButtonDataCy="k8sAppCreate-secretRemoveButton"
-        addButtonDataCy="k8sAppCreate-secretAddButton"
+        data-cy="k8sAppCreate-secret"
         disabled={secrets.length === 0}
         addButtonError={
           secrets.length === 0
diff --git a/app/react/kubernetes/applications/components/EditYamlFormSection.tsx b/app/react/kubernetes/applications/components/EditYamlFormSection.tsx
index 889788769..3d6c4d9a5 100644
--- a/app/react/kubernetes/applications/components/EditYamlFormSection.tsx
+++ b/app/react/kubernetes/applications/components/EditYamlFormSection.tsx
@@ -29,6 +29,7 @@ export function EditYamlFormSection({
   return (
     <div>
       <WebEditorForm
+        data-cy="k8s-yaml-editor"
         value={values}
         readonly={!isAllowedToEdit}
         titleContent={<TitleContent isComposeFormat={isComposeFormat} />}
diff --git a/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx b/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx
index 9ed9c90d0..14290977c 100644
--- a/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx
+++ b/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx
@@ -44,7 +44,7 @@ export function PersistedFolderItem({
   const formikError = isErrorType(error) ? error : undefined;
 
   return (
-    <div className="flex items-start flex-wrap gap-x-2 gap-y-2">
+    <div className="flex flex-wrap items-start gap-x-2 gap-y-2">
       <div>
         <InputGroup
           size="small"
@@ -99,7 +99,7 @@ export function PersistedFolderItem({
             <InputGroup
               size="small"
               className={clsx(
-                'min-w-fit flex',
+                'flex min-w-fit',
                 item.needsDeletion && 'striked'
               )}
             >
@@ -107,7 +107,7 @@ export function PersistedFolderItem({
                 Requested size
               </InputGroup.Addon>
               <Input
-                className="!rounded-none -mr-[1px] !w-20"
+                className="-mr-[1px] !w-20 !rounded-none"
                 type="number"
                 placeholder="e.g. 20"
                 min="0"
diff --git a/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFoldersFormSection.tsx b/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFoldersFormSection.tsx
index 128eb2012..5581ed473 100644
--- a/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFoldersFormSection.tsx
+++ b/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFoldersFormSection.tsx
@@ -61,8 +61,7 @@ export function PersistedFoldersFormSection({
           isEdit && applicationValues.ApplicationType === 'StatefulSet'
         }
         canUndoDelete={isEdit}
-        deleteButtonDataCy="k8sAppCreate-persistentFolderRemoveButton"
-        addButtonDataCy="k8sAppCreate-persistentFolderAddButton"
+        data-cy="k8sAppCreate-persistentFolder"
         disabled={storageClasses.length === 0}
         addButtonError={getAddButtonError(storageClasses)}
         isAddButtonHidden={!isAddPersistentFolderButtonShown}
diff --git a/app/react/kubernetes/applications/components/PlacementFormSection/PlacementFormSection.tsx b/app/react/kubernetes/applications/components/PlacementFormSection/PlacementFormSection.tsx
index be1685946..099a19f96 100644
--- a/app/react/kubernetes/applications/components/PlacementFormSection/PlacementFormSection.tsx
+++ b/app/react/kubernetes/applications/components/PlacementFormSection/PlacementFormSection.tsx
@@ -42,7 +42,7 @@ export function PlacementFormSection({ values, onChange, errors }: Props) {
             following placement rules. Placement rules are based on node labels.
           </TextTip>
         )}
-        <InputList
+        <InputList<Placement>
           value={values.placements}
           onChange={(placements) => onChange({ ...values, placements })}
           renderItem={(item, onChange, index, error) => (
@@ -63,7 +63,7 @@ export function PlacementFormSection({ values, onChange, errors }: Props) {
           errors={errors?.placements}
           addLabel="Add rule"
           canUndoDelete
-          deleteButtonDataCy="k8sAppCreate-deletePlacementButton"
+          data-cy="k8sAppCreate-placement"
           disabled={Object.keys(availableNodeLabels).length === 0}
           addButtonError={
             Object.keys(availableNodeLabels).length === 0
diff --git a/app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx b/app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx
index e683e1390..b3ec7ccdf 100644
--- a/app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx
+++ b/app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx
@@ -32,7 +32,7 @@ export function PlacementItem({
   return (
     <div className="w-full">
       <div className="flex w-full gap-2">
-        <div className="basis-1/2 grow">
+        <div className="grow basis-1/2">
           <Select
             options={labelOptions}
             value={{ label: item.label, value: item.label }}
@@ -54,7 +54,7 @@ export function PlacementItem({
             <FormError>{placementError.label}</FormError>
           )}
         </div>
-        <div className="basis-1/2 grow">
+        <div className="grow basis-1/2">
           <Select
             options={valueOptions}
             value={valueOptions?.find((option) => option.value === item.value)}
diff --git a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx.rej b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx.rej
new file mode 100644
index 000000000..8866d8e9c
--- /dev/null
+++ b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx.rej
@@ -0,0 +1,13 @@
+diff a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/EnableMetricsInput.tsx	(rejected hunks)
+@@ -103,7 +103,10 @@ export function EnableMetricsInput({ value, error, environmentId }: Props) {
+             <TextTip color="red" icon={XCircle}>
+               Unable to reach metrics API. You can enable the metrics-server
+               addon in the{' '}
+-              <Link to="kubernetes.cluster">Cluster Details view</Link>.
++              <Link to="kubernetes.cluster" data-cy="cluster-details-view-link">
++                Cluster Details view
++              </Link>
++              .
+             </TextTip>
+           )}
+           {metricsFound === true && (
diff --git a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageClassDatatable.tsx b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageClassDatatable.tsx
index b64d7daa4..3b6a1bc34 100644
--- a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageClassDatatable.tsx
@@ -37,7 +37,7 @@ export function StorageClassDatatable({ storageClassValues }: Props) {
                           checked
                         )
                       }
-                      className="mr-2 mb-0"
+                      className="mb-0 mr-2"
                       id={`kubeSetup-storageToggle${storageClassValue.Name}`}
                       name={`kubeSetup-storageToggle${storageClassValue.Name}`}
                       data-cy={`kubeSetup-storageToggle${storageClassValue.Name}`}
@@ -68,7 +68,7 @@ export function StorageClassDatatable({ storageClassValues }: Props) {
                           checked
                         )
                       }
-                      className="mr-2 mb-0"
+                      className="mb-0 mr-2"
                       data-cy={`kubeSetup-storageExpansionToggle${storageClassValue.Name}`}
                       id={`kubeSetup-storageExpansionToggle${storageClassValue.Name}`}
                       name={`kubeSetup-storageExpansionToggle${storageClassValue.Name}`}
diff --git a/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx b/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx
index 7c6b6742b..a3990c55f 100644
--- a/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx
+++ b/app/react/kubernetes/cluster/HomeView/NodesDatatable/NodesDatatable.tsx
@@ -65,6 +65,7 @@ export function NodesDatatable() {
           />
         </TableSettingsMenu>
       )}
+      data-cy="k8s-nodes-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/actions.tsx b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/actions.tsx
index 2a940b26a..422deef7b 100644
--- a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/actions.tsx
+++ b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/actions.tsx
@@ -38,6 +38,7 @@ function ActionsCell({
           to="kubernetes.cluster.node.stats"
           params={{ nodeName }}
           className="flex items-center p-1"
+          data-cy="nodeStatsButton"
         >
           <Icon icon={BarChart} />
         </Link>
diff --git a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
index 748b9cdaa..4faa92143 100644
--- a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
@@ -25,7 +25,11 @@ function NameCell({
         childrenUnauthorized={nodeName}
         adminOnlyCE
       >
-        <Link to="kubernetes.cluster.node" params={{ nodeName }}>
+        <Link
+          to="kubernetes.cluster.node"
+          params={{ nodeName }}
+          data-cy={`node-name-link-${nodeName}`}
+        >
           {nodeName}
         </Link>
       </Authorized>
diff --git a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx
index 140561bd8..f33154a8c 100644
--- a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx
+++ b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx
@@ -51,6 +51,7 @@ export function NodeApplicationsDatatable({
           />
         </TableSettingsMenu>
       )}
+      data-cy="node-applications-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
index 8e7affa47..34d94664b 100644
--- a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
+++ b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
@@ -24,6 +24,7 @@ function Cell({
       <Link
         to="kubernetes.applications.application"
         params={{ name: item.Name, namespace: item.ResourcePool }}
+        data-cy={`application-link-${item.Name}`}
       >
         {item.Name}
       </Link>
diff --git a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx
index 807494d75..cd275c562 100644
--- a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx
+++ b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx
@@ -26,6 +26,7 @@ export function useColumns(areStacksVisible: boolean) {
               <Link
                 to="kubernetes.resourcePools.resourcePool"
                 params={{ id: namespace }}
+                data-cy={`namespace-link-${namespace}`}
               >
                 {namespace}
               </Link>
diff --git a/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx b/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
index 714c02042..3a9bac7a1 100644
--- a/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
+++ b/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
@@ -51,8 +51,10 @@ export function AccessTable({
             </>
           }
           onConfirmed={() => onRemove(selectedItems)}
+          data-cy="remove-registry-access-button"
         />
       )}
+      data-cy="registry-access-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx b/app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx
index 087d1c5b0..57c650221 100644
--- a/app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx
+++ b/app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx
@@ -12,7 +12,7 @@ interface Props {
   value: string[];
   onChange(value: string[]): void;
   namespaces: Namespace[];
-  dataCy?: string;
+  dataCy: string;
   inputId?: string;
   placeholder?: string;
 }
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
index 48d15a1c1..e691157d2 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
@@ -50,6 +50,7 @@ export function IngressClassDatatable({
         getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
         renderTableActions={(selectedRows) => renderTableActions(selectedRows)}
         description={renderIngressClassDescription()}
+        data-cy="ingress-class-datatable"
       />
     </div>
   );
@@ -59,6 +60,7 @@ export function IngressClassDatatable({
       <div className="flex items-start">
         <ButtonGroup>
           <Button
+            data-cy="disallow-ingress-controllers-button"
             disabled={
               selectedRows.filter((row) => row.Availability === true).length ===
               0
@@ -72,6 +74,7 @@ export function IngressClassDatatable({
             Disallow selected
           </Button>
           <Button
+            data-cy="allow-ingress-controllers-button"
             disabled={
               selectedRows.filter((row) => row.Availability === false)
                 .length === 0
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx
index a7f647432..921115766 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatableAngular.tsx
@@ -105,6 +105,7 @@ export function IngressClassDatatableAngular({
         getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
         renderTableActions={(selectedRows) => renderTableActions(selectedRows)}
         description={renderIngressClassDescription()}
+        data-cy="k8s-ingress-classes-datatable"
       />
     </div>
   );
@@ -127,6 +128,7 @@ export function IngressClassDatatableAngular({
                 false
               )
             }
+            data-cy="k8s-disallow-selected-ingress-controllers-button"
           >
             Disallow selected
           </Button>
@@ -144,6 +146,7 @@ export function IngressClassDatatableAngular({
                 true
               )
             }
+            data-cy="k8s-allow-selected-ingress-controllers-button"
           >
             Allow selected
           </Button>
diff --git a/app/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable.tsx b/app/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable.tsx
index 92bf92346..8e0a856e7 100644
--- a/app/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable.tsx
+++ b/app/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable.tsx
@@ -21,12 +21,14 @@ export function IntegratedAppsDatatable({
   isLoading,
   tableKey,
   tableTitle,
+  dataCy,
 }: {
   dataset: Array<IntegratedApp>;
   onRefresh: () => void;
   isLoading: boolean;
   tableKey: string;
   tableTitle: string;
+  dataCy: string;
 }) {
   const tableState = useTableStateWithStorage<TableSettings>(
     tableKey,
@@ -54,6 +56,7 @@ export function IntegratedAppsDatatable({
           />
         </TableSettingsMenu>
       )}
+      data-cy={dataCy}
     />
   );
 }
diff --git a/app/react/kubernetes/components/IntegratedAppsDatatable/columns.name.tsx b/app/react/kubernetes/components/IntegratedAppsDatatable/columns.name.tsx
index fec471525..118f9cbae 100644
--- a/app/react/kubernetes/components/IntegratedAppsDatatable/columns.name.tsx
+++ b/app/react/kubernetes/components/IntegratedAppsDatatable/columns.name.tsx
@@ -15,6 +15,7 @@ function Cell({ row: { original: item } }: CellContext<IntegratedApp, string>) {
     <Link
       to="kubernetes.applications.application"
       params={{ name: item.Name, namespace: item.ResourcePool }}
+      data-cy={`application-link-${item.Name}`}
     >
       {item.Name}
     </Link>
diff --git a/app/react/kubernetes/components/YAMLInspector.tsx b/app/react/kubernetes/components/YAMLInspector.tsx
index 3f8df9095..4808df40e 100644
--- a/app/react/kubernetes/components/YAMLInspector.tsx
+++ b/app/react/kubernetes/components/YAMLInspector.tsx
@@ -3,6 +3,7 @@ import YAML from 'yaml';
 import { Minus, Plus } from 'lucide-react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
+import { AutomationTestingProps } from '@/types';
 
 import { WebEditorForm } from '@@/WebEditorForm';
 import { Button } from '@@/buttons';
@@ -12,15 +13,21 @@ type Props = {
   identifier: string;
   data: string;
   hideMessage?: boolean;
-};
+} & AutomationTestingProps;
 
-export function YAMLInspector({ identifier, data, hideMessage }: Props) {
+export function YAMLInspector({
+  identifier,
+  data,
+  hideMessage,
+  'data-cy': dataCy,
+}: Props) {
   const [expanded, setExpanded] = useState(false);
   const yaml = useMemo(() => cleanYamlUnwantedFields(data), [data]);
 
   return (
     <div>
       <WebEditorForm
+        data-cy={dataCy}
         value={yaml}
         placeholder={
           hideMessage
@@ -37,6 +44,7 @@ export function YAMLInspector({ identifier, data, hideMessage }: Props) {
       <div className="flex items-center justify-between py-5">
         <Button
           icon={expanded ? Minus : Plus}
+          data-cy={`expand-collapse-yaml-${identifier}`}
           color="default"
           className="!ml-0"
           onClick={() => setExpanded(!expanded)}
@@ -48,6 +56,7 @@ export function YAMLInspector({ identifier, data, hideMessage }: Props) {
           heading="Apply YAML changes"
           message="Applies any changes that you make in the YAML editor by calling the Kubernetes API to patch the relevant resources. Any resource removals or unexpected resource additions that you make in the YAML will be ignored. Note that editing is disabled for resources in namespaces marked as system."
           buttonText="Apply changes"
+          data-cy="yaml-inspector-apply-changes-teaser-button"
         />
       </div>
     </div>
diff --git a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
index a96f71e63..f4bdeb2af 100644
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
@@ -103,6 +103,7 @@ export function ConfigMapsDatatable() {
           showSystemResources={tableState.showSystemResources}
         />
       }
+      data-cy="k8s-configmaps-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
index 8a258e750..74857f407 100644
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
@@ -58,6 +58,7 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
           }}
           title={name}
           className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+          data-cy={`configmap-name-link-${name}`}
         >
           {name}
         </Link>
diff --git a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx
index cad3737e5..eb419bb5d 100644
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx
@@ -23,6 +23,7 @@ export const namespace = columnHelper.accessor(
             id: namespace,
           }}
           title={namespace}
+          data-cy={`configmap-namespace-link-${namespace}`}
         >
           {namespace}
         </Link>
diff --git a/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx b/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
index 318c3d4ec..6ab1537ed 100644
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
@@ -103,6 +103,7 @@ export function SecretsDatatable() {
           showSystemResources={tableState.showSystemResources}
         />
       }
+      data-cy="k8s-secrets-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
index 7746fad76..3ee44743d 100644
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
@@ -59,6 +59,7 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
           }}
           title={name}
           className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+          data-cy={`secret-name-link-${name}`}
         >
           {name}
         </Link>
diff --git a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx
index eabe7d5ba..015731f9a 100644
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx
@@ -23,6 +23,7 @@ export const namespace = columnHelper.accessor(
             id: namespace,
           }}
           title={namespace}
+          data-cy={`secret-namespace-link-${namespace}`}
         >
           {namespace}
         </Link>
diff --git a/app/react/kubernetes/datatables/SystemResourcesSettings.tsx b/app/react/kubernetes/datatables/SystemResourcesSettings.tsx
index 39f5b9e6b..ada6e1968 100644
--- a/app/react/kubernetes/datatables/SystemResourcesSettings.tsx
+++ b/app/react/kubernetes/datatables/SystemResourcesSettings.tsx
@@ -14,6 +14,7 @@ export function SystemResourcesSettings({
     <Authorized authorizations="K8sAccessSystemNamespaces" adminOnlyCE>
       <Checkbox
         id="show-system-resources"
+        data-cy="show-system-resources"
         label="Show system resources"
         checked={value}
         onChange={(e) => onChange(e.target.checked)}
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
index a83556038..69985c2db 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
@@ -488,6 +488,7 @@ export function CreateIngressView() {
                   params={{ id: environmentId }}
                   className="text-primary"
                   target="_blank"
+                  data-cy="ingresses-create-application-link"
                 >
                   Applications
                 </Link>
@@ -613,6 +614,7 @@ export function CreateIngressView() {
           <div className="col-sm-12">
             <Button
               onClick={() => handleCreateIngressRules()}
+              data-cy="ingresses-create-button"
               disabled={Object.keys(errors).length > 0}
             >
               {isEdit ? 'Update' : 'Create'}
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
index bdf544a23..6f5aa3da6 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@@ -15,6 +15,7 @@ import { InlineLoader } from '@@/InlineLoader';
 import { Select } from '@@/form-components/ReactSelect';
 import { Card } from '@@/Card';
 import { InputGroup } from '@@/form-components/InputGroup';
+import { Input } from '@@/form-components/Input';
 
 import { AnnotationsForm } from '../../annotations/AnnotationsForm';
 
@@ -182,6 +183,7 @@ export function IngressForm({
                           : 'No namespaces available'
                       }
                       noOptionsMessage={() => 'No namespaces available'}
+                      data-cy="k8sAppCreate-namespaceSelect"
                     />
                   )}
                 </div>
@@ -204,7 +206,7 @@ export function IngressForm({
                   {isEdit ? (
                     rule.IngressName
                   ) : (
-                    <input
+                    <Input
                       name="ingress_name"
                       type="text"
                       className="form-control"
@@ -214,6 +216,7 @@ export function IngressForm({
                         handleIngressChange('IngressName', e.target.value)
                       }
                       disabled={isEdit}
+                      data-cy="k8sAppCreate-ingressNameInput"
                     />
                   )}
                   {errors.ingressName && !isEdit && (
@@ -262,6 +265,7 @@ export function IngressForm({
                           )
                         }
                         noOptionsMessage={() => 'No ingress classes available'}
+                        data-cy="k8sAppCreate-ingressClassSelect"
                       />
                       {errors.className && (
                         <FormError className="error-inline mt-1">
@@ -318,6 +322,7 @@ export function IngressForm({
                 <span>
                   <Button
                     className="btn btn-sm btn-light !ml-0 mb-2"
+                    data-cy="add-annotation-button"
                     onClick={() => addNewAnnotation()}
                     icon={Plus}
                   >
@@ -408,6 +413,7 @@ export function IngressForm({
                         </InputGroup.Addon>
                         <InputGroup.Input
                           name={`ingress_host_${hostIndex}`}
+                          data-cy={`ingress-host_${hostIndex}`}
                           id={`ingress_host_${hostIndex}`}
                           type="text"
                           className="form-control form-control-sm"
@@ -457,6 +463,7 @@ export function IngressForm({
                           }
                           noOptionsMessage={() => 'No TLS secrets available'}
                           size="sm"
+                          data-cy={`k8sAppCreate-tlsSelect_${hostIndex}`}
                         />
                         {!host.NoHost && (
                           <div className="input-group-btn">
@@ -464,6 +471,7 @@ export function IngressForm({
                               className="btn btn-light btn-sm !ml-0 !rounded-l-none"
                               onClick={() => reloadTLSCerts()}
                               icon={RefreshCw}
+                              data-cy={`k8sAppCreate-tlsRefreshButton_${hostIndex}`}
                             />
                           </div>
                         )}
@@ -478,6 +486,7 @@ export function IngressForm({
                           params={{ id: environmentID }}
                           className="text-primary"
                           target="_blank"
+                          data-cy={`k8sAppCreate-createSecretLink_${hostIndex}`}
                         >
                           Create secret
                         </Link>{' '}
@@ -553,6 +562,7 @@ export function IngressForm({
                           }
                           noOptionsMessage={() => 'No services available'}
                           size="sm"
+                          data-cy={`k8sAppCreate-serviceSelect_${hostIndex}_${pathIndex}`}
                         />
                       </InputGroup>
                       {errors[
@@ -614,6 +624,7 @@ export function IngressForm({
                               }
                               noOptionsMessage={() => 'No ports available'}
                               size="sm"
+                              data-cy={`k8sAppCreate-servicePortSelect_${hostIndex}_${pathIndex}`}
                             />
                           </InputGroup>
                           {errors[
@@ -672,6 +683,7 @@ export function IngressForm({
                           }
                           noOptionsMessage={() => 'No path types available'}
                           size="sm"
+                          data-cy={`k8sAppCreate-pathTypeSelect_${hostIndex}_${pathIndex}`}
                         />
                       </InputGroup>
                       {errors[
@@ -748,8 +760,7 @@ export function IngressForm({
                     type="button"
                     onClick={() => addNewIngressRoute(hostIndex)}
                     icon={Plus}
-                    size="small"
-                    color="default"
+                    data-cy={`k8sAppCreate-addPathButton_${hostIndex}`}
                   >
                     Add path
                   </Button>
@@ -766,8 +777,7 @@ export function IngressForm({
                 type="button"
                 onClick={() => addNewIngressHost()}
                 icon={Plus}
-                color="default"
-                size="small"
+                data-cy="k8sAppCreate-addHostButton"
               >
                 Add new host
               </Button>
@@ -778,8 +788,7 @@ export function IngressForm({
                 onClick={() => addNewIngressHost(true)}
                 disabled={hasNoHostRule}
                 icon={Plus}
-                color="default"
-                size="small"
+                data-cy="k8sAppCreate-addFallbackButton"
               >
                 Add fallback rule
               </Button>
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx b/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
index 062487dbd..040e31204 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
@@ -90,6 +90,7 @@ export function IngressDatatable() {
         />
       }
       disableSelect={useCheckboxes()}
+      data-cy="k8s-ingresses-datatable"
     />
   );
 
@@ -114,15 +115,15 @@ export function IngressDatatable() {
         <DeleteButton
           disabled={selectedFlatRows.length === 0}
           onConfirmed={() => handleRemoveClick(selectedFlatRows)}
-          data-cy="k8sSecret-removeSecretButton"
           confirmMessage="Are you sure you want to delete the selected ingresses?"
+          data-cy="remove-ingresses-button"
         />
 
-        <AddButton to=".create" color="secondary">
+        <AddButton to=".create" color="secondary" data-cy="add-ingress-button">
           Add with form
         </AddButton>
 
-        <CreateFromManifestButton />
+        <CreateFromManifestButton data-cy="k8s-ingress-deploy-button" />
       </Authorized>
     );
   }
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
index 3dec6c002..d8574c47a 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
@@ -30,6 +30,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
             name,
           }}
           title={name}
+          data-cy={`ingress-name-link-${name}`}
         >
           {name}
         </Link>
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
index 4f7e32843..a850f02df 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
@@ -24,7 +24,7 @@ export const namespace = columnHelper.accessor('Namespace', {
   enableColumnFilter: true,
 });
 
-function Cell({ getValue }: CellContext<Ingress, string>) {
+function Cell({ getValue, row }: CellContext<Ingress, string>) {
   const namespace = getValue();
   return (
     <Link
@@ -33,6 +33,7 @@ function Cell({ getValue }: CellContext<Ingress, string>) {
         id: namespace,
       }}
       title={namespace}
+      data-cy={`ingress-namespace-link-${row.original.Name}`}
     >
       {namespace}
     </Link>
diff --git a/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx b/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
index ab0bc1648..77c371f28 100644
--- a/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
+++ b/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
@@ -11,7 +11,7 @@ interface Props {
   value: Option[];
   onChange(value: readonly Option[]): void;
   options: Option[];
-  dataCy?: string;
+  dataCy: string;
   inputId?: string;
   placeholder?: string;
 }
diff --git a/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx b/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx
index dd7f2b572..060b527df 100644
--- a/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx
+++ b/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx
@@ -50,6 +50,7 @@ export function NamespaceAppsDatatable({
           />
         </TableSettingsMenu>
       )}
+      data-cy="namespace-apps-datatable"
     />
   );
 }
diff --git a/app/react/kubernetes/namespaces/ItemView/columns.tsx b/app/react/kubernetes/namespaces/ItemView/columns.tsx
index cc61d3152..e30cb4a39 100644
--- a/app/react/kubernetes/namespaces/ItemView/columns.tsx
+++ b/app/react/kubernetes/namespaces/ItemView/columns.tsx
@@ -20,6 +20,7 @@ export const columns = [
         <Link
           to="kubernetes.applications.application"
           params={{ name: item.Name, namespace: item.ResourcePool }}
+          data-cy={`application-link-${item.Name}`}
         >
           {item.Name}
         </Link>
diff --git a/app/react/kubernetes/namespaces/ListView/NamespacesDatatable.tsx b/app/react/kubernetes/namespaces/ListView/NamespacesDatatable.tsx
index 4793c34e7..077602f3b 100644
--- a/app/react/kubernetes/namespaces/ListView/NamespacesDatatable.tsx
+++ b/app/react/kubernetes/namespaces/ListView/NamespacesDatatable.tsx
@@ -70,11 +70,14 @@ export function NamespacesDatatable({
           <DeleteButton
             onClick={() => onRemove(selectedItems)}
             disabled={selectedItems.length === 0}
+            data-cy="delete-namespace-button"
           />
 
-          <AddButton color="secondary">Add with form</AddButton>
+          <AddButton color="secondary" data-cy="add-namespace-form-button">
+            Add with form
+          </AddButton>
 
-          <CreateFromManifestButton />
+          <CreateFromManifestButton data-cy="k8s-namespaces-deploy-button" />
         </Authorized>
       )}
       renderTableSettings={() => (
diff --git a/app/react/kubernetes/namespaces/ListView/columns/actions.tsx b/app/react/kubernetes/namespaces/ListView/columns/actions.tsx
index 6ae2252d0..cd4fba63f 100644
--- a/app/react/kubernetes/namespaces/ListView/columns/actions.tsx
+++ b/app/react/kubernetes/namespaces/ListView/columns/actions.tsx
@@ -37,8 +37,10 @@ function Cell({
       props={{
         to: 'kubernetes.resourcePools.resourcePool.access',
         params: { id: item.Namespace.Name },
+        'data-cy': `manage-access-link-${item.Namespace.Name}`,
       }}
       icon={Users}
+      data-cy={`manage-access-button-${item.Namespace.Name}`}
     >
       Manage access
     </Button>
diff --git a/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx b/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
index 946c4e3ff..4b2bdca47 100644
--- a/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
+++ b/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
@@ -34,6 +34,7 @@ export function useColumns() {
                   params={{
                     id: name,
                   }}
+                  data-cy={`namespace-link-${name}`}
                 >
                   {name}
                 </Link>
diff --git a/app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesSelector.tsx b/app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesSelector.tsx
index 0d270afc2..81cbb6e85 100644
--- a/app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesSelector.tsx
+++ b/app/react/kubernetes/namespaces/components/RegistriesFormSection/RegistriesSelector.tsx
@@ -24,11 +24,15 @@ export function RegistriesSelector({
   return (
     <>
       {options.length === 0 && (
-        <p className="text-muted text-xs mb-1 mt-2">
+        <p className="text-muted mb-1 mt-2 text-xs">
           {isPureAdmin ? (
             <span>
               No registries available. Head over to the{' '}
-              <Link to="portainer.registries" target="_blank">
+              <Link
+                to="portainer.registries"
+                target="_blank"
+                data-cy="namespace-permissions-registries-selector"
+              >
                 registry view
               </Link>{' '}
               to define a container registry.
diff --git a/app/react/kubernetes/namespaces/components/StorageQuotaFormSection/StorageQuotaItem.tsx b/app/react/kubernetes/namespaces/components/StorageQuotaFormSection/StorageQuotaItem.tsx
index 808992429..4de76917d 100644
--- a/app/react/kubernetes/namespaces/components/StorageQuotaFormSection/StorageQuotaItem.tsx
+++ b/app/react/kubernetes/namespaces/components/StorageQuotaFormSection/StorageQuotaItem.tsx
@@ -15,7 +15,7 @@ export function StorageQuotaItem() {
           <span>standard</span>
         </div>
       </FormSectionTitle>
-      <hr className="mt-2 mb-0 w-full" />
+      <hr className="mb-0 mt-2 w-full" />
       <div className="form-group">
         <div className="col-sm-12">
           <SwitchField
diff --git a/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx b/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx
index 9ef0fdecd..000308852 100644
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx
@@ -90,6 +90,7 @@ export function ServicesDatatable() {
         />
       }
       renderRow={servicesRenderRow}
+      data-cy="k8s-services-datatable"
     />
   );
 }
@@ -156,9 +157,10 @@ function TableActions({ selectedItems }: TableActionsProps) {
             </ul>
           </>
         }
+        data-cy="k8s-remove-services-button"
       />
 
-      <CreateFromManifestButton />
+      <CreateFromManifestButton data-cy="k8s-create-service-button" />
     </Authorized>
   );
 
diff --git a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx
index d0a6f8b43..ba643739e 100644
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx
@@ -30,6 +30,7 @@ function Cell({ row, getValue }: CellContext<Service, string>) {
         name: appName,
       }}
       title={appName}
+      data-cy={`service-application-link-${appName}`}
     >
       {appName}
     </Link>
diff --git a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx
index 40374ae16..9c37c96c7 100644
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx
@@ -11,7 +11,7 @@ import { columnHelper } from './helper';
 export const namespace = columnHelper.accessor('Namespace', {
   header: 'Namespace',
   id: 'namespace',
-  cell: ({ getValue }) => {
+  cell: ({ getValue, row }) => {
     const namespace = getValue();
 
     return (
@@ -21,6 +21,7 @@ export const namespace = columnHelper.accessor('Namespace', {
           id: namespace,
         }}
         title={namespace}
+        data-cy={`service-namespace-link-${row.original.Name}`}
       >
         {namespace}
       </Link>
diff --git a/app/react/kubernetes/volumes/ListView/StorageDatatable.tsx b/app/react/kubernetes/volumes/ListView/StorageDatatable.tsx
index 108dc76a0..8b501cf26 100644
--- a/app/react/kubernetes/volumes/ListView/StorageDatatable.tsx
+++ b/app/react/kubernetes/volumes/ListView/StorageDatatable.tsx
@@ -66,6 +66,7 @@ export function StorageDatatable({
       )}
       getRowCanExpand={(row) => row.original.Volumes.length > 0}
       renderSubRow={(row) => <SubRow item={row.original} />}
+      data-cy="k8s-storage-datatable"
     />
   );
 }
@@ -83,6 +84,7 @@ function SubRow({ item }: { item: StorageClassViewModel }) {
                 name: vol.PersistentVolumeClaim.Name,
                 namespace: vol.PersistentVolumeClaim.Namespace,
               }}
+              data-cy={`volume-link-${vol.PersistentVolumeClaim.Name}`}
             >
               {vol.PersistentVolumeClaim.Name}
             </Link>
diff --git a/app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx b/app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx
index 41725f4ab..65b9a39b7 100644
--- a/app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx
+++ b/app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx
@@ -70,8 +70,9 @@ export function VolumesDatatable({
             confirmMessage="Do you want to remove the selected volume(s)?"
             onConfirmed={() => onRemove(selectedItems)}
             disabled={selectedItems.length === 0}
+            data-cy="k8s-volumes-delete-button"
           />
-          <CreateFromManifestButton />
+          <CreateFromManifestButton data-cy="k8s-volumes-deploy-button" />
         </>
       )}
       renderTableSettings={() => (
diff --git a/app/react/kubernetes/volumes/ListView/columns.name.tsx b/app/react/kubernetes/volumes/ListView/columns.name.tsx
index 31a59c0a7..6f21f738c 100644
--- a/app/react/kubernetes/volumes/ListView/columns.name.tsx
+++ b/app/react/kubernetes/volumes/ListView/columns.name.tsx
@@ -33,6 +33,7 @@ export function NameCell({
           namespace: item.ResourcePool.Namespace.Name,
           name: item.PersistentVolumeClaim.Name,
         }}
+        data-cy={`volume-link-${item.PersistentVolumeClaim.Name}`}
       >
         {item.PersistentVolumeClaim.Name}
       </Link>
diff --git a/app/react/kubernetes/volumes/ListView/columns.tsx b/app/react/kubernetes/volumes/ListView/columns.tsx
index 6365c8f95..c840ac7ac 100644
--- a/app/react/kubernetes/volumes/ListView/columns.tsx
+++ b/app/react/kubernetes/volumes/ListView/columns.tsx
@@ -16,6 +16,7 @@ export const columns = [
         <Link
           to="kubernetes.resourcePools.resourcePool"
           params={{ id: namespace }}
+          data-cy={`volume-namespace-link-${namespace}`}
         >
           {namespace}
         </Link>
@@ -37,6 +38,7 @@ export const columns = [
               name: item.Applications[0].Name,
               namespace: item.ResourcePool.Namespace.Name,
             }}
+            data-cy={`volume-application-link-${item.Applications[0].Name}`}
           >
             {item.Applications[0].Name}
           </Link>
diff --git a/app/react/portainer/HomeView/BackupFailedPanel.tsx b/app/react/portainer/HomeView/BackupFailedPanel.tsx
index a187bd0d9..9a8ba2deb 100644
--- a/app/react/portainer/HomeView/BackupFailedPanel.tsx
+++ b/app/react/portainer/HomeView/BackupFailedPanel.tsx
@@ -20,8 +20,10 @@ export function BackupFailedPanel() {
       <TextTip>
         The latest automated backup has failed at {isoDate(status.TimestampUTC)}
         . For details please see the log files and have a look at the{' '}
-        <Link to="portainer.settings">settings</Link> to verify the backup
-        configuration.
+        <Link to="portainer.settings" data-cy="backup-failed-settings-link">
+          settings
+        </Link>{' '}
+        to verify the backup configuration.
       </TextTip>
     </InformationPanel>
   );
diff --git a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx
index d66ce2191..f18e39a36 100644
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx
@@ -35,7 +35,12 @@ export function AMTButton({
 
   return (
     <>
-      <Button onClick={openDialog} icon={Link} color="light">
+      <Button
+        onClick={openDialog}
+        icon={Link}
+        color="light"
+        data-cy="associate-amt-button"
+      >
         Associate with OpenAMT
       </Button>
       {isOpenDialog && (
diff --git a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
index 4d1f8ef37..1818c4606 100644
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
@@ -53,6 +53,7 @@ export function AssociateAMTDialog({
         <div className="flex h-8 items-center">
           <Checkbox
             id="settings-container-truncate-name"
+            data-cy="select-all-checkbox"
             label="Select all (in this page)"
             checked={isAllPageSelected}
             onChange={handleSelectAll}
@@ -67,6 +68,7 @@ export function AssociateAMTDialog({
               >
                 <Checkbox
                   id={`${env.Id}`}
+                  data-cy={`environment-checkbox-${env.Name}`}
                   label={`${env.Name} (${env.URL})`}
                   checked={selection.includes(env.Id)}
                   onChange={() =>
@@ -89,11 +91,16 @@ export function AssociateAMTDialog({
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={onClose} color="default">
+        <Button
+          onClick={onClose}
+          color="default"
+          data-cy="associate-amt-dialog-cancel-button"
+        >
           Cancel
         </Button>
         <LoadingButton
           onClick={handleSubmit}
+          data-cy="associate-amt-dialog-associate-button"
           disabled={selection.length === 0}
           loadingText="Associating..."
           isLoading={activateDeviceMutation.isLoading}
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
index dcca95b96..3a2c18651 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
@@ -39,6 +39,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
         size="medium"
         className={buttonsClasses}
         title="Edit"
+        data-cy={`edit-environment-link-${environment.Name}`}
       />
 
       <LinkButton
@@ -50,6 +51,7 @@ export function EditButtons({ environment }: { environment: Environment }) {
         size="medium"
         className={buttonsClasses}
         title="Configuration"
+        data-cy={`configure-environment-link-${environment.Name}`}
       />
     </ButtonsGrid>
   );
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
index 04eeaba02..1c77d4e7a 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
@@ -48,12 +48,14 @@ export function EnvironmentBrowseButtons({
                 ? 'Browse snapshot is only available for async environments'
                 : ''
             }
+            data-cy={`browse-snapshot-link-${environment.Name}`}
           >
             Browse snapshot
           </LinkButton>
         ) : (
           <Button
             icon={X}
+            data-cy={`close-snapshot-link-${environment.Name}`}
             onClick={onClickDisconnect}
             className="!m-0 w-full !py-0 opacity-60"
             size="medium"
@@ -78,11 +80,13 @@ export function EnvironmentBrowseButtons({
           onClick={onClickBrowse}
           color="primary"
           className="!m-0 w-full !py-0"
+          data-cy={`live-connect-link-${environment.Name}`}
         >
           Live connect
         </LinkButton>
       ) : (
         <Button
+          data-cy={`disconnect-link-${environment.Name}`}
           icon={WifiOff}
           onClick={onClickDisconnect}
           className="!m-0 w-full !py-0 opacity-60"
diff --git a/app/react/portainer/HomeView/EnvironmentList/HomepageFilter.tsx b/app/react/portainer/HomeView/EnvironmentList/HomepageFilter.tsx
index b9094a648..05ead7d30 100644
--- a/app/react/portainer/HomeView/EnvironmentList/HomepageFilter.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/HomepageFilter.tsx
@@ -23,7 +23,12 @@ function Option<TValue = number>(props: OptionProps<OptionType<TValue>, true>) {
         {...props}
       >
         <div className="flex items-center gap-2">
-          <input type="checkbox" checked={isSelected} onChange={() => null} />
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={() => null}
+            data-cy={`homepage-filter-option-${label}`}
+          />
           <label className="whitespace-nowrap">{label}</label>
         </div>
       </components.Option>
@@ -46,6 +51,7 @@ export function HomepageFilter<TValue = number>({
       components={{ Option }}
       onChange={(option) => onChange([...option])}
       bindToBody
+      data-cy="homepage-filter"
     />
   );
 }
diff --git a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
index 5ad2d2e1e..f2b20857d 100644
--- a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
@@ -31,6 +31,7 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
     <>
       <Button
         onClick={handleClick}
+        data-cy="download-kubeconfig-button"
         size="medium"
         className="!m-0"
         icon={Download}
diff --git a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
index f47916f6f..f895ca5c6 100644
--- a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
@@ -76,6 +76,7 @@ export function KubeconfigPrompt({
         <div className="mt-2 flex h-8 items-center">
           <Checkbox
             id="settings-container-truncate-name"
+            data-cy="select-all-checkbox"
             label="Select all (in this page)"
             checked={isAllPageSelected}
             onChange={handleSelectAll}
@@ -95,6 +96,7 @@ export function KubeconfigPrompt({
                 >
                   <Checkbox
                     id={`${env.Id}`}
+                    data-cy={`select-environment-checkbox-${env.Name}`}
                     label={`${env.Name} (${env.URL})`}
                     checked={selection.includes(env.Id)}
                     onChange={() =>
@@ -118,10 +120,18 @@ export function KubeconfigPrompt({
       </Modal.Body>
 
       <Modal.Footer>
-        <Button onClick={onClose} color="default">
+        <Button
+          onClick={onClose}
+          color="default"
+          data-cy="cancel-kubeconfig-download-button"
+        >
           Cancel
         </Button>
-        <Button onClick={handleDownload} disabled={selection.length === 0}>
+        <Button
+          onClick={handleDownload}
+          disabled={selection.length === 0}
+          data-cy="download-kubeconfig-confirbutton"
+        >
           Download File
         </Button>
       </Modal.Footer>
diff --git a/app/react/portainer/HomeView/EnvironmentList/NoEnvironmentsInfoPanel.tsx b/app/react/portainer/HomeView/EnvironmentList/NoEnvironmentsInfoPanel.tsx
index c4999fc6c..955275acb 100644
--- a/app/react/portainer/HomeView/EnvironmentList/NoEnvironmentsInfoPanel.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/NoEnvironmentsInfoPanel.tsx
@@ -9,8 +9,13 @@ export function NoEnvironmentsInfoPanel({ isAdmin }: { isAdmin: boolean }) {
         {isAdmin ? (
           <span>
             No environment available for management. Please head over the{' '}
-            <Link to="portainer.wizard.endpoints">environment wizard</Link> to
-            add an environment.
+            <Link
+              to="portainer.wizard.endpoints"
+              data-cy="wizard-add-environments-link"
+            >
+              environment wizard
+            </Link>{' '}
+            to add an environment.
           </span>
         ) : (
           <span>
diff --git a/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx b/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
index 20a634d35..a764f6d1c 100644
--- a/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
@@ -45,6 +45,7 @@ export function SortbySelector({
         onChange={(option: ListSortType) => onChange(option)}
         isClearable
         value={value}
+        data-cy="home-view-sortby-selector"
       />
 
       <button
diff --git a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
index c1d29be9f..c2afac6a1 100644
--- a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
@@ -28,6 +28,7 @@ export function UpdateBadge() {
           'th-dark:bg-blue-3 th-dark:text-blue-8 th-dark:hover:bg-blue-5 th-dark:hover:text-blue-8',
           'th-highcontrast:border-white th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white'
         )}
+        data-cy="home-schedule-update-link"
       >
         Schedule Update
       </Link>
diff --git a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx
index ed0f2464b..c47385690 100644
--- a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx
+++ b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx
@@ -70,7 +70,11 @@ export function AccessControlPanel({
       {!isEditDisabled && !isEditMode && (
         <div className="row">
           <div>
-            <Button color="link" onClick={toggleEditMode}>
+            <Button
+              color="link"
+              onClick={toggleEditMode}
+              data-cy="change-ownership-button"
+            >
               <Icon icon={Edit} className="space-right" />
               Change ownership
             </Button>
diff --git a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
index 5a03b6c5b..725e115cd 100644
--- a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
+++ b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
@@ -134,7 +134,11 @@ function getInheritanceMessage(
     return (
       <InheritanceMessage tooltip="Access control applied on a service is also applied on each container of that service.">
         Access control on this resource is inherited from the following service:
-        <Link to="docker.services.service" params={{ id: resourceId }}>
+        <Link
+          to="docker.services.service"
+          params={{ id: resourceId }}
+          data-cy="docker-access-inherited-service"
+        >
           {truncate(resourceId)}
         </Link>
       </InheritanceMessage>
@@ -149,7 +153,11 @@ function getInheritanceMessage(
       <InheritanceMessage tooltip="Access control applied on a container created using a template is also applied on each volume associated to the container.">
         Access control on this resource is inherited from the following
         container:
-        <Link to="docker.containers.container" params={{ id: resourceId }}>
+        <Link
+          to="docker.containers.container"
+          params={{ id: resourceId }}
+          data-cy="docker-access-inherited-container"
+        >
           {truncate(resourceId)}
         </Link>
       </InheritanceMessage>
diff --git a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx
index 6cdc06e4a..c61fb0cd7 100644
--- a/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx
+++ b/app/react/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx
@@ -102,11 +102,17 @@ export function AccessControlPanelForm({
 
           <div className="form-group">
             <div className="col-sm-12">
-              <Button size="small" color="default" onClick={onCancelClick}>
+              <Button
+                size="small"
+                color="default"
+                onClick={onCancelClick}
+                data-cy="cancel-access-control-update-button"
+              >
                 Cancel
               </Button>
               <LoadingButton
                 size="small"
+                data-cy="update-access-control-button"
                 color="primary"
                 type="submit"
                 isLoading={isSubmitting}
diff --git a/app/react/portainer/access-control/EditDetails/TeamsField.tsx b/app/react/portainer/access-control/EditDetails/TeamsField.tsx
index 73a6ec0a1..8e8f46d14 100644
--- a/app/react/portainer/access-control/EditDetails/TeamsField.tsx
+++ b/app/react/portainer/access-control/EditDetails/TeamsField.tsx
@@ -40,11 +40,15 @@ export function TeamsField({
           onChange={onChange}
           value={value}
           inputId="teams-selector"
+          dataCy="teams-selector"
         />
       ) : (
         <span className="small text-muted">
           You have not yet created any teams. Head over to the{' '}
-          <Link to="portainer.teams">Teams view</Link> to manage teams.
+          <Link to="portainer.teams" data-cy="teams-view-link">
+            Teams view
+          </Link>{' '}
+          to manage teams.
         </span>
       )}
     </FormControl>
diff --git a/app/react/portainer/access-control/EditDetails/UsersField.tsx b/app/react/portainer/access-control/EditDetails/UsersField.tsx
index 9d9191e9b..bdb65f148 100644
--- a/app/react/portainer/access-control/EditDetails/UsersField.tsx
+++ b/app/react/portainer/access-control/EditDetails/UsersField.tsx
@@ -31,11 +31,15 @@ export function UsersField({ name, users, value, onChange, errors }: Props) {
           onChange={onChange}
           value={value}
           inputId="users-selector"
+          dataCy="users-selector"
         />
       ) : (
         <span className="small text-muted">
           You have not yet created any users. Head over to the{' '}
-          <Link to="portainer.users">Users view</Link> to manage users.
+          <Link to="portainer.users" data-cy="access-control-users-link">
+            Users view
+          </Link>{' '}
+          to manage users.
         </span>
       )}
     </FormControl>
diff --git a/app/react/portainer/account/AccountView/AccessTokensDatatable/AccessTokensDatatable.tsx b/app/react/portainer/account/AccountView/AccessTokensDatatable/AccessTokensDatatable.tsx
index 1629ea3f9..c5b64c5c7 100644
--- a/app/react/portainer/account/AccountView/AccessTokensDatatable/AccessTokensDatatable.tsx
+++ b/app/react/portainer/account/AccountView/AccessTokensDatatable/AccessTokensDatatable.tsx
@@ -27,6 +27,7 @@ export function AccessTokensDatatable({ canExit }: { canExit?: boolean }) {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} canExit={canExit} />
       )}
+      data-cy="access-tokens-datatable"
     />
   );
 }
diff --git a/app/react/portainer/account/AccountView/AccessTokensDatatable/TableActions.tsx b/app/react/portainer/account/AccountView/AccessTokensDatatable/TableActions.tsx
index 3d4a4cc34..e59a9120d 100644
--- a/app/react/portainer/account/AccountView/AccessTokensDatatable/TableActions.tsx
+++ b/app/react/portainer/account/AccountView/AccessTokensDatatable/TableActions.tsx
@@ -22,9 +22,14 @@ export function TableActions({
         disabled={selectedItems.length === 0}
         confirmMessage="Do you want to remove the selected access token(s)? Any script or application using these tokens will no longer be able to invoke the Portainer API."
         onConfirmed={handleRemove}
+        data-cy="access-tokens-delete-button"
       />
 
-      <AddButton to=".new-access-token" disabled={!canExit}>
+      <AddButton
+        to=".new-access-token"
+        disabled={!canExit}
+        data-cy="access-tokens-add-button"
+      >
         Add access token
       </AddButton>
     </>
diff --git a/app/react/portainer/account/AccountView/ApplicationSettings/ApplicationSettingsForm.tsx b/app/react/portainer/account/AccountView/ApplicationSettings/ApplicationSettingsForm.tsx
index c0e33d4a6..ce570f2a1 100644
--- a/app/react/portainer/account/AccountView/ApplicationSettings/ApplicationSettingsForm.tsx
+++ b/app/react/portainer/account/AccountView/ApplicationSettings/ApplicationSettingsForm.tsx
@@ -40,6 +40,7 @@ export function ApplicationSettingsForm() {
           </TextTip>
           <SwitchField
             label="Enable front-end data caching for Kubernetes environments"
+            data-cy="account-applicationSettingsUseCacheSwitch"
             checked={values.useCache}
             onChange={(value) => setFieldValue('useCache', value)}
             labelClass="col-lg-2 col-sm-3" // match the label width of the other fields in the page
diff --git a/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx b/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx
index b7a23252b..fd9af775a 100644
--- a/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx
+++ b/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx
@@ -73,6 +73,7 @@ export function HelmRepositoryDatatable() {
       emptyContentLabel="No Helm repository found"
       isLoading={helmReposQuery.isLoading}
       isRowSelectable={(row) => !row.original.Global}
+      data-cy="helm-repositories-datatable"
     />
   );
 }
@@ -84,7 +85,11 @@ function HelmDatatableDescription({ isAdmin }: { isAdmin: boolean }) {
       account&apos;s Portainer UI. Helm charts are pulled down from these repos
       (plus the{' '}
       {isAdmin ? (
-        <Link to="portainer.settings" params={{ '#': 'kubernetes-settings' }}>
+        <Link
+          to="portainer.settings"
+          params={{ '#': 'kubernetes-settings' }}
+          data-cy="k8s-globally-select-repo-link"
+        >
           <span>globally-set Helm repo</span>
         </Link>
       ) : (
diff --git a/app/react/portainer/account/CreateAccessTokenView/CreateUserAccessTokenInnerForm.tsx b/app/react/portainer/account/CreateAccessTokenView/CreateUserAccessTokenInnerForm.tsx
index 74b8fc7ec..186a26e4c 100644
--- a/app/react/portainer/account/CreateAccessTokenView/CreateUserAccessTokenInnerForm.tsx
+++ b/app/react/portainer/account/CreateAccessTokenView/CreateUserAccessTokenInnerForm.tsx
@@ -52,6 +52,7 @@ export function CreateUserAccessTokenInnerForm({ showAuthentication }: Props) {
       </FormControl>
       <LoadingButton
         disabled={!isValid || !dirty}
+        data-cy="create-access-token-button"
         isLoading={false}
         loadingText="Adding access token..."
       >
diff --git a/app/react/portainer/account/CreateAccessTokenView/DisplayUserAccessToken.tsx b/app/react/portainer/account/CreateAccessTokenView/DisplayUserAccessToken.tsx
index 7e487c7c2..75bd4d39b 100644
--- a/app/react/portainer/account/CreateAccessTokenView/DisplayUserAccessToken.tsx
+++ b/app/react/portainer/account/CreateAccessTokenView/DisplayUserAccessToken.tsx
@@ -17,13 +17,18 @@ export function DisplayUserAccessToken({ apikey }: { apikey: string }) {
         <div className="inline-flex">
           <div className="">{apikey}</div>
           <div>
-            <CopyButton copyText={apikey} color="link" />
+            <CopyButton
+              copyText={apikey}
+              color="link"
+              data-cy="create-access-token-copy-button"
+            />
           </div>
         </div>
         <hr />
       </div>
       <Button
         type="button"
+        data-cy="create-access-token-done-button"
         onClick={() => router.stateService.go('portainer.account')}
       >
         Done
diff --git a/app/react/portainer/account/helm-repositories/components/HelmRepositoryForm.tsx b/app/react/portainer/account/helm-repositories/components/HelmRepositoryForm.tsx
index d9f0d39fd..203c4e6b6 100644
--- a/app/react/portainer/account/helm-repositories/components/HelmRepositoryForm.tsx
+++ b/app/react/portainer/account/helm-repositories/components/HelmRepositoryForm.tsx
@@ -57,6 +57,7 @@ export function HelmRepositoryForm({
             <div className="col-sm-12 mt-3">
               <LoadingButton
                 disabled={!isValid || !dirty}
+                data-cy="helm-repository-save-button"
                 isLoading={isLoading}
                 loadingText="Saving Helm repository..."
               >
@@ -65,6 +66,7 @@ export function HelmRepositoryForm({
               {isEditing && (
                 <Button
                   color="default"
+                  data-cy="helm-repository-cancel-button"
                   onClick={() => router.stateService.go('portainer.account')}
                 >
                   Cancel
diff --git a/app/react/portainer/custom-templates/components/CommonFields.tsx b/app/react/portainer/custom-templates/components/CommonFields.tsx
index 16ff5585b..ae834f4a0 100644
--- a/app/react/portainer/custom-templates/components/CommonFields.tsx
+++ b/app/react/portainer/custom-templates/components/CommonFields.tsx
@@ -32,6 +32,7 @@ export function CommonFields({
       >
         <Input
           name="title"
+          data-cy="custom-templates-title-input"
           placeholder="e.g. mytemplate"
           id="template-title"
           required
@@ -50,6 +51,7 @@ export function CommonFields({
       >
         <Input
           name="description"
+          data-cy="custom-templates-description-input"
           id="template-description"
           required
           value={values.Description}
@@ -62,6 +64,7 @@ export function CommonFields({
       <FormControl label="Note" inputId="template-note" errors={errors?.Note}>
         <Input
           name="note"
+          data-cy="custom-templates-note-input"
           id="template-note"
           value={values.Note}
           onChange={(e) => {
@@ -73,6 +76,7 @@ export function CommonFields({
       <FormControl label="Logo" inputId="template-logo" errors={errors?.Logo}>
         <Input
           name="logo"
+          data-cy="custom-templates-logo-input"
           id="template-logo"
           value={values.Logo}
           onChange={(e) => {
diff --git a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
index 3f226a359..3eded90f7 100644
--- a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
+++ b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.tsx
@@ -50,6 +50,7 @@ export function CustomTemplatesVariablesDefinitionField({
       errors={errors}
       textTip="List should map the mustache variables in the template file, if default value is empty, the variable will be required."
       isAddButtonHidden={isVariablesNamesFromParent}
+      data-cy="custom-templates-variables-field"
     />
   );
 }
@@ -58,7 +59,13 @@ interface DefinitionItemProps extends ItemProps<VariableDefinition> {
   isNameReadonly?: boolean;
 }
 
-function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
+function Item({
+  item,
+  onChange,
+  error,
+  isNameReadonly,
+  index,
+}: DefinitionItemProps) {
   const errorObj = typeof error === 'object' ? error : {};
 
   return (
@@ -70,6 +77,7 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
           onChange={handleChange}
           placeholder="Name (e.g var_name)"
           readOnly={isNameReadonly}
+          data-cy={`custom-templates-item-name-field_${index}`}
         />
         {errorObj?.name && <FormError>{errorObj.name}</FormError>}
       </div>
@@ -79,6 +87,7 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
           onChange={handleChange}
           placeholder="Label"
           name="label"
+          data-cy={`custom-templates-item-label-field_${index}`}
         />
         {errorObj?.label && <FormError>{errorObj.label}</FormError>}
       </div>
@@ -88,6 +97,7 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
           value={item.description}
           onChange={handleChange}
           placeholder="Description"
+          data-cy={`custom-templates-item-description-field_${index}`}
         />
         {errorObj?.description && <FormError>{errorObj.description}</FormError>}
       </div>
@@ -97,6 +107,7 @@ function Item({ item, onChange, error, isNameReadonly }: DefinitionItemProps) {
           onChange={handleChange}
           placeholder="Default Value"
           name="defaultValue"
+          data-cy={`custom-templates-item-default-value-field_${index}`}
         />
         {errorObj?.defaultValue && (
           <FormError>{errorObj.defaultValue}</FormError>
diff --git a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/VariableFieldItem.tsx b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/VariableFieldItem.tsx
index e4083f909..1f50d4119 100644
--- a/app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/VariableFieldItem.tsx
+++ b/app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/VariableFieldItem.tsx
@@ -28,6 +28,7 @@ export function VariableFieldItem({
     >
       <Input
         name={`variables.${definition.name}`}
+        data-cy={`custom-template-variables-${definition.name}`}
         id={inputId}
         value={value}
         onChange={(e) => onChange(e.target.value)}
diff --git a/app/react/portainer/custom-templates/components/PlatformSelector.tsx b/app/react/portainer/custom-templates/components/PlatformSelector.tsx
index 005c2421b..df50b96d9 100644
--- a/app/react/portainer/custom-templates/components/PlatformSelector.tsx
+++ b/app/react/portainer/custom-templates/components/PlatformSelector.tsx
@@ -19,6 +19,7 @@ export function PlatformField({
     <FormControl label="Platform" required inputId="template-platform">
       <Select
         name="platform"
+        data-cy="custom-tempalte-platform-select"
         id="template-platform"
         required
         options={platformOptions}
diff --git a/app/react/portainer/custom-templates/components/TemplateTypeSelector.tsx b/app/react/portainer/custom-templates/components/TemplateTypeSelector.tsx
index b86f11506..482fc1947 100644
--- a/app/react/portainer/custom-templates/components/TemplateTypeSelector.tsx
+++ b/app/react/portainer/custom-templates/components/TemplateTypeSelector.tsx
@@ -19,6 +19,7 @@ export function TemplateTypeSelector({
     <FormControl label="Type" required inputId="template-type">
       <Select
         name="type"
+        data-cy="custom-template-template-type"
         id="template-type"
         required
         options={typeOptions}
diff --git a/app/react/portainer/environments/EdgeAutoCreateScriptView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx b/app/react/portainer/environments/EdgeAutoCreateScriptView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
index dc9fa88f0..bd09c805d 100644
--- a/app/react/portainer/environments/EdgeAutoCreateScriptView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
+++ b/app/react/portainer/environments/EdgeAutoCreateScriptView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
@@ -75,8 +75,13 @@ export function AutomaticEdgeEnvCreation() {
         {!edgeComputeConfigurationOK ? (
           <TextTip color="orange">
             In order to use this feature, please turn on Edge Compute features{' '}
-            <Link to="portainer.settings.edgeCompute">here</Link> and have
-            Portainer API server URL and tunnel server address properly
+            <Link
+              to="portainer.settings.edgeCompute"
+              data-cy="edge-disabled-portainer-edge-settings-link"
+            >
+              here
+            </Link>{' '}
+            and have Portainer API server URL and tunnel server address properly
             configured.
           </TextTip>
         ) : (
@@ -147,7 +152,12 @@ function EdgeKeyInfo({
           <code>{edgeKey}</code>
         </div>
 
-        <CopyButton copyText={edgeKey}>Copy token</CopyButton>
+        <CopyButton
+          copyText={edgeKey}
+          data-cy="edge-auto-create-copy-token-button"
+        >
+          Copy token
+        </CopyButton>
       </FormSection>
 
       <hr />
@@ -159,19 +169,28 @@ function EdgeKeyInfo({
         showMetaFields
       >
         <FormControl label="Portainer API server URL">
-          <Input value={url} readOnly />
+          <Input value={url} readOnly data-cy="edge-auto-create-url-input" />
         </FormControl>
 
         {!asyncMode && (
           <FormControl label="Portainer tunnel server address">
-            <Input value={tunnelUrl} readOnly />
+            <Input
+              value={tunnelUrl}
+              readOnly
+              data-cy="edge-auto-create-tunnel-address-input"
+            />
           </FormControl>
         )}
 
         <TextTip color="blue">
           Portainer Server URL{' '}
           {!asyncMode ? 'and tunnel server address are' : 'is'} set{' '}
-          <Link to="portainer.settings.edgeCompute">here</Link>
+          <Link
+            to="portainer.settings.edgeCompute"
+            data-cy="server-url-portainer-edge-settings-link"
+          >
+            here
+          </Link>
         </TextTip>
       </EdgeScriptForm>
     </>
diff --git a/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx b/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx
index 97b1c2f13..7f2acad18 100644
--- a/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx
+++ b/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx
@@ -18,7 +18,11 @@ export function EdgeKeyDisplay({ edgeKey }: { edgeKey: string }) {
 
       <Code>{edgeKey}</Code>
 
-      <CopyButton copyText={edgeKey} className="mt-2">
+      <CopyButton
+        copyText={edgeKey}
+        className="mt-2"
+        data-cy="copy-edge-key-button"
+      >
         Copy token
       </CopyButton>
     </FormSection>
diff --git a/app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx b/app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx
index 02ea17876..5817ff4be 100644
--- a/app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx
+++ b/app/react/portainer/environments/ListView/EnvironmentsDatatable.tsx
@@ -78,6 +78,7 @@ export function EnvironmentsDatatable({
             onClick={() => onRemove(selectedRows)}
             icon={Trash2}
             className="!m-0"
+            data-cy="remove-environments-button"
           >
             Remove
           </Button>
@@ -87,6 +88,7 @@ export function EnvironmentsDatatable({
           {isBE && (
             <AddButton
               color="secondary"
+              data-cy="environments-auto-onboarding-button"
               to="portainer.endpoints.edgeAutoCreateScript"
             >
               Auto onboarding
@@ -96,11 +98,13 @@ export function EnvironmentsDatatable({
           <AddButton
             to="portainer.wizard.endpoints"
             params={{ referrer: 'environments' }}
+            data-cy="environments-add-environments-button"
           >
             Add environment
           </AddButton>
         </div>
       )}
+      data-cy="environments-datatable"
     />
   );
 }
diff --git a/app/react/portainer/environments/ListView/ImportFdoDeviceButton.tsx b/app/react/portainer/environments/ListView/ImportFdoDeviceButton.tsx
index d42efe20a..d6f7d6a5a 100644
--- a/app/react/portainer/environments/ListView/ImportFdoDeviceButton.tsx
+++ b/app/react/portainer/environments/ListView/ImportFdoDeviceButton.tsx
@@ -20,7 +20,11 @@ export function ImportFdoDeviceButton() {
 
   return (
     <div className="ml-[5px]">
-      <AddButton color="secondary" to="portainer.endpoints.importDevice">
+      <AddButton
+        color="secondary"
+        to="portainer.endpoints.importDevice"
+        data-cy="import-fdo-device-button"
+      >
         Import FDO device
       </AddButton>
     </div>
diff --git a/app/react/portainer/environments/ListView/columns/actions.tsx b/app/react/portainer/environments/ListView/columns/actions.tsx
index a52bad72e..d525271e9 100644
--- a/app/react/portainer/environments/ListView/columns/actions.tsx
+++ b/app/react/portainer/environments/ListView/columns/actions.tsx
@@ -31,9 +31,11 @@ function Cell({
       props={{
         to: 'portainer.endpoints.endpoint.access',
         params: { id: environment.Id },
+        'data-cy': `environment-manage-access-${environment.Name}`,
       }}
       color="link"
       icon={Users}
+      data-cy={`environment-manage-access-button-${environment.Name}`}
     >
       Manage access
     </Button>
diff --git a/app/react/portainer/environments/ListView/columns/name.tsx b/app/react/portainer/environments/ListView/columns/name.tsx
index 92821e226..dd2dce8e3 100644
--- a/app/react/portainer/environments/ListView/columns/name.tsx
+++ b/app/react/portainer/environments/ListView/columns/name.tsx
@@ -13,7 +13,11 @@ export const name = columnHelper.accessor('Name', {
     }
 
     return (
-      <Link to="portainer.endpoints.endpoint" params={{ id: environment.Id }}>
+      <Link
+        to="portainer.endpoints.endpoint"
+        params={{ id: environment.Id }}
+        data-cy={`environment-link-${environment.Id}`}
+      >
         {name}
       </Link>
     );
diff --git a/app/react/portainer/environments/ListView/columns/url.tsx b/app/react/portainer/environments/ListView/columns/url.tsx
index 69d8b91bf..57105a3c0 100644
--- a/app/react/portainer/environments/ListView/columns/url.tsx
+++ b/app/react/portainer/environments/ListView/columns/url.tsx
@@ -50,6 +50,7 @@ function Cell({
                       <div className="mt-2 text-right">
                         <Button
                           color="link"
+                          data-cy={`dismiss-error-${environment.Id}`}
                           className="small !ml-0 p-0"
                           onClick={handleDismissButton}
                         >
diff --git a/app/react/portainer/environments/TagsView/TagsDatatable.tsx b/app/react/portainer/environments/TagsView/TagsDatatable.tsx
index 42201e3d1..c754badf8 100644
--- a/app/react/portainer/environments/TagsView/TagsDatatable.tsx
+++ b/app/react/portainer/environments/TagsView/TagsDatatable.tsx
@@ -43,8 +43,10 @@ export function TagsDatatable({
           disabled={selectedItems.length === 0}
           confirmMessage="Are you sure you want to remove the selected tag(s)?"
           onConfirmed={() => onRemove(selectedItems)}
+          data-cy="remove-tag-button"
         />
       )}
+      data-cy="tags-datatable"
     />
   );
 }
diff --git a/app/react/portainer/environments/common/TimeWindowPicker/TimePickerInput.tsx b/app/react/portainer/environments/common/TimeWindowPicker/TimePickerInput.tsx
index 81be79f40..44d8a8e2e 100644
--- a/app/react/portainer/environments/common/TimeWindowPicker/TimePickerInput.tsx
+++ b/app/react/portainer/environments/common/TimeWindowPicker/TimePickerInput.tsx
@@ -30,6 +30,7 @@ export function TimePickerInput({
       <div className="flex flex-col">
         <Button
           color="link"
+          data-cy="env-time-picker-hours-up-button"
           size="medium"
           className="!ml-0 w-full"
           icon={ChevronUp}
@@ -42,12 +43,14 @@ export function TimePickerInput({
         />
         <Input
           type="text"
+          data-cy="time-picker-hours-input"
           value={hours}
           className="w-12 !cursor-default text-center"
           disabled
         />
         <Button
           color="link"
+          data-cy="env-time-picker-hours-down-button"
           size="medium"
           className="!ml-0 w-full"
           icon={ChevronDown}
@@ -63,6 +66,7 @@ export function TimePickerInput({
       <div className="flex flex-col">
         <Button
           color="link"
+          data-cy="env-time-picker-minutes-up-button"
           size="medium"
           className="!ml-0 w-full"
           icon={ChevronUp}
@@ -75,12 +79,14 @@ export function TimePickerInput({
         />
         <Input
           type="text"
+          data-cy="time-picker-minutes-input"
           value={minutes}
           className="w-12 !cursor-default text-center"
           disabled
         />
         <Button
           color="link"
+          data-cy="env-time-picker-minutes-down-button"
           size="medium"
           className="!ml-0 w-full"
           icon={ChevronDown}
@@ -94,6 +100,7 @@ export function TimePickerInput({
       </div>
       <Button
         color="default"
+        data-cy="env-time-picker-ampm-button"
         className="h-[34px]"
         onClick={() => {
           const newTime = moment(localTime24h, valueFormat)
diff --git a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPicker.tsx b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPicker.tsx
index 3d3b97759..5e3b1aa67 100644
--- a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPicker.tsx
+++ b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPicker.tsx
@@ -72,6 +72,7 @@ export function TimeWindowPicker({
           {!isEditMode && (
             <Button
               color="default"
+              data-cy="edit-change-window-button"
               className="!ml-0"
               onClick={() => setIsEditMode(true)}
             >
@@ -81,6 +82,7 @@ export function TimeWindowPicker({
           {isEditMode && (
             <Button
               color="default"
+              data-cy="cancel-change-window-button"
               className="!ml-0"
               onClick={() => {
                 setIsEditMode(false);
diff --git a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
index dd394518f..a02a699a6 100644
--- a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
+++ b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
@@ -90,7 +90,7 @@ export function TimeWindowPickerInputGroup({
         <Select<Option<string>>
           options={timeZoneOptions}
           value={timeZoneOptions[timeZoneOptionIndex]}
-          className="basis-[fit-content] flex-1 min-w-fit max-w-xs"
+          className="min-w-fit max-w-xs flex-1 basis-[fit-content]"
           onChange={(newTimeZone) => {
             if (!newTimeZone) return;
             // update the utc time so that the local time displayed remains the same
@@ -111,6 +111,7 @@ export function TimeWindowPickerInputGroup({
             });
             onChangeTimeZone(newTimeZone.value);
           }}
+          data-cy="time-window-picker-timezone-select"
         />
       </div>
       {errors?.StartTime && <FormError>{errors.StartTime}</FormError>}
diff --git a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/EnvironmentGroupsDatatable.tsx b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/EnvironmentGroupsDatatable.tsx
index 66504966b..37c377159 100644
--- a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/EnvironmentGroupsDatatable.tsx
+++ b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/EnvironmentGroupsDatatable.tsx
@@ -27,6 +27,7 @@ export function EnvironmentGroupsDatatable() {
       renderTableActions={(selectedItems) => (
         <TableActions selectedItems={selectedItems} />
       )}
+      data-cy="environment-groups-datatable"
     />
   );
 }
diff --git a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/TableActions.tsx b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/TableActions.tsx
index cce18dcb8..9630dd78d 100644
--- a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/TableActions.tsx
+++ b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/TableActions.tsx
@@ -20,9 +20,10 @@ export function TableActions({
         disabled={selectedItems.length === 0}
         confirmMessage="Are you sure you want to remove the selected environment group(s)?"
         onConfirmed={handleRemove}
+        data-cy="remove-environment-groups-button"
       />
 
-      <AddButton>Add group</AddButton>
+      <AddButton data-cy="add-environment-group-button">Add group</AddButton>
     </>
   );
 
diff --git a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/columns.tsx b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/columns.tsx
index 44ff3e8ff..63773d33d 100644
--- a/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/columns.tsx
+++ b/app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/columns.tsx
@@ -10,7 +10,7 @@ import { EnvironmentGroup } from '../../types';
 const columnHelper = createColumnHelper<EnvironmentGroup>();
 
 export const columns = [
-  buildNameColumn<EnvironmentGroup>('Name', '.group'),
+  buildNameColumn<EnvironmentGroup>('Name', '.group', 'environment-group-name'),
   columnHelper.display({
     header: 'Actions',
     cell: ActionsCell,
@@ -26,9 +26,11 @@ function ActionsCell({
       props={{
         to: '.group.access',
         params: { id: item.Id },
+        'data-cy': `manage-access-link_${item.Name}`,
       }}
       color="link"
       icon={Users}
+      data-cy={`manage-access-button_${item.Name}`}
     >
       Manage access
     </Button>
diff --git a/app/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector.tsx b/app/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector.tsx
index 674a47f56..fc36d5570 100644
--- a/app/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector.tsx
+++ b/app/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector.tsx
@@ -53,6 +53,7 @@ export function AssociatedEnvironmentsSelector({
                   );
                 }
               }}
+              data-cy="edgeGroupCreate-associatedEndpoints"
             />
           </div>
         </div>
diff --git a/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx b/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
index 7c91c8010..fc3986a75 100644
--- a/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
+++ b/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
@@ -69,8 +69,13 @@ function CreateView() {
             <Widget.Body>
               <TextTip color="blue" className="mb-2">
                 Devices need to be allocated to an Edge group, visit the{' '}
-                <Link to="edge.groups">Edge Groups</Link> page to assign
-                environments and create groups.
+                <Link
+                  to="edge.groups"
+                  data-cy="update-schedules-create-edge-groups-link"
+                >
+                  Edge Groups
+                </Link>{' '}
+                page to assign environments and create groups.
               </TextTip>
 
               <Formik
@@ -106,6 +111,7 @@ function CreateView() {
                       <div className="col-sm-12">
                         <LoadingButton
                           disabled={!isValid}
+                          data-cy="update-schedules-create-submit-button"
                           isLoading={createMutation.isLoading}
                           loadingText="Creating..."
                         >
diff --git a/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx b/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
index fa99ac0bc..99b93c44e 100644
--- a/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
+++ b/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
@@ -93,8 +93,13 @@ function ItemView() {
             <Widget.Body>
               <TextTip color="blue">
                 Devices need to be allocated to an Edge group, visit the{' '}
-                <Link to="edge.groups">Edge Groups</Link> page to assign
-                environments and create groups.
+                <Link
+                  to="edge.groups"
+                  data-cy="update-schedules-edge-groups-link"
+                >
+                  Edge Groups
+                </Link>{' '}
+                page to assign environments and create groups.
               </TextTip>
 
               <Formik
@@ -159,6 +164,7 @@ function ItemView() {
                       <div className="col-sm-12">
                         <LoadingButton
                           disabled={!isValid}
+                          data-cy="update-schedule-button"
                           isLoading={updateMutation.isLoading}
                           loadingText="Updating..."
                         >
diff --git a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
index c0d16fea2..d7035ef31 100644
--- a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
@@ -76,6 +76,7 @@ export function ListView() {
           <TableActions selectedRows={selectedRows} />
         )}
         isRowSelectable={(row) => row.original.status === StatusType.Pending}
+        data-cy="environment-update-schedules-datatable"
       />
     </>
   );
@@ -92,9 +93,12 @@ function TableActions({
       <DeleteButton
         onConfirmed={() => handleRemove()}
         disabled={selectedRows.length === 0}
+        data-cy="remove-update-schedules-button"
         confirmMessage="Are you sure you want to remove these schedules?"
       />
-      <AddButton to=".create">Add update & rollback schedule</AddButton>
+      <AddButton to=".create" data-cy="add-update-schedules-button">
+        Add update & rollback schedule
+      </AddButton>
     </>
   );
 
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
index e3e3da5b1..763cd9a23 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
@@ -9,7 +9,7 @@ import { scheduledTime } from './scheduled-time';
 import { scheduleType } from './type';
 
 export const columns = [
-  buildNameColumn<DecoratedItem>('name', '.item'),
+  buildNameColumn<DecoratedItem>('name', '.item', 'update-schedules-name'),
   scheduledTime,
   groups,
   scheduleType,
diff --git a/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx b/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
index ba135a432..87818814b 100644
--- a/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
+++ b/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
@@ -53,6 +53,7 @@ export function EdgeGroupsField({
           getOptionValue={(group) => group.Id.toString()}
           closeMenuOnSelect={false}
           isDisabled={disabled}
+          data-cy="update-schedules-edge-groups-select"
         />
       </FormControl>
       <TextTip color="blue">
diff --git a/app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx b/app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx
index 61c6dd069..61c4bd359 100644
--- a/app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx
+++ b/app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx
@@ -55,7 +55,11 @@ export function ScheduledTimeField({ disabled }: Props) {
             minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
           />
         ) : (
-          <Input defaultValue={value} disabled />
+          <Input
+            defaultValue={value}
+            disabled
+            data-cy="update-schedules-time-input"
+          />
         )}
       </FormControl>
       {!disabled && value && (
diff --git a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
index cee966a05..ee4ad0ce6 100644
--- a/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx
@@ -63,6 +63,7 @@ export function EnvironmentTypeSelectView() {
               </div>
               <Button
                 disabled={types.length === 0}
+                data-cy="start-wizard-button"
                 onClick={() => startWizard()}
               >
                 Start Wizard
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
index 6f1bf1c1f..ff9e24104 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/EnvironmentsCreationView.tsx
@@ -93,10 +93,17 @@ export function EnvironmentCreationView() {
                     'flex justify-between'
                   )}
                 >
-                  <Button disabled={isFirstStep} onClick={onPreviousClick}>
+                  <Button
+                    disabled={isFirstStep}
+                    onClick={onPreviousClick}
+                    data-cy="environment-wizard-previous-button"
+                  >
                     <Icon icon={ArrowLeft} /> Previous
                   </Button>
-                  <Button onClick={onNextClick}>
+                  <Button
+                    onClick={onNextClick}
+                    data-cy="environment-wizard-next-button"
+                  >
                     {isLastStep ? 'Close' : 'Next'}
                     <Icon icon={ArrowRight} />
                   </Button>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
index 516829ca1..4df2b6fc4 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardAzure/WizardAzure.tsx
@@ -127,6 +127,7 @@ export function WizardAzure({ onCreate }: Props) {
               <div className="col-sm-12">
                 <LoadingButton
                   className="vertical-center"
+                  data-cy="create-azure-environment-button"
                   loadingText="Connecting environment..."
                   isLoading={mutation.isLoading}
                   disabled={!dirty || !isValid}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
index c4c91e4f0..a88fc33de 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
@@ -87,6 +87,7 @@ export function APIForm({ onCreate }: Props) {
             <div className="col-sm-12">
               <LoadingButton
                 className="wizard-connect-button vertical-center"
+                data-cy="docker-aconnect-button"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/DeploymentScripts.tsx
index 855e0aab0..c747c8d2e 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/DeploymentScripts.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/DeploymentScripts.tsx
@@ -52,7 +52,9 @@ function DeployCode({ code }: DeployCodeProps) {
 
       <Code>{code}</Code>
       <div className="mt-2">
-        <CopyButton copyText={code}>Copy command</CopyButton>
+        <CopyButton copyText={code} data-cy="copy-deployment-command">
+          Copy command
+        </CopyButton>
       </div>
     </>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
index b0f455718..a6f4a049d 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx
@@ -83,7 +83,9 @@ function DeployCode({ code }: DeployCodeProps) {
         <Code>{code}</Code>
       </div>
       <div className="mt-2">
-        <CopyButton copyText={code}>Copy command</CopyButton>
+        <CopyButton copyText={code} data-cy="copy-deployment-script">
+          Copy command
+        </CopyButton>
       </div>
     </>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
index 0c5fba9d1..b8eeecb80 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
@@ -53,6 +53,7 @@ export function SocketForm({ onCreate }: Props) {
             <div className="col-sm-12">
               <LoadingButton
                 className="wizard-connect-button vertical-center"
+                data-cy="docker-socket-connect-button"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
@@ -94,6 +95,7 @@ function OverrideSocketFieldset() {
         <div className="col-sm-12">
           <SwitchField
             checked={values.overridePath}
+            data-cy="create-docker-env-socket-override-switch"
             onChange={(checked) => setFieldValue('overridePath', checked)}
             label="Override default socket path"
             labelClass="col-sm-3 col-lg-2"
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
index 128ec2fb6..44b622ff5 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx
@@ -110,7 +110,9 @@ function DeployCode({
       )}
       <Code>{code}</Code>
       <div className="mt-2">
-        <CopyButton copyText={code}>Copy command</CopyButton>
+        <CopyButton copyText={code} data-cy="copy-deploy-agent-command-button">
+          Copy command
+        </CopyButton>
       </div>
     </>
   );
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
index 5d386ba14..3593b3786 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
@@ -78,13 +78,16 @@ export function KubeConfigTeaserForm() {
             required
             inputId="kubeconfig_file"
           >
-            <Button disabled>Select a file</Button>
+            <Button disabled data-cy="kubeconfig-file-upload">
+              Select a file
+            </Button>
           </FormControl>
 
           <div className="form-group">
             <div className="col-sm-12">
               <LoadingButton
                 className="wizard-connect-button !ml-0"
+                data-cy="kubeconfig-connect-environment-button"
                 loadingText="Connecting environment..."
                 isLoading={false}
                 disabled
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
index dcedcc512..91c9cf630 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
@@ -53,6 +53,7 @@ export function AgentForm({ onCreate }: Props) {
             <div className="col-sm-12">
               <LoadingButton
                 className="wizard-connect-button vertical-center"
+                data-cy="agent-connect-environment-button"
                 loadingText="Connecting environment..."
                 isLoading={mutation.isLoading}
                 disabled={!dirty || !isValid}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
index 58432adbe..9b4e89330 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
@@ -76,6 +76,7 @@ export function EdgeAgentForm({ onCreate, readonly, asyncMode }: Props) {
               <div className="col-sm-12">
                 <LoadingButton
                   className="vertical-center"
+                  data-cy="edge-agent-form-submit-button"
                   isLoading={createMutation.isLoading}
                   loadingText="Creating environment..."
                   disabled={!isValid}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
index 1ce5fc102..8f5e619da 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
@@ -50,7 +50,12 @@ export function EdgeAgentTab({ onCreate, commands, asyncMode = false }: Props) {
 
           <div className="row">
             <div className="flex justify-end">
-              <Button color="primary" type="reset" onClick={handleReset}>
+              <Button
+                color="primary"
+                type="reset"
+                onClick={handleReset}
+                data-cy="edge-agent-tab-add-environment-button"
+              >
                 Add another environment
               </Button>
             </div>
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/MetadataFieldset/GroupsField.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/MetadataFieldset/GroupsField.tsx
index 1f6b403f4..007edfc3e 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/MetadataFieldset/GroupsField.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/MetadataFieldset/GroupsField.tsx
@@ -23,6 +23,7 @@ export function GroupField({ name = 'meta.groupId' }: { name?: string }) {
     <FormControl label="Group" errors={metaProps.error}>
       <Select
         name={name}
+        data-cy="environment-group-select"
         options={options}
         value={fieldProps.value}
         onChange={(e) => handleChange(e.target.value)}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
index f0c50c3b8..527becfe1 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
@@ -35,10 +35,10 @@ export function NameField({
     >
       <Input
         id={id}
+        data-cy="environmentCreate-nameInput"
         name="name"
         onChange={(e) => setDebouncedValue(e.target.value)}
         value={debouncedValue}
-        data-cy="endpointCreate-nameInput"
         placeholder={placeholder}
         readOnly={readonly}
       />
diff --git a/app/react/portainer/environments/wizard/HomeView/HomeView.tsx b/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
index 28ddb5698..4b58944c6 100644
--- a/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
+++ b/app/react/portainer/environments/wizard/HomeView/HomeView.tsx
@@ -62,7 +62,11 @@ export function HomeView() {
 
                 <div className="flex flex-wrap gap-4">
                   {localEnvironmentAdded.status === 'success' && (
-                    <Link to="portainer.home" className={styles.link}>
+                    <Link
+                      to="portainer.home"
+                      className={styles.link}
+                      data-cy="wizard-get-started-link"
+                    >
                       <Option
                         icon={
                           localEnvironmentAdded.type === EnvironmentType.Docker
@@ -75,7 +79,11 @@ export function HomeView() {
                       />
                     </Link>
                   )}
-                  <Link to="portainer.wizard.endpoints" className={styles.link}>
+                  <Link
+                    to="portainer.wizard.endpoints"
+                    className={styles.link}
+                    data-cy="wizard-add-environments-link"
+                  >
                     <Option
                       title="Add Environments"
                       icon={Plug2}
diff --git a/app/react/portainer/gitops/AdditionalFilesField.tsx b/app/react/portainer/gitops/AdditionalFilesField.tsx
index 552d7adc4..51a9f95d8 100644
--- a/app/react/portainer/gitops/AdditionalFilesField.tsx
+++ b/app/react/portainer/gitops/AdditionalFilesField.tsx
@@ -22,6 +22,7 @@ export function AdditionalFileField({ onChange, value, errors }: Props) {
       addLabel="Add file"
       item={Item}
       itemBuilder={() => ''}
+      data-cy="gitops-additional-files"
     />
   );
 }
@@ -32,6 +33,7 @@ function Item({
   disabled,
   error,
   readOnly,
+  index,
 }: ItemProps<string>) {
   const [inputValue, updateInputValue] = useStateWrapper(item, onChange);
 
@@ -47,6 +49,7 @@ function Item({
           onChange={(e) => {
             updateInputValue(e.target.value);
           }}
+          data-cy={`gitops-additional-files_${index}`}
         />
       </InputGroup>
       {error && (
diff --git a/app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx b/app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx
index 76c350298..13d53e896 100644
--- a/app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx
+++ b/app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx
@@ -40,6 +40,7 @@ export function CredentialSelector({
             isClearable
             noOptionsMessage={() => 'no saved credentials'}
             inputId="git-creds-selector"
+            data-cy="git-credentials-selector"
           />
         </FormControl>
       </div>
diff --git a/app/react/portainer/gitops/AuthFieldset/NewCredentialForm.tsx b/app/react/portainer/gitops/AuthFieldset/NewCredentialForm.tsx
index 983a764b1..2e0bc505f 100644
--- a/app/react/portainer/gitops/AuthFieldset/NewCredentialForm.tsx
+++ b/app/react/portainer/gitops/AuthFieldset/NewCredentialForm.tsx
@@ -23,6 +23,7 @@ export function NewCredentialForm({
           <div className="flex items-center gap-2">
             <Checkbox
               id="repository-save-credential"
+              data-cy="gitops-save-credential-checkbox"
               label="save credential"
               checked={value.SaveCredential || false}
               className="[&+label]:mb-0"
@@ -30,6 +31,7 @@ export function NewCredentialForm({
             />
             <Input
               value={value.NewCredentialName || ''}
+              data-cy="gitops-new-credential-name-input"
               name="new_credential_name"
               placeholder="credential name"
               className="ml-4 w-48"
diff --git a/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateFieldset.tsx b/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateFieldset.tsx
index 25031e42c..37d3944da 100644
--- a/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateFieldset.tsx
+++ b/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateFieldset.tsx
@@ -32,6 +32,7 @@ export function AutoUpdateFieldset({
         <div className="col-sm-12">
           <SwitchField
             name="autoUpdate"
+            data-cy="gitops-auto-update-switch"
             checked={value.RepositoryAutomaticUpdates}
             label="GitOps updates"
             tooltip="When enabled, at each polling interval or webhook invocation, if the
diff --git a/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateSettings.tsx b/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateSettings.tsx
index 2f8e2c659..48b40a642 100644
--- a/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateSettings.tsx
+++ b/app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateSettings.tsx
@@ -72,6 +72,7 @@ export function AutoUpdateSettings({
           <div className="col-sm-12">
             <SwitchField
               name="forcePullImage"
+              data-cy="gitops-force-pull-image-switch"
               featureId={FeatureId.STACK_PULL_IMAGE}
               checked={value.ForcePullImage || false}
               label="Re-pull image"
diff --git a/app/react/portainer/gitops/AutoUpdateFieldset/ForceDeploymentSwitch.tsx b/app/react/portainer/gitops/AutoUpdateFieldset/ForceDeploymentSwitch.tsx
index d218c2c0f..449fa859f 100644
--- a/app/react/portainer/gitops/AutoUpdateFieldset/ForceDeploymentSwitch.tsx
+++ b/app/react/portainer/gitops/AutoUpdateFieldset/ForceDeploymentSwitch.tsx
@@ -20,6 +20,7 @@ export function ForceDeploymentSwitch({
       <div className="col-sm-12">
         <SwitchField
           name="forceUpdate"
+          data-cy="gitops-force-redeployment-switch"
           featureId={FeatureId.FORCE_REDEPLOYMENT}
           checked={checked}
           label={label}
diff --git a/app/react/portainer/gitops/AutoUpdateFieldset/IntervalField.tsx b/app/react/portainer/gitops/AutoUpdateFieldset/IntervalField.tsx
index 819caf0f0..087dfafdd 100644
--- a/app/react/portainer/gitops/AutoUpdateFieldset/IntervalField.tsx
+++ b/app/react/portainer/gitops/AutoUpdateFieldset/IntervalField.tsx
@@ -26,6 +26,7 @@ export function IntervalField({
     >
       <Input
         mRef={ref}
+        data-cy="repository-fetch-interval-input"
         id="repository_fetch_interval"
         name="repository_fetch_interval"
         placeholder="5m"
diff --git a/app/react/portainer/gitops/AutoUpdateFieldset/WebhookSettings.tsx b/app/react/portainer/gitops/AutoUpdateFieldset/WebhookSettings.tsx
index 00bd61b07..284e568a5 100644
--- a/app/react/portainer/gitops/AutoUpdateFieldset/WebhookSettings.tsx
+++ b/app/react/portainer/gitops/AutoUpdateFieldset/WebhookSettings.tsx
@@ -32,7 +32,11 @@ export function WebhookSettings({
     >
       <div className="flex items-center gap-2">
         <span className="text-muted">{truncateLeftRight(url)}</span>
-        <CopyButton copyText={url} color="light">
+        <CopyButton
+          copyText={url}
+          color="light"
+          data-cy="copy-webhook-link-button"
+        >
           Copy link
         </CopyButton>
       </div>
diff --git a/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx b/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
index 85c41689f..df65dd720 100644
--- a/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
+++ b/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
@@ -71,6 +71,7 @@ export function ComposePathField({
           ) : (
             <Input
               value={inputValue}
+              data-cy="stack-repository-path-input"
               onChange={(e) => {
                 updateInputValue(e.target.value);
               }}
diff --git a/app/react/portainer/gitops/ComposePathField/PathSelector.tsx b/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
index da6650b3b..668e0d2b8 100644
--- a/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
+++ b/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
@@ -50,6 +50,7 @@ export function PathSelector({
       placeholder={placeholder}
       readOnly={readOnly}
       inputId={inputId}
+      data-cy="git-ops-path-selector"
     />
   );
 }
diff --git a/app/react/portainer/gitops/GitForm.tsx b/app/react/portainer/gitops/GitForm.tsx
index 06f811e0a..95a1fe357 100644
--- a/app/react/portainer/gitops/GitForm.tsx
+++ b/app/react/portainer/gitops/GitForm.tsx
@@ -121,6 +121,7 @@ export function GitForm({
         <div className="col-sm-12">
           <SwitchField
             label="Skip TLS Verification"
+            data-cy="gitops-skip-tls-verification-switch"
             checked={value.TLSSkipVerify || false}
             onChange={(value) => handleChange({ TLSSkipVerify: value })}
             name="TLSSkipVerify"
diff --git a/app/react/portainer/gitops/GitFormUrlField.tsx b/app/react/portainer/gitops/GitFormUrlField.tsx
index 7e62f20b8..ff257b761 100644
--- a/app/react/portainer/gitops/GitFormUrlField.tsx
+++ b/app/react/portainer/gitops/GitFormUrlField.tsx
@@ -92,6 +92,7 @@ export function GitFormUrlField({
 
             <Button
               onClick={onRefresh}
+              data-cy="component-gitUrlRefreshButton"
               size="medium"
               className="vertical-center"
               color="light"
diff --git a/app/react/portainer/gitops/RefField/RefField.tsx b/app/react/portainer/gitops/RefField/RefField.tsx
index 3261574ef..5f78168c9 100644
--- a/app/react/portainer/gitops/RefField/RefField.tsx
+++ b/app/react/portainer/gitops/RefField/RefField.tsx
@@ -72,6 +72,7 @@ export function RefField({
     >
       <Input
         id={inputId}
+        data-cy="repository-reference-input"
         value={inputValue}
         onChange={(e) => updateInputValue(e.target.value)}
         placeholder="refs/heads/main"
diff --git a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
index 516b6d4bc..67fe5f446 100644
--- a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
+++ b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
@@ -55,6 +55,7 @@ export function RelativePathFieldset({
         <div className="col-sm-12">
           <SwitchField
             name="EnableRelativePaths"
+            data-cy="gitops-enable-relative-paths-switch"
             label="Enable relative path volumes"
             labelClass="col-sm-3 col-lg-2"
             tooltip="Enabling this means you can specify relative path volumes in your Compose files, with Portainer pulling the content from your git repository to the environment the stack is deployed to."
@@ -86,6 +87,7 @@ export function RelativePathFieldset({
               >
                 <Input
                   name="FilesystemPath"
+                  data-cy="relative-path-filesystem-path-input"
                   placeholder="/mnt"
                   disabled={isEditing || !enableFsPath0}
                   value={value.FilesystemPath}
@@ -114,6 +116,7 @@ export function RelativePathFieldset({
             <div className="col-sm-12">
               <SwitchField
                 name="EnablePerDeviceConfigs"
+                data-cy="gitops-enable-per-device-configs-switch"
                 label="GitOps Edge configurations"
                 labelClass="col-sm-3 col-lg-2"
                 tooltip="By enabling the GitOps Edge Configurations feature, you gain the ability to define relative path volumes in your configuration files. Portainer will then automatically fetch the content from your git repository by matching the folder name or file name with the Portainer Edge ID, and apply it to the environment where the stack is deployed"
@@ -148,6 +151,7 @@ export function RelativePathFieldset({
                     >
                       <Input
                         name="FilesystemPath"
+                        data-cy="per-device-configs-filesystem-path-input"
                         placeholder="/mnt"
                         disabled={isEditing || !enableFsPath1}
                         value={value.FilesystemPath}
@@ -210,6 +214,7 @@ export function RelativePathFieldset({
                   <FormControl label="Device matching rule">
                     <Select
                       value={value.PerDeviceConfigsMatchType}
+                      data-cy="per-device-configs-match-type-select"
                       onChange={(e) =>
                         innerOnChange({
                           PerDeviceConfigsMatchType: getPerDevConfigsFilterType(
@@ -242,6 +247,7 @@ export function RelativePathFieldset({
                   <FormControl label="Group matching rule">
                     <Select
                       value={value.PerDeviceConfigsGroupMatchType}
+                      data-cy="per-device-configs-group-match-type-select"
                       onChange={(e) =>
                         innerOnChange({
                           PerDeviceConfigsGroupMatchType:
diff --git a/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx b/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
index 086f99427..65a791da4 100644
--- a/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
+++ b/app/react/portainer/logs/ActivityLogsView/ActivityLogsTable.tsx
@@ -38,7 +38,12 @@ const columns = [
     enableSorting: false,
     cell: ({ row, getValue }) =>
       getValue() ? (
-        <Button color="link" onClick={() => row.toggleExpanded()} icon={Search}>
+        <Button
+          color="link"
+          onClick={() => row.toggleExpanded()}
+          icon={Search}
+          data-cy={`activity-logs-inspect_${row.index}`}
+        >
           inspect
         </Button>
       ) : null,
@@ -95,6 +100,7 @@ export function ActivityLogsTable({
       totalCount={totalItems}
       disableSelect
       renderSubRow={(row) => <SubRow item={row.original} />}
+      data-cy="activity-logs-datatable"
     />
   );
 }
diff --git a/app/react/portainer/logs/ActivityLogsView/FilterBar.tsx b/app/react/portainer/logs/ActivityLogsView/FilterBar.tsx
index 822372701..272198c9d 100644
--- a/app/react/portainer/logs/ActivityLogsView/FilterBar.tsx
+++ b/app/react/portainer/logs/ActivityLogsView/FilterBar.tsx
@@ -33,6 +33,7 @@ export function FilterBar({
               icon={DownloadIcon}
               onClick={onExport}
               className="!ml-0"
+              data-cy="activity-logs-export-csv-button"
             >
               Export as CSV
             </Button>
diff --git a/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx b/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
index da7122ec8..5494759f5 100644
--- a/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
+++ b/app/react/portainer/logs/AuthenticationLogsView/AuthenticationLogsTable.tsx
@@ -52,6 +52,7 @@ export function AuthenticationLogsTable({
       isServerSidePagination
       totalCount={totalItems}
       disableSelect
+      data-cy="authentication-logs-datatable"
     />
   );
 }
diff --git a/app/react/portainer/notifications/NotificationsView.tsx b/app/react/portainer/notifications/NotificationsView.tsx
index afb3b69d0..cbd286419 100644
--- a/app/react/portainer/notifications/NotificationsView.tsx
+++ b/app/react/portainer/notifications/NotificationsView.tsx
@@ -53,6 +53,7 @@ export function NotificationsView() {
         )}
         getRowId={(row) => row.id}
         highlightedItemId={activeItemId}
+        data-cy="notifications-datatable"
       />
     </>
   );
@@ -65,6 +66,7 @@ function TableActions({ selectedRows }: { selectedRows: ToastNotification[] }) {
     <DeleteButton
       onConfirmed={() => handleRemove()}
       disabled={selectedRows.length === 0}
+      data-cy="remove-notifications-button"
       confirmMessage="Are you sure you want to remove the selected notifications?"
     />
   );
diff --git a/app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx b/app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx
index d1e8b4afb..13832cc56 100644
--- a/app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx
+++ b/app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx
@@ -46,6 +46,7 @@ export function GitlabProjectTable({
         value.map(({ Id }) => `${Id}`)
       )}
       isRowSelectable={({ original: item }) => item.RegistryEnabled}
+      data-cy="gitlab-projects-datatable"
     />
   );
 }
diff --git a/app/react/portainer/registries/ListView/RegistriesDatatable/RegistriesDatatable.tsx b/app/react/portainer/registries/ListView/RegistriesDatatable/RegistriesDatatable.tsx
index e9b8d223e..46616b7c9 100644
--- a/app/react/portainer/registries/ListView/RegistriesDatatable/RegistriesDatatable.tsx
+++ b/app/react/portainer/registries/ListView/RegistriesDatatable/RegistriesDatatable.tsx
@@ -35,6 +35,7 @@ export function RegistriesDatatable() {
         </>
       )}
       isRowSelectable={(row) => !!row.original.Id}
+      data-cy="registries-datatable"
     />
   );
 }
diff --git a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/DefaultRegistryAction.tsx b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/DefaultRegistryAction.tsx
index d74ce2f6a..1a75e9f97 100644
--- a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/DefaultRegistryAction.tsx
+++ b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/DefaultRegistryAction.tsx
@@ -31,6 +31,7 @@ export function DefaultRegistryAction() {
         <div className="vertical-center">
           <Button
             color="danger"
+            data-cy="hide-default-registry-button"
             icon={EyeOff}
             onClick={() => handleShowOrHide(true)}
             disabled={isLimited}
@@ -47,7 +48,11 @@ export function DefaultRegistryAction() {
         </div>
       ) : (
         <div className="vertical-center">
-          <Button icon={Eye} onClick={() => handleShowOrHide(false)}>
+          <Button
+            data-cy="show-default-registry-button"
+            icon={Eye}
+            onClick={() => handleShowOrHide(false)}
+          >
             Show for all users
           </Button>
           <Tooltip
diff --git a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/actions.tsx b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/actions.tsx
index 390a92548..86735e3d5 100644
--- a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/actions.tsx
+++ b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/actions.tsx
@@ -9,7 +9,7 @@ import { Button } from '@@/buttons';
 import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
 
 import { DecoratedRegistry } from '../types';
-import { RegistryId, RegistryTypes } from '../../../types/registry';
+import { RegistryTypes } from '../../../types/registry';
 
 import { columnHelper } from './helper';
 import { DefaultRegistryAction } from './DefaultRegistryAction';
@@ -32,19 +32,17 @@ function Cell({
     return <DefaultRegistryAction />;
   }
 
-  return <BrowseButton registryId={item.Id} registryType={item.Type} />;
+  return <BrowseButton registry={item} />;
 }
 
 export function BrowseButton({
-  registryId,
-  registryType,
+  registry,
   environmentId,
 }: {
-  registryId: RegistryId;
-  registryType: RegistryTypes;
+  registry: DecoratedRegistry;
   environmentId?: EnvironmentId;
 }) {
-  const canBrowse = !nonBrowsableTypes.includes(registryType);
+  const canBrowse = !nonBrowsableTypes.includes(registry.Type);
 
   if (!canBrowse) {
     return null;
@@ -58,10 +56,12 @@ export function BrowseButton({
           as={Link}
           props={{
             to: 'portainer.registries.registry.repositories',
-            params: { id: registryId, endpointId: environmentId },
+            params: { id: registry.Id, endpointId: environmentId },
+            'data-cy': `browse-registry-link-${registry.Name}`,
           }}
           disabled={isLimited}
           icon={Search}
+          data-cy={`browse-registry-button-${registry.Name}`}
         >
           Browse
         </Button>
diff --git a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/name.tsx b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/name.tsx
index 7c0a5f66d..20335e81c 100644
--- a/app/react/portainer/registries/ListView/RegistriesDatatable/columns/name.tsx
+++ b/app/react/portainer/registries/ListView/RegistriesDatatable/columns/name.tsx
@@ -36,7 +36,11 @@ export function NameCell({
   return (
     <>
       {isEdgeAdminQuery.isAdmin && hasLink ? (
-        <Link to="portainer.registries.registry" params={{ id: item.Id }}>
+        <Link
+          to="portainer.registries.registry"
+          params={{ id: item.Id }}
+          data-cy={`registry-link-${item.Name}`}
+        >
           {item.Name}
         </Link>
       ) : (
diff --git a/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/EnvironmentRegistriesDatatable.tsx b/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/EnvironmentRegistriesDatatable.tsx
index 60cd7c54d..b01451d5d 100644
--- a/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/EnvironmentRegistriesDatatable.tsx
+++ b/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/EnvironmentRegistriesDatatable.tsx
@@ -34,6 +34,7 @@ export function EnvironmentRegistriesDatatable() {
       titleIcon={Radio}
       renderTableActions={() => <AddButton />}
       disableSelect
+      data-cy="environment-registries-datatable"
     />
   );
 }
diff --git a/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/columns/actions.tsx b/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/columns/actions.tsx
index e65a4a4d7..28f612854 100644
--- a/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/columns/actions.tsx
+++ b/app/react/portainer/registries/environments/ListView/EnvironmentRegistriesDatatable/columns/actions.tsx
@@ -40,17 +40,18 @@ function Cell({
             color="link"
             icon={Users}
             as={Link}
-            props={{ to: '.access', params: { id: item.Id } }}
+            props={{
+              to: '.access',
+              params: { id: item.Id },
+              'data-cy': `manage-access-link-${item.Name}`,
+            }}
+            data-cy={`registry-manage-access-button-${item.Name}`}
           >
             Manage access
           </Button>
         </Authorized>
       )}
-      <BrowseButton
-        registryId={item.Id}
-        registryType={item.Type}
-        environmentId={environmentId}
-      />
+      <BrowseButton registry={item} environmentId={environmentId} />
     </>
   );
 }
diff --git a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/TagsDatatable.tsx b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/TagsDatatable.tsx
index 36333af17..73b3af73f 100644
--- a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/TagsDatatable.tsx
+++ b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/TagsDatatable.tsx
@@ -41,6 +41,7 @@ export function TagsDatatable({
           <DeleteButton
             confirmMessage="Are you sure you want to remove the selected tags?"
             onConfirmed={() => onRemove(selectedItems)}
+            data-cy="remove-registry-tags-button"
           />
         )
       }
@@ -52,6 +53,7 @@ export function TagsDatatable({
         },
         table: 'registry-repository-tags',
       })}
+      data-cy="registry-tags-datatable"
     />
   );
 }
diff --git a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/actions.tsx b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/actions.tsx
index 2473f061a..e8e10f608 100644
--- a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/actions.tsx
+++ b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/actions.tsx
@@ -43,6 +43,7 @@ function ActionsCell({
         color="link"
         icon={TagIcon}
         onClick={() => state.setName(item.Name, tagDetails)}
+        data-cy={`retag-${item.Name}`}
       >
         Retag
       </Button>
@@ -101,12 +102,23 @@ function EditTag({
             }}
             autoFocus
             onClick={(e) => e.stopPropagation()}
+            data-cy={`retag-input-${initialName}`}
           />
 
           {errors.name && <FormError>{errors.name}</FormError>}
 
-          <Button color="none" icon={X} onClick={onCancel} />
-          <Button type="submit" color="none" icon={Check} />
+          <Button
+            color="none"
+            icon={X}
+            onClick={onCancel}
+            data-cy={`retag-cancel-${initialName}`}
+          />
+          <Button
+            type="submit"
+            color="none"
+            icon={Check}
+            data-cy={`retag-submit-${initialName}`}
+          />
         </Form>
       )}
     </Formik>
diff --git a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/useColumns.ts b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/useColumns.ts
index 1d5f1e0ac..4f07b5bec 100644
--- a/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/useColumns.ts
+++ b/app/react/portainer/registries/repositories/ItemView/TagsDatatable/columns/useColumns.ts
@@ -17,6 +17,7 @@ const columns = [
     'Name',
     'portainer.registries.registry.repository.tag',
     'tag',
+    'registry-tag-name',
     (item) => item.Name
   ),
   helper.display({
diff --git a/app/react/portainer/registries/repositories/ListView/RepositoriesDatatable.tsx b/app/react/portainer/registries/repositories/ListView/RepositoriesDatatable.tsx
index f73d09a03..61badeb97 100644
--- a/app/react/portainer/registries/repositories/ListView/RepositoriesDatatable.tsx
+++ b/app/react/portainer/registries/repositories/ListView/RepositoriesDatatable.tsx
@@ -18,6 +18,7 @@ export function RepositoriesDatatable({ dataset }: { dataset?: Repository[] }) {
       settingsManager={tableState}
       emptyContentLabel="No repository available."
       disableSelect
+      data-cy="registry-repositories-datatable"
     />
   );
 }
diff --git a/app/react/portainer/registries/repositories/ListView/columns.tsx b/app/react/portainer/registries/repositories/ListView/columns.tsx
index c374840f6..2e80b9bdf 100644
--- a/app/react/portainer/registries/repositories/ListView/columns.tsx
+++ b/app/react/portainer/registries/repositories/ListView/columns.tsx
@@ -49,6 +49,7 @@ function NameCell({ getValue }: CellContext<Repository, string>) {
       to="portainer.registries.registry.repository"
       params={{ repository: name, endpointId: environmentId }}
       title={name}
+      data-cy={`repository-name-link-${name}`}
     >
       {name}
     </Link>
diff --git a/app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx
index 1765be496..c32bc7c5e 100644
--- a/app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx
@@ -14,6 +14,7 @@ export function SaveAuthSettingsButton({ onSubmit, isLoading }: Props) {
         <div className="col-sm-12">
           <LoadingButton
             loadingText="Saving..."
+            data-cy="save-auth-settings-button"
             isLoading={isLoading}
             onClick={() => onSubmit()}
           >
diff --git a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx
index a61df25eb..808a2e42b 100644
--- a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx
+++ b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx
@@ -24,6 +24,7 @@ export function LDAPGroupsTable({ dataset }: { dataset?: Value[] }) {
       settingsManager={tableState}
       emptyContentLabel="No groups found."
       disableSelect
+      data-cy="ldap-groups-datatable"
     />
   );
 }
diff --git a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx
index c394d46e4..f7597b5ac 100644
--- a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx
+++ b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx
@@ -23,6 +23,7 @@ export function LDAPUsersTable({ dataset }: { dataset?: string[] }) {
       settingsManager={tableState}
       emptyContentLabel="No users found."
       disableSelect
+      data-cy="ldap-users-datatable"
     />
   );
 }
diff --git a/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
index 7efb7b016..b75c5ea13 100644
--- a/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
@@ -63,6 +63,7 @@ export function AutoEnvCreationSettingsForm({ settings }: Props) {
             <div className="col-sm-12">
               <LoadingButton
                 loadingText="generating..."
+                data-cy="save-auto-env-settings-button"
                 isLoading={mutation.isLoading}
                 disabled={!isValid || !dirty}
                 className="!ml-0"
diff --git a/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
index 81c3e6b62..45b557991 100644
--- a/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
@@ -18,6 +18,7 @@ export function EnabledWaitingRoomSwitch() {
     >
       <Switch
         id="edge_waiting_room"
+        data-cy="edge-waiting-room-switch"
         name="EnableWaitingRoom"
         className="space-right"
         checked={inputProps.value}
diff --git a/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx
index b17c6586f..c999b6a1b 100644
--- a/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx
@@ -69,6 +69,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                 >
                   <Switch
                     id="edge_enable"
+                    data-cy="edge-enable-switch"
                     name="edge_enable"
                     className="space-right"
                     checked={values.EnableEdgeComputeFeatures}
@@ -103,6 +104,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                 >
                   <Switch
                     id="edge_enforce_id"
+                    data-cy="edge-enforce-id-switch"
                     name="edge_enforce_id"
                     className="space-right"
                     checked={values.EnforceEdgeID}
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
index bb1936225..ee76542ec 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
@@ -40,6 +40,7 @@ export function FDOProfilesDatatable({
           selectedItems={selectedItems}
         />
       )}
+      data-cy="fdo-profiles-datatable"
     />
   );
 }
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
index 1b78e96b5..f7f60c457 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
@@ -28,14 +28,23 @@ export function FDOProfilesDatatableActions({
 
   return (
     <>
-      <Link to="portainer.endpoints.profile" className="space-left">
-        <Button disabled={!isFDOEnabled} icon={PlusCircle}>
+      <Link
+        to="portainer.endpoints.profile"
+        className="space-left"
+        data-cy="fdo-add-profile-link"
+      >
+        <Button
+          disabled={!isFDOEnabled}
+          icon={PlusCircle}
+          data-cy="fdo-add-profile-button"
+        >
           Add Profile
         </Button>
       </Link>
 
       <Button
         disabled={!isFDOEnabled || selectedItems.length !== 1}
+        data-cy="fdo-duplicate-profile-button"
         onClick={() => onDuplicateProfileClick()}
         icon={PlusCircle}
       >
@@ -46,6 +55,7 @@ export function FDOProfilesDatatableActions({
         disabled={!isFDOEnabled || selectedItems.length === 0}
         onConfirmed={() => onDeleteProfileClick()}
         confirmMessage="This action will delete the selected profile(s). Continue?"
+        data-cy="fdo-remove-profile-button"
       />
     </>
   );
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
index 01ae237ee..7c10c2483 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
@@ -5,6 +5,10 @@ import { buildNameColumn } from '@@/datatables/buildNameColumn';
 import { created } from './created';
 
 export const columns = [
-  buildNameColumn<Profile>('name', 'portainer.endpoints.profile.edit'),
+  buildNameColumn<Profile>(
+    'name',
+    'portainer.endpoints.profile.edit',
+    'fdo-profiles-name'
+  ),
   created,
 ];
diff --git a/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
index eca5a3708..ea61f5005 100644
--- a/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
@@ -101,6 +101,7 @@ export function SettingsFDOForm({ settings, onSubmit }: Props) {
                 >
                   <Switch
                     id="edge_enableFDO"
+                    data-cy="edge-enableFDO-switch"
                     name="edge_enableFDO"
                     className="space-right"
                     disabled={!edgeComputeFeaturesEnabled}
diff --git a/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
index 53056551f..d5eb6b671 100644
--- a/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
@@ -122,6 +122,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                 >
                   <Switch
                     id="edge_enableOpenAMT"
+                    data-cy="edge-enableOpenAMT-switch"
                     name="edge_enableOpenAMT"
                     className="space-right"
                     disabled={!edgeComputeFeaturesEnabled}
@@ -218,6 +219,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                     >
                       <FileUploadField
                         inputId="certificate_file"
+                        data-cy="openAMT-certFileInput"
                         title="Upload file"
                         accept=".pfx"
                         value={certFile}
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx
index 95ec4a7ad..b8b2435ae 100644
--- a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/EnableTelemetryField.tsx
@@ -15,6 +15,7 @@ export function EnableTelemetryField() {
       <div className="col-sm-12">
         <SwitchField
           labelClass="col-sm-3 col-lg-2"
+          data-cy="settings-enable-telemetry-switch"
           label="Allow the collection of anonymous statistics"
           checked={value}
           name="toggle_enableTelemetry"
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/LogoFieldset.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/LogoFieldset.tsx
index e22d7e98b..306160ffa 100644
--- a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/LogoFieldset.tsx
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/LogoFieldset.tsx
@@ -22,6 +22,7 @@ export function LogoFieldset() {
         <div className="col-sm-12">
           <SwitchField
             label="Use custom logo"
+            data-cy="custom-logo-switch"
             checked={isEnabled}
             name="toggle_logo"
             labelClass="col-sm-3 col-lg-2"
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
index cc1590ee1..6c086b04a 100644
--- a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
@@ -22,6 +22,7 @@ export function ScreenBannerFieldset() {
         <div className="col-sm-12">
           <SwitchField
             labelClass="col-sm-3 col-lg-2"
+            data-cy="logo-banner-switch"
             label="Login screen banner"
             checked={isEnabled}
             name="toggle_login_banner"
diff --git a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupFileForm.tsx b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupFileForm.tsx
index 08c7f3e9b..c426353e2 100644
--- a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupFileForm.tsx
+++ b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupFileForm.tsx
@@ -37,6 +37,7 @@ export function BackupFileForm() {
             <div className="col-sm-12">
               <LoadingButton
                 loadingText="Downloading settings..."
+                data-cy="settings-downloadBackupLocalButton"
                 isLoading={isSubmitting}
                 disabled={!isValid}
                 className="!ml-0"
diff --git a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
index 7368013df..51a9f80bd 100644
--- a/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
+++ b/app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
@@ -64,6 +64,7 @@ export function BackupS3Form() {
               <div className="col-sm-12">
                 <SwitchField
                   name="schedule-automatic-backup"
+                  data-cy="settings-scheduleAutomaticBackupSwitch"
                   labelClass="col-sm-3 col-lg-2"
                   label="Schedule automatic backups"
                   checked={values.scheduleAutomaticBackup}
diff --git a/app/react/portainer/settings/SettingsView/ExperimentalFeatures/EnableOpenAIIntegrationSwitch.tsx b/app/react/portainer/settings/SettingsView/ExperimentalFeatures/EnableOpenAIIntegrationSwitch.tsx
index efd8de887..0470259e5 100644
--- a/app/react/portainer/settings/SettingsView/ExperimentalFeatures/EnableOpenAIIntegrationSwitch.tsx
+++ b/app/react/portainer/settings/SettingsView/ExperimentalFeatures/EnableOpenAIIntegrationSwitch.tsx
@@ -17,6 +17,7 @@ export function EnableOpenAIIntegrationSwitch() {
     >
       <Switch
         id="experimental_openAI"
+        data-cy="enable-openai-integration-switch"
         name={fieldKey}
         className="space-right"
         checked={inputProps.value}
diff --git a/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx b/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
index bc2301802..03384415f 100644
--- a/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
+++ b/app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
@@ -89,6 +89,7 @@ function InnerForm({ isLoading }: { isLoading: boolean }) {
       >
         <FileUploadField
           required
+          data-cy="helm-cert-panel-file-upload-field"
           inputId="ca-cert-field"
           name="clientCertFile"
           onChange={(file) => setFieldValue('clientCertFile', file)}
@@ -101,6 +102,7 @@ function InnerForm({ isLoading }: { isLoading: boolean }) {
         isLoading={isLoading}
         submitLabel="Apply changes"
         loadingText="Saving in progress..."
+        data-cy="helm-cert-panel-submit-button"
       />
     </Form>
   );
diff --git a/app/react/portainer/settings/SettingsView/HiddenContainersPanel/AddLabelForm.tsx b/app/react/portainer/settings/SettingsView/HiddenContainersPanel/AddLabelForm.tsx
index a568c17c8..de739ee6c 100644
--- a/app/react/portainer/settings/SettingsView/HiddenContainersPanel/AddLabelForm.tsx
+++ b/app/react/portainer/settings/SettingsView/HiddenContainersPanel/AddLabelForm.tsx
@@ -45,6 +45,7 @@ export function AddLabelForm({
 
             <Button
               type="submit"
+              data-cy="hidden-containersadd-label-button"
               icon={Plus}
               disabled={!dirty || !isValid || isLoading}
             >
diff --git a/app/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersTable.tsx b/app/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersTable.tsx
index 5d3bfe7b4..bd87563a3 100644
--- a/app/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersTable.tsx
+++ b/app/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersTable.tsx
@@ -19,6 +19,7 @@ export function HiddenContainersTable({
       headers={['Name', 'Value', '']}
       className="table-hover"
       emptyMessage="No filter available."
+      dataCy="hidden-containers-table"
     >
       {labels.map((label, index) => (
         <DetailsTable.Row
@@ -27,6 +28,7 @@ export function HiddenContainersTable({
           columns={[
             <Button
               color="danger"
+              data-cy="hidden-containers-remove-filter-button"
               size="xsmall"
               icon={Trash2}
               onClick={() => onDelete(label.name)}
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx
index 154c73d9a..24fe599a5 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx
@@ -22,6 +22,7 @@ export function DeploymentOptionsSection() {
         <div className="col-sm-12">
           <SwitchField
             label="Enforce code-based deployment"
+            data-cy="kube-settings-enforce-code-based-deployment"
             checked={values.hideAddWithForm}
             name="toggle_hideAddWithForm"
             featureId={FeatureId.ENFORCE_DEPLOYMENT_OPTIONS}
@@ -36,6 +37,7 @@ export function DeploymentOptionsSection() {
           <div className="col-sm-12">
             <SwitchField
               label="Allow web editor and custom template use"
+              data-cy="kube-settings-allow-web-editor-and-custom-template-use"
               checked={!values.hideWebEditor}
               name="toggle_hideWebEditor"
               onChange={(value) =>
@@ -47,6 +49,7 @@ export function DeploymentOptionsSection() {
           <div className="col-sm-12">
             <SwitchField
               label="Allow specifying of a manifest via a URL"
+              data-cy="kube-settings-allow-specifying-of-a-manifest-via-a-url"
               checked={!values.hideFileUpload}
               name="toggle_hideFileUpload"
               onChange={(value) =>
@@ -62,6 +65,7 @@ export function DeploymentOptionsSection() {
           <div className="col-sm-12">
             <SwitchField
               label="Allow per environment override"
+              data-cy="kube-settings-allow-per-environment-override"
               checked={values.perEnvOverride}
               onChange={(value) =>
                 setFieldValue('globalDeploymentOptions.perEnvOverride', value)
@@ -80,6 +84,7 @@ export function DeploymentOptionsSection() {
         <div className="col-sm-12">
           <SwitchField
             label="Allow stacks functionality with Kubernetes environments"
+            data-cy="kube-settings-allow-stacks-functionality"
             checked={!values.hideStacksFunctionality}
             onChange={(value) =>
               setFieldValue(
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
index 96eaf9d75..22790e781 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
@@ -28,6 +28,7 @@ export function HelmSection() {
         <Field
           as={Input}
           id="helm-repo-url"
+          data-cy="helm-repo-url-input"
           name={name}
           placeholder="https://charts.bitnami.com/bitnami"
         />
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
index 42a7bb569..b14deb95d 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
@@ -38,6 +38,7 @@ export function KubeConfigSection() {
           value={value}
           options={options}
           onChange={(value) => value && setValue(value)}
+          data-cy="kubeconfig-expiry-selector"
         />
       </FormControl>
     </FormSection>
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeNoteMinimumCharacters.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeNoteMinimumCharacters.tsx
index abca146f7..a0be0488e 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeNoteMinimumCharacters.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeNoteMinimumCharacters.tsx
@@ -24,6 +24,7 @@ export function KubeNoteMinimumCharacters() {
         <div className="col-sm-12">
           <SwitchField
             label="Require a note on applications"
+            data-cy="kube-settings-require-note-on-applications-switch"
             checked={isEnabled}
             name="toggle_requireNoteOnApplications"
             onChange={(value) => setIsEnabled(value)}
@@ -46,6 +47,7 @@ export function KubeNoteMinimumCharacters() {
         >
           <Input
             name="minNoteLength"
+            data-cy="min-note-length-input"
             type="number"
             placeholder="50"
             min="1"
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
index 6af5f1680..b77757d16 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
@@ -59,6 +59,7 @@ export function KubeSettingsPanel({ settings }: { settings: Settings }) {
                 <div className="col-sm-12">
                   <LoadingButton
                     isLoading={mutation.isLoading}
+                    data-cy="save-kubernetes-settings-button"
                     loadingText="Saving"
                     className="!ml-0"
                   >
diff --git a/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx
index 617fe9791..54de84224 100644
--- a/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx
+++ b/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx
@@ -68,6 +68,7 @@ function SSLSettingsPanel() {
                 <div className="col-sm-12">
                   <SwitchField
                     checked={values.forceHTTPS}
+                    data-cy="settings-ssl-force-https-switch"
                     label="Force HTTPS only"
                     labelClass="col-sm-3 col-lg-2"
                     name="forceHTTPS"
@@ -93,6 +94,7 @@ function SSLSettingsPanel() {
               >
                 <FileUploadField
                   inputId="ca-cert-field"
+                  data-cy="ssl-cert-file-upload"
                   name="certFile"
                   onChange={(file) => setFieldValue('certFile', file)}
                   value={values.certFile}
@@ -107,6 +109,7 @@ function SSLSettingsPanel() {
               >
                 <FileUploadField
                   inputId="ca-cert-field"
+                  data-cy="ssl-key-file-upload"
                   name="keyFile"
                   onChange={(file) => setFieldValue('keyFile', file)}
                   value={values.keyFile}
@@ -117,6 +120,7 @@ function SSLSettingsPanel() {
                 <div className="col-sm-12">
                   <LoadingButton
                     isLoading={mutation.isLoading || reloadingPage}
+                    data-cy="save-ssl-settings-button"
                     disabled={!dirty || !isValid}
                     loadingText={reloadingPage ? 'Reloading' : 'Saving'}
                     className="!ml-0"
diff --git a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
index bdef6b03d..00e4e54c5 100644
--- a/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
+++ b/app/react/portainer/templates/app-templates/AppTemplatesList.tsx
@@ -84,6 +84,7 @@ export function AppTemplatesList({
             fixedCategories={fixedCategories}
           />
         }
+        data-cy="app-templates-list-header"
       />
 
       <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]" role="list">
diff --git a/app/react/portainer/templates/app-templates/AppTemplatesListItem.tsx b/app/react/portainer/templates/app-templates/AppTemplatesListItem.tsx
index abba78ccf..9c2ebed7b 100644
--- a/app/react/portainer/templates/app-templates/AppTemplatesListItem.tsx
+++ b/app/react/portainer/templates/app-templates/AppTemplatesListItem.tsx
@@ -35,6 +35,7 @@ export function AppTemplatesListItem({
           <div className="mr-5 mt-3">
             <Button
               as={Link}
+              data-cy="app-templates-duplicate-button"
               size="xsmall"
               onClick={(e) => {
                 e.stopPropagation();
@@ -45,6 +46,7 @@ export function AppTemplatesListItem({
                   appTemplateId: template.Id,
                   type: duplicateCustomTemplateType,
                 },
+                'data-cy': `app-templates-duplicate-${template.Name}`,
               }}
             >
               Copy as Custom
diff --git a/app/react/portainer/templates/app-templates/Filters.tsx b/app/react/portainer/templates/app-templates/Filters.tsx
index 706bd8b3f..d4ca21184 100644
--- a/app/react/portainer/templates/app-templates/Filters.tsx
+++ b/app/react/portainer/templates/app-templates/Filters.tsx
@@ -56,6 +56,7 @@ export function Filters({
             bindToBody
             isClearable
             aria-label="Category filter"
+            data-cy="app-templates-category-filter"
           />
         </div>
       )}
@@ -73,6 +74,7 @@ export function Filters({
             bindToBody
             isClearable
             aria-label="Type filter"
+            data-cy="app-templates-type-filter"
           />
         </div>
       )}
diff --git a/app/react/portainer/templates/app-templates/TemplateListSort/TemplateListSort.tsx b/app/react/portainer/templates/app-templates/TemplateListSort/TemplateListSort.tsx
index ad9e4d27a..590e63102 100644
--- a/app/react/portainer/templates/app-templates/TemplateListSort/TemplateListSort.tsx
+++ b/app/react/portainer/templates/app-templates/TemplateListSort/TemplateListSort.tsx
@@ -30,6 +30,7 @@ export function TemplateListSort({
           bindToBody
           value={value?.id ?? null}
           isClearable
+          data-cy="app-templates-sortby-selector"
         />
       </div>
       <div className={styles.sortByElement}>
diff --git a/app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx b/app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx
index d0bd52d28..40651dff0 100644
--- a/app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx
+++ b/app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx
@@ -96,6 +96,7 @@ export function InnerForm({
 
       {isEditor && (
         <WebEditorForm
+          data-cy="custom-template-creation-editor"
           id="custom-template-creation-editor"
           value={values.FileContent}
           onChange={handleChangeFileContent}
@@ -113,6 +114,7 @@ export function InnerForm({
           value={values.File}
           onChange={(value) => setFieldValue('File', value)}
           required
+          data-cy="custom-template-creation-file-upload"
         />
       )}
 
@@ -178,6 +180,7 @@ export function InnerForm({
         isValid={isValid}
         loadingText="Creating custom template..."
         submitLabel="Create custom template"
+        data-cy="custom-template-creation-submit-button"
       />
     </Form>
   );
diff --git a/app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx b/app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx
index a5f5d0bb2..d71cf4e7e 100644
--- a/app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx
+++ b/app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx
@@ -89,6 +89,7 @@ export function InnerForm({
       )}
 
       <WebEditorForm
+        data-cy="custom-template-editor"
         id="edit-custom-template-editor"
         value={gitFileContent || values.FileContent}
         onChange={handleChangeFileContent}
@@ -122,7 +123,12 @@ export function InnerForm({
           />
           <div className="form-group">
             <div className="col-sm-12">
-              <Button color="light" icon={RefreshCw} onClick={refreshGitFile}>
+              <Button
+                color="light"
+                icon={RefreshCw}
+                onClick={refreshGitFile}
+                data-cy="custom-template-edit-reload-git-file-button"
+              >
                 Reload custom template
               </Button>
             </div>
@@ -179,6 +185,7 @@ export function InnerForm({
         isValid={isValid && dirty}
         loadingText="Updating custom template..."
         submitLabel="Update custom template"
+        data-cy="custom-template-edit-submit-button"
       />
     </Form>
   );
diff --git a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
index f01f26e2f..dc6a475c9 100644
--- a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
+++ b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesList.tsx
@@ -55,7 +55,12 @@ export function CustomTemplatesList({
         searchValue={listState.search}
         title="Custom Templates"
         titleIcon={Edit}
-        renderTableActions={() => <AddButton>Add Custom Template</AddButton>}
+        renderTableActions={() => (
+          <AddButton data-cy="add-custom-template-button">
+            Add Custom Template
+          </AddButton>
+        )}
+        data-cy="custom-templates-datatable-header"
       />
 
       <div className="blocklist gap-y-2 !px-[20px] !pb-[20px]" role="list">
diff --git a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx
index 309708085..32b058acc 100644
--- a/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx
+++ b/app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx
@@ -54,12 +54,15 @@ export function CustomTemplatesListItem({
                   params: {
                     id: template.Id,
                   },
+                  'data-cy': `custom-templates-edit-link-${template.Id}`,
                 }}
                 icon={Edit}
+                data-cy={`custom-templates-edit-button-${template.Id}`}
               >
                 Edit
               </Button>
               <Button
+                data-cy="custom-templates-delete-"
                 onClick={(e) => {
                   onDelete(template.Id);
                   e.stopPropagation();
diff --git a/app/react/portainer/users/ListView/UsersDatatable/UsersDatatable.tsx b/app/react/portainer/users/ListView/UsersDatatable/UsersDatatable.tsx
index 64504602d..889e1e4bd 100644
--- a/app/react/portainer/users/ListView/UsersDatatable/UsersDatatable.tsx
+++ b/app/react/portainer/users/ListView/UsersDatatable/UsersDatatable.tsx
@@ -33,8 +33,10 @@ export function UsersDatatable({
           disabled={selectedItems.length === 0}
           confirmMessage="Do you want to remove the selected users? They will not be able to login into Portainer anymore."
           onConfirmed={() => onRemove(selectedItems)}
+          data-cy="remove-users-button"
         />
       )}
+      data-cy="users-datatable"
     />
   );
 }
diff --git a/app/react/portainer/users/ListView/UsersDatatable/columns/name.tsx b/app/react/portainer/users/ListView/UsersDatatable/columns/name.tsx
index 775b0f1fd..6dce0e4f0 100644
--- a/app/react/portainer/users/ListView/UsersDatatable/columns/name.tsx
+++ b/app/react/portainer/users/ListView/UsersDatatable/columns/name.tsx
@@ -25,7 +25,11 @@ function Cell({
   }
 
   return (
-    <Link to=".user" params={{ id: item.Id }}>
+    <Link
+      to=".user"
+      params={{ id: item.Id }}
+      data-cy={`user-link-${item.Username}`}
+    >
       {name}
     </Link>
   );
diff --git a/app/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable.tsx b/app/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable.tsx
index 530bad8ce..969f771a6 100644
--- a/app/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable.tsx
+++ b/app/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable.tsx
@@ -31,6 +31,7 @@ export function EffectiveAccessViewerDatatable({
           : 'Select a user to show associated access and role'
       }
       disableSelect
+      data-cy="effective-access-viewer-datatable"
     />
   );
 }
diff --git a/app/react/portainer/users/RolesView/AccessViewer/columns.tsx b/app/react/portainer/users/RolesView/AccessViewer/columns.tsx
index 41cbfe2c8..cb5d43a25 100644
--- a/app/react/portainer/users/RolesView/AccessViewer/columns.tsx
+++ b/app/react/portainer/users/RolesView/AccessViewer/columns.tsx
@@ -34,7 +34,10 @@ function AccessCell({
     return (
       <>
         User access all environments
-        <Link to="portainer.settings.edgeCompute">
+        <Link
+          to="portainer.settings.edgeCompute"
+          data-cy={`manage-access-button-${item.RoleName}`}
+        >
           <Icon icon={Users} /> Manage access
         </Link>
       </>
@@ -67,13 +70,18 @@ function manageAccess(item: AccessViewerPolicyModel, isPureAdmin: boolean) {
   }
 
   return item.GroupName ? (
-    <Link to="portainer.groups.group.access" params={{ id: item.GroupId }}>
+    <Link
+      to="portainer.groups.group.access"
+      params={{ id: item.GroupId }}
+      data-cy={`manage-access-button-${item.RoleName}`}
+    >
       <Icon icon={Users} /> Manage access
     </Link>
   ) : (
     <Link
       to="portainer.endpoints.endpoint.access"
       params={{ id: item.EndpointId }}
+      data-cy={`manage-access-button-${item.RoleName}`}
     >
       <Icon icon={Users} /> Manage access
     </Link>
diff --git a/app/react/portainer/users/RolesView/RbacRolesDatatable.tsx b/app/react/portainer/users/RolesView/RbacRolesDatatable.tsx
index f2b1c8daf..5c74a96c4 100644
--- a/app/react/portainer/users/RolesView/RbacRolesDatatable.tsx
+++ b/app/react/portainer/users/RolesView/RbacRolesDatatable.tsx
@@ -37,6 +37,7 @@ export function RbacRolesDatatable({
       emptyContentLabel="No role available."
       settingsManager={tableState}
       disableSelect
+      data-cy="rbac-roles-datatable"
     />
   );
 }
diff --git a/app/react/portainer/users/teams/ItemView/Details.tsx b/app/react/portainer/users/teams/ItemView/Details.tsx
index 1f32c3a37..4ebe20353 100644
--- a/app/react/portainer/users/teams/ItemView/Details.tsx
+++ b/app/react/portainer/users/teams/ItemView/Details.tsx
@@ -51,6 +51,7 @@ export function Details({ team, memberships, isAdmin }: Props) {
                           size="xsmall"
                           onConfirmed={handleDeleteClick}
                           confirmMessage="Do you want to delete this team? Users in this team will not be deleted."
+                          data-cy={`delete-team-${team.Name}`}
                         >
                           Delete this team
                         </DeleteButton>
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
index 3724ed2a5..a3b13c5c1 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
@@ -62,6 +62,7 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
               onClick={() => handleRemoveMembers(users.map((user) => user.Id))}
               disabled={disabled || users.length === 0}
               icon={UserX}
+              data-cy="remove-all-users-button"
             >
               Remove all users
             </Button>
@@ -76,6 +77,7 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
           search,
           setSearch,
         }}
+        data-cy="team-members-datatable"
       />
     </RowProvider>
   );
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
index 618e5773a..434af3ff5 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
@@ -40,6 +40,7 @@ export function NameCell({
 
       <Button
         color="link"
+        data-cy={`remove-member-${user.Username}`}
         className="space-left !p-0"
         onClick={() => handleRemoveMember(user.Id)}
         disabled={disabled}
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
index 1a07210ba..ee59f286c 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
@@ -47,6 +47,7 @@ function RoleCell({
       isAdmin={isPureAdmin}
       onClick={handleUpdateRole}
       disabled={disabled}
+      username={user.Username}
     />
   );
 
@@ -65,10 +66,11 @@ function RoleCell({
 interface LeaderCellProps {
   isAdmin: boolean;
   onClick: (role: TeamRole, onSuccessMessage: string) => void;
+  username: string;
   disabled?: boolean;
 }
 
-function LeaderCell({ isAdmin, onClick, disabled }: LeaderCellProps) {
+function LeaderCell({ isAdmin, onClick, disabled, username }: LeaderCellProps) {
   return (
     <div className="flex items-center">
       <Icon className="space-right" icon={UserPlus} mode="secondary-alt" />
@@ -80,6 +82,7 @@ function LeaderCell({ isAdmin, onClick, disabled }: LeaderCellProps) {
           onClick={() => onClick(TeamRole.Member, 'User is now team member')}
           disabled={disabled}
           icon={UserX}
+          data-cy={`remove-leader-${username}`}
         >
           Member
         </Button>
@@ -91,9 +94,10 @@ function LeaderCell({ isAdmin, onClick, disabled }: LeaderCellProps) {
 interface MemberCellProps {
   onClick: (role: TeamRole, onSuccessMessage: string) => void;
   disabled?: boolean;
+  username: string;
 }
 
-function MemberCell({ onClick, disabled }: MemberCellProps) {
+function MemberCell({ onClick, disabled, username }: MemberCellProps) {
   return (
     <div className="flex items-center">
       <Icon className="space-right" icon={UserIcon} mode="secondary-alt" />
@@ -103,6 +107,7 @@ function MemberCell({ onClick, disabled }: MemberCellProps) {
         onClick={() => onClick(TeamRole.Leader, 'User is now team leader')}
         disabled={disabled}
         icon={UserPlus}
+        data-cy={`make-leader-${username}`}
       >
         Leader
       </Button>
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
index ba6273c52..21e700cdf 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
@@ -46,6 +46,7 @@ export function UsersList({ users, disabled, teamId }: Props) {
               onClick={() => handleAddAllMembers(users.map((u) => u.Id))}
               disabled={disabled || users.length === 0}
               icon={UserPlus}
+              data-cy="add-all-users-button"
             >
               Add all users
             </Button>
@@ -60,6 +61,7 @@ export function UsersList({ users, disabled, teamId }: Props) {
           search,
           setSearch,
         }}
+        data-cy="users-datatable"
       />
     </RowProvider>
   );
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
index a698b671d..c8f0215da 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
@@ -31,6 +31,7 @@ export function NameCell({
 
       <Button
         color="link"
+        data-cy={`add-member-${user.Username}`}
         className="space-left nopadding"
         disabled={disabled}
         icon={PlusCircle}
diff --git a/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx b/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
index 8b6f53ec2..9dbbd9eac 100644
--- a/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
+++ b/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
@@ -16,7 +16,7 @@ import { DeleteButton } from '@@/buttons/DeleteButton';
 const storageKey = 'teams';
 
 const columns: ColumnDef<Team>[] = [
-  buildNameColumn<Team>('Name', 'portainer.teams.team'),
+  buildNameColumn<Team>('Name', 'portainer.teams.team', 'teams-name'),
 ];
 
 interface Props {
@@ -43,10 +43,12 @@ export function TeamsDatatable({ teams, isAdmin }: Props) {
             onConfirmed={() => handleRemoveClick(selectedRows)}
             disabled={selectedRows.length === 0}
             confirmMessage="Are you sure you want to remove the selected teams?"
+            data-cy="remove-teams-button"
           />
         )
       }
       emptyContentLabel="No teams found"
+      data-cy="teams-datatable"
     />
   );
 
diff --git a/app/react/sidebar/DockerSidebar.tsx b/app/react/sidebar/DockerSidebar.tsx
index 5351c6bb7..06b295f8a 100644
--- a/app/react/sidebar/DockerSidebar.tsx
+++ b/app/react/sidebar/DockerSidebar.tsx
@@ -207,6 +207,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
             isSubMenu
             to={featSubMenuTo}
             params={{ endpointId: environmentId }}
+            data-cy="portainerSidebar-docker-setup"
           />
         </Authorized>
 
@@ -215,6 +216,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
           isSubMenu
           to={registrySubMenuTo}
           params={{ endpointId: environmentId }}
+          data-cy="portainerSidebar-docker-registries"
         />
       </SidebarParent>
     </>
diff --git a/app/react/sidebar/Footer/BuildInfoModal.tsx b/app/react/sidebar/Footer/BuildInfoModal.tsx
index 10abe8297..bf503e2dd 100644
--- a/app/react/sidebar/Footer/BuildInfoModal.tsx
+++ b/app/react/sidebar/Footer/BuildInfoModal.tsx
@@ -129,7 +129,7 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
             </span>
 
             <div
-              className={clsx(styles.tools, 'max-h-32 overflow-auto space-y-2')}
+              className={clsx(styles.tools, 'max-h-32 space-y-2 overflow-auto')}
             >
               {Build.Env.map((envVar) => (
                 <div key={envVar}>
@@ -141,7 +141,11 @@ function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
         )}
       </Modal.Body>
       <Modal.Footer>
-        <Button className="w-full" onClick={closeModal}>
+        <Button
+          className="w-full"
+          onClick={closeModal}
+          data-cy="portainerBuildInfoModal-CloseButton"
+        >
           Ok
         </Button>
       </Modal.Footer>
diff --git a/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx b/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx
index d270f4944..0d08a03c8 100644
--- a/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx
+++ b/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx
@@ -41,7 +41,7 @@ export function KubectlShellButton({ environmentId }: Props) {
       {!isSidebarOpen && (
         <SidebarTooltip
           content={
-            <span className="text-sm whitespace-nowrap">Kubectl Shell</span>
+            <span className="whitespace-nowrap text-sm">Kubectl Shell</span>
           }
         >
           <span className="flex w-full justify-center">{button}</span>
diff --git a/app/react/sidebar/SidebarItem/Head.tsx b/app/react/sidebar/SidebarItem/Head.tsx
index 641d77939..11624f4be 100644
--- a/app/react/sidebar/SidebarItem/Head.tsx
+++ b/app/react/sidebar/SidebarItem/Head.tsx
@@ -7,18 +7,13 @@ import clsx from 'clsx';
 import { ComponentProps } from 'react';
 import Tippy from '@tippyjs/react';
 
-import { AutomationTestingProps } from '@/types';
-
 import 'tippy.js/dist/tippy.css';
 import { Link } from '@@/Link';
 import { IconProps, Icon } from '@@/Icon';
 
 import { useSidebarState } from '../useSidebarState';
 
-interface Props
-  extends IconProps,
-    ComponentProps<typeof Link>,
-    AutomationTestingProps {
+interface Props extends IconProps, ComponentProps<typeof Link> {
   label: string;
   ignorePaths?: string[];
 }
diff --git a/app/react/sidebar/SidebarItem/SidebarItem.stories.tsx b/app/react/sidebar/SidebarItem/SidebarItem.stories.tsx
index cb551a803..7aa73d066 100644
--- a/app/react/sidebar/SidebarItem/SidebarItem.stories.tsx
+++ b/app/react/sidebar/SidebarItem/SidebarItem.stories.tsx
@@ -22,6 +22,7 @@ function Template({ icon, label }: StoryProps) {
         params={{ endpointId: 1 }}
         icon={icon}
         label={label}
+        data-cy="sidebar-item"
       />
     </ul>
   );
diff --git a/app/react/sidebar/SidebarItem/SidebarItem.tsx b/app/react/sidebar/SidebarItem/SidebarItem.tsx
index 85f39bfba..a2246a045 100644
--- a/app/react/sidebar/SidebarItem/SidebarItem.tsx
+++ b/app/react/sidebar/SidebarItem/SidebarItem.tsx
@@ -59,7 +59,7 @@ export function SidebarItem({
   return (
     <SidebarTooltip
       content={
-        <div className="bg-blue-8 be:bg-gray-8 th-dark:bg-gray-true-8 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white rounded">
+        <div className="rounded bg-blue-8 be:bg-gray-8 th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white th-highcontrast:bg-black th-dark:bg-gray-true-8">
           <Wrapper label={label}>
             <ItemAnchor
               href={anchorProps.href}
@@ -86,7 +86,7 @@ type ItemAnchorProps = {
   className: string;
   isOpen: boolean;
   isSubMenu: boolean;
-  dataCy?: string;
+  dataCy: string;
 };
 
 function ItemAnchor({
diff --git a/app/react/sidebar/SidebarItem/SidebarParent.tsx b/app/react/sidebar/SidebarItem/SidebarParent.tsx
index e4a39960e..ed6048822 100644
--- a/app/react/sidebar/SidebarItem/SidebarParent.tsx
+++ b/app/react/sidebar/SidebarItem/SidebarParent.tsx
@@ -72,6 +72,7 @@ export function SidebarParent({
                 'justify-center': !isSidebarOpen,
               }
             )}
+            data-cy={`${dataCy}-link`}
           >
             <Icon icon={icon} />
             {isSidebarOpen && <span className="pl-4">{title}</span>}
diff --git a/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx b/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
index eae07d6d9..e923affea 100644
--- a/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/NonAdminUpgradeDialog.tsx
@@ -23,6 +23,7 @@ export function NonAdminUpgradeDialog({
         <div className="flex w-full gap-2">
           <Button
             color="default"
+            data-cy="non-admin-cancel-upgrade"
             size="medium"
             className="w-1/3"
             onClick={() => onDismiss()}
@@ -38,6 +39,7 @@ export function NonAdminUpgradeDialog({
           >
             <Button
               color="primary"
+              data-cy="non-admin-learn-about-business-edition"
               size="medium"
               className="w-full"
               icon={ExternalLink}
diff --git a/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx b/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
index c103a78bc..94e964533 100644
--- a/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
+++ b/app/react/sidebar/UpgradeBEBanner/UploadLicenseDialog.tsx
@@ -76,6 +76,7 @@ export function UploadLicenseDialog({
               <div className="flex w-full gap-2 [&>*]:w-1/2">
                 <Button
                   color="default"
+                  data-cy="get-license-button"
                   size="medium"
                   className="w-full"
                   onClick={goToGetLicense}
@@ -84,6 +85,7 @@ export function UploadLicenseDialog({
                 </Button>
                 <LoadingButton
                   color="primary"
+                  data-cy="start-upgrade-button"
                   size="medium"
                   loadingText="Validating License"
                   isLoading={upgradeMutation.isLoading}
diff --git a/app/types.ts b/app/types.ts
index 4521a2bfb..6df540828 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -4,14 +4,16 @@ export interface AutomationTestingProps {
    *
    * Change with care and communicate this with QA
    */
-  'data-cy'?: string;
+  'data-cy': string;
 }
 
 declare module 'react' {
   interface HTMLAttributes<T>
     extends AriaAttributes,
       DOMAttributes<T>,
-      AutomationTestingProps {}
+      Partial<AutomationTestingProps> {
+    // keep AutomationTestingProps 'data-cy' optional because HTMLAttributes covers non interactive elements
+  }
 }
 
 export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {