diff --git a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
index cded41ab..6b6e2ce8 100644
--- a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
+++ b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
@@ -164,7 +164,7 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
             } @else {
               <div class="max-h-96 overflow-y-auto pr-2">
                 @for (acbr of appliedCustomerBillingRates; track acbr.id) {
-                  <div class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div data-cy="acbr" class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
                     <div class="flex flex-col gap-2">
                       <div class="flex flex-row gap-2">
                         <p class="text-sm font-bold text-gray-700 dark:text-white">
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
index e97e1c51..96d04c6c 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
@@ -540,11 +540,11 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     }
                     @if(showCreateChar==false){
                         <div class="flex w-full justify-items-center justify-center">
-                            <button type="button" (click)="showCreateChar=!showCreateChar" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+                            <button data-cy="btnNewCharacteristic" type="button" (click)="showCreateChar=!showCreateChar" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
                                 {{ 'CREATE_PROD_SPEC._new_char' | translate }}
                                 <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                </svg>                                  
+                                </svg>
                             </button>
                         </div>
                     } @else {
@@ -552,9 +552,9 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             @if(!booleanCharSelected){
                                 <div>
                                     <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                    <input formControlName="name" type="text" id="prod-name" maxLength="100"
+                                    <input data-cy="charName" formControlName="name" type="text" id="prod-name" maxLength="100"
                                     class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    
+
                                 </div>
                             } @else {
                                 <div>
@@ -579,7 +579,7 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                             }
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._type' | translate }}</label>
-                                <select id="type" (change)="onTypeChange($event)" 
+                                <select data-cy="charType" id="type" (change)="onTypeChange($event)"
                                 class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                     <option selected value="string">String</option>
                                     <option value="number">Number</option>
@@ -589,7 +589,7 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                             </div>
                             <div class="col-span-2">
                                 <label for="description" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
-                                <textarea id="description" formControlName="description" rows="4" maxLength="500"
+                                <textarea data-cy="charDescription" id="description" formControlName="description" rows="4" maxLength="500"
                                 class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
                             </div>                        
                         </form>
@@ -637,13 +637,13 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                             <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 || booleanCharSelected ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._add_values' | translate }}</label>
                             @if(stringCharSelected){
                                 <div class="flex flex-row items-center align-items-middle">
-                                    <input type="text" id="value" [(ngModel)]="stringValue"
+                                    <input data-cy="charStringValue" type="text" id="value" [(ngModel)]="stringValue"
                                     class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    <button (click)="addCharValue()" [disabled]="!stringValue" [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
+                                    <button data-cy="btnAddStringValue" (click)="addCharValue()" [disabled]="!stringValue" [ngClass]="!stringValue ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                         <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
+                                        </svg>
+                                    </button>
                                 </div>
                             } @else if (numberCharSelected){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
@@ -651,22 +651,22 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                             {{ 'CREATE_PROD_SPEC._value' | translate }}
                                         </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
+                                        <input data-cy="charNumberValue" type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
                                         class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                     </div>
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                             {{ 'CREATE_PROD_SPEC._unit' | translate }}
                                         </span>
-                                        <input type="text" id="value" [(ngModel)]="numberUnit"
+                                        <input data-cy="charNumberUnit" type="text" id="value" [(ngModel)]="numberUnit"
                                         class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-                                    </div>                           
-                                    
-                                    <button (click)="addCharValue()" [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit" [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
+                                    </div>
+
+                                    <button data-cy="btnAddNumberValue" (click)="addCharValue()" [disabled]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit" [ngClass]="(numberValue === '' || numberValue === null || numberValue === undefined) || !numberUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'" type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                         <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
+                                        </svg>
+                                    </button>
                                 </div>
                             } @else if (rangeCharSelected && creatingChars.length==0){
                                 <div class="flex flex-col md:flex-row items-center align-items-middle">
@@ -674,36 +674,36 @@ <h3 class="text-sm italic text-gray-600 ml-4 dark:text-gray-200">There's no char
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                             {{ 'CREATE_PROD_SPEC._from' | translate }}
                                         </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
+                                        <input data-cy="charRangeFrom" type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
                                         class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                     </div>
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                             {{ 'CREATE_PROD_SPEC._to' | translate }}
                                         </span>
-                                        <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
+                                        <input data-cy="charRangeTo" type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
                                         class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                     </div>
                                     <div class="flex w-full mb-2 md:mb-0">
                                         <span class="inline-flex items-center px-3 text-sm text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white bg-gray-200 border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                             {{ 'CREATE_PROD_SPEC._unit' | translate }}
                                         </span>
-                                        <input type="text" id="value" [(ngModel)]="rangeUnit"
+                                        <input data-cy="charRangeUnit" type="text" id="value" [(ngModel)]="rangeUnit"
                                         class="mr-4 bg-gray-50 border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
                                     </div>
-                                    <button (click)="addCharValue()" [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit" [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"  type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
+                                    <button data-cy="btnAddRangeValue" (click)="addCharValue()" [disabled]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit" [ngClass]="(fromValue === '' || fromValue === null || fromValue === undefined) || (toValue === '' || toValue === null || toValue === undefined) || !rangeUnit ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"  type="button" class="text-white w-fit h-full bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center">
                                         <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-                                        </svg>                                                                              
-                                    </button> 
+                                        </svg>
+                                    </button>
                                 </div>
                             }
                             <div class="flex w-full justify-items-center justify-center mt-4">
-                                <button type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected)" [ngClass]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+                                <button data-cy="btnSaveCharacteristic" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected)" [ngClass]="!charsForm.valid || (creatingChars.length==0 && !booleanCharSelected) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
                                     {{ 'CREATE_PROD_SPEC._save_char' | translate }}
                                     <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>
-                                    </svg>                                                                   
+                                    </svg>
                                 </button>
                             </div>
     
diff --git a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
index 4be0b8d9..15cf109d 100644
--- a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
+++ b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
@@ -7,12 +7,12 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
         </div>
 
         <div class="flex flex-row w-full justify-end">
-            <button type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center align-middle me-2">
+            <button data-cy="createUsageSpec" type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center align-middle me-2">
                 <p class="pl-2 pr-2">{{ 'USAGE_SPECS._add_new' | translate }}</p>
                 <svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                 </svg>
-            </button>  
+            </button>
         </div>
 
       </div>
@@ -30,7 +30,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
 } @else {
     <div class="bg-secondary-50 dark:bg-secondary-100 border dark:border-gray-800 mt-8 p-4 rounded-lg">
     <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300">
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
+        <table data-cy="usageSpecTable" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
             <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                 <tr>
                     <th scope="col" class="px-6 py-3">
@@ -46,7 +46,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
             </thead>
             <tbody>
                 @for (usage of usageSpecs; track usage.id) {
-                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                    <tr data-cy="usageSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
                         <td [ngClass]="{
                             'break-all': hasLongWord(usage.name, 20),
                             'break-words': !hasLongWord(usage.name, 20)
@@ -54,10 +54,10 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
                             {{usage.name}}
                         </td>
                         <td class="hidden md:table-cell px-6 py-4">
-                            {{usage.description}} 
+                            {{usage.description}}
                         </td>
                         <td class="px-6 py-4">
-                            <button type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
+                            <button data-cy="usageSpecEdit" type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
                                 <svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                     <path fill-rule="evenodd" d="M14 4.182A4.136 4.136 0 0 1 16.9 3c1.087 0 2.13.425 2.899 1.182A4.01 4.01 0 0 1 21 7.037c0 1.068-.43 2.092-1.194 2.849L18.5 11.214l-5.8-5.71 1.287-1.31.012-.012Zm-2.717 2.763L6.186 12.13l2.175 2.141 5.063-5.218-2.141-2.108Zm-6.25 6.886-1.98 5.849a.992.992 0 0 0 .245 1.026 1.03 1.03 0 0 0 1.043.242L10.282 19l-5.25-5.168Zm6.954 4.01 5.096-5.186-2.218-2.183-5.063 5.218 2.185 2.15Z" clip-rule="evenodd"/>
                                 </svg>
diff --git a/src/app/shared/forms/usage-spec/usage-spec-general-info/usage-spec-general-info.component.html b/src/app/shared/forms/usage-spec/usage-spec-general-info/usage-spec-general-info.component.html
index 2067dfe8..14bf8cd8 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-general-info/usage-spec-general-info.component.html
+++ b/src/app/shared/forms/usage-spec/usage-spec-general-info/usage-spec-general-info.component.html
@@ -1,10 +1,10 @@
 @if (nameControl) {
     <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
-    <input id="prod-name" type="text" [formControl]="nameControl" maxLength="100"
+    <input data-cy="usageSpecName" id="prod-name" type="text" [formControl]="nameControl" maxLength="100"
            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
   }
   @if (descControl) {
     <label class="font-bold text-lg col-span-2 dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
-    <app-markdown-textarea [formControl]="descControl"></app-markdown-textarea>
+    <app-markdown-textarea data-cy="usageSpecDescription" [formControl]="descControl"></app-markdown-textarea>
   }
   
\ No newline at end of file
diff --git a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
index 649e0d3a..22133773 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
+++ b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
@@ -56,33 +56,33 @@
 }
 @if(showCreateMetric==false){
     <div class="flex w-full justify-items-center justify-center">
-        <button type="button" (click)="showCreateMetric=!showCreateMetric" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+        <button data-cy="btnNewMetric" type="button" (click)="showCreateMetric=!showCreateMetric" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
             {{ 'USAGE_SPECS._create_metric' | translate }}
             <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
-            </svg>                                  
+            </svg>
         </button>
     </div>
 } @else {
     <form class="m-4" [formGroup]="metricsForm">
         <div>
             <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
-            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+            <input data-cy="metricName" formControlName="name" type="text" id="prod-name" maxLength="100"
             class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-            
+
         </div>
         <div>
             <label for="description" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
-            <textarea id="description" formControlName="description" rows="4" 
+            <textarea data-cy="metricDescription" id="description" formControlName="description" rows="4"
             class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
-        </div>                        
+        </div>
     </form>
     <div class="flex w-full justify-items-center justify-center mt-4">
-        <button type="button" (click)="saveMetric()"  [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+        <button data-cy="btnSaveMetric" type="button" (click)="saveMetric()"  [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
             {{ 'USAGE_SPECS._save_metric' | translate }}
             <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>
-            </svg>                                                                   
+            </svg>
         </button>
     </div>
 }
\ No newline at end of file
diff --git a/src/app/shared/forms/usage-spec/usage-spec.component.html b/src/app/shared/forms/usage-spec/usage-spec.component.html
index 98f4ff00..f5b1320e 100644
--- a/src/app/shared/forms/usage-spec/usage-spec.component.html
+++ b/src/app/shared/forms/usage-spec/usage-spec.component.html
@@ -64,7 +64,7 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
   
       <!-- Navigation Buttons -->
       <div class="flex justify-end mt-6 space-x-4">
-        <button (click)="goToStep(currentStep - 1)"
+        <button data-cy="usageSpecPrevious" (click)="goToStep(currentStep - 1)"
                 [disabled]="currentStep === 0"
                 [ngClass]="{
                   'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
@@ -78,8 +78,8 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
             </svg>
           {{ 'USAGE_SPECS._previous' | translate }}
         </button>
-  
-        <button (click)="goToStep(currentStep + 1)"
+
+        <button data-cy="usageSpecNext" (click)="goToStep(currentStep + 1)"
                 [disabled]="currentStep === steps.length - 1 || (formType === 'create' && !validateCurrentStep()) || !canNavigate(currentStep)"
                 [ngClass]="{
                   'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (formType !== 'create' || validateCurrentStep() || canNavigate(currentStep)),
@@ -94,10 +94,10 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
           </svg>
         </button>
         @if(formType === 'create' && currentStep === 2 || formType === 'update'){
-          <button (click)="submitForm()"
+          <button data-cy="btnCreateUsageSpec" (click)="submitForm()"
           [disabled]="!usageSpecForm.controls['generalInfo'].valid"
           [ngClass]="formType === 'update' && !usageSpecForm.controls['generalInfo'].valid ? 'opacity-50' : 'hover:bg-primary-50'"
-  
+
           class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
             {{ formType === 'create' ? 'Create Usage Spec' : 'Update Usage Spec' }}
           </button>
diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
index b508ee32..59c08f50 100644
--- a/src/app/shared/header/header.component.html
+++ b/src/app/shared/header/header.component.html
@@ -195,7 +195,7 @@
               </a>
             </li>            
             <li>
-              <button id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
+              <button data-cy="usageSpecs" id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
             </li>
             <li>
               <button id="myInventory" (click)="goTo('/product-inventory')"class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faBoxesStacked" class="mr-2"></fa-icon>{{ 'HEADER._inventory' | translate }}</button>
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
index a2d4d6e3..c3f3ceab 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
@@ -74,7 +74,7 @@
         <div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-4">
           @for (ch of filteredCharacteristics ; track ch.id; let i = $index) {
             @if(!ch.name?.endsWith('- enabled')){
-              <div class="flex flex-row w-full items-start">
+              <div data-cy="offerChar" class="flex flex-row w-full items-start">
                 @if(canBeDisabledChars.includes(ch.id)){
                   <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start my-4 mr-2">
                     <input type="checkbox" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
@@ -101,7 +101,7 @@
       <p class="mt-4  text-sm text-gray-500 dark:text-gray-400">You can change the metric values to simulate final prices</p>
       <div class="grid grid-cols-4 gap-2 mb-4">
         @for (metric of metrics || []; track metric.unitOfMeasure) {
-          <div class="flex flex-col">
+          <div data-cy="offerMetric" class="flex flex-col">
             <h5 [ngClass]="{
               'break-all': hasLongWord(metric.unitOfMeasure, 20),
               'break-words': !hasLongWord(metric.unitOfMeasure, 20)