diff --git a/ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.html b/ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.html
index 14cb808b..b54d7e9f 100644
--- a/ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.html
+++ b/ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.html
@@ -4,7 +4,7 @@
         <label class="city-autocomplete__label" data-testid="city-code">{{ city?.code }}</label>
     </div>
 
-    <tooltip *ngIf="error">
+    <tooltip *ngIf="error" data-testid="validation-error">
         {{ error | translate }}
     </tooltip>
 
diff --git a/ClientApp/src/app/features/online-board/components/filter/components/flight-number-filter/flight-number-filter.component.html b/ClientApp/src/app/features/online-board/components/filter/components/flight-number-filter/flight-number-filter.component.html
index e1f71d21..d9ae9eaa 100644
--- a/ClientApp/src/app/features/online-board/components/filter/components/flight-number-filter/flight-number-filter.component.html
+++ b/ClientApp/src/app/features/online-board/components/filter/components/flight-number-filter/flight-number-filter.component.html
@@ -3,7 +3,7 @@
         <label class="label--filter">{{
             'SHARED.FLIGHT_NUMBER' | translate
         }}</label>
-        <tooltip *ngIf="validationService.flightNumberError">{{
+        <tooltip *ngIf="validationService.flightNumberError" data-testid="validation-error">{{
             validationService.flightNumberError | translate
         }}</tooltip>
 
diff --git a/ClientApp/src/app/features/online-board/components/filter/components/route-filter/online-board-route-filter.component.html b/ClientApp/src/app/features/online-board/components/filter/components/route-filter/online-board-route-filter.component.html
index bba4175e..69d24da9 100644
--- a/ClientApp/src/app/features/online-board/components/filter/components/route-filter/online-board-route-filter.component.html
+++ b/ClientApp/src/app/features/online-board/components/filter/components/route-filter/online-board-route-filter.component.html
@@ -43,6 +43,7 @@
     [fullView]="false"
     [(ngModel)]="timeRange"
     label="{{ 'SHARED.FLIGHT_TIME' | translate }}"
+    data-testid="time-range-slider"
 >
 </time-selector>
 
diff --git a/ClientApp/src/app/features/schedule/components/schedule-filter/schedule-filter.component.html b/ClientApp/src/app/features/schedule/components/schedule-filter/schedule-filter.component.html
index 892f1693..c63cdc3b 100644
--- a/ClientApp/src/app/features/schedule/components/schedule-filter/schedule-filter.component.html
+++ b/ClientApp/src/app/features/schedule/components/schedule-filter/schedule-filter.component.html
@@ -59,6 +59,7 @@
                     [fullView]="false"
                     [(ngModel)]="timeRange"
                     label="{{ 'SHARED.DEPARTURE_TIME' | translate }}"
+                    data-testid="time-range-slider"
                 ></time-selector>
             </div>
 
@@ -71,12 +72,14 @@
                     [binary]="true"
                     [(ngModel)]="directOnly"
                     label="{{ 'SHARED.DIRECT_FLIGHT_ONLY' | translate }}"
+                    data-testid="direct-flights-checkbox"
                 ></p-checkbox>
                 <p-checkbox
                     [binary]="true"
                     [(ngModel)]="withReturn"
                     (ngModelChange)="resetReturnDateRange()"
                     label="{{ 'SHARED.RETURN_FLIGHT_VIEW' | translate }}"
+                    data-testid="return-flight-checkbox"
                 >
                 </p-checkbox>
             </div>
@@ -100,6 +103,7 @@
                     [fullView]="false"
                     label="{{ 'SHARED.RETURN_FLIGHT_TIME' | translate }}"
                     [(ngModel)]="returnTimeRange"
+                    data-testid="return-time-range-slider"
                 >
                 </time-selector>
             </div>
diff --git a/ClientApp/src/app/modules/components/page-empty-list/page-empty-list.component.html b/ClientApp/src/app/modules/components/page-empty-list/page-empty-list.component.html
index dd15ffd5..0d9cfe07 100644
--- a/ClientApp/src/app/modules/components/page-empty-list/page-empty-list.component.html
+++ b/ClientApp/src/app/modules/components/page-empty-list/page-empty-list.component.html
@@ -1,8 +1,8 @@
-<section class="page-empty">
-    <div class="page-empty__title">
+<section class="page-empty" data-testid="empty-results">
+    <div class="page-empty__title" data-testid="empty-state-message">
         {{ 'SHARED.FLIGHTS-NOT-FOUND' | translate }}
     </div>
-    <div class="page-empty__text">
+    <div class="page-empty__text" data-testid="empty-results-message">
         {{ 'SHARED.FLIGHTS-NOT-FOUND-TEXT' | translate }}
     </div>
 </section>
diff --git a/ClientApp/src/app/modules/components/page-loader/page-loader.component.html b/ClientApp/src/app/modules/components/page-loader/page-loader.component.html
index 9471e714..6ce649aa 100644
--- a/ClientApp/src/app/modules/components/page-loader/page-loader.component.html
+++ b/ClientApp/src/app/modules/components/page-loader/page-loader.component.html
@@ -20,6 +20,7 @@
             type="button"
             label="{{ 'SHARED.SEARCH-CANCEL' | translate }}"
             (click)="handleClick()"
+            data-testid="loader-cancel-button"
         ></button>
     </div>
 </div>
diff --git a/ClientApp/src/app/modules/pages/error-pages/error-page/error-page.component.html b/ClientApp/src/app/modules/pages/error-pages/error-page/error-page.component.html
index 4091108e..85360d37 100644
--- a/ClientApp/src/app/modules/pages/error-pages/error-page/error-page.component.html
+++ b/ClientApp/src/app/modules/pages/error-pages/error-page/error-page.component.html
@@ -1,9 +1,9 @@
 <section class="frame">
     <div class="error-page-girl" [ngClass]="'errorCode-' + errorCode"></div>
     <div class="error-page-content">
-        <div class="error-page-code">{{ errorCode }}</div>
-        <div class="error-page-title">{{ title || 'PAGE500.HEADER' | translate }}</div>
-        <div class="error-page-description">{{ description || 'PAGE500.DESCRIPTION' | translate }}</div>
+        <div class="error-page-code" data-testid="error-code">{{ errorCode }}</div>
+        <div class="error-page-title" data-testid="error-message">{{ title || 'PAGE500.HEADER' | translate }}</div>
+        <div class="error-page-description" data-testid="error-description">{{ description || 'PAGE500.DESCRIPTION' | translate }}</div>
 
         <!-- search should not be on error page. commented in case the ask to return it back-->
         <div class="error-page-search">
diff --git a/ClientApp/src/app/modules/pages/schedule/schedule-search-result-header/schedule-search-result-header.component.html b/ClientApp/src/app/modules/pages/schedule/schedule-search-result-header/schedule-search-result-header.component.html
index 91ca56e3..e370802c 100644
--- a/ClientApp/src/app/modules/pages/schedule/schedule-search-result-header/schedule-search-result-header.component.html
+++ b/ClientApp/src/app/modules/pages/schedule/schedule-search-result-header/schedule-search-result-header.component.html
@@ -15,13 +15,13 @@
             <div class="sort-note">{{ footnotes }}</div>
         </div>
         <div class="sort-container">
-            <button pButton type="button" #departureUp class="sort sort--up" (click)="onSort(ScheduleSortMode.departureUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureUp }">
+            <button pButton type="button" #departureUp class="sort sort--up" (click)="onSort(ScheduleSortMode.departureUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureUp }" data-testid="sort-option-departure-asc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                 </svg>
             </button>
 
-            <button pButton type="button" #departureDown class="sort sort--down" (click)="onSort(ScheduleSortMode.departureDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureDown }">
+            <button pButton type="button" #departureDown class="sort sort--down" (click)="onSort(ScheduleSortMode.departureDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.departureDown }" data-testid="sort-option-departure-desc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                 </svg>
@@ -33,13 +33,13 @@
             {{ 'SCHEDULE.SEARCH-RESULT-TIME' | translate }}
         </div>
         <div class="sort-container">
-            <button pButton type="button" #timeUp class="sort sort--up" (click)="onSort(ScheduleSortMode.timeUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeUp }">
+            <button pButton type="button" #timeUp class="sort sort--up" (click)="onSort(ScheduleSortMode.timeUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeUp }" data-testid="sort-option-time-asc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                 </svg>
             </button>
 
-            <button pButton type="button" #timeDown class="sort sort--down" (click)="onSort(ScheduleSortMode.timeDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeDown }">
+            <button pButton type="button" #timeDown class="sort sort--down" (click)="onSort(ScheduleSortMode.timeDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.timeDown }" data-testid="sort-option-time-desc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                 </svg>
@@ -52,13 +52,13 @@
             <div class="sort-note">{{ footnotes }}</div>
         </div>
         <div class="sort-container">
-            <button pButton type="button" #arrivalUp class="sort sort--up" (click)="onSort(ScheduleSortMode.arrivalUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalUp }">
+            <button pButton type="button" #arrivalUp class="sort sort--up" (click)="onSort(ScheduleSortMode.arrivalUp)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalUp }" data-testid="sort-option-arrival-asc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-up" />
                 </svg>
             </button>
 
-            <button pButton type="button" #arrivalDown class="sort sort--down" (click)="onSort(ScheduleSortMode.arrivalDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalDown }">
+            <button pButton type="button" #arrivalDown class="sort sort--down" (click)="onSort(ScheduleSortMode.arrivalDown)" [ngClass]="{ active: sortBy === ScheduleSortMode.arrivalDown }" data-testid="sort-option-arrival-desc">
                 <svg class="svg--arrow">
                     <use xlink:href="/assets/img/sprite.svg#arrow-down" />
                 </svg>
diff --git a/ClientApp/src/app/toolkit/calendar-input/calendar-input-week.component.html b/ClientApp/src/app/toolkit/calendar-input/calendar-input-week.component.html
index c9d986cd..34cdd4b9 100644
--- a/ClientApp/src/app/toolkit/calendar-input/calendar-input-week.component.html
+++ b/ClientApp/src/app/toolkit/calendar-input/calendar-input-week.component.html
@@ -1,7 +1,7 @@
 <div class="calendar">
     <label class="label--filter">{{ label | translate }}</label>
 
-    <tooltip *ngIf="error">{{ error | translate }}</tooltip>
+    <tooltip *ngIf="error" data-testid="validation-error">{{ error | translate }}</tooltip>
 
     <div class="calendar-controls-container" [ngClass]="{ 'has-value': dateStr, 'error-value': error }">
         <input
diff --git a/ClientApp/src/app/toolkit/calendar-input/calendar-input.component.html b/ClientApp/src/app/toolkit/calendar-input/calendar-input.component.html
index 22a16ae5..3f4466cc 100644
--- a/ClientApp/src/app/toolkit/calendar-input/calendar-input.component.html
+++ b/ClientApp/src/app/toolkit/calendar-input/calendar-input.component.html
@@ -1,7 +1,7 @@
 <div class="calendar">
     <label class="label--filter">{{ label | translate }}</label>
 
-    <tooltip *ngIf="error">{{ error | translate }}</tooltip>
+    <tooltip *ngIf="error" data-testid="validation-error">{{ error | translate }}</tooltip>
 
     <div class="calendar--mobile">
         <button