diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 1c2c0157..dad23d11 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -26,6 +26,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
     <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        for="input-branchCode"
+        id="input-branchCode"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
         :outlined="!readonly"
@@ -38,6 +40,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
       />
 
       <q-input
+        for="input-customerName"
+        id="input-customerName"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
         :outlined="!readonly"
@@ -51,6 +55,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
 
       <div class="row q-col-gutter-md">
         <q-input
+          for="input-branchCode"
+          id="input-branchCode"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           :outlined="!readonly"
@@ -62,6 +68,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
           v-model="branchCode"
         />
         <q-input
+          for="input-legalEntityCode"
+          id="input-legalEntityCode"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           :outlined="!readonly"
@@ -74,6 +82,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         />
 
         <q-input
+          for="input-customerEnglishName"
+          id="input-customerEnglishName"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           :outlined="!readonly"
@@ -86,6 +96,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         />
 
         <q-input
+          for="input-customerName"
+          id="input-customerName"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           :outlined="!readonly"
@@ -99,6 +111,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
       </div>
 
       <q-input
+        for="input-taxNo"
+        id="input-taxNo"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         :outlined="!readonly"
@@ -110,6 +124,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         v-model="taxNo"
       />
       <q-input
+        for="input-registerName"
+        id="input-registerName"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         :outlined="!readonly"
@@ -121,6 +137,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         v-model="registerName"
       />
       <q-input
+        for="input-authorizedCapital"
+        id="input-authorizedCapital"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         :outlined="!readonly"
@@ -132,6 +150,7 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         v-model="authorizedCapital"
       />
       <VueDatePicker
+        id="date-picker-date"
         v-if="typeCustomer === 'CORP'"
         :teleport="true"
         utc
@@ -150,6 +169,7 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
         </template>
         <template #trigger>
           <q-input
+            for="input-start-date"
             id="input-start-date"
             :label="$t('registerDate')"
             :dense="dense"
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 205641d5..0cc87bd8 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -45,6 +45,8 @@ onMounted(async () => {});
   </div>
   <div v-if="!employee" class="col-9 row q-col-gutter-md">
     <q-input
+      for="input-employer-id"
+      id="input-employer-id"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
       :outlined="!readonly"
@@ -56,6 +58,8 @@ onMounted(async () => {});
       v-model="employerID"
     />
     <q-input
+      for="input-tax-no"
+      id="input-tax-no"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
       :outlined="!readonly"
@@ -68,6 +72,8 @@ onMounted(async () => {});
     />
 
     <q-input
+      for="input-customer-name"
+      id="input-customer-name"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -78,6 +84,8 @@ onMounted(async () => {});
       v-model="customerName"
     />
     <q-input
+      for="input-customer-name-en"
+      id="input-customer-name-en"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
index 894cd157..e40de596 100644
--- a/src/components/03_customer-management/ContactInformation.vue
+++ b/src/components/03_customer-management/ContactInformation.vue
@@ -16,6 +16,8 @@ const telephone = defineModel<string>('telephone');
     <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleContact`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        for="input-mail"
+        id="input-mail"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -26,6 +28,8 @@ const telephone = defineModel<string>('telephone');
         v-model="mail"
       />
       <q-input
+        for="input-telephone"
+        id="input-telephone"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 2d1ae5d4..9d46ffec 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -61,6 +61,8 @@ defineProps<{
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        for="input-employment-office"
+        id="input-employment-office"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -72,6 +74,7 @@ defineProps<{
       />
 
       <q-select
+        id="select-business-type"
         emit-value
         option-value="label"
         option-label="label"
@@ -87,6 +90,8 @@ defineProps<{
       />
 
       <q-input
+        for="input-bussiness-type-en"
+        id="input-bussiness-type-en"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -98,6 +103,7 @@ defineProps<{
       />
 
       <q-select
+        id="select-job-position"
         emit-value
         option-value="label"
         option-label="label"
@@ -113,6 +119,8 @@ defineProps<{
       />
 
       <q-input
+        for="input-job-position-en"
+        id="input-job-position-en"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -124,6 +132,8 @@ defineProps<{
       />
 
       <q-input
+        for="input-job-description"
+        id="input-job-description"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -135,6 +145,7 @@ defineProps<{
       />
 
       <VueDatePicker
+        id="date-picker-start-date"
         :teleport="true"
         utc
         autoApply
@@ -152,6 +163,7 @@ defineProps<{
         </template>
         <template #trigger>
           <q-input
+            for="input-start-date"
             id="input-start-date"
             :label="$t('payDay')"
             :dense="dense"
@@ -182,6 +194,8 @@ defineProps<{
       </VueDatePicker>
 
       <q-input
+        for="input-pay-rate"
+        id="input-pay-rate"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
@@ -193,6 +207,8 @@ defineProps<{
       />
 
       <q-input
+        for="input-sales-person"
+        id="input-sales-person"
         :dense="dense"
         :outlined="!readonly"
         :readonly="readonly"
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index fd8ace59..3b0559c7 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -98,6 +98,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
             indicator-color="transparent"
           >
             <q-tab
+              :id="`tab-${tab.label}`"
               v-for="tab in tabsList"
               v-bind:key="tab.name"
               class="content-tab text-capitalize"
diff --git a/src/components/ProfileUpload.vue b/src/components/ProfileUpload.vue
index b96234a7..110b65e4 100644
--- a/src/components/ProfileUpload.vue
+++ b/src/components/ProfileUpload.vue
@@ -91,6 +91,7 @@ defineEmits<{
     <q-separator class="col-12 q-my-md" />
     <div class="text-left q-pt-md">
       <q-toggle
+        id="toggle-status"
         dense
         size="md"
         v-model="statusToggle"
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index b77fc34b..8f834b12 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -66,6 +66,7 @@ function close(index: number) {
 <template>
   <div class="row no-wrap">
     <q-btn
+      id="btn-add"
       class="q-px-lg bordered-b bordered-r app-text-muted"
       flat
       :color="$q.dark.isActive ? 'primary' : ''"
@@ -86,6 +87,7 @@ function close(index: number) {
       style="background-color: var(--_body-bg); max-width: 55vw"
     >
       <q-tab
+        :id="`tab-branch-${index}`"
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
@@ -97,7 +99,7 @@ function close(index: number) {
         <q-btn
           round
           flat
-          id="closeDialog"
+          :id="`close-tab-${index}`"
           icon="mdi-close"
           padding="xs"
           color="red"
diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index c09f3bba..de8bd80a 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -56,6 +56,7 @@ defineEmits<{
         @click="$emit('enterCard')"
       >
         <q-btn
+          id="btn-dots"
           flat
           round
           padding="sm"
@@ -68,6 +69,7 @@ defineEmits<{
           <q-menu class="bordered">
             <q-list v-close-popup>
               <q-item
+                id="btn-view"
                 clickable
                 dense
                 class="row q-py-sm"
@@ -85,6 +87,7 @@ defineEmits<{
                 </span>
               </q-item>
               <q-item
+                id="btn-edit"
                 dense
                 clickable
                 class="row q-py-sm"
@@ -103,6 +106,7 @@ defineEmits<{
                 </span>
               </q-item>
               <q-item
+                id="btn-delete"
                 dense
                 clickable
                 @click="$emit('deleteCard', metadata.id)"
@@ -121,6 +125,7 @@ defineEmits<{
                 <q-item-section class="q-py-sm">
                   <div class="q-pa-sm surface-2 rounded">
                     <q-toggle
+                      id="toggle-status"
                       dense
                       size="sm"
                       @click="$emit('toggleStatus', metadata.id)"