AAE-19551 e2e material locators refactor (#9403)

* AAE-19551 e2e-material-locators-refactor

* testing lib

* e2e lib

* playwright refactor

* fix lint issues

* bring back excluded process e2e

* fix spinner

* locator fixes

e2e/content-services/pages/upload-dialog.page.ts

@@ -16,7 +16,7 @@
  */
 
 import { by, browser, ElementFinder, $, $$ } from 'protractor';
-import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, materialLocators } from '@alfresco/adf-testing';
 
 export class UploadDialogPage {
     closeButton = $('#adf-upload-dialog-close');
@@ -24,7 +24,7 @@ export class UploadDialogPage {
     minimizedDialog = $('div[class*="upload-dialog--minimized"]');
     uploadedStatusIcon = '.adf-file-uploading-row__status--done';
     cancelledStatusIcon = 'div[class*="status--cancelled"]';
-    errorStatusIcon = 'div[class*="status--error"] mat-icon';
+    errorStatusIcon = `div[class*="status--error"] ${materialLocators.Icon.root}`;
     rowByRowName = by.xpath('ancestor::adf-file-uploading-list-row');
     title = $('span[class*="upload-dialog__title"]');
     toggleMinimizeButton = $(`[data-automation-id='adf-upload-dialog__toggle-minimize']`);

e2e/content-services/pages/version-manager.page.ts

@@ -16,7 +16,7 @@
  */
 
 import * as path from 'path';
-import { BrowserActions, TestElement, TogglePage } from '@alfresco/adf-testing';
+import { BrowserActions, TestElement, TogglePage, materialLocators } from '@alfresco/adf-testing';
 import { $, browser } from 'protractor';
 
 export class VersionManagePage {
@@ -110,7 +110,7 @@ export class VersionManagePage {
 
     async clickActionButton(version: string): Promise<void> {
         await TestElement.byId(`adf-version-list-action-menu-button-${version}`).click();
-        await TestElement.byCss('.cdk-overlay-container .mat-menu-content').waitVisible();
+        await TestElement.byCss(`.cdk-overlay-container ${materialLocators.Menu.content.class}`).waitVisible();
     }
 
     async closeActionsMenu(): Promise<void> {

e2e/core/pages/content-services.page.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DropActions, BrowserActions, BrowserVisibility, DocumentListPage, DropdownPage, Logger } from '@alfresco/adf-testing';
+import { DropActions, BrowserActions, BrowserVisibility, DocumentListPage, DropdownPage, Logger, materialLocators } from '@alfresco/adf-testing';
 import { $$, browser, protractor, $ } from 'protractor';
 import { FolderDialogPage } from './dialog/folder-dialog.page';
 import { NavigationBarPage } from './navigation-bar.page';
@@ -55,7 +55,7 @@ export class ContentServicesPage {
     downloadContent = $('button[data-automation-id="Download"]');
     downloadButton = $('button[title="Download"]');
     multiSelectToggle = $('[data-automation-id="multiSelectToggle"]');
-    selectionModeDropdown = $('.mat-select[placeholder="Selection Mode"]');
+    selectionModeDropdown = $(`${materialLocators.Select.class}[placeholder="Selection Mode"]`);
 
     async isContextActionEnabled(actionName: string): Promise<boolean> {
         const actionButton = $(`button[data-automation-id="context-${actionName}"`);

e2e/core/pages/metadata-view.page.ts

@@ -16,12 +16,12 @@
  */
 
 import { $, by, element, Key, protractor, ElementFinder } from 'protractor';
-import { BrowserActions, BrowserVisibility, DropdownPage, TestElement, Logger } from '@alfresco/adf-testing';
+import { BrowserActions, BrowserVisibility, DropdownPage, TestElement, Logger, materialLocators } from '@alfresco/adf-testing';
 
 export class MetadataViewPage {
     title = $(`div[info-drawer-title]`);
-    expandedAspect = $(`mat-expansion-panel-header[aria-expanded='true']`);
-    aspectTitle = `mat-panel-title`;
+    expandedAspect = $(`${materialLocators.Expansion.panel.header.root}[aria-expanded='true']`);
+    aspectTitle = materialLocators.Panel.title;
     name = $(`[data-automation-id='card-textitem-value-properties.cm:name']`);
     creator = $(`[data-automation-id='card-textitem-value-createdByUser.displayName']`);
     createdDate = $(`span[data-automation-id='card-dateitem-createdAt']`);
@@ -37,9 +37,9 @@ export class MetadataViewPage {
     readonlySwitch = $(`#adf-metadata-readonly`);
     multiSwitch = $(`#adf-metadata-multi`);
     defaultPropertiesSwitch = $('#adf-metadata-default-properties');
-    closeButton = element(by.cssContainingText('button.mat-button span', 'Close'));
+    closeButton = element(by.cssContainingText(`button${materialLocators.Button.class} span`, 'Close'));
     displayAspect = $(`input[data-placeholder='Display Aspect']`);
-    applyAspect = element(by.cssContainingText(`button span.mat-button-wrapper`, 'Apply Aspect'));
+    applyAspect = element(by.cssContainingText(`button span${materialLocators.Button.wrapper}`, 'Apply Aspect'));
     saveMetadataButton = $(`[data-automation-id='save-metadata']`);
     saveGeneralMetadataButton = $(`[data-automation-id='save-general-info-metadata']`);
     resetMetadataButton = $(`[data-automation-id='reset-metadata']`);
@@ -47,7 +47,7 @@ export class MetadataViewPage {
     private getMetadataGroupLocator = async (groupName: string): Promise<ElementFinder> =>
         $(`[data-automation-id="adf-metadata-group-${groupName}"]`);
     private getExpandedMetadataGroupLocator = async (groupName: string): Promise<ElementFinder> =>
-        $(`[data-automation-id="adf-metadata-group-${groupName}"] > mat-expansion-panel-header`);
+        $(`[data-automation-id="adf-metadata-group-${groupName}"] > ${materialLocators.Expansion.panel.header.root}`);
 
     async getTitle(): Promise<string> {
         return BrowserActions.getText(this.title);
@@ -116,7 +116,7 @@ export class MetadataViewPage {
 
     async clickOnPropertiesTab(): Promise<void> {
         const propertiesTab = element(
-            by.cssContainingText(`.adf-info-drawer-layout-content div.mat-tab-labels div .mat-tab-label-content`, `Properties`)
+            by.cssContainingText(`.adf-info-drawer-layout-content div${materialLocators.Tab.labels.class} div ${materialLocators.Tab.label.content.class}`, `Properties`)
         );
         await BrowserActions.click(propertiesTab);
     }
@@ -161,12 +161,12 @@ export class MetadataViewPage {
 
     async checkMetadataGroupIsExpand(groupName: string): Promise<void> {
         const group = await this.getExpandedMetadataGroupLocator(groupName);
-        await expect(await BrowserActions.getAttribute(group, 'class')).toContain('mat-expanded');
+        await expect(await BrowserActions.getAttribute(group, 'class')).toContain(materialLocators.Expanded.root);
     }
 
     async checkMetadataGroupIsNotExpand(groupName: string): Promise<void> {
         const group = await this.getExpandedMetadataGroupLocator(groupName);
-        await expect(await BrowserActions.getAttribute(group, 'class')).not.toContain('mat-expanded');
+        await expect(await BrowserActions.getAttribute(group, 'class')).not.toContain(materialLocators.Expanded.root);
     }
 
     async checkPropertyIsVisible(propertyName: string, type: string): Promise<void> {
@@ -208,7 +208,7 @@ export class MetadataViewPage {
     }
 
     async changeContentType(option: string, attempt = 0, maxAttempt = 3): Promise<boolean> {
-        const nodeType = TestElement.byCss('div[data-automation-id="header-nodeType"] .mat-select-trigger');
+        const nodeType = TestElement.byCss(`div[data-automation-id="header-nodeType"] ${materialLocators.Select.trigger}`);
         if (attempt > maxAttempt) {
             Logger.error(`content type select option not found. check acs version may be lesser than 7.0.0`);
             return false;

e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts

@@ -19,7 +19,7 @@ import {
     createApiService, AppListCloudPage, GroupIdentityService, IdentityService,
     LoginPage, ProcessCloudWidgetPage, ProcessDefinitionsService,
     ProcessInstancesService, QueryService, TaskFormCloudComponent, TaskHeaderCloudPage,
-    TasksService, SnackbarPage
+    TasksService, SnackbarPage, materialLocators
 } from '@alfresco/adf-testing';
 import { browser } from 'protractor';
 import { TasksCloudDemoPage } from '.././pages/tasks-cloud-demo.page';
@@ -133,7 +133,7 @@ describe('Form Field Component - Dropdown Widget', () => {
 
         await taskFormCloudComponent.formFields().checkFormIsDisplayed();
         await taskFormCloudComponent.formFields().checkWidgetIsVisible('DropdownOptions');
-        await dropdown.selectOption('option2', 'dropdown-cloud-widget mat-select');
+        await dropdown.selectOption('option2', `dropdown-cloud-widget ${materialLocators.Select.root}`);
 
         await expect(await dropdown.getSelectedOptionText('DropdownOptions')).toBe('option2');
 

e2e/process-services-cloud/pages/tasks-cloud-demo.page.ts

@@ -21,13 +21,14 @@ import {
     TaskListCloudComponentPage,
     BrowserActions,
     TestElement,
-    DataTableComponentPage
+    DataTableComponentPage,
+    materialLocators
 } from '@alfresco/adf-testing';
 
 export class TasksCloudDemoPage {
     createButton = TestElement.byCss('button[data-automation-id="create-button"');
     newTaskButton = TestElement.byCss('button[data-automation-id="btn-start-task"]');
-    spinner = TestElement.byTag('mat-progress-spinner');
+    spinner = TestElement.byTag(materialLocators.Progress.spinner.root);
 
     editTaskFilterCloud = new EditTaskFilterCloudComponentPage();
     taskFilterCloudComponent = new TaskFiltersCloudComponentPage();

e2e/process-services/pages/attach-form.page.ts

@@ -16,7 +16,7 @@
  */
 
 import { $ } from 'protractor';
-import { BrowserVisibility, BrowserActions, DropdownPage } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, DropdownPage, materialLocators } from '@alfresco/adf-testing';
 
 export class AttachFormPage {
 
@@ -25,7 +25,7 @@ export class AttachFormPage {
     completeButton = $('#adf-attach-form-complete-button');
     formDropdown = $('#form_id');
     cancelButton = $('#adf-attach-form-cancel-button');
-    defaultTitle = $('.mat-card-title');
+    defaultTitle = $(materialLocators.Card.title.class);
     attachFormDropdown = new DropdownPage($('.adf-attach-form-row'));
 
     async checkAttachFormButtonIsDisplayed(): Promise<void> {

e2e/process-services/pages/dialog/start-task-dialog.page.ts

@@ -16,7 +16,7 @@
  */
 
 import { element, by, Key, ElementFinder, $ } from 'protractor';
-import { BrowserVisibility, BrowserActions, DropdownPage } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, DropdownPage, materialLocators } from '@alfresco/adf-testing';
 
 export class StartTaskDialogPage {
 
@@ -28,7 +28,7 @@ export class StartTaskDialogPage {
     startButtonEnabled = $('button[id="button-start"]:not(disabled)');
     cancelButton = $('button[id="button-cancel"]');
 
-    selectFormDropdown = new DropdownPage($('mat-select[id="form_id"]'));
+    selectFormDropdown = new DropdownPage($(`${materialLocators.Select.root}[id="form_id"]`));
     selectAssigneeDropdown = new DropdownPage();
 
     async addName(userName: string): Promise<void> {
@@ -86,7 +86,7 @@ export class StartTaskDialogPage {
         await locator.sendKeys(Key.TAB);
     }
 
-    async checkValidationErrorIsDisplayed(error: string, elementRef = 'mat-error'): Promise<void> {
+    async checkValidationErrorIsDisplayed(error: string, elementRef = materialLocators.Error.root): Promise<void> {
         const errorElement = element(by.cssContainingText(elementRef, error));
         await BrowserVisibility.waitUntilElementIsVisible(errorElement);
     }

e2e/process-services/pages/process-details.page.ts

@@ -16,11 +16,11 @@
  */
 
 import { protractor } from 'protractor';
-import { ProcessInstanceHeaderPage, TestElement } from '@alfresco/adf-testing';
+import { ProcessInstanceHeaderPage, TestElement, materialLocators } from '@alfresco/adf-testing';
 
 export class ProcessDetailsPage {
     processInstanceHeaderPage = new ProcessInstanceHeaderPage();
-    processTitle = TestElement.byCss('.mat-card-title');
+    processTitle = TestElement.byCss(materialLocators.Card.title.class);
     processDetailsMessage = TestElement.byCss('adf-process-instance-details div');
     showDiagramButtonDisabled = TestElement.byCss('button[id="show-diagram-button"][disabled]');
     propertiesList = TestElement.byCss('.adf-property-list');

e2e/process-services/pages/process-list-demo.page.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { BrowserActions, BrowserVisibility, DataTableComponentPage, DropdownPage } from '@alfresco/adf-testing';
+import { BrowserActions, BrowserVisibility, DataTableComponentPage, DropdownPage, materialLocators } from '@alfresco/adf-testing';
 import { $, by, element, protractor } from 'protractor';
 
 export class ProcessListDemoPage {
@@ -26,8 +26,8 @@ export class ProcessListDemoPage {
     processDefinitionInput = $('input[data-automation-id="process-definition-id"]');
     processInstanceInput = $('input[data-automation-id="process-instance-id"]');
 
-    stateDropdown = new DropdownPage($('mat-select[data-automation-id="state"]'));
-    sortDropdown = new DropdownPage($('mat-select[data-automation-id="sort"]'));
+    stateDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="state"]`));
+    sortDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="sort"]`));
 
     dataTable = new DataTableComponentPage();
 
@@ -55,7 +55,7 @@ export class ProcessListDemoPage {
     }
 
     async checkErrorMessageIsDisplayed(error: string): Promise<void> {
-        const errorMessage = element(by.cssContainingText('mat-error', error));
+        const errorMessage = element(by.cssContainingText(materialLocators.Error.root, error));
         await BrowserVisibility.waitUntilElementIsVisible(errorMessage);
     }
 

e2e/process-services/pages/process-service-tab-bar.page.ts

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, materialLocators } from '@alfresco/adf-testing';
 import { element, by, browser } from 'protractor';
 
 export class ProcessServiceTabBarPage {
 
-    tasksButton = element.all(by.cssContainingText('div[class*="mat-tab-label"] .mat-tab-labels div', 'Tasks')).first();
-    processButton = element.all(by.cssContainingText('div[class*="mat-tab-label"] .mat-tab-labels div', 'Process')).first();
-    reportsButton = element.all(by.cssContainingText('div[class*="mat-tab-label"] .mat-tab-labels div', 'Reports')).first();
-    reportsButtonSelected = element.all(by.cssContainingText('div[class*="mat-tab-label"] .mat-tab-labels div[aria-selected="true"]', 'Reports')).first();
+    tasksButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Tasks')).first();
+    processButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Process')).first();
+    reportsButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Reports')).first();
+    reportsButtonSelected = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div[aria-selected="true"]`, 'Reports')).first();
 
     async clickTasksButton(): Promise<void> {
         await BrowserActions.click(this.tasksButton);

e2e/process-services/pages/process-services.page.ts

@@ -18,16 +18,16 @@
 import { ProcessServiceTabBarPage } from './process-service-tab-bar.page';
 
 import { browser, $, ElementFinder } from 'protractor';
-import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, materialLocators } from '@alfresco/adf-testing';
 import { TasksPage } from './tasks.page';
 
 export class ProcessServicesPage {
 
     apsAppsContainer = $('.adf-app-listgrid');
-    iconTypeLocator = 'mat-icon[class*="card-logo-icon"]';
-    descriptionLocator = 'mat-card-subtitle[class*="subtitle"]';
+    iconTypeLocator = `${materialLocators.Icon.root}[class*="card-logo-icon"]`;
+    descriptionLocator = `${materialLocators.Card.subtitle.root}[class*="subtitle"]`;
 
-    getApplicationNameLocator = (name: string): ElementFinder => $(`mat-card[title="${name}"]`);
+    getApplicationNameLocator = (name: string): ElementFinder => $(`${materialLocators.Card.root}[title="${name}"]`);
 
     async checkApsContainer(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.apsAppsContainer);

e2e/process-services/pages/task-details.page.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { BrowserActions, BrowserVisibility, DropdownPage, TabsPage } from '@alfresco/adf-testing';
+import { BrowserActions, BrowserVisibility, DropdownPage, TabsPage, materialLocators } from '@alfresco/adf-testing';
 import { browser, by, element, Key, $, $$ } from 'protractor';
 
 export class TaskDetailsPage {
@@ -201,7 +201,7 @@ export class TaskDetailsPage {
 
     async updateDueDate(): Promise<void> {
         await BrowserActions.click(this.dueDateField);
-        await BrowserActions.click($$('.mat-datetimepicker-calendar-body-cell').first());
+        await BrowserActions.click($$(materialLocators.DatetimePicker.calendar.body.cell.class).first());
         await browser.sleep(1000);
     }
 

e2e/process-services/pages/task-list-demo.page.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { BrowserActions, BrowserVisibility, DropdownPage, PaginationPage } from '@alfresco/adf-testing';
+import { BrowserActions, BrowserVisibility, DropdownPage, PaginationPage, materialLocators } from '@alfresco/adf-testing';
 import { $ } from 'protractor';
 import { TasksListPage } from './tasks-list.page';
 
@@ -24,18 +24,18 @@ export class TaskListDemoPage {
     taskListPage = new TasksListPage();
     appId = $('input[data-automation-id=\'appId input\']');
     itemsPerPage = $('input[data-automation-id=\'items per page\']');
-    itemsPerPageForm = $('mat-form-field[data-automation-id=\'items per page\']');
+    itemsPerPageForm = $(`${materialLocators.Form.field.root}[data-automation-id=\'items per page\']`);
     processDefinitionId = $('input[data-automation-id=\'process definition id\']');
     processInstanceId = $('input[data-automation-id=\'process instance id\']');
     page = $('input[data-automation-id=\'page\']');
-    pageForm = $('mat-form-field[data-automation-id=\'page\']');
+    pageForm = $(`${materialLocators.Form.field.root}[data-automation-id=\'page\']`);
     taskName = $('input[data-automation-id=\'task name\']');
     resetButton = $('.app-reset-button button');
     dueBefore = $('input[data-automation-id=\'due before\']');
     dueAfter = $('input[data-automation-id=\'due after\']');
     taskId = $('input[data-automation-id=\'task id\']');
 
-    stateDropDownArrow = $('mat-form-field[data-automation-id=\'state\']');
+    stateDropDownArrow = $(`${materialLocators.Form.field.root}[data-automation-id=\'state\']`);
     stateDropdown = new DropdownPage(this.stateDropDownArrow);
 
     taskList(): TasksListPage {
@@ -93,7 +93,7 @@ export class TaskListDemoPage {
 
     async getItemsPerPageFieldErrorMessage(): Promise<string> {
         await BrowserVisibility.waitUntilElementIsVisible(this.itemsPerPageForm);
-        const errorMessage = this.itemsPerPageForm.$('mat-error');
+        const errorMessage = this.itemsPerPageForm.$(materialLocators.Error.root);
         return BrowserActions.getText(errorMessage);
     }
 
@@ -103,7 +103,7 @@ export class TaskListDemoPage {
 
     async getPageFieldErrorMessage(): Promise<string> {
         await BrowserVisibility.waitUntilElementIsVisible(this.pageForm);
-        const errorMessage = this.pageForm.$('mat-error');
+        const errorMessage = this.pageForm.$(materialLocators.Error.root);
         return BrowserActions.getText(errorMessage);
     }
 

e2e/process-services/pages/tasks.page.ts

@@ -22,18 +22,18 @@ import { FiltersPage } from './filters.page';
 import { ChecklistDialog } from './dialog/create-checklist-dialog.page';
 import { TasksListPage } from './tasks-list.page';
 import { $, by, element } from 'protractor';
-import { BrowserActions, BrowserVisibility, FormFields } from '@alfresco/adf-testing';
+import { BrowserActions, BrowserVisibility, FormFields, materialLocators } from '@alfresco/adf-testing';
 
 export class TasksPage {
     createButton = $('button[data-automation-id="create-button"');
     addChecklistButton = $('button[class*="adf-add-to-checklist-button"]');
-    rowByRowName = by.xpath('ancestor::mat-chip');
+    rowByRowName = by.xpath(`ancestor::${materialLocators.Chip.root}`);
     checklistContainer = $('div[class*="checklist-menu"]');
     taskTitle = '.adf-activiti-task-details__header span';
     completeButtonNoForm = $('#adf-no-form-complete-button');
     checklistDialog = $('#checklist-dialog');
     checklistNoMessage = $('#checklist-none-message');
-    numberOfChecklists = $('[data-automation-id="checklist-label"] mat-chip');
+    numberOfChecklists = $(`[data-automation-id="checklist-label"] ${materialLocators.Chip.root}`);
 
     async createNewTask(): Promise<StartTaskDialogPage> {
         await this.clickOnCreateButton();
@@ -132,13 +132,13 @@ export class TasksPage {
     async removeChecklists(name: string): Promise<void> {
         const elem = this.getRowsName(name);
         const row = elem.element(this.rowByRowName);
-        await BrowserActions.click(row.$('mat-icon'));
+        await BrowserActions.click(row.$(materialLocators.Icon.root));
     }
 
     async checkChecklistsRemoveButtonIsNotDisplayed(name: string): Promise<void> {
         const elem = this.getRowsName(name);
         const row = elem.element(this.rowByRowName);
-        await BrowserVisibility.waitUntilElementIsNotVisible(row.$('mat-icon'));
+        await BrowserVisibility.waitUntilElementIsNotVisible(row.$(materialLocators.Icon.root));
     }
 
     async clickSortByNameAsc(): Promise<any> {

e2e/search/pages/search-bar.page.ts

@@ -16,17 +16,17 @@
  */
 
 import { ElementFinder, protractor, $ } from 'protractor';
-import { BrowserVisibility, BrowserActions, TestElement } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, TestElement, materialLocators } from '@alfresco/adf-testing';
 
 export class SearchBarPage {
     searchIcon = $(`button[class*='adf-search-button']`);
     searchBar = $(`adf-search-control input`);
-    searchBarExpanded: TestElement = TestElement.byCss(`adf-search-control mat-form-field[class*="mat-focused"] input`);
+    searchBarExpanded = TestElement.byCss(`adf-search-control ${materialLocators.Form.field.root}[class*="${materialLocators.Focused.root}"] input`);
     noResultMessage = $(`p[class*='adf-search-fixed-text']`);
-    rowsAuthor = `.mat-list-text p[class*='adf-search-fixed-text']`;
+    rowsAuthor = `${materialLocators.List.text.class} p[class*='adf-search-fixed-text']`;
     completeName = `h4[class*='adf-search-fixed-text']`;
     highlightName = `.adf-highlight`;
-    searchBarPage = $(`mat-list[id='autocomplete-search-result-list']`);
+    searchBarPage = $(`${materialLocators.List.root}[id='autocomplete-search-result-list']`);
 
     getRowByRowName = (name: string): ElementFinder => $(`[data-automation-id='autocomplete_for_${name}']`);