From b56bb8d3c89ce850574508b9eb59187ee3fcfe90 Mon Sep 17 00:00:00 2001
From: Klemen Benedicic <klemen.benedicic@scinote.net>
Date: Fri, 31 May 2024 17:57:24 +0200
Subject: [PATCH 1/3] Added data-e2e to table info, top toolbar and project
 templates [SCI-10761]

---
 .../groups/helpers/sort_flyout.vue              |  2 +-
 app/javascript/vue/protocols/modals/new.vue     | 17 +++++++++--------
 app/javascript/vue/protocols/table.vue          |  9 ++++++---
 .../vue/shared/datatable/pagination.vue         | 15 ++++++++-------
 app/javascript/vue/shared/datatable/table.vue   |  7 ++++---
 app/javascript/vue/shared/datatable/toolbar.vue |  1 +
 app/javascript/vue/shared/menu_dropdown.vue     |  4 ++--
 7 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
index 8e558fc1f..723b15d0a 100644
--- a/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
+++ b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
@@ -6,7 +6,7 @@
       position="right"
       @dtEvent="changeSort"
       btnIcon="sn-icon sn-icon-sort-down"
-      :e2eSortButton="e2eSortButton"
+      :e2eButton="e2eSortButton"
     ></MenuDropdown>
 </template>
 
diff --git a/app/javascript/vue/protocols/modals/new.vue b/app/javascript/vue/protocols/modals/new.vue
index b95166347..f97c78ae4 100644
--- a/app/javascript/vue/protocols/modals/new.vue
+++ b/app/javascript/vue/protocols/modals/new.vue
@@ -2,31 +2,32 @@
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <form @submit.prevent="submit">
-        <div class="modal-content">
+        <div class="modal-content" data-e2e="e2e-MD-newProtocol">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-newProtocolModal-close">
               <i class="sn-icon sn-icon-close"></i>
             </button>
-            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" data-e2e="e2e-TX-newProtocolModal-title">
               {{ i18n.t("protocols.new_protocol_modal.title_new") }}
             </h4>
           </div>
           <div class="modal-body">
             <div class="mb-6">
-              <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
+              <label class="sci-label" data-e2e="e2e-TX-newProtocolModal-inputLabel">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
               <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
                 <input type="text" v-model="name"
                        class="sci-input-field"
                        autofocus="true" ref="input"
+                       data-e2e="e2e-IF-newProtocolModal-name"
                        :placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
               </div>
             </div>
             <div class="flex gap-2 text-xs items-center">
               <div class="sci-checkbox-container">
-                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
+                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible" data-e2e="e2e-CB-newProtocolModal-grantAccess"/>
                 <span class="sci-checkbox-label"></span>
               </div>
-              <span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
+              <span v-html="i18n.t('protocols.new_protocol_modal.access_label')" data-e2e="e2e-TX-newProtocolModal-grantAccess"></span>
             </div>
             <div class="mt-6" :class="{'hidden': !visible}">
               <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
@@ -34,8 +35,8 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal" data-e2e="e2e-BT-newProtocolModal-cancel">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole" data-e2e="e2e-BT-newProtocolModal-create">
               {{ i18n.t('protocols.new_protocol_modal.create_new') }}
             </button>
           </div>
diff --git a/app/javascript/vue/protocols/table.vue b/app/javascript/vue/protocols/table.vue
index d7209e57c..062f2df7c 100644
--- a/app/javascript/vue/protocols/table.vue
+++ b/app/javascript/vue/protocols/table.vue
@@ -203,7 +203,8 @@ export default {
           menuItems: [
             {
               emit: 'import_file',
-              text: this.i18n.t('protocols.index.import_eln')
+              text: this.i18n.t('protocols.index.import_eln'),
+              data_e2e: 'e2e-BT-topToolbar-importEln'
             }
           ]
         };
@@ -214,13 +215,15 @@ export default {
             text: `<span>${this.i18n.t('protocols.index.import_docx')}</span>
                    <span class="bg-sn-coral text-sn-white text-[8px] absolute leading-none p-1 top-px rounded-[1px] right-px">
                      ${this.i18n.t('protocols.index.beta')}
-                   </span>`
+                   </span>`,
+            data_e2e: 'e2e-BT-topToolbar-importDocx'
           });
         }
 
         importMenu.menuItems.push({
           emit: 'import_protocols_io',
-          text: this.i18n.t('protocols.index.import_protocols_io')
+          text: this.i18n.t('protocols.index.import_protocols_io'),
+          data_e2e: 'e2e-BT-topToolbar-importProtocolsIo'
         });
 
         left.push(importMenu);
diff --git a/app/javascript/vue/shared/datatable/pagination.vue b/app/javascript/vue/shared/datatable/pagination.vue
index 413c646d8..68e2afe19 100644
--- a/app/javascript/vue/shared/datatable/pagination.vue
+++ b/app/javascript/vue/shared/datatable/pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="pages.length > 1" class="flex gap-3 select-none">
     <div class="w-9 h-9">
-      <div class="w-9 h-9 cursor-pointer flex items-center justify-center"
+      <div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-left"
            @click="$emit('setPage', currentPage - 1)"
            v-if="currentPage > 1">
         <i class="sn-icon sn-icon-left cursor-pointer"></i>
@@ -11,11 +11,12 @@
          v-for="page in pages"
          :class="{ 'border-solid rounded border-sn-science-blue': page === currentPage }"
          :key="page"
+         :data-e2e="`e2e-BT-tableInfo-page-${page}`"
          @click="$emit('setPage', page)">
       <span >{{ page }}</span>
     </div>
     <div class="w-9 h-9">
-      <div class="w-9 h-9 cursor-pointer flex items-center justify-center"
+      <div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-right"
            @click="$emit('setPage', currentPage + 1)"
            v-if="totalPage > currentPage">
         <i class="sn-icon sn-icon-right cursor-pointer"></i>
@@ -30,12 +31,12 @@ export default {
   props: {
     totalPage: {
       type: Number,
-      required: true,
+      required: true
     },
     currentPage: {
       type: Number,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     pages() {
@@ -50,7 +51,7 @@ export default {
         }
       }
       return pages;
-    },
-  },
+    }
+  }
 };
 </script>
diff --git a/app/javascript/vue/shared/datatable/table.vue b/app/javascript/vue/shared/datatable/table.vue
index 750f7abe5..3c5317364 100644
--- a/app/javascript/vue/shared/datatable/table.vue
+++ b/app/javascript/vue/shared/datatable/table.vue
@@ -75,17 +75,18 @@
         :params="actionsParams"
         @toolbar:action="emitAction" />
     </div>
-    <div v-if="scrollMode == 'pages'" class="flex items-center py-4" :class="{'opacity-0': initializing }">
-      <div class="flex items-center gap-4">
+    <div v-if="scrollMode == 'pages'" class="flex items-center py-4" :class="{'opacity-0': initializing }" data-e2e="e2e-CO-tableInfo">
+      <div class="flex items-center gap-4" data-e2e="e2e-TX-tableInfo-show">
         {{ i18n.t('datatable.show') }}
         <div class="w-36">
           <SelectDropdown
             :value="perPage"
             :options="perPageOptions"
+            :data-e2e="'e2e-DD-tableInfo-rows'"
             @change="setPerPage"
           ></SelectDropdown>
         </div>
-        <div v-show="!dataLoading">
+        <div v-show="!dataLoading" data-e2e="e2e-TX-tableInfo-entries">
           <span v-if="selectedRows.length">
             {{ i18n.t('datatable.entries.selected', { count: totalEntries, selected: selectedRows.length }) }}
           </span>
diff --git a/app/javascript/vue/shared/datatable/toolbar.vue b/app/javascript/vue/shared/datatable/toolbar.vue
index 58bb44619..bdfe2be81 100644
--- a/app/javascript/vue/shared/datatable/toolbar.vue
+++ b/app/javascript/vue/shared/datatable/toolbar.vue
@@ -18,6 +18,7 @@
           :btnIcon="action.icon"
           :caret="true"
           :position="'right'"
+          :data-e2e="`e2e-BT-topToolbar-${action.name}`"
           @dtEvent="handleEvent"
         ></MenuDropdown>
       </template>
diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue
index 9f6d8367f..ca5cd3c60 100644
--- a/app/javascript/vue/shared/menu_dropdown.vue
+++ b/app/javascript/vue/shared/menu_dropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative" v-if="listItems.length > 0 || alwaysShow" v-click-outside="closeMenu" >
-    <button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="e2eSortButton">
+    <button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="e2eButton">
       <i v-if="btnIcon" :class="btnIcon"></i>
       {{ btnText }}
       <i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i>
@@ -80,7 +80,7 @@ export default {
     caret: { type: Boolean, default: false },
     alwaysShow: { type: Boolean, default: false },
     title: { type: String, default: '' },
-    e2eSortButton: { type: String, default: '' }
+    e2eButton: { type: String, default: '' }
   },
   data() {
     return {

From d594c695b1ac558c4c0fd0f7a7548f69667e17c6 Mon Sep 17 00:00:00 2001
From: Klemen Benedicic <klemen.benedicic@scinote.net>
Date: Wed, 5 Jun 2024 05:08:16 +0200
Subject: [PATCH 2/3] Added data-e2e to project templates import modals
 [SCI-10761]

---
 .../protocol_importers/_import_form.html.erb  |  36 +++++--
 .../_preview_modal_footer.html.erb            |  16 ++-
 .../import_export/_import_modal.html.erb      | 102 ++++++++++++++----
 app/views/protocols/index.html.erb            |   4 +-
 .../index/_protocol_preview_modal.html.erb    |  18 +++-
 .../index/_protocolsio_modal.html.erb         |   2 +-
 .../index/_protocolsio_modal_body.html.erb    |  55 +++++++---
 7 files changed, 174 insertions(+), 59 deletions(-)

diff --git a/app/views/protocol_importers/_import_form.html.erb b/app/views/protocol_importers/_import_form.html.erb
index bfd09477e..cd84bbe80 100644
--- a/app/views/protocol_importers/_import_form.html.erb
+++ b/app/views/protocol_importers/_import_form.html.erb
@@ -1,29 +1,45 @@
 <%= form_for :protocol, url: team_import_external_protocol_path(team_id: current_team.id),
              method: :post, data: { remote: true }  do |f|%>
-  <div class="general-error has-error">
+  <div class="general-error has-error" data-e2e="e2e-TX-protocolTemplates-previewProtocolsIo-error">
     <span class="has-error help-block"></span>
   </div>
 
   <div class="form-group sci-input-container">
-    <%= f.label :name, t('protocols.import_export.import_modal.name_label') %>
-    <%= f.text_field :name, class: 'form-control sci-input-field', value: protocol.name %>
+    <%= f.label :name,
+        t('protocols.import_export.import_modal.name_label'),
+        :"data-e2e" => "e2e-TX-protocolTemplates-previewProtocolsIo-nameInput" %>
+    <%= f.text_field :name,
+        class: 'form-control sci-input-field',
+        value: protocol.name,
+        :"data-e2e" => "e2e-IF-protocolTemplates-previewProtocolsIo-nameInput" %>
     <span class="help-block"></span>
   </div>
 
   <div class="form-group sci-input-container">
-    <%= f.label :authors, t('protocols.import_export.import_modal.authors_label') %>
-    <%= f.text_field :authors, class: 'form-control sci-input-field', value: protocol.authors %>
+    <%= f.label :authors,
+        t('protocols.import_export.import_modal.authors_label'),
+        :"data-e2e" => "e2e-TX-protocolTemplates-previewProtocolsIo-authorsInput" %>
+    <%= f.text_field :authors,
+        class: 'form-control sci-input-field',
+        value: protocol.authors,
+        :"data-e2e" => "e2e-IF-protocolTemplates-previewProtocolsIo-authorsInput" %>
   </div>
 
-  <div class="import-protocol-preview-description">
+  <div class="import-protocol-preview-description" data-e2e="e2e-TX-protocolTemplates-previewProtocolsIo-description">
     <%= custom_auto_link(protocol.description, simple_format: false, team: current_team) %>
   </div>
 
   <div class="row">
     <div class="col-sm-4">
       <div class="form-group">
-        <%= f.label :published_on_label, t('protocols.import_export.import_modal.published_on_label')%>
-        <%= f.text_field :published_on_label, value: I18n.l(protocol.published_on, format: :full),  class: 'form-control', disabled: true %>
+        <%= f.label :published_on_label,
+            t('protocols.import_export.import_modal.published_on_label'),
+            :"data-e2e" => "e2e-TX-protocolTemplates-previewProtocolsIo-publishedOnLabel" %>
+        <%= f.text_field :published_on_label, 
+            value: I18n.l(protocol.published_on, format: :full),
+            class: 'form-control',
+            disabled: true,
+            :'data-e2e' => "e2e-TX-protocolTemplates-previewProtocolsIo-publishedOn" %>
       </div>
     </div>
   </div>
@@ -39,11 +55,11 @@
 
 <div data-role="steps-container">
   <div class="row">
-    <div class="col-xs-8">
+    <div class="col-xs-8" data-e2e="e2e-TX-protocolTemplates-previewProtocolsIo-protocolSteps">
       <h2><%= t("protocols.steps.subtitle") %></h2>
     </div>
   </div>
-  <div id="steps">
+  <div id="steps" data-e2e="e2e-CO-protocolTemplates-previewProtocolsIo-protocolSteps">
     <% protocol.steps.sort_by{ |s| s.position }.each do |step| %>
       <%= render partial: "steps/step", locals: { step: step, steps_assets: steps_assets, preview: true, import: true } %>
     <% end %>
diff --git a/app/views/protocol_importers/_preview_modal_footer.html.erb b/app/views/protocol_importers/_preview_modal_footer.html.erb
index 3910d1921..28a91a1b3 100644
--- a/app/views/protocol_importers/_preview_modal_footer.html.erb
+++ b/app/views/protocol_importers/_preview_modal_footer.html.erb
@@ -1,15 +1,15 @@
 <div class="footer">
   <div class="left-section">
     <div class="default-role-container">
-      <div class="sci-checkbox-container">
+      <div class="sci-checkbox-container" data-e2e="e2e-CB-protocolTemplates-previewProtocolsIo-grantAccess">
         <%= check_box_tag "visibility", "visible", false, class: "sci-checkbox" %>
         <span class="sci-checkbox-label"></span>
       </div>
-      <div class="default-role-description">
+      <div class="default-role-description" data-e2e="e2e-TX-protocolTemplates-previewProtocolsIo-grantAccess">
         <%= t("protocols.new_protocol_modal.access_label") %>
       </div>
     </div>
-    <div class="hidden" id="roleSelectWrapper">
+    <div class="hidden" id="roleSelectWrapper" data-e2e="e2e-DD-protocolTemplates-previewProtocolsIo-userRole">
       <div class="sci-input-container">
         <%= label_tag :default_public_user_role_id, t("protocols.new_protocol_modal.role_label") %>
         <% default_role = UserRole.find_by(name: I18n.t('user_roles.predefined.viewer')).id %>
@@ -19,7 +19,13 @@
     </div>
   </div>
   <div class="right-section">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal"><%=t "general.cancel" %></button>
-    <button type="button" class="btn btn-primary" data-action="import_protocol" data-import_type="in_repository_draft"><%=t "protocols.import_export.import_modal.import_protocols_label" %></button>
+    <button type="button" class="btn btn-secondary" data-dismiss="modal" 
+            data-e2e="e2e-BT-protocolTemplates-previewProtocolsIo-cancel">
+      <%=t "general.cancel" %>
+    </button>
+    <button type="button" class="btn btn-primary" data-action="import_protocol" 
+            data-import_type="in_repository_draft" data-e2e="e2e-BT-protocolTemplates-previewProtocolsIo-import">
+      <%=t "protocols.import_export.import_modal.import_protocols_label" %>
+    </button>
   </div>
 </div>
diff --git a/app/views/protocols/import_export/_import_modal.html.erb b/app/views/protocols/import_export/_import_modal.html.erb
index 583b62c80..6fcdbf545 100644
--- a/app/views/protocols/import_export/_import_modal.html.erb
+++ b/app/views/protocols/import_export/_import_modal.html.erb
@@ -1,61 +1,101 @@
-<div id="import-protocol-modal" class="modal fade" role="dialog">
+<div id="import-protocol-modal" class="modal fade" role="dialog" data-e2e="e2e-MD-protocolTemplates-importEln">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal">&times;</button>
-        <h4 class="modal-title" data-role="header-import"><%= t("protocols.import_export.import_modal.title_import") %></h4>
-        <h4 class="modal-title" data-role="header-import-into-protocol"><%= t("protocols.import_export.import_modal.title_import_into_protocol") %></h4>
+        <button type="button" class="close" data-dismiss="modal" data-e2e="e2e-BT-protocolTemplates-importEln-close">
+          &times;
+        </button>
+        <h4 class="modal-title" data-role="header-import" data-e2e="e2e-TX-protocolTemplates-importEln-title">
+          <%= t("protocols.import_export.import_modal.title_import") %>
+        </h4>
+        <h4 class="modal-title" data-role="header-import-into-protocol">
+          <%= t("protocols.import_export.import_modal.title_import_into_protocol") %>
+        </h4>
       </div>
       <div class="modal-body">
         <!-- Warning message -->
-        <div data-role="import-message" style="margin-bottom: 15px;">
+        <div data-role="import-message"
+            style="margin-bottom: 15px;"
+            data-e2e="e2e-TX-protocolTemplates-importEln-warning">
           <b><%= t("protocols.import_export.import_modal.import_into_protocol_message") %></b>
           <br />
         </div>
 
         <!-- General protocol info -->
         <div class="form-group sci-input-container">
-          <label for="import_protocol_name"><%= t("protocols.import_export.import_modal.name_label") %></label>
-          <input type="text" class="form-control sci-input-field" id="import_protocol_name">
+          <label for="import_protocol_name" data-e2e="e2e-TX-protocolTemplates-importEln-nameInput">
+            <%= t("protocols.import_export.import_modal.name_label") %>
+          </label>
+          <input type="text" 
+            class="form-control sci-input-field"
+            id="import_protocol_name"
+            data-e2e="e2e-IF-protocolTemplates-importEln-nameInput">
         </div>
         <div class="form-group sci-input-container">
-          <label for="protocol_authors">
+          <label for="protocol_authors" data-e2e="e2e-TX-protocolTemplates-importEln-authorsInput">
             <span class="sn-icon sn-icon-user-menu"></span>&nbsp;<%= t("protocols.import_export.import_modal.authors_label") %>
           </label>
-          <input type="text" class="form-control sci-input-field" id="protocol_authors">
+          <input type="text" 
+            class="form-control sci-input-field"
+              id="protocol_authors"
+              data-e2e="e2e-IF-protocolTemplates-importEln-authorsInput">
         </div>
         <div class="form-group">
-          <label for="import_protocol_description"><%= t("protocols.import_export.import_modal.description_label") %></label>
-          <div id="import_protocol_description" class="overflow-auto" rows="2"></div>
+          <label for="import_protocol_description" data-e2e="e2e-TX-protocolTemplates-importEln-descriptionLabel">
+            <%= t("protocols.import_export.import_modal.description_label") %>
+          </label>
+          <div id="import_protocol_description"
+            class="overflow-auto"
+            rows="2"
+            data-e2e="e2e-TX-protocolTemplates-importEln-description">
+          </div>
         </div>
         <div class="form-group">
           <div class="row">
             <div class="col-xs-4">
-              <label for="protocol_created_at"><%= t("protocols.import_export.import_modal.created_at_label") %></label>
-              <input type="text" class="form-control" id="protocol_created_at" disabled>
+              <label for="protocol_created_at" data-e2e="e2e-TX-protocolTemplates-importEln-createdAtLabel">
+                <%= t("protocols.import_export.import_modal.created_at_label") %>
+              </label>
+              <input type="text"
+                class="form-control"
+                id="protocol_created_at"
+                disabled
+                data-e2e="e2e-TX-protocolTemplates-importEln-createdAt">
             </div>
             <div class="col-xs-4">
-              <label for="protocol_updated_at"><%= t("protocols.import_export.import_modal.updated_at_label") %></label>
-              <input type="text" class="form-control" id="protocol_updated_at" disabled>
+              <label for="protocol_updated_at" data-e2e="e2e-TX-protocolTemplates-importEln-updatedAtLabel">
+                <%= t("protocols.import_export.import_modal.updated_at_label") %>
+              </label>
+              <input type="text"
+                class="form-control"
+                id="protocol_updated_at"
+                disabled
+                data-e2e="e2e-TX-protocolTemplates-importEln-updatedAt">
             </div>
           </div>
         </div>
 
         <!-- Preview title -->
         <div>
-          <h2 style="display: inline;"><%= t("protocols.import_export.import_modal.preview_title") %></h2>
+          <h2 style="display: inline;" data-e2e="e2e-TX-protocolTemplates-importEln-previewTitle">
+            <%= t("protocols.import_export.import_modal.preview_title") %>
+          </h2>
           <h3 style="display: none;" data-role="title-position"></h3>
         </div>
 
         <!-- Preview scroller -->
         <div>
-          <div class="import-protocols-modal-preview-container" data-role="preview-container">
+          <div class="import-protocols-modal-preview-container"
+            data-role="preview-container"
+            data-e2e="e2e-CO-protocolTemplates-importEln-preview">
           </div>
         </div>
       </div>
       <div class="modal-footer">
         <div data-role="multiple-protocols-buttons">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t("general.cancel") %></button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <%= t("general.cancel") %>
+          </button>
           <div class="btn-group" role="group">
             <a href="#" class="btn btn-secondary" data-action="jump-to-first-protocol"><i class="fas fa-fast-backward"></i></a>
             <a href="#" class="btn btn-secondary" data-action="jump-to-previous-protocol"><i class="fas fa-backward"></i></a>
@@ -64,18 +104,34 @@
           </div>
           <div class="btn-group" role="group">
             <div data-role="import-all">
-              <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import_current") %></button>
-              <button type="submit" class="btn btn-success" data-action="import-all"><%= t("protocols.import_export.import_modal.import_all") %></button>
+              <button type="submit" class="btn btn-success" data-action="import-current">
+                <%= t("protocols.import_export.import_modal.import_current") %>
+              </button>
+              <button type="submit" class="btn btn-success" data-action="import-all">
+                <%= t("protocols.import_export.import_modal.import_all") %>
+              </button>
             </div>
             <div data-role="import-single">
-              <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import") %></button>
+              <button type="submit" class="btn btn-success" data-action="import-current">
+                <%= t("protocols.import_export.import_modal.import") %>
+              </button>
             </div>
           </div>
         </div>
         <div data-role="single-protocol-buttons">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t("general.cancel") %></button>
+          <button type="button"
+            class="btn btn-secondary"
+            data-dismiss="modal"
+            data-e2e="e2e-BT-protocolTemplates-importEln-cancel">
+            <%= t("general.cancel") %>
+          </button>
           <div class="btn-group" role="group">
-            <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import") %></button>
+            <button type="submit"
+              class="btn btn-success"
+              data-action="import-current"
+              data-e2e="e2e-BT-protocolTemplates-importEln-load">
+              <%= t("protocols.import_export.import_modal.import") %>
+            </button>
           </div>
         </div>
       </div>
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index fdf041498..1f42142b0 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -13,7 +13,7 @@
 
   <div class="content-pane flexible protocols-index <%= @type %>">
     <div class="content-header sticky-header">
-      <div class="title-row">
+      <div class="title-row" data-e2e="e2e-TX-protocolTemplates-title">
         <% if templates_view_mode_archived?(type: @type) %>
           <h1>
             <span><%= t('labels.archived')%></span>&nbsp;
@@ -24,7 +24,7 @@
         <% end %>
       </div>
     </div>
-    <div class="protocols-container">
+    <div class="protocols-container" data-e2e="e2e-CO-protocolTemplates">
       <div id="ProtocolsTable" class="fixed-content-body">
         <protocols-table
           ref="table"
diff --git a/app/views/protocols/index/_protocol_preview_modal.html.erb b/app/views/protocols/index/_protocol_preview_modal.html.erb
index bcdcfa2ec..31cdde6d1 100644
--- a/app/views/protocols/index/_protocol_preview_modal.html.erb
+++ b/app/views/protocols/index/_protocol_preview_modal.html.erb
@@ -1,13 +1,21 @@
 <div class="modal" id="protocol-preview-modal" tabindex="-1" role="dialog" aria-labelledby="protocol-preview-modal-label">
   <div class="modal-dialog" role="document">
-    <div class="modal-content">
+    <div class="modal-content" data-e2e="e2e-MD-protocolTemplates-previewProtocolsIo">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-        <h4 class="modal-title" id="protocol-preview-modal-label">
+        <button type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+          data-e2e="e2e-BT-protocolTemplates-previewProtocolsIo-close">
+          <i class="sn-icon sn-icon-close"></i>
+        </button>
+        <h4 class="modal-title"
+          id="protocol-preview-modal-label"
+          data-e2e="e2e-TX-protocolTemplates-previewProtocolsIo-title">
         </h4>
       </div>
-      <div class="modal-body"></div>
-      <div class="modal-footer"></div>
+      <div class="modal-body" data-e2e="e2e-CO-protocolTemplates-previewProtocolsIo-body"></div>
+      <div class="modal-footer" data-e2e="e2e-CO-protocolTemplates-previewProtocolsIo-footer"></div>
     </div>
   </div>
 </div>
diff --git a/app/views/protocols/index/_protocolsio_modal.html.erb b/app/views/protocols/index/_protocolsio_modal.html.erb
index 634b41b90..b77b38f47 100644
--- a/app/views/protocols/index/_protocolsio_modal.html.erb
+++ b/app/views/protocols/index/_protocolsio_modal.html.erb
@@ -1,6 +1,6 @@
 <div class="modal" id="protocolsioModal" data-url="<%= protocolsio_protocols_path %>" tabindex="-1" role="dialog" aria-labelledby="protocolsio-modal-label">
   <div class="modal-dialog" role="document">
-    <div class="modal-content"></div>
+    <div class="modal-content" data-e2e="e2e-MD-protocolTemplates-importProtocolsIo"></div>
   </div>
 </div>
 <%= javascript_include_tag "protocols/steps" %>
diff --git a/app/views/protocols/index/_protocolsio_modal_body.html.erb b/app/views/protocols/index/_protocolsio_modal_body.html.erb
index 82a74a149..48426e49d 100644
--- a/app/views/protocols/index/_protocolsio_modal_body.html.erb
+++ b/app/views/protocols/index/_protocolsio_modal_body.html.erb
@@ -1,6 +1,12 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
-  <h4 class="modal-title" id="publish-results-modal-label">
+  <button type="button"
+    class="close"
+      data-dismiss="modal"
+      aria-label="Close"
+      data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-close">
+      <i class="sn-icon sn-icon-close"></i>
+    </button>
+  <h4 class="modal-title" id="publish-results-modal-label" data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-title">
     <%= t('protocols.index.protocolsio.title') %>
   </h4>
 </div>
@@ -20,6 +26,7 @@
                 <input class='sci-input-field'
                       type='text'
                       name='key'
+                      data-e2e='e2e-IF-protocolTemplates-importProtocolsIo-search'
                       placeholder="<%= t('protocols.index.protocolsio.search_bar_placeholder') %>" />
                 <i class='sn-icon sn-icon-search'></i>
               </div>
@@ -27,7 +34,13 @@
 
             <div class='protocol-sort'>
               <div class="dropdown sort-menu" title="<%= t("general.sort.title") %>">
-                <button class="btn btn-light btn-black icon-btn" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <button class="btn btn-light btn-black icon-btn" 
+                        type="button" 
+                        id="sortMenu" 
+                        data-toggle="dropdown" 
+                        aria-haspopup="true" 
+                        aria-expanded="true"
+                        data-e2e="e2e-DD-protocolTemplates-importProtocolsIo-sort">
                   <span><i class="sn-icon sn-icon-sort-down"></i></span>
                 </button>
                 <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
@@ -43,33 +56,39 @@
           </div>
         <% end %>
         <div class='protocol-list-side-panel'>
-          <div class='row empty-text'>
+          <div class='row empty-text' data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-results-empty">
             <%= t('protocols.index.protocolsio.list_panel.empty_text') %>
           </div>
 
-          <div class='list-wrapper perfect-scrollbar'></div>
+          <div class='list-wrapper perfect-scrollbar' data-e2e="e2e-CO-protocolTemplates-importProtocolsIo-results">
+          </div>
         </div>
       </div>
       <div class='protocol-preview-panel'>
         <div class='empty-preview-panel'>
 
           <div class='row'>
-            <div class='text-rows protocol-preview-text'>
+            <div class='text-rows protocol-preview-text'
+              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-title">
               <%= t('protocols.index.protocolsio.preview_panel.empty_title') %>
             </div>
           </div>
 
           <div class='row'>
-            <div class='text-separator'> <hr> </div>
+            <div class='text-separator' data-e2e="e2e-EL-protocolTemplates-importProtocolsIo-previewEmpty-separator">
+              <hr>
+            </div>
           </div>
 
           <div class='row'>
-            <div class='text-rows protocol-preview-subtext'>
+            <div class='text-rows protocol-preview-subtext'
+              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-subText">
               <%= t('protocols.index.protocolsio.preview_panel.empty_subtext') %>
             </div>
           </div>
           <div class='row-bottom'>
-            <div class='text-rows protocol-preview-subtext'>
+            <div class='text-rows protocol-preview-subtext'
+              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-poweredBy">
               <%= t('protocols.index.protocolsio.preview_panel.powered_by') %>
             </div>
           </div>
@@ -77,7 +96,7 @@
 
         <div class='full-preview-panel' style='display: none;'>
           <div class='row preview-banner'>
-            <div class='col-md-6 txt-holder'>
+            <div class='col-md-6 txt-holder' data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-preview-title">
               <span>
                 <b><%= t('protocols.index.protocolsio.preview_panel.banner_text') %></b>
               </span>
@@ -85,7 +104,7 @@
             <div class='col-md-6 btn-holder'>
             </div>
           </div>
-          <div class='preview-holder perfect-scrollbar'>
+          <div class='preview-holder perfect-scrollbar' data-e2e="e2e-CO-protocolTemplates-importProtocolsIo-preview">
             <iframe scrolling="no" class='preview-iframe'></iframe>
           </div>
         </div>
@@ -94,7 +113,17 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" data-dismiss="modal" class="btn btn-secondary"><%=t('general.cancel') %></button>
-  <button type="button" class="btn btn-primary convert-protocol" disabled><%= t('protocols.index.protocolsio.convert') %></button>
+  <button type="button"
+    data-dismiss="modal"
+    class="btn btn-secondary"
+    data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-cancel">
+    <%=t('general.cancel') %>
+  </button>
+  <button type="button"
+    class="btn btn-primary convert-protocol"
+    disabled
+    data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-convert">
+    <%= t('protocols.index.protocolsio.convert') %>
+  </button>
 </div>
 

From 40c2f1a7deef02a4b3de9f55354c8f7c9bbafc0b Mon Sep 17 00:00:00 2001
From: Klemen Benedicic <klemen.benedicic@scinote.net>
Date: Fri, 7 Jun 2024 12:05:31 +0200
Subject: [PATCH 3/3] Added data-e2e to protocol page [SCI-10761]

---
 .../groups/helpers/sort_flyout.vue            |  2 +-
 app/javascript/vue/protocol/container.vue     | 27 ++++--
 .../vue/protocol/protocolMetadata.vue         | 45 +++++-----
 app/javascript/vue/protocol/step.vue          | 84 ++++++++++++++-----
 .../vue/shared/content/attachments.vue        | 17 +++-
 .../vue/shared/content/attachments/empty.vue  |  8 +-
 .../vue/shared/content/attachments/inline.vue |  5 ++
 .../vue/shared/content/attachments/list.vue   |  5 ++
 .../shared/content/attachments/thumbnail.vue  | 12 ++-
 .../vue/shared/content/checklist.vue          | 25 ++++--
 .../vue/shared/content/checklistItem.vue      | 12 ++-
 app/javascript/vue/shared/content/table.vue   | 26 ++++--
 app/javascript/vue/shared/content/text.vue    | 34 ++++++--
 app/javascript/vue/shared/inline_edit.vue     |  7 +-
 .../vue/shared/legacy/dropdown_selector.vue   |  7 +-
 app/javascript/vue/shared/menu_dropdown.vue   |  6 +-
 app/views/my_modules/protocols.html.erb       |  1 +
 app/views/protocols/show.html.erb             |  3 +-
 18 files changed, 241 insertions(+), 85 deletions(-)

diff --git a/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
index 723b15d0a..c9c68e401 100644
--- a/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
+++ b/app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
@@ -6,7 +6,7 @@
       position="right"
       @dtEvent="changeSort"
       btnIcon="sn-icon sn-icon-sort-down"
-      :e2eButton="e2eSortButton"
+      :dataE2e="e2eSortButton"
     ></MenuDropdown>
 </template>
 
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 0d43309d0..0c1d0ec65 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -85,9 +85,14 @@
         <div :class="inRepository ? 'protocol-section protocol-information' : ''">
           <div v-if="inRepository" id="protocol-description" class="protocol-section-header">
             <div class="protocol-description-container">
-              <a class="protocol-section-caret" role="button" data-toggle="collapse" href="#protocol-description-container" aria-expanded="false" aria-controls="protocol-description-container">
+              <a class="protocol-section-caret"
+                role="button"
+                data-toggle="collapse"
+                href="#protocol-description-container"
+                aria-expanded="false"
+                aria-controls="protocol-description-container">
                 <i class="sn-icon sn-icon-right"></i>
-                <span id="protocolDescriptionLabel" class="protocol-section-title">
+                <span id="protocolDescriptionLabel" class="protocol-section-title" data-e2e="e2e-TX-protocolTemplates-protocolDescription-title">
                   <h2>
                     {{ i18n.t("protocols.header.protocol_description") }}
                   </h2>
@@ -95,7 +100,10 @@
               </a>
             </div>
           </div>
-          <div id="protocol-description-container" class="text-base" :class=" inRepository ? 'protocol-description collapse in' : ''" >
+          <div id="protocol-description-container"
+            class="text-base"
+            :class=" inRepository ? 'protocol-description collapse in' : ''"
+            data-e2e="e2e-IF-protocolTemplates-protocolDescription-content">
             <div v-if="urls.update_protocol_description_url">
               <Tinymce
                 :value="protocol.attributes.description"
@@ -123,7 +131,7 @@
           <div class="protocol-steps-container">
             <a class="protocol-section-caret" role="button" data-toggle="collapse" href="#protocol-steps-container" aria-expanded="false" aria-controls="protocol-steps-container">
               <i class="sn-icon sn-icon-right"></i>
-              <span id="protocolStepsLabel" class="protocol-section-title">
+              <span id="protocolStepsLabel" class="protocol-section-title" data-e2e="e2e-TX-protocol-templateSteps-title">
                 <h2>
                   {{ i18n.t("protocols.header.protocol_steps") }}
                 </h2>
@@ -137,6 +145,7 @@
             <a
               class="btn btn-secondary"
               :title="i18n.t('protocols.steps.new_step_title')"
+              data-e2e="e2e-BT-protocol-templateSteps-newStepTop"
               @keyup.enter="addStep(steps.length)"
               @click="addStep(steps.length)"
               tabindex="0">
@@ -144,15 +153,16 @@
                 <span>{{ i18n.t("protocols.steps.new_step") }}</span>
             </a>
             <div v-if="steps.length > 0" class="flex justify-between items-center gap-4">
-              <button @click="collapseSteps" class="btn btn-secondary flex px-4" tabindex="0">
+              <button @click="collapseSteps" class="btn btn-secondary flex px-4" tabindex="0" data-e2e="e2e-BT-protocol-templateSteps-collapse">
                 {{ i18n.t("protocols.steps.collapse_label") }}
               </button>
-              <button @click="expandSteps" class="btn btn-secondary flex px-4" tabindex="0">
+              <button @click="expandSteps" class="btn btn-secondary flex px-4" tabindex="0" data-e2e="e2e-BT-protocol-templateSteps-expand">
                 {{ i18n.t("protocols.steps.expand_label") }}
               </button>
               <a v-if="steps.length > 0 && urls.reorder_steps_url"
                 class="btn btn-light icon-btn"
                 data-toggle="modal"
+                data-e2e="e2e-BT-protocol-templateSteps-reorder"
                 @click="startStepReorder"
                 @keyup.enter="startStepReorder"
                 :class="{'disabled': steps.length == 1}"
@@ -163,7 +173,7 @@
           </div>
           <div class="protocol-steps pb-8">
             <div v-for="(step, index) in steps" :key="step.id" class="step-block">
-              <div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)">
+              <div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
               </div>
               <Step
@@ -185,7 +195,7 @@
                 :reorderStepUrl="steps.length > 1 ? urls.reorder_steps_url : null"
                 :assignableMyModuleId="protocol.attributes.assignable_my_module_id"
               />
-              <div v-if="(index === steps.length - 1) && urls.add_step_url" class="insert-step" @click="addStep(index + 1)">
+              <div v-if="(index === steps.length - 1) && urls.add_step_url" class="insert-step" @click="addStep(index + 1)" data-e2e="e2e-BT-protocol-templateSteps-insertStep">
                 <i class="sn-icon sn-icon-new-task"></i>
               </div>
             </div>
@@ -193,6 +203,7 @@
               <a
                 class="btn btn-secondary"
                 :title="i18n.t('protocols.steps.new_step_title')"
+                data-e2e="e2e-BT-protocol-templateSteps-newStepBottom"
                 @keyup.enter="addStep(steps.length)"
                 @click="addStep(steps.length)"
                 tabindex="0">
diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue
index 54bf6fad2..73b6f0b0c 100644
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/app/javascript/vue/protocol/protocolMetadata.vue
@@ -1,32 +1,33 @@
 <template>
-  <div class="protocol-section protocol-information mb-4">
+  <div class="protocol-section protocol-information mb-4" data-e2e="e2e-CO-protocolTemplates-protocolDetails">
     <div id="protocol-details" class="protocol-section-header">
       <div class="protocol-details-container">
         <a class="protocol-section-caret" role="button" data-toggle="collapse"
            href="#details-container" aria-expanded="false" aria-controls="details-container">
           <i class="sn-icon sn-icon-right"></i>
           <span id="protocolDetailsLabel" class="protocol-section-title">
-            <h2>
+            <h2 data-e2e="e2e-TX-protocolTemplates-protocolDetails-title">
               {{ i18n.t("protocols.header.details") }}
             </h2>
-            <span class="protocol-code" >{{ protocol.attributes.code }}</span>
+            <span class="protocol-code" data-e2e="e2e-TX-protocolTemplates-protocolDetails-protocolId">{{ protocol.attributes.code }}</span>
           </span>
         </a>
       </div>
       <div class="actions-block">
         <a class="btn btn-light icon-btn pull-right"
-           :href="protocol.attributes.urls.print_protocol_url" target="_blank">
+           :href="protocol.attributes.urls.print_protocol_url" target="_blank"
+           data-e2e="e2e-BT-protocolTemplates-protocolDetails-print">
           <span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
         </a>
-        <button class="btn btn-light" @click="openVersionsModal">
+        <button class="btn btn-light" @click="openVersionsModal" data-e2e="e2e-BT-protocolTemplates-protocolDetails-versions">
           {{ i18n.t("protocols.header.versions") }}
         </button>
         <button v-if="protocol.attributes.urls.publish_url"
-                @click="$emit('publish')" class="btn btn-primary">
+                @click="$emit('publish')" class="btn btn-primary" data-e2e="e2e-BT-protocolTemplates-protocolDetails-publish">
           {{ i18n.t("protocols.header.publish") }}</button>
         <button v-if="protocol.attributes.urls.save_as_draft_url"
                 :disabled="protocol.attributes.has_draft || creatingDraft"
-                @click="saveAsdraft" class="btn btn-secondary">
+                @click="saveAsdraft" class="btn btn-secondary" data-e2e="e2e-BT-protocolTemplates-protocolDetails-saveAsDraft">
           {{ i18n.t("protocols.header.save_as_draft") }}
         </button>
       </div>
@@ -34,33 +35,33 @@
     <div id="details-container" class="protocol-details collapse in">
       <div class="protocol-metadata">
         <p class="data-block">
-          <span>{{ i18n.t("protocols.header.version") }}</span>
-          <b>{{ titleVersion }}</b>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-versionLabel">{{ i18n.t("protocols.header.version") }}</span>
+          <b data-e2e="e2e-TX-protocolTemplates-protocolDetails-version">{{ titleVersion }}</b>
         </p>
         <p class="data-block" v-if="protocol.attributes.published">
-          <span>{{ i18n.t("protocols.header.published_on") }}</span>
-          <b>{{ protocol.attributes.published_on_formatted }}</b>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-publishedOnLabel">{{ i18n.t("protocols.header.published_on") }}</span>
+          <b data-e2e="e2e-TX-protocolTemplates-protocolDetails-publishedOn">{{ protocol.attributes.published_on_formatted }}</b>
         </p>
-        <p class="data-block" v-if="protocol.attributes.published">
+        <p class="data-block" v-if="protocol.attributes.published" data-e2e="e2e-TX-protocolTemplates-protocolDetails-publishedBy">
           <span>{{ i18n.t("protocols.header.published_by") }}</span>
           <img :src="protocol.attributes.published_by.avatar" class="rounded-full"/>
           {{ protocol.attributes.published_by.name }}
         </p>
         <p class="data-block">
-          <span>{{ i18n.t("protocols.header.updated_at") }}</span>
-          <b>{{ protocol.attributes.updated_at_formatted }}</b>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-updatedAtLabel">{{ i18n.t("protocols.header.updated_at") }}</span>
+          <b data-e2e="e2e-TX-protocolTemplates-protocolDetails-updatedAt">{{ protocol.attributes.updated_at_formatted }}</b>
         </p>
         <p class="data-block">
-          <span>{{ i18n.t("protocols.header.created_at") }}</span>
-          <b>{{ protocol.attributes.created_at_formatted }}</b>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-createdAtLabel">{{ i18n.t("protocols.header.created_at") }}</span>
+          <b data-e2e="e2e-TX-protocolTemplates-protocolDetails-createdAt">{{ protocol.attributes.created_at_formatted }}</b>
         </p>
-        <p class="data-block">
+        <p class="data-block" data-e2e="e2e-TX-protocolTemplates-protocolDetails-createdBy">
           <span>{{ i18n.t("protocols.header.added_by") }}</span>
           <img :src="protocol.attributes.added_by.avatar" class="rounded-full"/>
           {{ protocol.attributes.added_by.name }}
         </p>
         <p class="data-block authors-data">
-          <span>{{ i18n.t("protocols.header.authors") }}</span>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-authorsLabel">{{ i18n.t("protocols.header.authors") }}</span>
           <span class="authors-list" v-if="protocol.attributes.urls.update_protocol_authors_url">
             <InlineEdit
               :value="protocol.attributes.authors"
@@ -68,15 +69,16 @@
               :allowBlank="true"
               :attributeName="`${i18n.t('Protocol')} ${i18n.t('protocols.header.authors_list')}`"
               :characterLimit="10000"
+              :dataE2e="'protocolTemplates-protocolDetails-authors'"
               @update="updateAuthors"
             />
           </span>
-          <span class="authors-list" v-else>
+          <span class="authors-list" data-e2e="e2e-TX-protocolTemplates-protocolDetails-authorsPublished" v-else>
             {{ protocol.attributes.authors }}
           </span>
         </p>
         <p class="data-block keywords-data">
-          <span>{{ i18n.t("protocols.header.keywords") }}</span>
+          <span data-e2e="e2e-TX-protocolTemplates-protocolDetails-keywordsLabel">{{ i18n.t("protocols.header.keywords") }}</span>
           <span
             class="keywords-list"
             v-if="protocol.attributes.urls.update_protocol_authors_url || protocol.attributes.keywords.length">
@@ -90,6 +92,7 @@
               :noEmptyOption="false"
               :selectAppearance="'tag'"
               :viewMode="protocol.attributes.urls.update_protocol_keywords_url == null"
+              :dataE2e="'protocolTemplates-protocolDetails-keywords'"
               @dropdown:changed="updateKeywords"
             />
           </span>
@@ -117,7 +120,7 @@ export default {
     protocol: {
       type: Object,
       required: true
-    },
+    }
   },
   data() {
     return {
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 5cc3292c8..4f3ef5fab 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -6,6 +6,7 @@
        @dragover.prevent
        :data-id="step.id"
        :class="{ 'draging-file': dragingFile, 'editing-name': editingName, 'locked': !urls.update_url, 'pointer-events-none': addingContent }"
+       :data-e2e="`e2e-CO-protocol-step${step.id}`"
   >
     <div class="drop-message" @dragleave.prevent="!showFileModal ? dragingFile = false : null">
       {{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position + 1 }) }}
@@ -18,7 +19,8 @@
             :href="'#stepBody' + step.id"
             data-toggle="collapse"
             data-remote="true"
-            @click="toggleCollapsed">
+            @click="toggleCollapsed"
+            :data-e2e="`e2e-BT-protocol-step${step.id}-toggleCollapsed`">
               <span class="sn-icon sn-icon-right "></span>
           </a>
           <div v-if="!inRepository" class="step-complete-container" :class="{ 'step-element--locked': !urls.state_url }">
@@ -27,9 +29,10 @@
                  @keyup.enter="changeState"
                  tabindex="0"
                  :title="step.attributes.completed ? i18n.t('protocols.steps.status.uncomplete') : i18n.t('protocols.steps.status.complete')"
+                 :data-e2e="`e2e-BT-protocol-step${step.id}-toggleCompleted`"
             ></div>
           </div>
-          <div class="step-position  leading-5">
+          <div class="step-position leading-5" :data-e2e="`e2e-TX-protocol-step${step.id}-position`">
             {{ step.attributes.position + 1 }}.
           </div>
         </div>
@@ -48,6 +51,7 @@
             @editingEnabled="editingName = true"
             @editingDisabled="editingName = false"
             :editOnload="step.newStep == true"
+            :dataE2e="`protocol-step${step.id}-title`"
             @update="updateName"
           />
         </div>
@@ -60,6 +64,7 @@
           :btnText="i18n.t('protocols.steps.insert.button')"
           :position="'right'"
           :caret="true"
+          :dataE2e="`e2e-DD-protocol-step${step.id}-insertContent`"
           @create:table="(...args) => this.createElement('table', ...args)"
           @create:checklist="createElement('checklist')"
           @create:text="createElement('text')"
@@ -98,6 +103,7 @@
           :btnClasses="'btn btn-light icon-btn'"
           :position="'right'"
           :btnIcon="'sn-icon sn-icon-more-hori'"
+          :dataE2e="`e2e-DD-protocol-step${step.id}-options`"
           @reorder="openReorderModal"
           @duplicate="duplicateStep"
           @delete="showDeleteModal"
@@ -116,6 +122,7 @@
           :reorderElementUrl="elements.length > 1 ? urls.reorder_elements_url : ''"
           :assignableMyModuleId="assignableMyModuleId"
           :isNew="element.isNew"
+          :dataE2e="`protocol-step${step.id}`"
           @component:adding-content="($event) => addingContent = $event"
           @component:delete="deleteElement"
           @update="updateElement"
@@ -127,6 +134,7 @@
                     :parent="step"
                     :attachments="attachments"
                     :attachmentsReady="attachmentsReady"
+                    :dataE2e="`protocol-step${step.id}`"
                     @attachments:openFileModal="showFileModal = true"
                     @attachment:deleted="attachmentDeleted"
                     @attachment:update="updateAttachment"
@@ -142,6 +150,7 @@
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_position: step.attributes.position + 1 })"
       :items="reorderableElements"
+      :dataE2e="`e2e-BT-protocol-step${step.id}-reorder`"
       @reorder="updateElementOrder"
       @close="closeReorderModal"
     />
@@ -212,13 +221,34 @@
         editingName: false,
         inlineEditError: null,
         wellPlateOptions: [
-          { text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'), emit: 'create:table', params: [32, 48] },
-          { text: I18n.t('protocols.steps.insert.well_plate_options.16_x_24'), emit: 'create:table', params: [16, 24] },
-          { text: I18n.t('protocols.steps.insert.well_plate_options.8_x_12'), emit: 'create:table', params: [8, 12] },
-          { text: I18n.t('protocols.steps.insert.well_plate_options.6_x_8'), emit: 'create:table', params: [6, 8] },
-          { text: I18n.t('protocols.steps.insert.well_plate_options.4_x_6'), emit: 'create:table', params: [4, 6] },
-          { text: I18n.t('protocols.steps.insert.well_plate_options.3_x_4'), emit: 'create:table', params: [3, 4]},
-          { text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table', params: [2, 3] }
+          { text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'),
+            emit: 'create:table',
+            params: [32, 48],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-32` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.16_x_24'),
+            emit: 'create:table',
+            params: [16, 24],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-16` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.8_x_12'),
+            emit: 'create:table',
+            params: [8, 12],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-8` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.6_x_8'),
+            emit: 'create:table',
+            params: [6, 8],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-6` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.4_x_6'),
+            emit: 'create:table',
+            params: [4, 6],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-4` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.3_x_4'),
+            emit: 'create:table',
+            params: [3, 4],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-3` },
+          { text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'),
+            emit: 'create:table',
+            params: [2, 3],
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellPlate-2` }
         ]
       }
     },
@@ -276,25 +306,29 @@
         if (this.urls.upload_attachment_url) {
           menu = menu.concat([{
             text: this.i18n.t('protocols.steps.insert.add_file'),
-            emit: 'create:file'
+            emit: 'create:file',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment-file`
           }]);
         }
         if (this.step.attributes.wopi_enabled) {
           menu = menu.concat([{
             text: this.i18n.t('assets.create_wopi_file.button_text'),
-            emit: 'create:wopi_file'
+            emit: 'create:wopi_file',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment-wopi`
           }]);
         }
         if (this.step.attributes.open_vector_editor_context.new_sequence_asset_url) {
           menu = menu.concat([{
             text: this.i18n.t('open_vector_editor.new_sequence_file'),
-            emit: 'create:ove_file'
+            emit: 'create:ove_file',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment-sequence`
           }]);
         }
         if (this.step.attributes.marvinjs_enabled) {
           menu = menu.concat([{
             text: this.i18n.t('marvinjs.new_button'),
-            emit: 'create:marvinjs_file'
+            emit: 'create:marvinjs_file',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment-chemicalDrawing`
           }]);
         }
         return menu;
@@ -304,21 +338,26 @@
         if (this.urls.update_url) {
           menu = menu.concat([{
                     text: this.i18n.t('protocols.steps.insert.text'),
-                    emit: 'create:text'
+                    emit: 'create:text',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertText`
                   },{
                     text: this.i18n.t('protocols.steps.insert.attachment'),
                     submenu: this.filesMenu,
-                    position: 'left'
+                    position: 'left',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertAttachment`
                   },{
                     text: this.i18n.t('protocols.steps.insert.table'),
-                    emit: 'create:table'
+                    emit: 'create:table',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertTable`
                   },{
                     text: this.i18n.t('protocols.steps.insert.well_plate'),
                     submenu: this.wellPlateOptions,
-                    position: 'left'
+                    position: 'left',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertWellplate`
                   },{
                     text: this.i18n.t('protocols.steps.insert.checklist'),
-                    emit: 'create:checklist'
+                    emit: 'create:checklist',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertChecklist`
                   }]);
         }
 
@@ -329,19 +368,22 @@
         if (this.urls.reorder_elements_url) {
           menu = menu.concat([{
             text: this.i18n.t('protocols.steps.options_dropdown.rearrange'),
-            emit: 'reorder'
+            emit: 'reorder',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-stepOptions-rearrange`
           }]);
         }
         if (this.urls.duplicate_step_url) {
           menu = menu.concat([{
             text: this.i18n.t('protocols.steps.options_dropdown.duplicate'),
-            emit: 'duplicate'
+            emit: 'duplicate',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-stepOptions-duplicate`
           }]);
         }
         if (this.urls.delete_url) {
           menu = menu.concat([{
             text: this.i18n.t('protocols.steps.options_dropdown.delete'),
-            emit: 'delete'
+            emit: 'delete',
+            data_e2e: `e2e-BT-protocol-step${this.step.id}-stepOptions-delete`
           }]);
         }
         return menu;
diff --git a/app/javascript/vue/shared/content/attachments.vue b/app/javascript/vue/shared/content/attachments.vue
index 95ed6f72a..e5edf3e3c 100644
--- a/app/javascript/vue/shared/content/attachments.vue
+++ b/app/javascript/vue/shared/content/attachments.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="content__attachments pr-8" :id='"content__attachments-" + parent.id'>
+  <div class="content__attachments pr-8"
+    :id='"content__attachments-" + parent.id'
+    :data-e2e="`e2e-CO-${dataE2e}-attachments`">
     <div class="sci-divider my-6"></div>
     <div class="content__attachments-actions">
       <div class="title">
@@ -11,6 +13,7 @@
           :btnText="i18n.t('attachments.preview_menu')"
           :position="'right'"
           :caret="true"
+          :data_e2e="`e2e-DD-${dataE2e}-attachments-viewOptions`"
           @attachment:viewMode = "changeAttachmentsViewMode"
         ></MenuDropdown>
         <MenuDropdown
@@ -18,6 +21,7 @@
           :btnIcon="'sn-icon sn-icon-sort-down'"
           :btnClasses="'btn btn-light icon-btn'"
           :position="'right'"
+          :data_e2e="`e2e-DD-${dataE2e}-attachments-orderOptions`"
           @attachment:order = "changeAttachmentsOrder"
         ></MenuDropdown>
       </div>
@@ -29,6 +33,7 @@
         :is="attachment_view_mode(attachmentsOrdered[index])"
         :attachment="attachment"
         :parentId="parseInt(parent.id)"
+        :dataE2e="`${dataE2e}`"
         @attachment:viewMode="updateAttachmentViewMode"
         @attachment:delete="deleteAttachment(attachment.id)"
         @attachment:moved="attachmentMoved"
@@ -64,6 +69,10 @@ export default {
     attachmentsReady: {
       type: Boolean,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -119,7 +128,8 @@ export default {
           active: this.parent.attributes.assets_view_mode == viewMode,
           text: this.i18n.t(`attachments.view_mode.${viewMode}_html`),
           emit: 'attachment:viewMode',
-          params: viewMode
+          params: viewMode,
+          data_e2e: `e2e-BT-${this.dataE2e}-viewOptions-${viewMode}`
         });
       });
       return menu;
@@ -131,7 +141,8 @@ export default {
           text: this.i18n.t(`general.sort_new.${orderOption}`),
           emit: 'attachment:order',
           params: orderOption,
-          active: this.parent.attributes.assets_order === orderOption
+          active: this.parent.attributes.assets_order === orderOption,
+          data_e2e: `e2e-BT-${this.dataE2e}-orderOptions-${orderOption}`
         });
       });
       return menu;
diff --git a/app/javascript/vue/shared/content/attachments/empty.vue b/app/javascript/vue/shared/content/attachments/empty.vue
index 45d1a6f45..a95ea3b50 100644
--- a/app/javascript/vue/shared/content/attachments/empty.vue
+++ b/app/javascript/vue/shared/content/attachments/empty.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="attachment-container asset" :data-asset-id="attachment.id">
+  <div class="attachment-container asset"
+    :data-asset-id="attachment.id"
+    :data-e2e="`e2e-CO-${dataE2e}-attachment${attachment.id}-empty`">
     <div
       class="file-name"
       :id="`modal_link${attachment.id}`"
@@ -23,6 +25,10 @@ export default {
     parentId: {
       type: Number,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   }
 };
diff --git a/app/javascript/vue/shared/content/attachments/inline.vue b/app/javascript/vue/shared/content/attachments/inline.vue
index ccc4b299f..6f3fadaac 100644
--- a/app/javascript/vue/shared/content/attachments/inline.vue
+++ b/app/javascript/vue/shared/content/attachments/inline.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="inline-attachment-container asset"
        :data-asset-id="attachment.id"
+       :data-e2e="`e2e-CO-${dataE2e}-attachment${attachment.id}-inline`"
   >
     <div class="header">
       <div class="file-info">
@@ -86,6 +87,10 @@ export default {
     parentId: {
       type: Number,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
diff --git a/app/javascript/vue/shared/content/attachments/list.vue b/app/javascript/vue/shared/content/attachments/list.vue
index bf9ae3d00..a264d865f 100644
--- a/app/javascript/vue/shared/content/attachments/list.vue
+++ b/app/javascript/vue/shared/content/attachments/list.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="list-attachment-container asset"
        :data-asset-id="attachment.id"
+       :data-e2e="`e2e-CO-${dataE2e}-attachment${attachment.id}-list`"
   >
     <i class="text-sn-grey asset-icon sn-icon" :class="attachment.attributes.icon"></i>
     <a :href="attachment.attributes.urls.blob"
@@ -57,6 +58,10 @@ export default {
     parentId: {
       type: Number,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
diff --git a/app/javascript/vue/shared/content/attachments/thumbnail.vue b/app/javascript/vue/shared/content/attachments/thumbnail.vue
index 43ccc73c5..db157408f 100644
--- a/app/javascript/vue/shared/content/attachments/thumbnail.vue
+++ b/app/javascript/vue/shared/content/attachments/thumbnail.vue
@@ -4,6 +4,7 @@
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
        v-click-outside="handleClickOutsideThumbnail"
+       :data-e2e="`e2e-CO-${dataE2e}-attachment${attachment.id}-thumbnail`"
   >
     <a  :class="{ hidden: showOptions }"
         :href="attachment.attributes.urls.blob"
@@ -101,7 +102,10 @@
         >
           <i class="sn-icon sn-icon-open"></i>
         </a>
-        <a v-if="attachment.attributes.urls.move" @click.prevent.stop="showMoveModal" class="btn btn-light icon-btn thumbnail-action-btn" :title="i18n.t('attachments.thumbnail.buttons.move')">
+        <a v-if="attachment.attributes.urls.move"
+          @click.prevent.stop="showMoveModal"
+          class="btn btn-light icon-btn thumbnail-action-btn"
+          :title="i18n.t('attachments.thumbnail.buttons.move')">
           <i class="sn-icon sn-icon-move"></i>
         </a>
         <a class="btn btn-light icon-btn thumbnail-action-btn"
@@ -202,6 +206,10 @@ export default {
     parentId: {
       type: Number,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -244,7 +252,7 @@ export default {
         });
       }
       return options;
-    },
+    }
   },
   mounted() {
     $(this.$nextTick(() => {
diff --git a/app/javascript/vue/shared/content/checklist.vue b/app/javascript/vue/shared/content/checklist.vue
index b891fa1a0..8877a569b 100644
--- a/app/javascript/vue/shared/content/checklist.vue
+++ b/app/javascript/vue/shared/content/checklist.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="content__checklist-container pr-8" >
+  <div class="content__checklist-container pr-8" :data-e2e="`e2e-CO-${dataE2e}-checklist${element.id}`">
     <div class="sci-divider my-6" v-if="!inRepository"></div>
-    <div class="checklist-header flex rounded mb-1 items-center relative w-full group/checklist-header" :class="{ 'editing-name': editingName, 'locked': !element.attributes.orderable.urls.update_url }">
+    <div class="checklist-header flex rounded mb-1 items-center relative w-full group/checklist-header"
+      :class="{ 'editing-name': editingName, 'locked': !element.attributes.orderable.urls.update_url }">
       <div class="grow-1 text-ellipsis whitespace-nowrap grow my-1 font-bold">
         <InlineEdit
           :class="{ 'pointer-events-none': !element.attributes.orderable.urls.update_url }"
@@ -13,6 +14,7 @@
           :autofocus="editingName"
           :smartAnnotation="true"
           :attributeName="`${i18n.t('Checklist')} ${i18n.t('name')}`"
+          :dataE2e="`${dataE2e}-checklist${element.id}`"
           @editingEnabled="editingName = true"
           @editingDisabled="editingName = false"
           @update="updateName"
@@ -24,6 +26,7 @@
         :btnClasses="'btn btn-light icon-btn  btn-sm'"
         :position="'right'"
         :btnIcon="'sn-icon sn-icon-more-hori'"
+        :dataE2e="`e2e-DD-${dataE2e}-checklist${element.id}-options`"
         @edit="editingName = true"
         @duplicate="duplicateElement"
         @move="showMoveModal"
@@ -51,6 +54,7 @@
             :reorderChecklistItemUrl="this.element.attributes.orderable.urls.reorder_url"
             :inRepository="inRepository"
             :draggable="checklistItems.length > 1"
+            :data-e2e="`${dataE2e}-checklistItem${element.id}`"
             @editStart="editingItem = true"
             @editEnd="editingItem = false"
             @update="saveItem"
@@ -63,6 +67,7 @@
       <div v-if="element.attributes.orderable.urls.create_item_url && !addingNewItem"
            class="flex items-center gap-1 text-sn-blue cursor-pointer mb-2 mt-1 "
            tabindex="0"
+           :data-e2e="`e2e-BT-${dataE2e}-checklist${element.id}-addNew`"
            @keyup.enter="addItem(checklistItems[checklistItems.length - 1]?.id)"
            @click="addItem(checklistItems[checklistItems.length - 1]?.id)">
         <i class="sn-icon sn-icon-new-task w-6 text-center inline-block"></i>
@@ -120,6 +125,10 @@ export default {
     assignableMyModuleId: {
       type: Number,
       required: false
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -154,25 +163,29 @@ export default {
       if (this.element.attributes.orderable.urls.update_url) {
         menu.push({
           text: I18n.t('general.edit'),
-          emit: 'edit'
+          emit: 'edit',
+          data_e2e: `e2e-BT-${this.dataE2e}-checklist${this.element.id}-options-edit`
         });
       }
       if (this.element.attributes.orderable.urls.duplicate_url) {
         menu.push({
           text: I18n.t('general.duplicate'),
-          emit: 'duplicate'
+          emit: 'duplicate',
+          data_e2e: `e2e-BT-${this.dataE2e}-checklist${this.element.id}-options-duplicate`
         });
       }
       if (this.element.attributes.orderable.urls.move_targets_url) {
         menu.push({
           text: I18n.t('general.move'),
-          emit: 'move'
+          emit: 'move',
+          data_e2e: `e2e-BT-${this.dataE2e}-checklist${this.element.id}-options-move`
         });
       }
       if (this.element.attributes.orderable.urls.delete_url) {
         menu.push({
           text: I18n.t('general.delete'),
-          emit: 'delete'
+          emit: 'delete',
+          data_e2e: `e2e-BT-${this.dataE2e}-checklist${this.element.id}-options-delete`
         });
       }
       return menu;
diff --git a/app/javascript/vue/shared/content/checklistItem.vue b/app/javascript/vue/shared/content/checklistItem.vue
index 058ecab5c..ed4588e1c 100644
--- a/app/javascript/vue/shared/content/checklistItem.vue
+++ b/app/javascript/vue/shared/content/checklistItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content__checklist-item pl-10 ml-[-2.325rem] group/checklist-item-header">
+  <div class="content__checklist-item pl-10 ml-[-2.325rem] group/checklist-item-header" :data-e2e="`e2e-CO-${dataE2e}`">
     <div class="checklist-item-header flex rounded items-center relative w-full" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
       <div v-if="reorderChecklistItemUrl"
         class="absolute h-6 cursor-grab justify-center left-[-2.325rem] top-0.5 px-2 tw-hidden text-sn-grey element-grip step-element-grip--draggable"
@@ -14,7 +14,9 @@
                  type="checkbox"
                  class="sci-checkbox"
                  :disabled="checklistItem.attributes.isNew"
-                 :checked="checklistItem.attributes.checked" @change="toggleChecked($event)" />
+                 :checked="checklistItem.attributes.checked"
+                 :data-e2e="`e2e-CB-${dataE2e}-toggleChecked`"
+                 @change="toggleChecked($event)" />
           <span class="sci-checkbox-label" >
           </span>
         </div>
@@ -37,6 +39,7 @@
             :editOnload="checklistItem.attributes.isNew"
             :smartAnnotation="true"
             :allowNewLine="true"
+            :dataE2e="dataE2e"
             @editingEnabled="enableTextEdit"
             @editingDisabled="disableTextEdit"
             @update="updateText"
@@ -46,6 +49,7 @@
           />
           <span v-if="!editingText && (!checklistItem.attributes.urls || deleteUrl)"
                 class="absolute right-0 top-0.5 leading-6 tw-hidden group-hover/checklist-item-header:inline-block !text-sn-blue cursor-pointer"
+                :data-e2e="`e2e-BT-${dataE2e}-delete`"
                 @click="showDeleteModal" tabindex="0">
             <i class="sn-icon sn-icon-delete"></i>
           </span>
@@ -88,6 +92,10 @@ export default {
     reordering: {
       type: Boolean,
       required: true
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
diff --git a/app/javascript/vue/shared/content/table.vue b/app/javascript/vue/shared/content/table.vue
index ab366914b..d0144da2d 100644
--- a/app/javascript/vue/shared/content/table.vue
+++ b/app/javascript/vue/shared/content/table.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="content__table-container pr-8">
+  <div class="content__table-container pr-8"
+    :data-e2e="`e2e-CO-${dataE2e}-${element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${element.id}`">
     <div class="sci-divider my-6" v-if="!inRepository"></div>
     <div class="table-header h-9 flex rounded mb-3 items-center relative w-full group/table-header" :class="{ 'editing-name': editingName, 'locked': locked }">
       <div v-if="!locked || element.attributes.orderable.name" :key="reloadHeader"
@@ -12,6 +13,7 @@
           :allowBlank="false"
           :autofocus="editingName"
           :attributeName="`${i18n.t('Table')} ${i18n.t('name')}`"
+          :dataE2e="`${dataE2e}-${element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${element.id}`"
           @editingEnabled="enableNameEdit"
           @editingDisabled="disableNameEdit"
           @update="updateName"
@@ -23,6 +25,7 @@
         :btnClasses="'btn btn-light icon-btn btn-sm'"
         :position="'right'"
         :btnIcon="'sn-icon sn-icon-more-hori'"
+        :dataE2e="`e2e-DD-${dataE2e}-${element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${element.id}-options`"
         @edit="enableNameEdit"
         @duplicate="duplicateElement"
         @move="showMoveModal"
@@ -32,11 +35,14 @@
     <div class="table-body group/table-body relative border-solid border-transparent"
          :class="{'edit border-sn-light-grey': editingTable, 'view': !editingTable, 'locked': !element.attributes.orderable.urls.update_url}"
          tabindex="0"
+         :data_e2e="`e2e-TB-${dataE2e}-${element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${element.id}`"
          @keyup.enter="!editingTable && enableTableEdit()">
       <div ref="hotTable" class="hot-table-container" @click="!editingTable && enableTableEdit()">
       </div>
       <div class="text-xs pt-3 pb-2 text-sn-grey h-1">
-        <span v-if="editingTable">{{ i18n.t('protocols.steps.table.edit_message') }}</span>
+        <span v-if="editingTable" :dataE2e="`e2e-TX-${dataE2e}-${element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${element.id}-editMessage`">
+          {{ i18n.t('protocols.steps.table.edit_message') }}
+        </span>
       </div>
     </div>
     <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement" @cancel="closeDeleteModal"/>
@@ -82,6 +88,10 @@ export default {
     assignableMyModuleId: {
       type: Number,
       required: false
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -104,25 +114,29 @@ export default {
       if (this.element.attributes.orderable.urls.update_url) {
         menu.push({
           text: I18n.t('general.edit'),
-          emit: 'edit'
+          emit: 'edit',
+          data_e2e: `e2e-BT-${this.dataE2e}-${this.element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${this.element.id}-options-edit`
         });
       }
       if (this.element.attributes.orderable.urls.duplicate_url) {
         menu.push({
           text: I18n.t('general.duplicate'),
-          emit: 'duplicate'
+          emit: 'duplicate',
+          data_e2e: `e2e-BT-${this.dataE2e}-${this.element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${this.element.id}-options-duplicate`
         });
       }
       if (this.element.attributes.orderable.urls.move_targets_url) {
         menu.push({
           text: I18n.t('general.move'),
-          emit: 'move'
+          emit: 'move',
+          data_e2e: `e2e-BT-${this.dataE2e}-${this.element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${this.element.id}-options-move`
         });
       }
       if (this.element.attributes.orderable.urls.delete_url) {
         menu.push({
           text: I18n.t('general.delete'),
-          emit: 'delete'
+          emit: 'delete',
+          data_e2e: `e2e-BT-${this.dataE2e}-${this.element.attributes.orderable.metadata.plateTemplate ? 'wellPlate' : 'table'}${this.element.id}-options-delete`
         });
       }
       return menu;
diff --git a/app/javascript/vue/shared/content/text.vue b/app/javascript/vue/shared/content/text.vue
index 9fbb1a28f..2e89fba8e 100644
--- a/app/javascript/vue/shared/content/text.vue
+++ b/app/javascript/vue/shared/content/text.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="content__text-container pr-8">
+  <div class="content__text-container pr-8" :data-e2e="`e2e-CO-${dataE2e}-stepText${element.id}`">
     <div class="sci-divider my-6" v-if="!inRepository"></div>
-    <div class="text-header h-9 flex rounded mb-1 items-center relative w-full group/text-header" :class="{ 'editing-name': editingName, 'locked': !element.attributes.orderable.urls.update_url }">
+    <div class="text-header h-9 flex rounded mb-1 items-center relative w-full group/text-header"
+      :class="{ 'editing-name': editingName,
+      'locked': !element.attributes.orderable.urls.update_url }">
       <div v-if="element.attributes.orderable.urls.update_url || element.attributes.orderable.name"
            class="grow-1 text-ellipsis whitespace-nowrap grow my-1 font-bold"
            :class="{'pointer-events-none': !element.attributes.orderable.urls.update_url}"
@@ -13,6 +15,7 @@
           :allowBlank="true"
           :autofocus="editingName"
           :attributeName="`${i18n.t('Text')} ${i18n.t('name')}`"
+          :dataE2e="`${dataE2e}-stepText${element.id}`"
           @editingEnabled="enableNameEdit"
           @editingDisabled="disableNameEdit"
           @update="updateName"
@@ -24,13 +27,18 @@
         :btnClasses="'btn btn-light icon-btn btn-sm'"
         :position="'right'"
         :btnIcon="'sn-icon sn-icon-more-hori'"
+        :dataE2e="`e2e-DD-${dataE2e}-stepText${element.id}-options`"
         @edit="enableNameEdit"
         @duplicate="duplicateElement"
         @move="showMoveModal"
         @delete="showDeleteModal"
       ></MenuDropdown>
     </div>
-    <div class="flex rounded min-h-[2.25rem] mb-4 relative group/text_container content__text-body" :class="{ 'edit': inEditMode, 'component__element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
+    <div class="flex rounded min-h-[2.25rem] mb-4 relative group/text_container content__text-body"
+      :class="{ 'edit': inEditMode, 'component__element--locked': !element.attributes.orderable.urls.update_url }"
+      :data-e2e="`e2e-IF-${dataE2e}-stepText${element.id}`"
+      @keyup.enter="enableEditMode($event)"
+      tabindex="0">
       <Tinymce
         v-if="element.attributes.orderable.urls.update_url"
         :value="element.attributes.orderable.text"
@@ -48,8 +56,8 @@
         @editingDisabled="disableEditMode"
         @editingEnabled="enableEditMode"
       />
-      <div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="wrappedTables"></div>
-      <div v-else class="text-sn-grey">
+      <div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="wrappedTables" :data-e2e="`e2e-TX-${dataE2e}-stepText${element.id}`"></div>
+      <div v-else class="text-sn-grey" :data-e2e="`e2e-TX-${dataE2e}-stepText${element.id}-empty`">
         {{ i18n.t("protocols.steps.text.empty_text") }}
       </div>
     </div>
@@ -96,6 +104,10 @@ export default {
     assignableMyModuleId: {
       type: Number,
       required: false
+    },
+    dataE2e: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -126,25 +138,29 @@ export default {
       if (this.element.attributes.orderable.urls.update_url) {
         menu.push({
           text: I18n.t('general.edit'),
-          emit: 'edit'
+          emit: 'edit',
+          data_e2e: `e2e-BT-${this.dataE2e}-stepText${this.element.id}-options-edit`
         });
       }
       if (this.element.attributes.orderable.urls.duplicate_url) {
         menu.push({
           text: I18n.t('general.duplicate'),
-          emit: 'duplicate'
+          emit: 'duplicate',
+          data_e2e: `e2e-BT-${this.dataE2e}-stepText${this.element.id}-options-duplicate`
         });
       }
       if (this.element.attributes.orderable.urls.move_targets_url) {
         menu.push({
           text: I18n.t('general.move'),
-          emit: 'move'
+          emit: 'move',
+          data_e2e: `e2e-BT-${this.dataE2e}-stepText${this.element.id}-options-move`
         });
       }
       if (this.element.attributes.orderable.urls.delete_url) {
         menu.push({
           text: I18n.t('general.delete'),
-          emit: 'delete'
+          emit: 'delete',
+          data_e2e: `e2e-BT-${this.dataE2e}-stepText${this.element.id}-options-delete`
         });
       }
       return menu;
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index e084f8f80..52f9c8291 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@@ -12,6 +12,7 @@
           'border-b-sn-science-blue': !error,
         }"
         v-model="newValue"
+        :data-e2e="`e2e-IF-${dataE2e}`"
         @keydown="handleKeypress"
         @blur="handleBlur"
         @keyup.escape="cancelEdit && this.atWhoOpened"
@@ -27,6 +28,7 @@
         }"
         :placeholder="placeholder"
         v-model="newValue"
+        :data-e2e="`e2e-IF-${dataE2e}`"
         @keydown="handleKeypress"
         @blur="handleBlur"
         @keyup.escape="cancelEdit && this.atWhoOpened"
@@ -38,6 +40,7 @@
       ref="view"
       class="grid sci-cursor-edit leading-5 border-0 outline-none border-solid border-y border-transparent"
       :class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line py-1': !singleLine }"
+      :data-e2e="`e2e-TX-${dataE2e}`"
       @click="enableEdit($event)"
     >
       <span :class="{'truncate': singleLine }" :title="sa_value || placeholder" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
@@ -48,6 +51,7 @@
       class="mt-2 whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full"
       :title="editing && error ? error : timestamp"
       :class="{'text-sn-delete-red': editing && error}"
+      :data-e2e="`e2e-TX-${dataE2e}-timestampError`"
     >
       {{ editing && error ? error : timestamp }}
     </div>
@@ -76,7 +80,8 @@ export default {
     editOnload: { type: Boolean, default: false },
     defaultValue: { type: String, default: '' },
     singleLine: { type: Boolean, default: true },
-    preventLeavingUntilFilled: { type: Boolean, default: false }
+    preventLeavingUntilFilled: { type: Boolean, default: false },
+    dataE2e: { type: String, default: '' }
   },
   data() {
     return {
diff --git a/app/javascript/vue/shared/legacy/dropdown_selector.vue b/app/javascript/vue/shared/legacy/dropdown_selector.vue
index eae52b6c0..a8256ede8 100644
--- a/app/javascript/vue/shared/legacy/dropdown_selector.vue
+++ b/app/javascript/vue/shared/legacy/dropdown_selector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown-selector">
+  <div class="dropdown-selector" :data-e2e="`e2e-IF-${dataE2e}`">
     <select :id="this.selectorId"
             :data-select-by-group="groupSelector"
             :data-combine-tags="dataCombineTags"
@@ -111,6 +111,10 @@ export default {
       type: Boolean,
       default: false
     },
+    dataE2e: {
+      type: String,
+      default: ''
+    },
     onChange: Function
 
   },
@@ -127,6 +131,7 @@ export default {
       tagLabel: this.tagLabel,
       labelHTML: this.labelHTML,
       onOpen: this.onOpen,
+      dataE2e: this.dataE2e,
       onChange: () => {
         if (this.onChange) this.onChange();
         this.selectChanged(dropdownSelector.getValues(`#${this.selectorId}`));
diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue
index ca5cd3c60..79957b028 100644
--- a/app/javascript/vue/shared/menu_dropdown.vue
+++ b/app/javascript/vue/shared/menu_dropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative" v-if="listItems.length > 0 || alwaysShow" v-click-outside="closeMenu" >
-    <button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="e2eButton">
+    <button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="dataE2e">
       <i v-if="btnIcon" :class="btnIcon"></i>
       {{ btnText }}
       <i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i>
@@ -35,6 +35,7 @@
                 :class="{ 'bg-sn-super-light-blue': item.active }"
                 class="flex group items-center rounded relative text-sn-blue whitespace-nowrap px-3 py-2.5 hover:no-underline cursor-pointer
                       group-hover:bg-sn-super-light-blue hover:!bg-sn-super-light-grey"
+                :data-e2e="item.data_e2e"
               >
                 {{ item.text }}
                 <i class="sn-icon sn-icon-right ml-auto"></i>
@@ -50,6 +51,7 @@
                   :href="sub_item.url"
                   :traget="sub_item.url_target || '_self'"
                   :class="{ 'bg-sn-super-light-blue': item.active }"
+                  :data-e2e="`${sub_item.data_e2e}`"
                   class="block whitespace-nowrap rounded px-3 py-2.5 hover:!text-sn-blue hover:no-underline cursor-pointer hover:bg-sn-super-light-grey leading-5"
                   @click="handleClick($event, sub_item)"
                 >
@@ -80,7 +82,7 @@ export default {
     caret: { type: Boolean, default: false },
     alwaysShow: { type: Boolean, default: false },
     title: { type: String, default: '' },
-    e2eButton: { type: String, default: '' }
+    dataE2e: { type: String, default: '' }
   },
   data() {
     return {
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index 1dc4ff3a6..1c4f48527 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -117,6 +117,7 @@
           data-protocol-url="<%= protocol_my_module_path(@my_module) %>"
           data-date-format="<%= datetime_picker_format_date_only %>"
           data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
+          data-e2e="e2e-CO-task-protocol"
       >
         <protocol-container
           :protocol-url="protocolUrl"
diff --git a/app/views/protocols/show.html.erb b/app/views/protocols/show.html.erb
index d426cb8ba..88a092893 100644
--- a/app/views/protocols/show.html.erb
+++ b/app/views/protocols/show.html.erb
@@ -6,7 +6,7 @@
 <div class="content-pane protocols-show flexible with-grey-background pb-4" >
   <div class="content-header sticky-header">
     <div class="title-row">
-      <h1>
+      <h1 data-e2e="e2e-TX-protocolTemplates-protocol-title">
         <% if @inline_editable_title_config.present? %>
           <%= render partial: "shared/inline_editing",
                       locals: {
@@ -33,6 +33,7 @@
     data-protocol-url="<%= protocol_path(@protocol) %>"
     data-date-format="<%= datetime_picker_format_date_only %>"
     data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
+    data-e2e="e2e-CO-protocolTemplates-protocol"
   >
     <protocol-container
     :protocol-url="protocolUrl"