diff --git a/app/javascript/vue/navigation/notifications/notification_item.vue b/app/javascript/vue/navigation/notifications/notification_item.vue
index 15aea8d55..d3ac06688 100644
--- a/app/javascript/vue/navigation/notifications/notification_item.vue
+++ b/app/javascript/vue/navigation/notifications/notification_item.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="sci-navigation--notificaitons-flyout-notification hover:bg-sn-super-light-grey !px-2 !-mx-2">
+  <div class="sci-navigation--notificaitons-flyout-notification hover:bg-sn-super-light-grey !px-2 !-mx-2" :data-e2e="`e2e-CO-${dataE2e}-${notification.id}`">
     <div class="flex item-center">
       <a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black grow">
-        <div class="sci-navigation--notificaitons-flyout-notification-date">
+        <div class="sci-navigation--notificaitons-flyout-notification-date" :data-e2e="`e2e-TX-${dataE2e}-${notification.id}-timestamp`">
           {{ notification.attributes.created_at }}
         </div>
       </a>
-      <div class="ml-auto cursor-pointer" @click="toggleRead()">
+      <div class="ml-auto cursor-pointer" @click="toggleRead()" :data-e2e="`e2e-IC-${dataE2e}-${notification.id}-status`">
         <div v-if="!notification.attributes.checked" class="w-2.5 h-2.5 bg-sn-coral rounded-full cursor-pointer"></div>
         <div v-else class="w-2.5 h-2.5 border-2 border-sn-grey rounded-full border-solid cursor-pointer hover:border-sn-coral"></div>
       </div>
@@ -14,10 +14,16 @@
     <a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black">
       <div class="sci-navigation--notificaitons-flyout-notification-title"
           v-html="notification.attributes.title"
-          :data-seen="notification.attributes.checked"></div>
-      <div v-html="notification.attributes.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
+          :data-seen="notification.attributes.checked"
+          :data-e2e="`e2e-TX-${dataE2e}-${notification.id}-title`"
+      ></div>
+      <div
+        v-html="notification.attributes.message"
+        class="sci-navigation--notificaitons-flyout-notification-message"
+        :data-e2e="`e2e-TX-${dataE2e}-${notification.id}-message`"
+      ></div>
     </a>
-    <div v-if="notification.attributes.breadcrumbs" class="flex items-center flex-wrap gap-0.5">
+    <div v-if="notification.attributes.breadcrumbs" class="flex items-center flex-wrap gap-0.5" :data-e2e="`e2e-BC-${dataE2e}-${notification.id}-breadcrumbs`">
       <Breadcrumbs :breadcrumbs="notification.attributes.breadcrumbs" />
     </div>
   </div>
@@ -30,7 +36,8 @@ import Breadcrumbs from '../../shared/breadcrumbs.vue';
 export default {
   name: 'NotificationItem',
   props: {
-    notification: Object
+    notification: Object,
+    dataE2e: { type: String, default: '' }
   },
   components: {
     Breadcrumbs
diff --git a/app/javascript/vue/navigation/notifications/notifications_flyout.vue b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
index 880aa6133..20b20b753 100644
--- a/app/javascript/vue/navigation/notifications/notifications_flyout.vue
+++ b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="sci--navigation--notificaitons-flyout">
-    <div class="sci--navigation--notificaitons-flyout-title">
+  <div class="sci--navigation--notificaitons-flyout" data-e2e="e2e-CO-notifications-flyout">
+    <div class="sci--navigation--notificaitons-flyout-title" data-e2e="e2e-TX-notifications-title">
       {{ i18n.t('nav.notifications.title') }}
-      <a class="ml-auto cursor-pointer text-sm font-normal" :href="this.preferencesUrl" :title="i18n.t('nav.settings')">
+      <a
+        class="ml-auto cursor-pointer text-sm font-normal"
+        :href="this.preferencesUrl"
+        :title="i18n.t('nav.settings')"
+        data-e2e="e2e-BT-notifications-settings"
+      >
         {{ i18n.t('nav.settings') }}
       </a>
     </div>
@@ -11,6 +16,7 @@
         @click="changeTab('all')"
         class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
         :class="{'!text-sn-black border-sn-blue': activeTab === 'all'}"
+        data-e2e="e2e-BT-notifications-all-tab"
       >
         {{ i18n.t('nav.notifications.all') }}
       </div>
@@ -18,6 +24,7 @@
         @click="changeTab('unread')"
         class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
         :class="{'!text-sn-black border-sn-blue': activeTab === 'unread'}"
+        data-e2e="e2e-BT-notifications-unread-tab"
       >
         {{ i18n.t('nav.notifications.unread') }}
       </div>
@@ -25,29 +32,32 @@
         @click="changeTab('read')"
         class="px-4 py-2 text-sn-grey cursor-pointer border-solid border-0 border-b-4 border-transparent"
         :class="{'!text-sn-black  border-sn-blue': activeTab === 'read'}"
+        data-e2e="e2e-BT-notifications-read-tab"
       >
       {{ i18n.t('nav.notifications.read') }}
       </div>
-      <div v-if="activeTab !== 'read'" class="py-2 ml-auto cursor-pointer" @click="markAllNotificationsAsRead">
+      <div v-if="activeTab !== 'read'" class="py-2 ml-auto cursor-pointer" @click="markAllNotificationsAsRead" data-e2e="e2e-BT-notifications-readAll">
         {{ i18n.t('nav.notifications.read_all') }}
       </div>
     </div>
     <hr class="!mt-0.5">
     <perfect-scrollbar @wheel="preventPropagation" ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
-      <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length">
+      <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length" data-e2e="e2e-TX-notifications-today-subtitle">
         {{ i18n.t('nav.notifications.today') }}
       </div>
       <NotificationItem v-for="notification in todayNotifications" :key="notification.type_of + '-' + notification.id"
         @updateNotification="updateNotification"
         @close="$emit('close')"
-        :notification="notification" />
-      <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="olderNotifications.length">
+        :notification="notification"
+        :dataE2e="'notifications-today'"/>
+      <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="olderNotifications.length" data-e2e="e2e-TX-notifications-older-subtitle">
         {{ i18n.t('nav.notifications.older') }}
       </div>
       <NotificationItem v-for="notification in olderNotifications" :key="notification.type_of + '-' + notification.id"
         @updateNotification="updateNotification"
         @close="$emit('close')"
-        :notification="notification" />
+        :notification="notification"
+        :dataE2e="'notifications-older'"/>
       <div class="next-page-loader">
         <img src="/images/medium/loading.svg" v-if="loadingPage" />
       </div>