diff --git a/src/app/pages/product-inventory/product-inventory.component.html b/src/app/pages/product-inventory/product-inventory.component.html
index 0b06cffd..473ce463 100644
--- a/src/app/pages/product-inventory/product-inventory.component.html
+++ b/src/app/pages/product-inventory/product-inventory.component.html
@@ -19,7 +19,7 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
     <div id="dropdown-nav-content" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
       <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-nav">
         <li>
-          <a (click)="goToOffers()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'PRODUCT_INVENTORY._products' | translate }}</a>
+          <a data-cy="inventoryProducts" (click)="goToOffers()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'PRODUCT_INVENTORY._products' | translate }}</a>
         </li>
         <li>
           <a (click)="getServices()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'PRODUCT_INVENTORY._services' | translate }}</a>
@@ -33,13 +33,13 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
     <div class="w-full grid lg:grid-cols-20/80">
       <div class="hidden lg:block">
         <div class="w-48 h-fit text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-            <button id="prod-button" (click)="goToOffers()" aria-current="true" class="block w-full px-4 py-2 text-white bg-primary-100 border-b border-gray-200 rounded-t-lg cursor-pointer dark:border-gray-600 hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+            <button data-cy="inventoryProducts" id="prod-button" (click)="goToOffers()" aria-current="true" class="block w-full px-4 py-2 text-white bg-primary-100 border-b border-gray-200 rounded-t-lg cursor-pointer dark:border-gray-600 hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
               {{ 'PRODUCT_INVENTORY._products' | translate }}
             </button>
-            <button id="serv-button" (click)="getServices()" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+            <button data-cy="inventoryServices" id="serv-button" (click)="getServices()" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
               {{ 'PRODUCT_INVENTORY._services' | translate }}
             </button>
-            <button id="res-button" (click)="getResources()" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+            <button data-cy="inventoryResources" id="res-button" (click)="getResources()" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
               {{ 'PRODUCT_INVENTORY._resources' | translate }}
             </button>
         </div>
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 1a7853a1..e0ed2862 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
@@ -730,8 +730,8 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 </div>
                             </div>                    
                         }@else{
-                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
-                        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
+                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
+                        <table data-cy="tableResourceSpecs" 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">
@@ -830,8 +830,8 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 </div>
                             </div>                    
                         }@else{
-                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">                        
-                            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
+                        <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white m-4">
+                            <table data-cy="tableServiceSpecs" 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">
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
index 411fa7e9..7cb9ec39 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
@@ -69,16 +69,16 @@ <h3 class="flex leading-tight justify-start">{{ 'CREATE_PROD_SPEC._finish' | tra
                 <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_RES_SPEC._general' | translate }}</h2>
                     <form class="m-4 gap-4" [formGroup]="generalForm">
                         <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_SPEC._name' | translate }}</label>
-                        <input formControlName="name" type="text" id="prod-name" maxLength="100"
+                        <input data-cy="resSpecName" formControlName="name" type="text" id="prod-name" maxLength="100"
                         [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? 'border-red-600' : 'border-gray-300'"
                         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"/>
-                        
+
                         <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_SPEC._description' | translate }}</label>
-                        <app-markdown-textarea formControlName="description"></app-markdown-textarea>
+                        <app-markdown-textarea data-cy="resSpecDescription" formControlName="description"></app-markdown-textarea>
 
                     </form>
                     <div class="flex w-full justify-items-end justify-end">
-                        <button type="button" (click)="toggleChars();generalDone=true;" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="resSpecNextGeneral" type="button" (click)="toggleChars();generalDone=true;" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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_RES_SPEC._next' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -168,24 +168,24 @@ <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="resSpecNewChar" 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_RES_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 {
                     <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="charsForm">
                         <div>
                             <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_SPEC._name' | translate }}</label>
-                            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+                            <input data-cy="resSpecCharName" 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 class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_SPEC._type' | translate }}</label>
-                            <select id="type" (change)="onTypeChange($event)"
+                            <select data-cy="resSpecCharType" 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>
@@ -194,7 +194,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         </div>
                         <div class="col-span-2">
                             <label for="description" class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_SPEC._description' | translate }}</label>
-                            <textarea id="description" formControlName="description" rows="4"
+                            <textarea data-cy="resSpecCharDescription" 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>                        
                     </form>
@@ -240,9 +240,9 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_RES_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="resSpecCharValueString" 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="resSpecAddCharValue" (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>                                                                              
@@ -254,22 +254,22 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-white">
                                         {{ 'CREATE_RES_SPEC._value' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
+                                    <input data-cy="resSpecCharValueNumber" 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 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-white">
                                         {{ 'CREATE_RES_SPEC._unit' | translate }}
                                     </span>
-                                    <input type="text" id="value" [(ngModel)]="numberUnit"
+                                    <input data-cy="resSpecCharValueUnit" 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="resSpecAddCharValue" (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">
@@ -277,43 +277,43 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-white">
                                         {{ 'CREATE_RES_SPEC._from' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
+                                    <input data-cy="resSpecCharValueFrom" 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 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-white">
                                         {{ 'CREATE_RES_SPEC._to' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
+                                    <input data-cy="resSpecCharValueTo" 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 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md dark:text-white">
                                         {{ 'CREATE_RES_SPEC._unit' | translate }}
                                     </span>
-                                    <input type="text" id="value" [(ngModel)]="rangeUnit"
+                                    <input data-cy="resSpecCharValueUnit" 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="resSpecAddCharValue" (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" [ngClass]="!charsForm.valid || creatingChars.length==0 ? '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="resSpecSaveChar" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || creatingChars.length==0" [ngClass]="!charsForm.valid || creatingChars.length==0 ? '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_RES_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>
 
                     </div>
                 }
                 <div class="flex w-full justify-items-end justify-end ml-4 mt-4">
-                    <button type="button" (click)="showFinish();charsDone=true;" class="flex text-white justify-end 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="resSpecNextChars" type="button" (click)="showFinish();charsDone=true;" class="flex text-white justify-end 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_RES_SPEC._next' | 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 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -420,7 +420,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     }
                     }
                     <div class="flex w-full justify-items-end justify-end ml-4">
-                        <button type="button" (click)="createResource();" [disabled]="loading" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <button data-cy="resSpecFinish" type="button" (click)="createResource();" [disabled]="loading" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
                             {{ 'CREATE_RES_SPEC._create_res' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
index b46b7350..1f311920 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
@@ -19,7 +19,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'OFFERINGS._res_spec' | t
                     </button>
                 </div>
               </form>-->
-            <button (click)="goToCreate()" type="button" 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="createResSpec" (click)="goToCreate()" type="button" 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">{{ 'OFFERINGS._add_new_res' | 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"/>
@@ -116,7 +116,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
 } @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="resSpecTable" 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">
@@ -135,7 +135,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                 </thead>
                 <tbody>
                     @for (res of resSpecs; track res.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="resSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
                             <td class="px-6 py-4 text-wrap break-all">
                                 {{res.name}}
                             </td>
@@ -154,7 +154,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                                 {{res.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
                             </td>
                             <td class="px-6 py-4">
-                                <button type="button" (click)="goToUpdate(res)" 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="resourceSpecEdit" type="button" (click)="goToUpdate(res)" 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/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
index d48de377..4bd689df 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
@@ -106,9 +106,9 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                         </span>
                                     </li>
                                 }@else{
-                                    <li (click)="setResStatus('Launched')"
+                                    <li data-cy="resourceSpecStatusLaunched" (click)="setResStatus('Launched')"
                                     class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">                                         
+                                        <span class="flex items-center">
                                             Launched
                                         </span>
                                     </li>
@@ -156,7 +156,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
 
                     </form>
                     <div class="flex w-full justify-items-end justify-end">
-                        <button type="button" (click)="toggleChars();" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="resSpecUpdateNextGeneral" type="button" (click)="toggleChars();" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
                             {{ 'UPDATE_RES_SPEC._next' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -428,7 +428,7 @@ <h5 class="flex justify-center mb-2 p-2 text-2xl font-bold tracking-tight text-w
                     </div>
                 }
                 <div class="flex w-full justify-items-end justify-end ml-4 mt-4">
-                    <button type="button" (click)="showFinish();" class="flex text-white justify-end 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="resSpecUpdateNextChars" type="button" (click)="showFinish();" class="flex text-white justify-end 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">
                         {{ 'UPDATE_RES_SPEC._next' | 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 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -535,7 +535,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     }
                     }
                     <div class="flex w-full justify-items-end justify-end ml-4">
-                        <button type="button" (click)="updateResource();" [disabled]="!generalForm.valid || loading" [ngClass]="(!generalForm.valid || loading) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="resourceSpecUpdate" type="button" (click)="updateResource();" [disabled]="!generalForm.valid || loading" [ngClass]="(!generalForm.valid || loading) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
                             {{ 'UPDATE_RES_SPEC._update_res' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
index bf07814a..add1e2a8 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
@@ -69,16 +69,16 @@ <h3 class="flex leading-tight justify-start">{{ 'CREATE_PROD_SPEC._finish' | tra
                 <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_SERV_SPEC._general' | translate }}</h2>
                     <form class="m-4 gap-4" [formGroup]="generalForm">
                         <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_SERV_SPEC._name' | translate }}</label>
-                        <input formControlName="name" type="text" id="prod-name" maxLength="100"
+                        <input data-cy="servSpecName" formControlName="name" type="text" id="prod-name" maxLength="100"
                         [ngClass]="generalForm.get('name')?.invalid == true && generalForm.value.name!='' ? 'border-red-600' : 'border-gray-300'"
                         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" />
                         
                         <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'CREATE_SERV_SPEC._description' | translate }}</label>
-                        <app-markdown-textarea formControlName="description"></app-markdown-textarea>
+                        <app-markdown-textarea data-cy="servSpecDescription" formControlName="description"></app-markdown-textarea>
 
                     </form>
                     <div class="flex w-full justify-items-end justify-end">
-                        <button type="button" (click)="toggleChars();generalDone=true;" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="servSpecNextGeneral" type="button" (click)="toggleChars();generalDone=true;" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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_SERV_SPEC._next' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -169,24 +169,24 @@ <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="servSpecNewChar" 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_SERV_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 {
                     <form class="m-4 md:grid md:grid-cols-2 gap-4" [formGroup]="charsForm">
                         <div>
                             <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'PROFILE._name' | translate }}</label>
-                            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+                            <input data-cy="servSpecCharName" 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 class="font-bold text-lg dark:text-white">{{ 'CREATE_SERV_SPEC._type' | translate }}</label>
-                            <select id="type" (change)="onTypeChange($event)"
+                            <select data-cy="servSpecCharType" 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>
@@ -195,7 +195,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         </div>
                         <div class="col-span-2">
                             <label for="description" class="font-bold text-lg dark:text-white">{{ 'CREATE_SERV_SPEC._description' | translate }}</label>
-                            <textarea id="description" formControlName="description" rows="4" 
+                            <textarea data-cy="servSpecCharDescription" 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>                        
                     </form>
@@ -241,13 +241,13 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         <label for="values" [ngClass]="rangeCharSelected && creatingChars.length==1 ? 'hidden' : ''" class="font-bold text-lg dark:text-white">{{ 'CREATE_SERV_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="servSpecCharValueString" 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="servSpecAddCharValue" (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 items-center align-items-middle">
@@ -255,22 +255,22 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                         {{ 'CREATE_SERV_SPEC._value' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="numberValue"
+                                    <input data-cy="servSpecCharValueNumber" 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 bg-gray-200 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border rounded-e-0 border-gray-300 border-e-0 rounded-s-md">
                                         {{ 'CREATE_SERV_SPEC._unit' | translate }}
                                     </span>
-                                    <input type="text" id="value" [(ngModel)]="numberUnit"
+                                    <input data-cy="servSpecCharValueUnit" 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="servSpecAddCharValue" (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">
@@ -278,43 +278,43 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <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_SERV_SPEC._from' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="fromValue"
+                                    <input data-cy="servSpecCharValueFrom" 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_SERV_SPEC._to' | translate }}
                                     </span>
-                                    <input type="number" pattern="[0-9]*" id="value" [(ngModel)]="toValue"
+                                    <input data-cy="servSpecCharValueTo" 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_SERV_SPEC._unit' | translate }}
                                     </span>
-                                    <input type="text" id="value" [(ngModel)]="rangeUnit"
+                                    <input data-cy="servSpecCharValueUnit" 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()" type="button" [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'" 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="servSpecAddCharValue" (click)="addCharValue()" type="button" [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'" 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" [ngClass]="!charsForm.valid || creatingChars.length==0 ? '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="servSpecSaveChar" type="button" (click)="saveChar()"  [disabled]="!charsForm.valid || creatingChars.length==0" [ngClass]="!charsForm.valid || creatingChars.length==0 ? '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_SERV_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>
 
                     </div>
                 }
                 <div class="flex w-full justify-items-end justify-end ml-4 mt-4">
-                    <button type="button" (click)="showFinish();charsDone=true;" class="flex text-white justify-end 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="servSpecNextChars" type="button" (click)="showFinish();charsDone=true;" class="flex text-white justify-end 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_SERV_SPEC._next' | 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 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -421,7 +421,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     }
                     }
                     <div class="flex w-full justify-items-end justify-end ml-4">
-                        <button type="button" (click)="createService();" [disabled]="loading" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <button data-cy="servSpecFinish" type="button" (click)="createService();" [disabled]="loading" class="flex text-white justify-end 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 disabled:opacity-50 disabled:cursor-not-allowed">
                             {{ 'CREATE_SERV_SPEC._create_serv' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
index 3bc0a3a2..a9867c62 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
@@ -19,7 +19,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'OFFERINGS._serv_spec' |
                     </button>
                 </div>
               </form>-->
-            <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="createServSpec" 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">{{ 'OFFERINGS._add_new_serv' | 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"/>
@@ -117,7 +117,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
 } @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="servSpecTable" 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">
@@ -136,7 +136,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             </thead>
             <tbody>
                 @for (serv of servSpecs; track serv.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="servSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
                         <td class="px-6 py-4 text-wrap break-all">
                             {{serv.name}}
                         </td>
@@ -155,7 +155,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                             {{serv.lastUpdate | date:'EEEE, dd/MM/yy, HH:mm'}} 
                         </td>
                         <td class="px-6 py-4">
-                            <button type="button" (click)="goToUpdate(serv)" 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="serviceSpecEdit" type="button" (click)="goToUpdate(serv)" 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/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
index 5f192959..bddac745 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
@@ -106,9 +106,9 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                         </span>
                                     </li>
                                 }@else{
-                                    <li (click)="setServStatus('Launched')"
+                                    <li data-cy="serviceSpecStatusLaunched" (click)="setServStatus('Launched')"
                                     class="cursor-pointer flex w-fit md:w-full items-center after:w-full after:h-1 after:border-b after:border-gray-700 dark:after:border-gray-400 after:border-1 after:mx-2 md:after:mx-6 xl:after:mx-10">
-                                        <span class="flex items-center">                                         
+                                        <span class="flex items-center">
                                             Launched
                                         </span>
                                     </li>
@@ -156,7 +156,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
 
                     </form>
                     <div class="flex w-full justify-items-end justify-end">
-                        <button type="button" (click)="toggleChars();" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="servSpecUpdateNextGeneral" type="button" (click)="toggleChars();" [disabled]="!generalForm.valid" [ngClass]="!generalForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
                             {{ 'UPDATE_SERV_SPEC._next' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -391,7 +391,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                     </div>
                 }
                 <div class="flex w-full justify-items-end justify-end ml-4 mt-4">
-                    <button type="button" (click)="showFinish();" class="flex text-white justify-end 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="servSpecUpdateNextChars" type="button" (click)="showFinish();" class="flex text-white justify-end 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">
                         {{ 'UPDATE_SERV_SPEC._next' | 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 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -498,7 +498,7 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     }
                     }
                     <div class="flex w-full justify-items-end justify-end ml-4">
-                        <button type="button" (click)="updateService();" [disabled]="!generalForm.valid || loading" [ngClass]="(!generalForm.valid || loading) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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="serviceSpecUpdate" type="button" (click)="updateService();" [disabled]="!generalForm.valid || loading" [ngClass]="(!generalForm.valid || loading) ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-end 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">
                             {{ 'UPDATE_SERV_SPEC._update_serv' | 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 14 10">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
diff --git a/src/app/pages/seller-offerings/seller-offerings.component.html b/src/app/pages/seller-offerings/seller-offerings.component.html
index 134995eb..ac9eb32a 100644
--- a/src/app/pages/seller-offerings/seller-offerings.component.html
+++ b/src/app/pages/seller-offerings/seller-offerings.component.html
@@ -52,10 +52,10 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
             <button data-cy="prdSpecSection" (click)="goToProdSpec()" id="prod-spec-button" class="block w-full rounded-t-lg px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
               {{ 'OFFERINGS._prod_spec' | translate }}
             </button>
-            <button (click)="goToServiceSpec()" id="sev-spec-button" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+            <button data-cy="servSpecSection" (click)="goToServiceSpec()" id="sev-spec-button" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                 {{ 'OFFERINGS._serv_spec' | translate }}
             </button>
-            <button (click)="goToResourceSpec()" id="res-spec-button" class="block w-full px-4 py-2 border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+            <button data-cy="resSpecSection" (click)="goToResourceSpec()" id="res-spec-button" class="block w-full px-4 py-2 border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                 {{ 'OFFERINGS._res_spec' | translate }}
             </button>
           </div>