diff --git a/packages/components/accordion/src/accordion.ts b/packages/components/accordion/src/accordion.ts
index 8c14194e..bf71a2b1 100644
--- a/packages/components/accordion/src/accordion.ts
+++ b/packages/components/accordion/src/accordion.ts
@@ -27,6 +27,11 @@ export const accordionProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export const accordionEmits = ['click']
diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue
index bebae64a..c54e078f 100644
--- a/packages/components/accordion/src/accordion.vue
+++ b/packages/components/accordion/src/accordion.vue
@@ -11,6 +11,7 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
+      :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
       @click="onClick"
     >
       <puik-icon
@@ -18,10 +19,22 @@
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
+        :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
       ></puik-icon>
       <div class="puik-accordion__header__content">
-        <div class="puik-accordion__header__content__title">{{ title }}</div>
-        <div v-if="subTitle" class="puik-accordion__header__content__sub-title">
+        <div
+          class="puik-accordion__header__content__title"
+          :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="subTitle"
+          class="puik-accordion__header__content__sub-title"
+          :data-test="
+            dataTest != undefined ? `subTitle-${dataTest}` : undefined
+          "
+        >
           {{ subTitle }}
         </div>
       </div>
diff --git a/packages/components/accordion/stories/accordion.stories.ts b/packages/components/accordion/stories/accordion.stories.ts
index 9bd358e2..d9160e08 100644
--- a/packages/components/accordion/stories/accordion.stories.ts
+++ b/packages/components/accordion/stories/accordion.stories.ts
@@ -36,6 +36,11 @@ export default {
       control: 'none',
       description: 'Accordion content',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`',
+    },
   },
 } as Meta
 
diff --git a/packages/components/accordion/test/accordion.spec.ts b/packages/components/accordion/test/accordion.spec.ts
index 1605a99d..456b9aee 100644
--- a/packages/components/accordion/test/accordion.spec.ts
+++ b/packages/components/accordion/test/accordion.spec.ts
@@ -152,4 +152,29 @@ describe('Accordion tests', () => {
 
     expect(getAccordionIcon(wrapper).text()).toBe(icon)
   })
+
+  it('should have data-test attribute on button, title, sub-title, icon', () => {
+    const template = `
+      <puik-accordion-group>
+        <puik-accordion name="accordion-1" icon="home" title="title" sub-title="sub-title" data-test="accordion">
+          Content
+        </puik-accordion>
+      </puik-accordion-group>
+    `
+    factory(template)
+
+    const accordion = getAccordion(wrapper)
+    expect(getAccordionHeader(accordion).attributes('data-test')).toBe(
+      'button-accordion'
+    )
+    expect(getAccordionTitle(accordion).attributes('data-test')).toBe(
+      'title-accordion'
+    )
+    expect(getAccordionSubTitle(accordion).attributes('data-test')).toBe(
+      'subTitle-accordion'
+    )
+    expect(getAccordionIcon(accordion).attributes('data-test')).toBe(
+      'icon-accordion'
+    )
+  })
 })
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index ee3800f1..f179699e 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -47,6 +47,11 @@ export const alertProps = buildProps({
     required: false,
     default: 'polite',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type AlertProps = ExtractPropTypes<typeof alertProps>
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 5d9dc8a8..4992e0e4 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -11,10 +11,19 @@
       <div class="puik-alert__content">
         <PuikIcon :icon="icon" font-size="1.25rem" class="puik-alert__icon" />
         <div class="puik-alert__text">
-          <p v-if="title" class="puik-alert__title">{{ title }}</p>
+          <p
+            v-if="title"
+            class="puik-alert__title"
+            :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+          >
+            {{ title }}
+          </p>
           <span
             v-if="$slots.default || description"
             class="puik-alert__description"
+            :data-test="
+              dataTest != undefined ? `description-${dataTest}` : undefined
+            "
             ><slot>{{ description }}</slot></span
           >
         </div>
@@ -23,6 +32,7 @@
         v-if="buttonLabel"
         :variant="variant"
         class="puik-alert__button"
+        :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"
       >
         {{ buttonLabel }}
@@ -34,6 +44,7 @@
       icon="close"
       font-size="1.5rem"
       class="puik-alert__close"
+      :data-test="dataTest != undefined ? `close-${dataTest}` : undefined"
       @click="close"
     />
   </div>
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 3f3469f3..c405d565 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -47,6 +47,11 @@ export default {
       control: 'none',
       description: 'Set the alert description',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}`',
+    },
   },
   args: {
     title: 'Title',
diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts
index 05a5f5c7..d2bdcb6f 100644
--- a/packages/components/alert/test/alert.spec.ts
+++ b/packages/components/alert/test/alert.spec.ts
@@ -75,4 +75,18 @@ describe('Alert tests', () => {
     await findCloseButton().trigger('click')
     expect(wrapper.emitted('close')).toBeTruthy()
   })
+
+  it('should have a data-test attribute on title, description button and close button', () => {
+    factory({
+      title: faker.lorem.word(2),
+      description: faker.lorem.sentence(60),
+      buttonLabel: 'Button',
+      isClosable: true,
+      dataTest: 'alert',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-alert')
+    expect(findDesc().attributes('data-test')).toBe('description-alert')
+    expect(findButton().attributes('data-test')).toBe('button-alert')
+    expect(findCloseButton().attributes('data-test')).toBe('close-alert')
+  })
 })
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index 04927ec2..bc2790e2 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -17,6 +17,11 @@ export const badgeProps = buildProps({
     type: String as PropType<PuikBadgeVariant>,
     default: 'neutral',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 031efe10..692c7269 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="puik-badge" :class="[`puik-badge--${variant}`]">
+  <div
+    class="puik-badge"
+    :class="[`puik-badge--${variant}`]"
+    :data-test="dataTest"
+  >
     <slot></slot>
   </div>
 </template>
diff --git a/packages/components/badge/stories/badge.stories.ts b/packages/components/badge/stories/badge.stories.ts
index 5ec5d5c7..e77a28e4 100644
--- a/packages/components/badge/stories/badge.stories.ts
+++ b/packages/components/badge/stories/badge.stories.ts
@@ -25,6 +25,10 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the badge',
+    },
   },
   args: {
     default: 'Status',
diff --git a/packages/components/badge/test/badge.spec.ts b/packages/components/badge/test/badge.spec.ts
index 81eca07e..10e80c0f 100644
--- a/packages/components/badge/test/badge.spec.ts
+++ b/packages/components/badge/test/badge.spec.ts
@@ -47,4 +47,9 @@ describe('Badge tests', () => {
     )
     expect(findBadge().text()).toBe(slotDefault)
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findBadge().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts
index 02f9e895..94ad999f 100644
--- a/packages/components/breadcrumb/src/breadcrumb.ts
+++ b/packages/components/breadcrumb/src/breadcrumb.ts
@@ -3,11 +3,13 @@ import type { RouteLocationRaw } from 'vue-router'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Breadcrumb from './breadcrumb.vue'
 
+import type { PuikTargetString } from '../../link/src/link'
 export interface BreadcrumbItem {
   label: string
   to?: RouteLocationRaw
   href?: string
-  target?: string
+  target?: PuikTargetString
+  dataTest?: string
 }
 
 export const breadcrumbProps = buildProps({
diff --git a/packages/components/breadcrumb/src/breadcrumb.vue b/packages/components/breadcrumb/src/breadcrumb.vue
index f060fbd1..9aba01fd 100644
--- a/packages/components/breadcrumb/src/breadcrumb.vue
+++ b/packages/components/breadcrumb/src/breadcrumb.vue
@@ -17,6 +17,7 @@
         :to="item.to"
         :href="item.href"
         :target="item.target"
+        :data-test="item.dataTest ? item.dataTest : undefined"
         size="sm"
       >
         {{ item.label }}
@@ -29,7 +30,14 @@
       ></PuikIcon>
     </div>
 
-    <div class="puik-breadcrumb__item--last">
+    <div
+      class="puik-breadcrumb__item--last"
+      :data-test="
+        items[items.length - 1].dataTest
+          ? items[items.length - 1].dataTest
+          : undefined
+      "
+    >
       {{ items[items.length - 1].label }}
     </div>
   </nav>
diff --git a/packages/components/breadcrumb/stories/breadcrumb.stories.ts b/packages/components/breadcrumb/stories/breadcrumb.stories.ts
index 4b2459d6..9761907a 100644
--- a/packages/components/breadcrumb/stories/breadcrumb.stories.ts
+++ b/packages/components/breadcrumb/stories/breadcrumb.stories.ts
@@ -23,6 +23,7 @@ interface BreadBreadcrumbItem {
   to: string | undefined,
   href: string | undefined,
   target: '_blank' | '_self' | '_parent' | '_top' | undefined,
+  dataTest: string | undefined,
 }`,
         },
       },
diff --git a/packages/components/breadcrumb/test/breadcrumb.spec.ts b/packages/components/breadcrumb/test/breadcrumb.spec.ts
index c2f5bcb4..49c77870 100644
--- a/packages/components/breadcrumb/test/breadcrumb.spec.ts
+++ b/packages/components/breadcrumb/test/breadcrumb.spec.ts
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import PuikBreadcrumb from '../src/breadcrumb.vue'
-import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+import { PuikLinkTarget } from '../../link'
 import type { BreadcrumbItem } from '../src/breadcrumb'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Breadcrumb tests', () => {
   let wrapper: VueWrapper<any>
@@ -29,7 +30,8 @@ describe('Breadcrumb tests', () => {
     {
       label: 'First link',
       href: '#',
-      target: '_blank',
+      target: PuikLinkTarget.BLANK,
+      dataTest: 'test-1',
     },
     {
       label: 'Second link',
@@ -38,6 +40,7 @@ describe('Breadcrumb tests', () => {
     {
       label: 'Third link',
       to: 'name',
+      dataTest: 'test-3',
     },
     {
       label: 'Last link',
@@ -51,17 +54,27 @@ describe('Breadcrumb tests', () => {
     factory()
     expect(wrapper.element.tagName).toBeFalsy()
   })
-  it('should first item be A with href', () => {
+  it('should first item be A with href and data-test', () => {
     factory({ items })
     const localItems = getBreadcrumbItems()
     expect(localItems[0].element.tagName).toBe('A')
     expect(localItems[0].element.getAttribute('href')).toBe(items[0].href)
+    expect(
+      localItems[0].element
+        .getAttribute('data-test')
+        .includes(items[0].dataTest)
+    )
   })
-  it('should third item be ROUTER-LINK with to', () => {
+  it('should third item be ROUTER-LINK with to and data-test', () => {
     factory({ items })
     const localItems = getBreadcrumbItems()
     expect(localItems[2].element.tagName).toBe('ROUTER-LINK')
     expect(localItems[2].element.getAttribute('to')).toBe(items[2].to)
+    expect(
+      localItems[2].element
+        .getAttribute('data-test')
+        .includes(items[2].dataTest)
+    )
   })
   it('should display only three separator icon', () => {
     factory({ items })
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 73db5e85..a6885676 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -68,6 +68,11 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 9f70637a..5c095584 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,6 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
+    :data-test="dataTest"
     @click="setSelected"
   >
     <puik-icon
@@ -17,6 +18,7 @@
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
+      :data-test="dataTest != undefined ? `leftIcon-${dataTest}` : undefined"
     />
     <slot></slot>
     <puik-icon
@@ -24,6 +26,7 @@
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
+      :data-test="dataTest != undefined ? `rightIcon-${dataTest}` : undefined"
     />
   </component>
 </template>
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index 0406bdf0..a71e84a2 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -71,6 +71,11 @@ export default {
       control: 'text',
       description: 'Set a link for the button (changes button to "a" html tag)',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`',
+    },
   },
   args: {
     variant: 'primary',
diff --git a/packages/components/button/test/button.spec.ts b/packages/components/button/test/button.spec.ts
index b83a1858..a209f85c 100644
--- a/packages/components/button/test/button.spec.ts
+++ b/packages/components/button/test/button.spec.ts
@@ -100,4 +100,17 @@ describe('Button tests', () => {
     factory({ href: '/test' })
     expect(findButton().element.tagName).toBe('A')
   })
+
+  it('should have a data-test attribute on global component, left-icon and right-icon', () => {
+    factory({
+      leftIcon: 'close',
+      rightIcon: 'close',
+      dataTest: 'button',
+    })
+    expect(findButton().attributes('data-test')).toBe('button')
+    expect(findButtonLeftIcon().attributes('data-test')).toBe('leftIcon-button')
+    expect(findButtonRightIcon().attributes('data-test')).toBe(
+      'rightIcon-button'
+    )
+  })
 })
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index b443a474..b47f0491 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -22,6 +22,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index aecc9ea4..7f322ca1 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -8,11 +8,13 @@
       type="checkbox"
       :indeterminate="indeterminate"
       :disabled="disabled"
+      :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-checkbox__label"
+      :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/checkbox/stories/checkbox.stories.ts b/packages/components/checkbox/stories/checkbox.stories.ts
index c421eff8..fd725641 100644
--- a/packages/components/checkbox/stories/checkbox.stories.ts
+++ b/packages/components/checkbox/stories/checkbox.stories.ts
@@ -33,6 +33,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute for the label and the input `label-${dataTest}` `input-${dataTest}`}`',
+      control: 'text',
+    },
   },
   args: {
     label: 'Label',
diff --git a/packages/components/checkbox/test/checkbox.spec.ts b/packages/components/checkbox/test/checkbox.spec.ts
index 1cf8e87a..95bdfe05 100644
--- a/packages/components/checkbox/test/checkbox.spec.ts
+++ b/packages/components/checkbox/test/checkbox.spec.ts
@@ -93,4 +93,10 @@ describe('Checkbox tests', () => {
     await findLabel().trigger('click')
     expect(wrapper.vm.checkboxInputRef.click).not.toHaveBeenCalled()
   })
+
+  it('shouold have a data-test attribute on the input and the label', () => {
+    factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    expect(findInput().attributes('data-test')).toBe('input-test')
+    expect(findLabel().attributes('data-test')).toBe('label-test')
+  })
 })
diff --git a/packages/components/icon/src/icon.ts b/packages/components/icon/src/icon.ts
index 8ed7cc43..008b7611 100644
--- a/packages/components/icon/src/icon.ts
+++ b/packages/components/icon/src/icon.ts
@@ -7,6 +7,11 @@ export const iconProps = buildProps({
     type: String,
     required: true,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   nodeType: {
     type: String,
     default: 'div',
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index 22cd7bc0..6071cd73 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -1,5 +1,10 @@
 <template>
-  <component :is="nodeType" class="puik-icon" :style="style">
+  <component
+    :is="nodeType"
+    class="puik-icon"
+    :style="style"
+    :data-test="dataTest"
+  >
     {{ icon }}
   </component>
 </template>
diff --git a/packages/components/icon/stories/icon.stories.ts b/packages/components/icon/stories/icon.stories.ts
index a8b7e58c..4aaffbb6 100644
--- a/packages/components/icon/stories/icon.stories.ts
+++ b/packages/components/icon/stories/icon.stories.ts
@@ -31,6 +31,9 @@ export default {
         options: ['div', 'span'],
       },
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
 } as Meta
 
@@ -52,6 +55,7 @@ export const Default = {
     color: 'green',
     fontSize: 24,
     nodeType: 'span',
+    dataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/icon/test/icon.spec.ts b/packages/components/icon/test/icon.spec.ts
index 1a67a17e..2c872007 100644
--- a/packages/components/icon/test/icon.spec.ts
+++ b/packages/components/icon/test/icon.spec.ts
@@ -68,4 +68,9 @@ describe('Icon tests', () => {
 
     expect(findIcon().element.nodeName).toBe('SPAN')
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findIcon().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts
index c64f5338..a921ae82 100644
--- a/packages/components/input/src/input.ts
+++ b/packages/components/input/src/input.ts
@@ -90,6 +90,11 @@ export const inputProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type InputProps = ExtractPropTypes<typeof inputProps>
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index db774fbc..612603b6 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -17,6 +17,7 @@
         :min="type === 'number' ? min : undefined"
         :max="type === 'number' ? max : undefined"
         :step="type === 'number' ? step : undefined"
+        :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
         @focus="handleFocus"
         @blur="handleBlur"
       />
@@ -49,7 +50,10 @@
           class="puik-input__hint__error__icon"
           font-size="1.25rem"
         ></puik-icon>
-        <span class="puik-input__hint__error__text">
+        <span
+          class="puik-input__hint__error__text"
+          :data-test="dataTest != undefined ? `error-${dataTest}` : undefined"
+        >
           <slot name="error">{{ error }}</slot>
         </span>
       </div>
diff --git a/packages/components/input/stories/input.stories.ts b/packages/components/input/stories/input.stories.ts
index 5c2d25de..4fe82475 100644
--- a/packages/components/input/stories/input.stories.ts
+++ b/packages/components/input/stories/input.stories.ts
@@ -93,6 +93,11 @@ export default {
       control: 'none',
       description: 'Append an icon or text to the input',
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute on the input and error text elements `input-${dataTest}` `error-${dataTest}`',
+      control: 'text',
+    },
   },
 } as Meta
 
diff --git a/packages/components/input/test/input.spec.ts b/packages/components/input/test/input.spec.ts
index ea0070cf..d69f2dac 100644
--- a/packages/components/input/test/input.spec.ts
+++ b/packages/components/input/test/input.spec.ts
@@ -10,6 +10,7 @@ describe('Input tests', () => {
   const findWrapper = () => wrapper.find('.puik-input__wrapper')
   const findHint = () => wrapper.find('.puik-input__hint__text')
   const findError = () => wrapper.find('.puik-input__hint__error')
+  const findErrorMessage = () => wrapper.find('.puik-input__hint__error__text')
   const findIncrement = () => wrapper.find('.puik-input__controls__increment')
   const findDecrement = () => wrapper.find('.puik-input__controls__decrement')
   const findRevealPassword = () => wrapper.find('.puik-input__reveal-password')
@@ -183,4 +184,18 @@ describe('Input tests', () => {
     expect(findAppend().exists).toBeTruthy()
     expect(findAppend().text()).toBe('$')
   })
+
+  it('should have a data-tes attribut for the input and the error message', () => {
+    const error = 'This is an error message'
+    factory(
+      { modelValue: 'value', type: 'text', dataTest: 'test' },
+      {
+        slots: {
+          error,
+        },
+      }
+    )
+    expect(findField().attributes('data-test')).toBe('input-test')
+    expect(findErrorMessage().attributes('data-test')).toBe('error-test')
+  })
 })
diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts
index 67b23ee8..4e25ff2a 100644
--- a/packages/components/label/src/label.ts
+++ b/packages/components/label/src/label.ts
@@ -2,6 +2,11 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes } from 'vue'
 import type Label from './label.vue'
 export const labelProps = buildProps({
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   optional: {
     type: Boolean,
     required: false,
diff --git a/packages/components/label/src/label.vue b/packages/components/label/src/label.vue
index 69d5080b..a89c0d56 100644
--- a/packages/components/label/src/label.vue
+++ b/packages/components/label/src/label.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="puik-label" :for="props.for">
+  <label class="puik-label" :for="props.for" :data-test="dataTest">
     <slot></slot>
     <span v-if="required" class="puik-label--required">*</span>
     <span v-else-if="optional" class="puik-label--optional"
diff --git a/packages/components/label/stories/label.stories.ts b/packages/components/label/stories/label.stories.ts
index 59f8f91a..46815d0c 100644
--- a/packages/components/label/stories/label.stories.ts
+++ b/packages/components/label/stories/label.stories.ts
@@ -40,6 +40,9 @@ export default {
       control: 'text',
       description: 'Default slot to set label text',
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
 } as Meta
 
@@ -62,6 +65,7 @@ export const Default = {
     readonly: false,
     for: 'input',
     default: 'My Label',
+    dataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/label/test/label.spec.ts b/packages/components/label/test/label.spec.ts
index 9648e751..2ee952dc 100644
--- a/packages/components/label/test/label.spec.ts
+++ b/packages/components/label/test/label.spec.ts
@@ -76,4 +76,9 @@ describe('Label tests', () => {
     )
     expect(findLabelReadonly().exists()).toBeTruthy()
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findLabel().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
index b4d95ef8..a18417c3 100644
--- a/packages/components/link/src/link.ts
+++ b/packages/components/link/src/link.ts
@@ -54,6 +54,11 @@ export const linkProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type LinkProps = ExtractPropTypes<typeof linkProps>
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index f7019f34..6335004d 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -5,6 +5,7 @@
     :target="target"
     :title="title"
     :class="['puik-link', `puik-link--${size}`]"
+    :data-test="dataTest"
   >
     <slot></slot>
 
diff --git a/packages/components/link/stories/link.stories.ts b/packages/components/link/stories/link.stories.ts
index 4093cfe0..b60e12c2 100644
--- a/packages/components/link/stories/link.stories.ts
+++ b/packages/components/link/stories/link.stories.ts
@@ -53,6 +53,9 @@ export default {
       control: 'text',
       description: 'Title displayed in tooltips then your cursor stay in link',
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
   args: {
     href: '#',
@@ -61,6 +64,7 @@ export default {
     default: "I'm a cool link",
     title: "I'm a tooltip for your link",
     size: 'md',
+    dataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/link/test/link.spec.ts b/packages/components/link/test/link.spec.ts
index eeefe1bd..78d4b0ba 100644
--- a/packages/components/link/test/link.spec.ts
+++ b/packages/components/link/test/link.spec.ts
@@ -36,4 +36,9 @@ describe('Link tests', () => {
     factory({ href: '/test', size: 'sm' })
     expect(findLink().classes()).toContain('puik-link--sm')
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ href: '/test', 'data-test': 'test' })
+    expect(findLink().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/menu/src/menu-item-title.ts b/packages/components/menu/src/menu-item-title.ts
index 294b5c64..139d95d4 100644
--- a/packages/components/menu/src/menu-item-title.ts
+++ b/packages/components/menu/src/menu-item-title.ts
@@ -2,7 +2,13 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes } from 'vue'
 import type MenuItemTitle from './menu-item-title.vue'
 
-export const menuItemTitleProps = buildProps({} as const)
+export const menuItemTitleProps = buildProps({
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+} as const)
 
 export type MenuItemTitleProps = ExtractPropTypes<typeof menuItemTitleProps>
 
diff --git a/packages/components/menu/src/menu-item-title.vue b/packages/components/menu/src/menu-item-title.vue
index c4802797..8f44715f 100644
--- a/packages/components/menu/src/menu-item-title.vue
+++ b/packages/components/menu/src/menu-item-title.vue
@@ -1,5 +1,8 @@
 <template>
-  <h4 class="puik-menu-item-title">
+  <h4
+    class="puik-menu-item-title"
+    :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+  >
     <slot></slot>
   </h4>
 </template>
diff --git a/packages/components/menu/stories/menu-item-title.stories.ts b/packages/components/menu/stories/menu-item-title.stories.ts
new file mode 100644
index 00000000..c519c2f6
--- /dev/null
+++ b/packages/components/menu/stories/menu-item-title.stories.ts
@@ -0,0 +1,48 @@
+import PuikMenuItemTitle from '../src/menu-item-title.vue'
+import type { Meta, StoryFn, Args } from '@storybook/vue3'
+
+export default {
+  title: 'Components/Menu/MenuItemTitle',
+  component: PuikMenuItemTitle,
+  argTypes: {
+    default: {
+      control: 'text',
+      description: 'Default slot to set title text',
+    },
+    dataTest: {
+      description: 'Set the data-test attribute for title `title-${dataTest}`',
+      control: 'text',
+    },
+  },
+} as Meta
+
+const Template: StoryFn = (args: Args) => ({
+  components: {
+    PuikMenuItemTitle,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<puik-menu-item-title v-bind="args">{{ args.default }}</puik-menu-item-title>`,
+})
+
+export const Default = {
+  render: Template,
+  args: {
+    default: 'Menu Item Title',
+    titleDataTest: '',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<puik-menu-item-title>
+    Menu Item Title
+</puik-menu-item-title>
+            `,
+        language: 'html',
+      },
+    },
+  },
+}
diff --git a/packages/components/menu/stories/menu.stories.ts b/packages/components/menu/stories/menu.stories.ts
index 56f40a92..283dac5b 100644
--- a/packages/components/menu/stories/menu.stories.ts
+++ b/packages/components/menu/stories/menu.stories.ts
@@ -11,7 +11,7 @@ const menuAlignsJoined = menuAligns.join('|')
 const menuPositionsJoined = menuPositions.join('|')
 
 export default {
-  title: 'Components/Menu',
+  title: 'Components/Menu/Menu',
   component: PuikMenu,
   argTypes: {
     position: {
diff --git a/packages/components/menu/test/menu-item-title.spec.ts b/packages/components/menu/test/menu-item-title.spec.ts
new file mode 100644
index 00000000..d52cc942
--- /dev/null
+++ b/packages/components/menu/test/menu-item-title.spec.ts
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikMenuItemTitle from './../src/menu-item-title.vue'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+
+export function factoryMenu(
+  template: string,
+  options: MountingOptions<any> = {}
+) {
+  return mount({
+    components: {
+      PuikMenuItemTitle,
+    },
+    template,
+    ...options,
+  })
+}
+
+export const getTitle = (wrapper) => wrapper.find('.puik-menu-item-title')
+
+describe('Menu title tests', () => {
+  let wrapper: VueWrapper<any>
+
+  it('should be a vue instance and have a data-test attribut', () => {
+    wrapper = factoryMenu(`
+        <puik-menu-item-title data-test="test">
+          Title
+        </puik-menu-item-title>
+    `)
+    expect(wrapper).toBeTruthy()
+    expect(getTitle(wrapper).text()).toBe('Title')
+    expect(wrapper.attributes('data-test')).toBe('title-test')
+  })
+})
diff --git a/packages/components/modal/src/modal.ts b/packages/components/modal/src/modal.ts
index 8a0a8442..d17b5a0c 100644
--- a/packages/components/modal/src/modal.ts
+++ b/packages/components/modal/src/modal.ts
@@ -70,6 +70,11 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export const modalEmits = [
diff --git a/packages/components/modal/src/modal.vue b/packages/components/modal/src/modal.vue
index 7cfa5c50..cee405d3 100644
--- a/packages/components/modal/src/modal.vue
+++ b/packages/components/modal/src/modal.vue
@@ -22,7 +22,15 @@
             :is-disabled="!showTitleTooltip"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__title"
           >
-            <h2 ref="modalTitleElem" class="title">{{ title }}</h2>
+            <h2
+              ref="modalTitleElem"
+              class="title"
+              :data-test="
+                dataTest != undefined ? `title-${dataTest}` : undefined
+              "
+            >
+              {{ title }}
+            </h2>
             <template #description>{{ title }}</template>
           </puik-tooltip>
 
@@ -31,6 +39,9 @@
             :aria-label="t('puik.modal.closeButtonLabel')"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__close-button"
             variant="text"
+            :data-test="
+              dataTest != undefined ? `closeButton-${dataTest}` : undefined
+            "
             @click="sendCloseModalEvent()"
           >
             <puik-icon icon="close" :font-size="CLOSE_ICON_SIZE" />
@@ -47,6 +58,9 @@
             v-if="secondButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--second"
             :variant="secondButtonVariant"
+            :data-test="
+              dataTest != undefined ? `secondButton-${dataTest}` : undefined
+            "
             @click="$emit('button-second')"
           >
             {{ secondButtonText }}
@@ -56,6 +70,9 @@
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--main"
             :variant="mainButtonVariant"
             :disabled="isMainButtonDisabled"
+            :data-test="
+              dataTest != undefined ? `mainButton-${dataTest}` : undefined
+            "
             @click="$emit('button-main')"
           >
             {{ mainButtonText }}
@@ -67,6 +84,9 @@
             v-if="PuikModalVariant.DIALOG === variant && sideButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--side"
             variant="text"
+            :data-test="
+              dataTest != undefined ? `sideButton-${dataTest}` : undefined
+            "
             @click="$emit('button-side')"
           >
             {{ sideButtonText }}
diff --git a/packages/components/modal/stories/modal.stories.ts b/packages/components/modal/stories/modal.stories.ts
index daae8f34..93912477 100644
--- a/packages/components/modal/stories/modal.stories.ts
+++ b/packages/components/modal/stories/modal.stories.ts
@@ -175,6 +175,11 @@ export enum PuikModalSize {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute for modal `title-${dataTest}` `mainButton-${dataTest}` `secondButton-${dataTest}` `sideButton-${dataTest}` `closeButton-${dataTest}`',
+      control: 'text',
+    },
     default: {
       description: 'Modal content',
       control: 'none',
diff --git a/packages/components/modal/test/modal.spec.ts b/packages/components/modal/test/modal.spec.ts
index 115472cd..2f821073 100644
--- a/packages/components/modal/test/modal.spec.ts
+++ b/packages/components/modal/test/modal.spec.ts
@@ -45,8 +45,9 @@ describe('Modal tests', () => {
     wrapper.find('.puik-modal__dialogPanelContainer__dialogPanel__header')
 
   const homeTitleIcon = 'home'
+  const findTitle = () => wrapper.find('.title')
 
-  const factory = (
+  const factory = async (
     propsData: Record<string, any> = {},
     options: MountingOptions<any> = {}
   ) => {
@@ -231,4 +232,38 @@ describe('Modal tests', () => {
 
     expect(findHeader().exists()).toBeFalsy()
   })
+
+  it('should have a data-test attribute on title, mainButton, secondButton and closeButton', async () => {
+    await factory({
+      title: 'Awesome title',
+      mainButtonText: 'Awesome main',
+      secondButtonText: 'Awesome second',
+      isOpen: true,
+      hasCloseButton: true,
+      dataTest: 'test',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-test')
+    expect(findMainButton().attributes('data-test')).toBe('mainButton-test')
+    expect(findSecondaryButton().attributes('data-test')).toBe(
+      'secondButton-test'
+    )
+    expect(findCloseButton().attributes('data-test')).toBe('closeButton-test')
+  })
+  it('should have a data-test attribute on side button', async () => {
+    const sideButtonText = 'Awesome side button'
+
+    await factory({
+      title: 'Awesome title',
+      mainButtonText: 'Awesome main',
+      secondButtonText: 'Awesome second',
+      isOpen: true,
+      titleIcon: homeTitleIcon,
+      variant: PuikModalVariant.DIALOG,
+      sideButtonText,
+      dataTest: 'test',
+    })
+    expect(findSideButton().exists()).toBeTruthy()
+    expect(findSideButton().text()).toBe(sideButtonText)
+    expect(findSideButton().attributes('data-test')).toBe('sideButton-test')
+  })
 })
diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
index 536bc2c6..aa3e87f4 100644
--- a/packages/components/pagination/src/pagination-large.ts
+++ b/packages/components/pagination/src/pagination-large.ts
@@ -37,6 +37,11 @@ export const paginationLargeProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationLargeProps>
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
index 0c54ab20..b25b1042 100644
--- a/packages/components/pagination/src/pagination-large.vue
+++ b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,8 @@
 <template>
-  <span class="puik-pagination__label">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -10,6 +13,9 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="tertiary"
+      :data-test="
+        dataTest != undefined ? `previousButton-${dataTest}` : undefined
+      "
       @click="emit('update:page', page - 1)"
     >
       <span class="puik-pagination__previous-button-text">
@@ -45,6 +51,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="tertiary"
+      :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
       @click="emit('update:page', page + 1)"
     >
       <span class="puik-pagination__next-button-text">
diff --git a/packages/components/pagination/src/pagination-loader.ts b/packages/components/pagination/src/pagination-loader.ts
index 1820d3ab..b5f621a7 100644
--- a/packages/components/pagination/src/pagination-loader.ts
+++ b/packages/components/pagination/src/pagination-loader.ts
@@ -22,6 +22,11 @@ export const paginationLoaderProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationLoaderProps>
diff --git a/packages/components/pagination/src/pagination-loader.vue b/packages/components/pagination/src/pagination-loader.vue
index 1187103c..24d618f3 100644
--- a/packages/components/pagination/src/pagination-loader.vue
+++ b/packages/components/pagination/src/pagination-loader.vue
@@ -8,6 +8,9 @@
     variant="tertiary"
     class="puik-pagination__button puik-pagination__load-more-button"
     fluid
+    :data-test="
+      dataTest != undefined ? `loadMoreButton-${dataTest}` : undefined
+    "
     @click="$emit('update:modelValue', modelValue + 1)"
   >
     {{ currentButtonLabel }}
diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts
index 7a274ea7..e711f31b 100644
--- a/packages/components/pagination/src/pagination-medium.ts
+++ b/packages/components/pagination/src/pagination-medium.ts
@@ -31,6 +31,11 @@ export const paginationMediumProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationMediumProps>
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
index 00108558..01573dd5 100644
--- a/packages/components/pagination/src/pagination-medium.vue
+++ b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,8 @@
 <template>
-  <span class="puik-pagination__label">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -10,6 +13,9 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="secondary"
+      :data-test="
+        dataTest != undefined ? `previousButton-${dataTest}` : undefined
+      "
       @click="page -= 1"
     ></puik-button>
 
@@ -77,6 +83,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="secondary"
+      :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
       @click="page += 1"
     ></puik-button>
   </div>
diff --git a/packages/components/pagination/src/pagination-mobile.ts b/packages/components/pagination/src/pagination-mobile.ts
index a2c20c30..09041a14 100644
--- a/packages/components/pagination/src/pagination-mobile.ts
+++ b/packages/components/pagination/src/pagination-mobile.ts
@@ -22,6 +22,11 @@ export const paginationMobileProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationMobileProps>
diff --git a/packages/components/pagination/src/pagination-mobile.vue b/packages/components/pagination/src/pagination-mobile.vue
index 9c6d7fdd..677b36e4 100644
--- a/packages/components/pagination/src/pagination-mobile.vue
+++ b/packages/components/pagination/src/pagination-mobile.vue
@@ -5,10 +5,16 @@
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
+    :data-test="
+      dataTest != undefined ? `previousButton-${dataTest}` : undefined
+    "
     @click="emit('update:modelValue', modelValue - 1)"
   ></puik-button>
 
-  <span class="puik-pagination__label">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -18,6 +24,7 @@
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
+    :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
     @click="emit('update:modelValue', modelValue + 1)"
   ></puik-button>
 </template>
diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts
index c5878fb4..7deaf8a8 100644
--- a/packages/components/pagination/src/pagination-small.ts
+++ b/packages/components/pagination/src/pagination-small.ts
@@ -22,6 +22,11 @@ export const paginationSmallProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationSmallProps>
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
index 8430a3f4..09ae9cfb 100644
--- a/packages/components/pagination/src/pagination-small.vue
+++ b/packages/components/pagination/src/pagination-small.vue
@@ -1,11 +1,17 @@
 <template>
-  <span class="puik-pagination__label">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
   <puik-button
     :aria-label="t('puik.pagination.previous', { page: page - 1 })"
     :disabled="page <= 1 || disabled"
+    :data-test="
+      dataTest != undefined ? `previousButton-${dataTest}` : undefined
+    "
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
@@ -15,6 +21,7 @@
   <puik-button
     :aria-label="t('puik.pagination.next', { page: page + 1 })"
     :disabled="page >= maxPage || disabled"
+    :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index 612c00b9..528b57ef 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -61,6 +61,11 @@ export const paginationProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationProps>
diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
index da13ab09..668dc8e9 100644
--- a/packages/components/pagination/src/pagination.vue
+++ b/packages/components/pagination/src/pagination.vue
@@ -11,6 +11,7 @@
       :label="currentLabel"
       :loader-button-label="loaderButtonLabel"
       :disabled="loaderButtonDisabled"
+      :data-test="dataTest"
     />
 
     <div v-else class="puik-pagination__content">
@@ -18,12 +19,14 @@
         v-if="variant === PuikPaginationVariantEnum.small"
         v-model="currentPage"
         v-bind="commonPaginationProps"
+        :data-test="dataTest"
       />
 
       <pagination-mobile
         v-if="variant === PuikPaginationVariantEnum.mobile"
         v-model="currentPage"
         v-bind="commonPaginationProps"
+        :data-test="dataTest"
       />
 
       <pagination-medium
@@ -31,6 +34,7 @@
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :total-item="totalItem"
+        :data-test="dataTest"
       />
 
       <pagination-large
@@ -39,6 +43,7 @@
         :items-per-page="itemsPerPage"
         :total-item="totalItem"
         :items-per-page-options="itemsPerPageOptions"
+        :data-test="dataTest"
         v-bind="commonPaginationProps"
         @update:items-per-page="emit('update:itemsPerPage', $event)"
       />
diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts
index eb42c27a..3cc34016 100644
--- a/packages/components/pagination/stories/pagination.stories.ts
+++ b/packages/components/pagination/stories/pagination.stories.ts
@@ -102,6 +102,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute `nextButton-${dataTest}` `previousButton-${dataTest}` `label-${dataTest}` `loadMoreButton-${dataTest}` (only for loader variant)',
+    },
   },
   args: {
     variant: PuikPaginationVariantEnum.medium,
diff --git a/packages/components/pagination/test/pagination.spec.ts b/packages/components/pagination/test/pagination.spec.ts
index a8d36f4e..a3061f2a 100644
--- a/packages/components/pagination/test/pagination.spec.ts
+++ b/packages/components/pagination/test/pagination.spec.ts
@@ -296,4 +296,30 @@ describe('Pagination tests', () => {
     expect(options[1].text()).toBe('2')
     expect(options.length).toBe(2)
   })
+
+  it('should have a data-test attribute on nextButton, previousButton and label', () => {
+    factory({
+      ...propsData,
+      variant: PuikPaginationVariantEnum.large,
+      dataTest: 'test',
+    })
+
+    expect(findPreviousButton().attributes('data-test')).toBe(
+      'previousButton-test'
+    )
+    expect(findNextButton().attributes('data-test')).toBe('nextButton-test')
+    expect(findLabel().attributes('data-test')).toBe('label-test')
+  })
+
+  it('should have a data-test attribute on loaderButton', () => {
+    factory({
+      ...propsData,
+      variant: PuikPaginationVariantEnum.loader,
+      dataTest: 'test',
+    })
+
+    expect(findLoaderButton().attributes('data-test')).toBe(
+      'loadMoreButton-test'
+    )
+  })
 })
diff --git a/packages/components/progress-bar/src/progress-bar.ts b/packages/components/progress-bar/src/progress-bar.ts
index fe52d7f9..fb299e8d 100644
--- a/packages/components/progress-bar/src/progress-bar.ts
+++ b/packages/components/progress-bar/src/progress-bar.ts
@@ -11,6 +11,11 @@ export const progressBarProps = buildProps({
     type: String,
     default: '',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ProgressBarProps = ExtractPropTypes<typeof progressBarProps>
diff --git a/packages/components/progress-bar/src/progress-bar.vue b/packages/components/progress-bar/src/progress-bar.vue
index 72bb9a17..2737b6ba 100644
--- a/packages/components/progress-bar/src/progress-bar.vue
+++ b/packages/components/progress-bar/src/progress-bar.vue
@@ -3,6 +3,7 @@
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
+      :data-test="dataTest"
       class="progress-bar__content"
     />
   </div>
diff --git a/packages/components/progress-bar/stories/progress-bar.stories.ts b/packages/components/progress-bar/stories/progress-bar.stories.ts
index e8c9a0b9..d1d57ece 100644
--- a/packages/components/progress-bar/stories/progress-bar.stories.ts
+++ b/packages/components/progress-bar/stories/progress-bar.stories.ts
@@ -12,9 +12,15 @@ export default {
         max: 100,
       },
     },
+    dataTest: {
+      control: {
+        type: 'text',
+      },
+    },
   },
   args: {
     percentage: 50,
+    dataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/progress-bar/test/progress-bar.spec.ts b/packages/components/progress-bar/test/progress-bar.spec.ts
index b4195dca..f4d71b4b 100644
--- a/packages/components/progress-bar/test/progress-bar.spec.ts
+++ b/packages/components/progress-bar/test/progress-bar.spec.ts
@@ -30,4 +30,10 @@ describe('ProgressBar tests', () => {
       true
     )
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ ...defaultProps, dataTest: 'test' })
+    const progressBarContent = wrapper.find('.progress-bar__content')
+    expect(progressBarContent.attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.ts b/packages/components/progress-stepper/src/progress-stepper-step.ts
index 3223a81d..0ab8a271 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.ts
+++ b/packages/components/progress-stepper/src/progress-stepper-step.ts
@@ -7,6 +7,11 @@ export const progressStepperStepProps = buildProps({
     type: [String, Number],
     required: true,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ProgressStepperStepProps = ExtractPropTypes<
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.vue b/packages/components/progress-stepper/src/progress-stepper-step.vue
index 7b439ea1..09893641 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.vue
+++ b/packages/components/progress-stepper/src/progress-stepper-step.vue
@@ -9,16 +9,25 @@
       aria-live="polite"
       class="puik-progress-stepper-step__button"
       size="sm"
+      :data-test="dataTest != undefined ? `stepButton-${dataTest}` : undefined"
       @click="onClick"
     >
       <template v-if="!isCompleted">
         {{ step }}
       </template>
     </puik-button>
-    <span class="puik-progress-stepper-step__text">
+    <span
+      class="puik-progress-stepper-step__text"
+      :data-test="dataTest != undefined ? `text-${dataTest}` : undefined"
+    >
       <slot name="text"></slot>
     </span>
-    <span class="puik-progress-stepper-step__additional-text">
+    <span
+      class="puik-progress-stepper-step__additional-text"
+      :data-test="
+        dataTest != undefined ? `additionalText-${dataTest}` : undefined
+      "
+    >
       <slot name="additional-text"></slot>
     </span>
   </div>
diff --git a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
index d3fbca4a..d8eb92b4 100644
--- a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
+++ b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
@@ -23,6 +23,11 @@ export default {
       description: 'Additional text of the step',
       control: 'text',
     },
+    dataTest: {
+      description:
+        'Set the data-test of the progress stepper step `stepButton-${dataTest}` `text-${dataTest}` `additionalText-${dataTest}`',
+      control: 'text',
+    },
     click: {
       description: 'Event emitted on click step',
       control: 'none',
diff --git a/packages/components/progress-stepper/test/progress-stepper-step.spec.ts b/packages/components/progress-stepper/test/progress-stepper-step.spec.ts
new file mode 100644
index 00000000..d3fdc9ab
--- /dev/null
+++ b/packages/components/progress-stepper/test/progress-stepper-step.spec.ts
@@ -0,0 +1,46 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikProgressStepper from '../src/progress-stepper.vue'
+import PuikProgressStepperStep from '../src/progress-stepper-step.vue'
+import type { VueWrapper } from '@vue/test-utils'
+
+describe('ProgressStepperStep tests', () => {
+  let wrapper: VueWrapper<any>
+  const factory = () => {
+    wrapper = mount({
+      template: `
+      <puik-progress-stepper v-model="currentStep">
+        <puik-progress-stepper-step :step="1" data-test="test">
+          <template #text>Text step 1</template>
+          <template #additional-text>Additional text step 1</template>
+        </puik-progress-stepper-step>
+      </puik-progress-stepper>
+      `,
+      components: {
+        PuikProgressStepper,
+        PuikProgressStepperStep,
+      },
+      setup() {
+        const currentStep = ref(1)
+        return { currentStep }
+      },
+    })
+  }
+
+  const getStep = () => wrapper.findComponent(PuikProgressStepperStep)
+  const getButton = () => getStep().find('.puik-progress-stepper-step__button')
+  const getText = () => getStep().find('.puik-progress-stepper-step__text')
+  const getAdditionalText = () =>
+    getStep().find('.puik-progress-stepper-step__additional-text')
+
+  it('should have a step with data-test on button, text and additionnalText', () => {
+    factory()
+    const button = getButton()
+    const text = getText()
+    const additionalText = getAdditionalText()
+    expect(button.attributes('data-test')).toBe('stepButton-test')
+    expect(text.attributes('data-test')).toBe('text-test')
+    expect(additionalText.attributes('data-test')).toBe('additionalText-test')
+  })
+})
diff --git a/packages/components/radio/src/radio.ts b/packages/components/radio/src/radio.ts
index 5217e99c..c50fc0ce 100644
--- a/packages/components/radio/src/radio.ts
+++ b/packages/components/radio/src/radio.ts
@@ -28,6 +28,11 @@ export const radioProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type RadioProps = ExtractPropTypes<typeof radioProps>
diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index dba853d7..3eeafb3a 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -10,9 +10,15 @@
       class="puik-radio__input"
       type="radio"
       :name="name"
+      :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
       @focus="handleFocus"
     />
-    <label v-if="$slots.default || label" :for="id" class="puik-radio__label">
+    <label
+      v-if="$slots.default || label"
+      :for="id"
+      class="puik-radio__label"
+      :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+    >
       <slot>{{ label }}</slot>
     </label>
   </div>
diff --git a/packages/components/radio/stories/radio.stories.ts b/packages/components/radio/stories/radio.stories.ts
index c3650f33..2f03bd64 100644
--- a/packages/components/radio/stories/radio.stories.ts
+++ b/packages/components/radio/stories/radio.stories.ts
@@ -36,6 +36,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute of the input and the label `label-${dataTest}` `input-${dataTest}`',
+    },
   },
   args: {
     label: '',
diff --git a/packages/components/radio/test/radio.spec.ts b/packages/components/radio/test/radio.spec.ts
index 442e5f74..a72871a1 100644
--- a/packages/components/radio/test/radio.spec.ts
+++ b/packages/components/radio/test/radio.spec.ts
@@ -83,4 +83,12 @@ describe('Radio tests', () => {
     )
     expect(findLabel().text()).toContain('Custom label')
   })
+
+  it('should have a data-test attribute on label and input', () => {
+    factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    const label = findLabel()
+    const input = findInput()
+    expect(label.attributes('data-test')).toBe('label-test')
+    expect(input.attributes('data-test')).toBe('input-test')
+  })
 })
diff --git a/packages/components/select/src/option.ts b/packages/components/select/src/option.ts
index 6e1a2903..b49dba0e 100644
--- a/packages/components/select/src/option.ts
+++ b/packages/components/select/src/option.ts
@@ -23,6 +23,10 @@ export const optionProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+  },
 } as const)
 
 export type OptionProps = ExtractPropTypes<typeof optionProps>
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index b5171368..24d29cc4 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -12,6 +12,7 @@
         'puik-option--selected': selectedValue === value,
         'puik-option--disabled': disabled,
       }"
+      :data-test="dataTest"
     >
       <slot class="puik-option__label">{{ label }}</slot>
       <puik-icon
diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
index c632b7b7..80e44466 100644
--- a/packages/components/select/src/select.ts
+++ b/packages/components/select/src/select.ts
@@ -78,6 +78,11 @@ export const selectProps = buildProps({
     required: false,
     default: true,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 3f8f2149..750eced0 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -22,6 +22,7 @@
           tabindex="-1"
           :readonly="open"
           type="text"
+          :data-test="dataTest != undefined ? `select-${dataTest}` : undefined"
           @input="
             handleAutoComplete(($event.target as HTMLInputElement)?.value)
           "
@@ -53,6 +54,9 @@
             v-model="query"
             class="puik-select__search"
             :placeholder="t('puik.select.searchPlaceholder')"
+            :data-test="
+              dataTest != undefined ? `searchInput-${dataTest}` : undefined
+            "
           >
             <template #prepend
               ><puik-icon
@@ -69,6 +73,9 @@
                 : !filteredItems?.length)
             "
             class="puik-select__no-results"
+            :data-test="
+              dataTest != undefined ? `noResults-${dataTest}` : undefined
+            "
           >
             {{ noMatchText || `${t('puik.select.noResults')} ${query}` }}
           </p>
@@ -76,10 +83,15 @@
             <slot :options="filteredItems">
               <template v-if="options">
                 <puik-option
-                  v-for="option in filteredItems"
+                  v-for="(option, index) in filteredItems"
                   :key="option"
                   :label="option[labelKey]"
                   :value="isObject(option) ? option[valueKey] : option"
+                  :data-test="
+                    dataTest != undefined
+                      ? `option-${dataTest}-${index + 1}`
+                      : undefined
+                  "
                 />
               </template>
             </slot>
diff --git a/packages/components/select/stories/select.stories.ts b/packages/components/select/stories/select.stories.ts
index a34b96aa..c38c6d1d 100644
--- a/packages/components/select/stories/select.stories.ts
+++ b/packages/components/select/stories/select.stories.ts
@@ -109,6 +109,14 @@ export default {
         category: 'Common',
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute `searchInput-${dataTest}` `noResults-${dataTest}` `select-${dataTest}` `option-${dataTest}-${index + 1}`',
+      table: {
+        category: 'Common',
+      },
+    },
   },
   args: {
     labelKey: '',
diff --git a/packages/components/select/test/select.spec.ts b/packages/components/select/test/select.spec.ts
index 40d81163..e02ac8b0 100644
--- a/packages/components/select/test/select.spec.ts
+++ b/packages/components/select/test/select.spec.ts
@@ -61,7 +61,7 @@ describe('Select tests', () => {
   })
 
   it('should display a placeholder', () => {
-    const placeholder = faker.random.word()
+    const placeholder = faker.lorem.sentence(1)
     factory(
       `<puik-select v-model="value" :placeholder="placeholder">
         <puik-option value="test" label="test" />
@@ -74,7 +74,7 @@ describe('Select tests', () => {
     expect(findSelected().attributes('placeholder')).toBe(placeholder)
   })
 
-  it('should be in an error state', () => {
+  it('should be in an error state with', () => {
     const error = faker.lorem.sentence()
     factory(
       `<puik-select v-model="value" :error="error">
@@ -337,4 +337,42 @@ describe('Select tests', () => {
     await findAllOptions().at(0)?.trigger('click')
     expect(findSelected().element.value).toBe('Custom Label')
   })
+
+  it('should have a data-test attribute on select, searchInput noResults and options', async () => {
+    const items = [
+      {
+        label: 'Test',
+        value: 'test',
+      },
+      {
+        label: 'Test2',
+        value: 'test2',
+      },
+      {
+        label: 'Test3',
+        value: 'test3',
+      },
+    ]
+    const query = 'Test4'
+    factory(
+      `<puik-select v-slot="{ options }"  v-model="value" :options="items" data-test="test" noMatchText="No results">
+        <puik-option v-for="(option, index) in options" :value="option" :label="option.label" :data-test="'option-test-' + (index + 1)"/>
+      </puik-select>`,
+      () => ({
+        items,
+        value: {},
+      })
+    )
+
+    const select = wrapper.find('.puik-select__selected')
+    expect(select.attributes('data-test')).toBe('select-test')
+    await findSelect().trigger('click')
+    const field = wrapper.find('.puik-input__field')
+    expect(field.attributes('data-test')).toBe('input-searchInput-test')
+    const option = wrapper.findAll('.puik-option')
+    expect(option[2].attributes('data-test')).toBe('option-test-3')
+    await findInputComponent().setValue(query)
+    const noResults = wrapper.find('.puik-select__no-results')
+    expect(noResults.attributes('data-test')).toBe('noResults-test')
+  })
 })
diff --git a/packages/components/sidebar/src/sidebar-group-item.ts b/packages/components/sidebar/src/sidebar-group-item.ts
index dc7dc984..c1cfb797 100644
--- a/packages/components/sidebar/src/sidebar-group-item.ts
+++ b/packages/components/sidebar/src/sidebar-group-item.ts
@@ -21,6 +21,11 @@ export const sidebarGroupItemProps = buildProps({
     default: false,
     required: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarGroupItemProps = ExtractPropTypes<
diff --git a/packages/components/sidebar/src/sidebar-group-item.vue b/packages/components/sidebar/src/sidebar-group-item.vue
index 5697b649..e0e7e24c 100644
--- a/packages/components/sidebar/src/sidebar-group-item.vue
+++ b/packages/components/sidebar/src/sidebar-group-item.vue
@@ -11,6 +11,9 @@
       :name="accordionName"
       :icon="icon"
       class="puik-sidebar-group-item__accordion"
+      :data-test="
+        dataTest != undefined ? `sidebarAccordion-${dataTest}` : undefined
+      "
     >
       <slot></slot>
     </puik-accordion>
@@ -20,6 +23,9 @@
           variant="text"
           fluid
           class="puik-sidebar-group-item__collapsed-button"
+          :data-test="
+            dataTest != undefined ? `sidebarMenuButton-${dataTest}` : undefined
+          "
         >
           <puik-icon :icon="icon" font-size="1.25rem"></puik-icon>
         </puik-button>
diff --git a/packages/components/sidebar/src/sidebar-item.ts b/packages/components/sidebar/src/sidebar-item.ts
index b4b6a3df..1bfdd318 100644
--- a/packages/components/sidebar/src/sidebar-item.ts
+++ b/packages/components/sidebar/src/sidebar-item.ts
@@ -28,6 +28,11 @@ export const sidebarItemProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>
diff --git a/packages/components/sidebar/src/sidebar-item.vue b/packages/components/sidebar/src/sidebar-item.vue
index 6154de2c..6d9705b5 100644
--- a/packages/components/sidebar/src/sidebar-item.vue
+++ b/packages/components/sidebar/src/sidebar-item.vue
@@ -13,6 +13,9 @@
       fluid
       variant="text"
       class="puik-sidebar-item__button"
+      :data-test="
+        dataTest != undefined ? `menubuttonTitle-${dataTest}` : undefined
+      "
     >
       {{ title }}
     </puik-button>
@@ -27,8 +30,13 @@
     :href="href"
     fluid
     variant="text"
+    :data-test="dataTest != undefined ? `buttonTitle-${dataTest}` : undefined"
   >
-    <span v-if="isExpanded">{{ title }}</span>
+    <span
+      v-if="isExpanded"
+      :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+      >{{ title }}</span
+    >
   </puik-button>
 </template>
 
diff --git a/packages/components/sidebar/src/sidebar-title.ts b/packages/components/sidebar/src/sidebar-title.ts
index 150192a3..3e8f42ab 100644
--- a/packages/components/sidebar/src/sidebar-title.ts
+++ b/packages/components/sidebar/src/sidebar-title.ts
@@ -8,6 +8,11 @@ export const sidebarTitleProps = buildProps({
     required: false,
     default: 'h3',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarTitleProps = ExtractPropTypes<typeof sidebarTitleProps>
diff --git a/packages/components/sidebar/src/sidebar-title.vue b/packages/components/sidebar/src/sidebar-title.vue
index cd87820d..baed4111 100644
--- a/packages/components/sidebar/src/sidebar-title.vue
+++ b/packages/components/sidebar/src/sidebar-title.vue
@@ -1,5 +1,10 @@
 <template>
-  <component :is="tag" v-if="isExpanded" class="puik-sidebar-title">
+  <component
+    :is="tag"
+    v-if="isExpanded"
+    class="puik-sidebar-title"
+    :data-test="dataTest != undefined ? `sidebarTitle-${dataTest}` : undefined"
+  >
     <slot></slot>
   </component>
 </template>
diff --git a/packages/components/sidebar/stories/sidebar-group-item.stories.ts b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
index 65e9c308..e3ab8fe6 100644
--- a/packages/components/sidebar/stories/sidebar-group-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
@@ -52,6 +52,11 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute on the sidebar group item `sidebarAccordion-${dataTest}` `sidebarMenuButton-${dataTest}` ',
+    },
   },
   args: {
     title: 'title',
diff --git a/packages/components/sidebar/stories/sidebar-item.stories.ts b/packages/components/sidebar/stories/sidebar-item.stories.ts
index 4010960c..41572548 100644
--- a/packages/components/sidebar/stories/sidebar-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-item.stories.ts
@@ -67,6 +67,11 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute on the item `menubuttonTitle-${dataTest}` `buttonTitle-${dataTest}` `title-${dataTest}`',
+    },
   },
   args: {
     title: 'title',
diff --git a/packages/components/sidebar/stories/sidebar-title.stories.ts b/packages/components/sidebar/stories/sidebar-title.stories.ts
index b0cd3c3b..ebcf35e8 100644
--- a/packages/components/sidebar/stories/sidebar-title.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-title.stories.ts
@@ -30,6 +30,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute on the sidebar title `sidebarTitle-${dataTest}`',
+    },
   },
   args: {
     tag: 'h3',
diff --git a/packages/components/spinner-loader/src/spinner-loader.ts b/packages/components/spinner-loader/src/spinner-loader.ts
index 93a171cb..d2ea4486 100644
--- a/packages/components/spinner-loader/src/spinner-loader.ts
+++ b/packages/components/spinner-loader/src/spinner-loader.ts
@@ -33,6 +33,11 @@ export const spinnerLoaderProps = buildProps({
     required: false,
     default: 'bottom',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: 'spinner-loader',
+  },
 } as const)
 
 export type SpinnerLoaderProps = ExtractPropTypes<typeof spinnerLoaderProps>
diff --git a/packages/components/spinner-loader/src/spinner-loader.vue b/packages/components/spinner-loader/src/spinner-loader.vue
index 332d8cf5..89b649d3 100644
--- a/packages/components/spinner-loader/src/spinner-loader.vue
+++ b/packages/components/spinner-loader/src/spinner-loader.vue
@@ -8,6 +8,7 @@
     ]"
     aria-live="polite"
     role="status"
+    :data-test="dataTest"
   >
     <div
       class="puik-spinner-loader__spinner"
diff --git a/packages/components/spinner-loader/stories/spinner-loader.stories.ts b/packages/components/spinner-loader/stories/spinner-loader.stories.ts
index 81f838b1..2578ff76 100644
--- a/packages/components/spinner-loader/stories/spinner-loader.stories.ts
+++ b/packages/components/spinner-loader/stories/spinner-loader.stories.ts
@@ -62,6 +62,10 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the spinner loader',
+    },
   },
   args: {
     size: 'md',
diff --git a/packages/components/spinner-loader/test/spinner-loader.spec.ts b/packages/components/spinner-loader/test/spinner-loader.spec.ts
index c3355508..583c67fd 100644
--- a/packages/components/spinner-loader/test/spinner-loader.spec.ts
+++ b/packages/components/spinner-loader/test/spinner-loader.spec.ts
@@ -63,4 +63,9 @@ describe('SpinnerLoader tests', () => {
     expect(findLabel().exists()).toBeTruthy()
     expect(findLabel().text()).toBe(label)
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findComponent().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index f0b1ec83..e5eaf77a 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -52,6 +52,11 @@ export const tagProps = buildProps({
     Required: false,
     default: 'bottom',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type TagProps = ExtractPropTypes<typeof tagProps>
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 21f7bc8e..dec7e99f 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -7,11 +7,15 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div class="puik-tag__content">
+    <div
+      class="puik-tag__content"
+      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+    >
       <puik-tooltip
         v-if="content?.length >= 30"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
+        :data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
       >
         <template #description>{{ content }}</template>
         {{ content }}
diff --git a/packages/components/tag/stories/tag.stories.ts b/packages/components/tag/stories/tag.stories.ts
index cc3d6251..b5c25d4d 100644
--- a/packages/components/tag/stories/tag.stories.ts
+++ b/packages/components/tag/stories/tag.stories.ts
@@ -103,6 +103,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute `content-${dataTest}` `tooltip-${dataTest}`',
+      control: 'text',
+    },
   },
   args: {
     id: 'puik-tag-id',
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
index bd3bd926..5139e57c 100644
--- a/packages/components/tag/test/tag.spec.ts
+++ b/packages/components/tag/test/tag.spec.ts
@@ -55,4 +55,12 @@ describe('Tag tests', () => {
     factory({ disabled: true })
     expect(findTag().classes()).toContain('puik-tag--disabled')
   })
+
+  it('should have a data-test attribute for the content', () => {
+    factory({
+      content: 'long content for displaying the tooltip',
+      'data-test': 'test',
+    })
+    expect(findTagContent().attributes('data-test')).toBe('content-test')
+  })
 })
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index ec2a5c35..ab99d67c 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -40,6 +40,11 @@ export const tooltipProps = buildProps({
     required: false,
     default: 500,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: 'tooltip',
+  },
 } as const)
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 3ca9b32a..d50fa1c9 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -6,7 +6,11 @@
     @mouseover="updateTooltip"
     @mouseleave="start"
   >
-    <div ref="tooltipWrapper" class="puik-tooltip__wrapper">
+    <div
+      ref="tooltipWrapper"
+      class="puik-tooltip__wrapper"
+      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+    >
       <slot></slot>
     </div>
     <Transition
@@ -25,11 +29,15 @@
           <span
             v-if="$slots.title || title"
             class="puik-tooltip__tip__content__title"
+            :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
             ><slot name="title">{{ title }}</slot></span
           >
           <span
             v-if="$slots.description || description"
             class="puik-tooltip__tip__content__description"
+            :data-test="
+              dataTest != undefined ? `description-${dataTest}` : undefined
+            "
             ><slot name="description">{{ description }}</slot></span
           >
         </div>
diff --git a/packages/components/tooltip/stories/tooltip.stories.ts b/packages/components/tooltip/stories/tooltip.stories.ts
index a1f07c17..8a528e64 100644
--- a/packages/components/tooltip/stories/tooltip.stories.ts
+++ b/packages/components/tooltip/stories/tooltip.stories.ts
@@ -75,6 +75,16 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute on the tooltip `content-${dataTest}` `title-${dataTest}` `description-${dataTest}`',
+      table: {
+        defaultValue: {
+          summary: undefined,
+        },
+      },
+    },
   },
   args: {
     title: 'Title',
diff --git a/packages/components/tooltip/test/tooltip.spec.ts b/packages/components/tooltip/test/tooltip.spec.ts
index 72b35035..7594feda 100644
--- a/packages/components/tooltip/test/tooltip.spec.ts
+++ b/packages/components/tooltip/test/tooltip.spec.ts
@@ -9,6 +9,7 @@ describe('Tooltip tests', () => {
   const findDescription = () =>
     wrapper.find('.puik-tooltip__tip__content__description')
   const findToolTip = () => wrapper.find('.puik-tooltip__tip')
+  const findWrapper = () => wrapper.find('.puik-tooltip__wrapper')
 
   const factory = (
     propsData: Record<string, any> = {},
@@ -73,4 +74,15 @@ describe('Tooltip tests', () => {
       '200px'
     )
   })
+
+  it('should have a data-test attribute for the content, the title and the description', () => {
+    factory({
+      title: 'long title for displaying the tooltip',
+      description: 'long description for displaying the tooltip',
+      'data-test': 'test',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-test')
+    expect(findDescription().attributes('data-test')).toBe('description-test')
+    expect(findWrapper().attributes('data-test')).toBe('content-test')
+  })
 })