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-playwright/page-object/components/basic/index.ts

@@ -15,6 +15,4 @@
  * limitations under the License.
  */
 
-export * from './error.component';
 export * from './listbox.component';
-export * from './validation.component';

e2e-playwright/page-object/components/index.ts

@@ -15,5 +15,6 @@
  * limitations under the License.
  */
 
+export * from './material';
 export * from './basic';
 export * from './base.component';

e2e-playwright/page-object/components/material/error.component.ts

@@ -17,9 +17,10 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
+import { materialLocators } from './material-locators';
 
 export class ErrorComponent extends BaseComponent {
-    private static rootElement = 'mat-error';
+    private static rootElement = materialLocators.Error.root;
     public content = this.getChild('');
 
     constructor(page: Page) {

e2e-playwright/page-object/components/material/index.ts

@@ -0,0 +1,19 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './error.component';
+export * from './validation.component';

e2e-playwright/page-object/components/material/material-locators.ts

@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const materialLocators = {
+  Error: {
+    root: 'mat-error'
+  },
+  Tooltip: {
+    root: 'mat-tooltip-component'
+  }
+};

e2e-playwright/page-object/components/material/validation.component.ts

@@ -17,9 +17,10 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
+import { materialLocators } from './material-locators';
 
 export class TooltipComponent extends BaseComponent {
-    private static rootElement = 'mat-tooltip-component';
+    private static rootElement = materialLocators.Tooltip.root;
     public content = this.getChild('div');
 
     constructor(page: Page) {

e2e-playwright/process-services-cloud/components/group.component.ts

@@ -17,7 +17,7 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class GroupComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-group';

e2e-playwright/process-services-cloud/components/people.component.ts

@@ -17,7 +17,7 @@
 
 import { Page } from '@playwright/test';
 import { BaseComponent } from '../../page-object/components/base.component';
-import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
 
 export class PeopleComponent extends BaseComponent {
     private static rootElement = 'adf-cloud-people';

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']`);
+    expandedAspect = $(`${materialLocators.Expansion.panel.header.root}[aria-expanded='true']`);
-    aspectTitle = `mat-panel-title`;
+    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"]'));
+    stateDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="state"]`));
-    sortDropdown = new DropdownPage($('mat-select[data-automation-id="sort"]'));
+    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();
+    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*="mat-tab-label"] .mat-tab-labels div', 'Process')).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*="mat-tab-label"] .mat-tab-labels div', 'Reports')).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*="mat-tab-label"] .mat-tab-labels div[aria-selected="true"]', '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"]';
+    iconTypeLocator = `${materialLocators.Icon.root}[class*="card-logo-icon"]`;
-    descriptionLocator = 'mat-card-subtitle[class*="subtitle"]';
+    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}']`);
 

lib/testing/src/lib/protractor/core/dialog/edit-json-dialog.ts

@@ -18,12 +18,13 @@
 import { $, by, element } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
+import { materialLocators } from '../public-api';
 
 export class EditJsonDialog {
 
     dialog = $(`.adf-edit-json-dialog`);
     closeButton = element(by.cssContainingText(`button span`, 'Close'));
-    dialogContent = this.dialog.$(`mat-dialog-content textarea`);
+    dialogContent = this.dialog.$(`${materialLocators.Dialog.content.root} textarea`);
 
     async checkDialogIsDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.dialog);

lib/testing/src/lib/protractor/core/pages/card-view/card-view-boolean-item.page.ts

@@ -17,12 +17,13 @@
 
 import { element, by, ElementFinder } from 'protractor';
 import { BrowserActions, BrowserVisibility } from '../../utils/public-api';
+import { materialLocators } from '../public-api';
 
 export class CardBooleanItemPage {
 
     rootElement: ElementFinder;
     labelLocator = 'div[data-automation-id*="card-boolean-label"]';
-    checkbox = 'mat-checkbox[data-automation-id*="card-boolean"]';
+    checkbox = `${materialLocators.Checkbox.root}[data-automation-id*="card-boolean"]`;
 
     constructor(label: string = 'required') {
         this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-boolitem`));

lib/testing/src/lib/protractor/core/pages/card-view/card-view-date-item.page.ts

@@ -19,6 +19,7 @@ import { element, by, ElementFinder, $$ } from 'protractor';
 import { DateTimePickerPage } from '../material/date-time-picker.page';
 import { DatePickerPage } from '../material/date-picker.page';
 import { BrowserVisibility } from '../../utils/browser-visibility';
+import { materialLocators } from '../public-api';
 
 export class CardDateItemPage {
 
@@ -28,7 +29,7 @@ export class CardDateItemPage {
 
     labelLocator = 'label[data-automation-id*="card-dateitem-label"]';
     valueLocator = 'span[data-automation-id*="card-date"]';
-    dateTimePicker = $$('.mat-datetimepicker-toggle').first();
+    dateTimePicker = $$(materialLocators.DatetimePicker.toggle.class).first();
     saveButton = 'button[data-automation-id*="card-dateitem-update"]';
 
     constructor(label: string = 'minDate') {

lib/testing/src/lib/protractor/core/pages/card-view/card-view-select-item.page.ts

@@ -18,6 +18,7 @@
 import { element, by, ElementFinder } from 'protractor';
 import { BrowserActions, BrowserVisibility } from '../../utils/public-api';
 import { DropdownPage } from '../material/dropdown.page';
+import { materialLocators } from '../public-api';
 
 export class CardSelectItemPage {
 
@@ -28,7 +29,7 @@ export class CardSelectItemPage {
 
     constructor(label: string = 'fileSource') {
         this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-selectitem`));
-        this.dropdown = new DropdownPage(this.rootElement.$('mat-select'));
+        this.dropdown = new DropdownPage(this.rootElement.$(materialLocators.Select.root));
     }
 
     async checkLabelIsPresent(): Promise<void> {

lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts

@@ -17,6 +17,7 @@
 
 import { element, by, ElementFinder, Key } from 'protractor';
 import { BrowserActions, BrowserVisibility } from '../../utils/public-api';
+import { materialLocators } from '../public-api';
 export class CardTextItemPage {
 
     rootElement: ElementFinder;
@@ -30,7 +31,7 @@ export class CardTextItemPage {
     readOnlyField = '.adf-property-read-only';
 
     constructor(label: string = 'assignee') {
-        this.rootElement = element(by.xpath(`//mat-label[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
+        this.rootElement = element(by.xpath(`//${materialLocators.Label.root}[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
     }
 
     async getFieldValue(): Promise<string> {

lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts

@@ -19,6 +19,7 @@ import { browser, by, element, protractor, ElementFinder, ElementArrayFinder, $,
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { BrowserActions } from '../utils/browser-actions';
 import { Logger } from '../utils/logger';
+import { materialLocators } from './public-api';
 
 const MAX_LOADING_TIME = 120000;
 
@@ -49,7 +50,7 @@ export class DataTableComponentPage {
         this.mainMenuButton = this.rootElement.$('[data-automation-id="adf-datatable-main-menu-button"]');
         this.selectedRowNumber = this.rootElement.$(`adf-datatable-row[class*='is-selected'] div[data-automation-id*='text_']`);
         this.allSelectedRows = this.rootElement.$$(`adf-datatable-row[class*='is-selected']`);
-        this.selectAll = this.rootElement.$(`div[class*='adf-datatable-header'] mat-checkbox`);
+        this.selectAll = this.rootElement.$(`div[class*='adf-datatable-header'] ${materialLocators.Checkbox.root}`);
         this.emptyList = this.rootElement.$(`adf-empty-content`);
         this.emptyListTitle = this.rootElement.$(`.adf-empty-content__title`);
         this.emptyListSubtitle = this.rootElement.$(`.adf-empty-content__subtitle`);
@@ -89,7 +90,7 @@ export class DataTableComponentPage {
     }
 
     getRowCheckbox(columnName: string, columnValue: string): ElementFinder {
-        return this.getRow(columnName, columnValue).$('mat-checkbox');
+        return this.getRow(columnName, columnValue).$(materialLocators.Checkbox.root);
     }
 
     async checkNoRowIsSelected(): Promise<void> {
@@ -349,7 +350,7 @@ export class DataTableComponentPage {
     async waitTillContentLoaded(): Promise<void> {
         if (await this.isSpinnerPresent()) {
             Logger.log('wait datatable loading spinner disappear');
-            await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME);
+            await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
 
             if (await this.isEmpty()) {
                 Logger.log('empty page');
@@ -362,8 +363,8 @@ export class DataTableComponentPage {
         } else {
             try {
                 Logger.log('wait datatable loading spinner is present');
-                await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(by.tagName('mat-progress-spinner')), 2000);
+                await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), 2000);
-                await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME);
+                await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
             } catch (error) {
             }
 
@@ -380,7 +381,7 @@ export class DataTableComponentPage {
 
         if (await this.isInfiniteSpinnerPresent()) {
             Logger.log('wait datatable loading spinner disappear');
-            await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName('mat-progress-bar')));
+            await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName(materialLocators.Progress.bar.root)));
 
             if (await this.isEmpty()) {
                 Logger.log('empty page');
@@ -390,7 +391,7 @@ export class DataTableComponentPage {
         } else {
             try {
                 Logger.log('wait datatable loading spinner is present');
-                await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName('mat-progress-bar')));
+                await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName(materialLocators.Progress.bar.root)));
             } catch (error) {
             }
             if (await this.isEmpty()) {
@@ -460,7 +461,7 @@ export class DataTableComponentPage {
     }
 
     async clickRowByContentCheckbox(name: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/label/mat-checkbox`));
+        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/label/${materialLocators.Checkbox.root}`));
         browser.actions().mouseMove(resultElement);
         await BrowserActions.click(resultElement);
     }
@@ -506,7 +507,7 @@ export class DataTableComponentPage {
         let isSpinnerPresent;
 
         try {
-            isSpinnerPresent = await this.rootElement.element(by.tagName('mat-progress-spinner')).isDisplayed();
+            isSpinnerPresent = await this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)).isDisplayed();
         } catch (error) {
             isSpinnerPresent = false;
         }
@@ -518,7 +519,7 @@ export class DataTableComponentPage {
         let isSpinnerPresent;
 
         try {
-            isSpinnerPresent = await this.rootElement.element(by.tagName('mat-progress-bar')).isDisplayed();
+            isSpinnerPresent = await this.rootElement.element(by.tagName(materialLocators.Progress.bar.root)).isDisplayed();
         } catch (error) {
             isSpinnerPresent = false;
         }

lib/testing/src/lib/protractor/core/pages/form/form-fields.ts

@@ -18,13 +18,14 @@
 import { browser, Locator, by, element, ElementFinder, $, $$ } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../utils/public-api';
 import { DropdownPage } from '../material/dropdown.page';
+import { materialLocators } from '../public-api';
 
 export class FormFields {
 
-    selectFormDropdown = new DropdownPage($$('.adf-attach-form .mat-select-arrow').first());
+    selectFormDropdown = new DropdownPage($$(`.adf-attach-form ${materialLocators.Select.arrow.class}`).first());
     formContent = $('adf-form-renderer');
-    refreshButton = $('div[class*="form-reload-button"] mat-icon');
+    refreshButton = $(`div[class*="form-reload-button"] ${materialLocators.Icon.root}`);
-    saveButton = element(by.cssContainingText('mat-card-actions[class*="adf-for"] span', 'SAVE'));
+    saveButton = element(by.cssContainingText(`${materialLocators.Card.actions}[class*="adf-for"] span`, 'SAVE'));
     valueLocator: Locator = by.css('input');
     labelLocator: Locator = by.css('label');
     noFormMessage = $('.adf-empty-content__title');

lib/testing/src/lib/protractor/core/pages/form/form.page.ts

@@ -18,11 +18,12 @@
 import { element, by, $ } from 'protractor';
 import { BrowserVisibility } from '../../utils/browser-visibility';
 import { BrowserActions } from '../../utils/public-api';
+import { materialLocators } from '../public-api';
 
 export class FormPage {
 
     errorLog = $('div[class*="console"]');
-    saveButton = element(by.cssContainingText('mat-card-actions[class*="adf-for"] span', 'SAVE'));
+    saveButton = element(by.cssContainingText(`${materialLocators.Card.actions}[class*="adf-for"] span`, 'SAVE'));
 
     async checkErrorMessageForWidgetIsDisplayed(errorMessage: string): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText('.adf-error-text', errorMessage)));

lib/testing/src/lib/protractor/core/pages/form/widgets/attach-file-widget.page.ts

@@ -19,6 +19,7 @@ import { FormFields } from '../form-fields';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
 import { by, browser, $ } from 'protractor';
 import { TestElement } from '../../../test-element';
+import { materialLocators } from '../../public-api';
 
 export class AttachFileWidgetPage {
 
@@ -27,11 +28,11 @@ export class AttachFileWidgetPage {
     localStorageButton = $('input[id="attachfile"]');
     filesListLocator = 'div[data-automation-id="adf-attach-widget-readonly-list"]';
     attachFileWidget = $('#attachfile');
-    attachedFileMenu = $('mat-list-item button');
+    attachedFileMenu = $(`${materialLocators.List.item.root} button`);
-    attachedFileOptions = $('.mat-menu-panel .mat-menu-content');
+    attachedFileOptions = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class}`);
-    viewFileOptionButton = $(`.mat-menu-panel .mat-menu-content button[id$="show-file"]`);
+    viewFileOptionButton = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="show-file"]`);
-    downloadFileOptionButton = $(`.mat-menu-panel .mat-menu-content button[id$="download-file"]`);
+    downloadFileOptionButton = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="download-file"]`);
-    removeFileOptionButton = TestElement.byCss(`.mat-menu-panel .mat-menu-content button[id$="remove"]`);
+    removeFileOptionButton = TestElement.byCss(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="remove"]`);
 
     async attachFile(fieldId: string, fileLocation: string): Promise<void> {
         const widget = await this.formFields.getWidget(fieldId);
@@ -43,7 +44,7 @@ export class AttachFileWidgetPage {
 
     async checkNoFileIsAttached(fieldId: string): Promise<void> {
         const widget = await this.formFields.getWidget(fieldId);
-        const fileItem = widget.$(this.filesListLocator).$('mat-list-item');
+        const fileItem = widget.$(this.filesListLocator).$(materialLocators.List.item.root);
         await BrowserVisibility.waitUntilElementIsNotVisible(fileItem);
     }
 
@@ -70,7 +71,7 @@ export class AttachFileWidgetPage {
     }
 
     async viewFile(name: string): Promise<void> {
-        const fileView = $(this.filesListLocator).element(by.cssContainingText('mat-list-item span ', name));
+        const fileView = $(this.filesListLocator).element(by.cssContainingText(`${materialLocators.List.item.root} span `, name));
         await BrowserActions.click(fileView);
         await browser.actions().doubleClick(fileView).perform();
     }
@@ -164,6 +165,6 @@ export class AttachFileWidgetPage {
 
     private async getFileAttachedNotAttachedLocator(fieldId: string, name: string) {
         const widget = await this.formFields.getWidget(fieldId);
-        return widget.$(this.filesListLocator).element(by.cssContainingText('mat-list-item span span span', name));
+        return widget.$(this.filesListLocator).element(by.cssContainingText(`${materialLocators.List.item.root} span span span`, name));
     }
 }

lib/testing/src/lib/protractor/core/pages/form/widgets/checkbox-widget.page.ts

@@ -18,19 +18,20 @@
 import { FormFields } from '../form-fields';
 import { BrowserActions } from '../../../utils/public-api';
 import { $$, $ } from 'protractor';
+import { materialLocators } from '../../public-api';
 
 export class CheckboxWidgetPage {
 
     formFields = new FormFields();
-    checkboxLabel = $('span[class*="mat-checkbox-label"]');
+    checkboxLabel = $(`span[class*="${materialLocators.Checkbox.label.root}"]`);
-    checkboxLocator = ('mat-checkbox');
+    checkboxLocator = materialLocators.Checkbox.root;
 
     getCheckboxLabel(): Promise<string> {
         return BrowserActions.getText(this.checkboxLabel);
     }
 
     async clickCheckboxInput(fieldId: string): Promise<void> {
-        const checkboxInput = $$(`mat-checkbox[id="${fieldId}"] span`).first();
+        const checkboxInput = $$(`${this.checkboxLocator}[id="${fieldId}"] span`).first();
         await BrowserActions.click(checkboxInput);
     }
 
@@ -45,6 +46,6 @@ export class CheckboxWidgetPage {
     async isCheckboxChecked(fieldId: string): Promise<boolean> {
         const checkboxWidget = await (await this.formFields.getWidget(fieldId)).$(this.checkboxLocator);
         const attributeValue =  await BrowserActions.getAttribute(checkboxWidget, 'class');
-        return attributeValue.includes('mat-checkbox-checked');
+        return attributeValue.includes(materialLocators.Checkbox.checked.root);
     }
 }

lib/testing/src/lib/protractor/core/pages/form/widgets/date-time-widget.page.ts

@@ -18,6 +18,7 @@
 import { FormFields } from '../form-fields';
 import { element, by, $ } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class DateTimeWidgetPage {
 
@@ -52,7 +53,7 @@ export class DateTimeWidgetPage {
     }
 
     async selectDay(day: string): Promise<void> {
-        const selectedDay = element(by.cssContainingText('div[class*="mat-datetimepicker-calendar-body-cell-content"]', day));
+        const selectedDay = element(by.cssContainingText(`div[class*="${materialLocators.DatetimePicker.calendar.body.cell.root}"]`, day));
         await BrowserActions.click(selectedDay);
     }
 
@@ -61,7 +62,7 @@ export class DateTimeWidgetPage {
     }
 
     async selectTime(time: string): Promise<void> {
-        const selectedTime = element.all(by.cssContainingText('div[class*="mat-datetimepicker-clock-cell"]', time)).first();
+        const selectedTime = element.all(by.cssContainingText(`div[class*="${materialLocators.DatetimePicker.clock.cell()}"]`, time)).first();
         await BrowserActions.click(selectedTime);
     }
 

lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts

@@ -18,6 +18,7 @@
 import { FormFields } from '../form-fields';
 import { $, by, protractor } from 'protractor';
 import { TestElement } from '../../../test-element';
+import { materialLocators } from '../../public-api';
 
 export class DropdownWidgetPage {
 
@@ -26,12 +27,12 @@ export class DropdownWidgetPage {
     readonly searchElementLocator = TestElement.byCss('[aria-label="Search options"]');
 
     async getSelectedOptionText(fieldId: string = 'dropdown'): Promise<string> {
-        return this.formFields.getFieldText(fieldId, by.css(`mat-select[id="${fieldId}"] span span`));
+        return this.formFields.getFieldText(fieldId, by.css(`${materialLocators.Select.root}[id="${fieldId}"] span span`));
     }
 
     async selectOption(option: string, locator: string = '#dropdown'): Promise<void> {
         await this.openDropdown(locator);
-        const row = TestElement.byText('mat-option span', option);
+        const row = TestElement.byText(`${materialLocators.Option.root} span`, option);
         await row.click();
     }
 
@@ -79,7 +80,7 @@ export class DropdownWidgetPage {
     }
 
     private async clickOption(name: string): Promise<void> {
-        const optionLocator = TestElement.byText('mat-option span', name);
+        const optionLocator = TestElement.byText(`${materialLocators.Option.root} span`, name);
         await optionLocator.click();
     }
 }

lib/testing/src/lib/protractor/core/pages/form/widgets/dynamic-table-widget.page.ts

@@ -18,6 +18,7 @@
 import { FormFields } from '../form-fields';
 import { Locator, by, element, protractor, $, $$ } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class DynamicTableWidgetPage {
     formFields = new FormFields();
@@ -28,11 +29,11 @@ export class DynamicTableWidgetPage {
     editButton = element(by.cssContainingText('button span', 'edit'));
     columnDateTime = $('#columnDateTime');
     columnDate = $('#columnDate');
-    calendarHeader = $('.mat-datetimepicker-calendar-header-date-time');
+    calendarHeader = $(materialLocators.DatetimePicker.calendar.header.date.time);
-    calendarContent = $('.mat-datetimepicker-calendar-content');
+    calendarContent = $(materialLocators.DatetimePicker.calendar.content);
     saveButton = element(by.cssContainingText('button span', 'Save'));
     errorMessage = $('.adf-error-text');
-    dateWidget = $$('mat-datepicker-toggle button').first();
+    dateWidget = $$(`${materialLocators.DatetimePicker.toggle.root} button`).first();
     tableRow = $$('tbody tr');
 
     getFieldLabel(fieldId: string): Promise<string> {

lib/testing/src/lib/protractor/core/pages/form/widgets/group-widget.page.ts

@@ -18,13 +18,14 @@
 import { FormFields } from '../form-fields';
 import { Locator, by, element, $ } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class GroupWidgetPage {
 
     groupField = $('input[data-automation-id="adf-group-search-input"]');
     firstResult = $('#adf-group-widget-user-0');
     formFields = new FormFields();
-    groupDropDownList: Locator = by.css('.mat-autocomplete-panel');
+    groupDropDownList: Locator = by.css(materialLocators.Autocomplete.panel.class);
 
     getFieldLabel(fieldId: string): Promise<string> {
         return this.formFields.getFieldLabel(fieldId);

lib/testing/src/lib/protractor/core/pages/form/widgets/radio-buttons-widget.page.ts

@@ -18,10 +18,11 @@
 import { FormFields } from '../form-fields';
 import { $$, by, Locator } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class RadioButtonsWidgetPage {
 
-    selectedOption: Locator = by.css('mat-radio-button[ng-pristine]');
+    selectedOption: Locator = by.css(`${materialLocators.Radio.button.root}[ng-pristine]`);
 
     formFields: FormFields = new FormFields();
 

lib/testing/src/lib/protractor/core/pages/form/widgets/tab.page.ts

@@ -18,24 +18,25 @@
 import { by, element, $ } from 'protractor';
 import { TestElement } from '../../../test-element';
 import { BrowserActions, BrowserVisibility } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class TabPage {
 
-    changeTabAnimation = $('.mat-tab-labels div[class="mat-ripple-element"]');
+    changeTabAnimation = $(`${materialLocators.Tab.labels.class} div[class="${materialLocators.Ripple.element.root}"]`);
 
     public disabledContentNodeSelectorTabInfoIcon = TestElement.byCss('[data-automation-id="adf-content-node-selector-disabled-tab-info-icon"]');
 
     async clickTabByLabel(tabLabel): Promise<void> {
-        const user = element(by.cssContainingText('.mat-tab-label-content', tabLabel));
+        const user = element(by.cssContainingText(materialLocators.Tab.label.content.class, tabLabel));
         await BrowserActions.click(user);
         await BrowserVisibility.waitUntilElementIsNotVisible(this.changeTabAnimation);
     }
 
     async checkTabIsDisplayedByLabel(tabLabel): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText('.mat-tab-label-content', tabLabel)));
+        await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText(materialLocators.Tab.label.content.class, tabLabel)));
     }
 
     async checkTabIsNotDisplayedByLabel(tabLabel): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText('.mat-tab-label-content', tabLabel)));
+        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText(materialLocators.Tab.label.content.class, tabLabel)));
     }
 }

lib/testing/src/lib/protractor/core/pages/form/widgets/typeahead-widget.page.ts

@@ -18,12 +18,13 @@
 import { FormFields } from '../form-fields';
 import { by, element, $ } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+import { materialLocators } from '../../public-api';
 
 export class TypeaheadWidgetPage {
 
     field = $('input[data-automation-id="adf-typeahed-search-input"]');
     firstResult = $('#adf-typeahed-widget-user-0');
-    groupDropDownList = $('.mat-autocomplete-panel');
+    groupDropDownList = $(materialLocators.Autocomplete.panel.class);
     formFields = new FormFields();
 
     getFieldLabel(fieldId: string): Promise<string> {

lib/testing/src/lib/protractor/core/pages/header.page.ts

@@ -18,20 +18,21 @@
 import { element, by, protractor, browser, $, $$ } from 'protractor';
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { BrowserActions } from '../utils/browser-actions';
+import { materialLocators } from './public-api';
 
 export class HeaderPage {
 
-    checkBox = element(by.cssContainingText('.mat-checkbox-label', 'Show menu button'));
+    checkBox = element(by.cssContainingText(materialLocators.Checkbox.label.class, 'Show menu button'));
     headerColor = $('option[value="primary"]');
     titleInput = $('input[name="title"]');
     iconInput = $('input[placeholder="URL path"]');
     hexColorInput = $('input[placeholder="hex color code"]');
     logoHyperlinkInput = $('input[placeholder="Redirect URL"]');
     logoTooltipInput = $('input[placeholder="Tooltip text"]');
-    positionStart = $$('mat-radio-button[value="start"]').first();
+    positionStart = $$(`${materialLocators.Radio.button.root}[value="start"]`).first();
-    positionEnd = $$('mat-radio-button[value="end"]').first();
+    positionEnd = $$(`${materialLocators.Radio.button.root}[value="end"]`).first();
-    sideBarPositionRight = $('mat-sidenav.mat-drawer.mat-sidenav.mat-drawer-end');
+    sideBarPositionRight = $(`${materialLocators.Sidenav.root}${materialLocators.Drawer.class}${materialLocators.Sidenav.root}${materialLocators.Drawer.end}`);
-    sideBarPositionLeft = $('mat-sidenav.mat-drawer.mat-sidenav');
+    sideBarPositionLeft = $(`${materialLocators.Sidenav.root}${materialLocators.Drawer.class}${materialLocators.Sidenav.root}`);
 
     async checkShowMenuCheckBoxIsDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.checkBox);
@@ -50,7 +51,7 @@ export class HeaderPage {
     }
 
     async clickShowMenuButton(): Promise<void> {
-        const checkBox = $$('mat-checkbox').first();
+        const checkBox = $$(materialLocators.Checkbox.root).first();
         await BrowserActions.click(checkBox);
     }
 

lib/testing/src/lib/protractor/core/pages/material/checkbox.page.ts

@@ -17,19 +17,20 @@
 
 import { ElementFinder } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
+import { materialLocators } from './material-locators';
 
 export class CheckboxPage {
 
     static async uncheck(el: ElementFinder) {
         const classList = await BrowserActions.getAttribute(el, 'class');
-        if (classList && classList.indexOf('mat-checked') > -1) {
+        if (classList && classList.indexOf(materialLocators.Checked.root) > -1) {
             await BrowserActions.click(el);
         }
     }
 
     static async check(el: ElementFinder) {
         const classList = await BrowserActions.getAttribute(el, 'class');
-        if (classList && classList.indexOf('mat-checked') === -1) {
+        if (classList && classList.indexOf(materialLocators.Checked.root) === -1) {
             await BrowserActions.click(el);
         }
     }

lib/testing/src/lib/protractor/core/pages/material/date-picker-calendar.page.ts

@@ -20,21 +20,24 @@ import { BrowserVisibility } from '../../utils/browser-visibility';
 import { BrowserActions } from '../../utils/browser-actions';
 import { TestElement } from '../../test-element';
 import { addDays, format, subDays } from 'date-fns';
+import { materialLocators } from './material-locators';
 
 export class DatePickerCalendarPage {
-    datePicker = $('mat-calendar[id*="mat-datepicker"]');
+    datePicker = $(`${materialLocators.Calendar.root}[id*="${materialLocators.Datepicker.root}"]`);
-    nextMonthButton = $('button[class*="mat-calendar-next-button"]');
+    nextMonthButton = $(`button[class*="${materialLocators.Calendar.button('next')}"]`);
-    previousMonthButton = $('button[class*="mat-calendar-previous-button"]');
+    previousMonthButton = $(`button[class*="${materialLocators.Calendar.button('previous')}"]`);
-    todayDate = TestElement.byCss('div.mat-calendar-body-today');
+    todayDate = TestElement.byCss(`div${materialLocators.Calendar.body.today}`);
-    periodButton = $('button[class*=mat-calendar-period-button]');
+    periodButton = $(`button[class*=${materialLocators.Calendar.button('period')}]`);
+
+    focusedElement = `div${materialLocators.Calendar.body.cell.content.class}${materialLocators.Focus.indicator}`;
 
     async getSelectedDate(): Promise<string> {
-        return BrowserActions.getAttribute($('button[class*="mat-calendar-body-active"]'), 'aria-label');
+        return BrowserActions.getAttribute($(`button[class*="${materialLocators.Calendar.body.active.root}"]`), 'aria-label');
     }
 
     async checkDatesAfterDateAreDisabled(date: Date): Promise<void> {
         const afterDate = format(addDays(date, 1), 'dd-MM-yy');
-        const afterCalendar = $(`td[class*="mat-calendar-body-cell"][aria-label="${afterDate}"]`);
+        const afterCalendar = $(`td[class*="${materialLocators.Calendar.body.cell.root}"][aria-label="${afterDate}"]`);
         if (await afterCalendar.isPresent()) {
             const aria = await BrowserActions.getAttribute(afterCalendar, 'aria-disabled');
             await expect(aria).toBe('true');
@@ -45,7 +48,7 @@ export class DatePickerCalendarPage {
 
     async checkDatesBeforeDateAreDisabled(date: Date): Promise<void> {
         const beforeDate = format(subDays(date, 1), 'dd-MM-yy');
-        const beforeCalendar = $(`td[class*="mat-calendar-body-cell"][aria-label="${beforeDate}"]`);
+        const beforeCalendar = $(`td[class*="${materialLocators.Calendar.body.cell.root}"][aria-label="${beforeDate}"]`);
         if (await beforeCalendar.isPresent()) {
             const aria = await BrowserActions.getAttribute(beforeCalendar, 'aria-disabled');
             await expect(aria).toBe('true');
@@ -74,8 +77,8 @@ export class DatePickerCalendarPage {
     }
 
     async selectDateRange(startDay: number, endDay: number): Promise<void> {
-        const startDayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${startDay}`));
+        const startDayElement = element(by.cssContainingText(this.focusedElement, `${startDay}`));
-        const endDayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${endDay}`));
+        const endDayElement = element(by.cssContainingText(this.focusedElement, `${endDay}`));
         await this.checkDatePickerIsDisplayed();
         await BrowserActions.click(startDayElement);
         await BrowserActions.click(endDayElement);
@@ -100,9 +103,9 @@ export class DatePickerCalendarPage {
         const year = date.getFullYear();
         const month = months[date.getMonth()];
         const day = date.getDate();
-        const yearElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${year}`));
+        const yearElement = element(by.cssContainingText(this.focusedElement, `${year}`));
-        const monthElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${month}`));
+        const monthElement = element(by.cssContainingText(this.focusedElement, `${month}`));
-        const dayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${day}`));
+        const dayElement = element(by.cssContainingText(this.focusedElement, `${day}`));
 
         await BrowserActions.click(this.periodButton);
         await BrowserActions.click(yearElement);

lib/testing/src/lib/protractor/core/pages/material/date-picker.page.ts

@@ -18,6 +18,7 @@
 import { $, ElementFinder } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
 import { DatePickerCalendarPage } from './date-picker-calendar.page';
+import { materialLocators } from './material-locators';
 
 export class DatePickerPage {
 
@@ -25,7 +26,7 @@ export class DatePickerPage {
     dateTime = new DatePickerCalendarPage();
 
     constructor(datePickerElement?: ElementFinder) {
-        const locator = $('.mat-datepicker-toggle');
+        const locator = $(materialLocators.Datepicker.toggle.class);
         this.datePicker = datePickerElement ? datePickerElement : locator;
     }
 

lib/testing/src/lib/protractor/core/pages/material/date-time-picker-calendar.page.ts

@@ -18,18 +18,18 @@
 import { element, by, $, $$ } from 'protractor';
 import { BrowserVisibility } from '../../utils/browser-visibility';
 import { BrowserActions } from '../../utils/browser-actions';
+import { materialLocators } from './material-locators';
 
 export class DateTimePickerCalendarPage {
 
     datePicker = $(`[class*='picker-content']`);
     today = $(`[class*='calendar-body-today']`);
-    timePicker = $('.mat-datetimepicker-clock');
+    timePicker = $(materialLocators.DatetimePicker.clock.class);
-    hourTime = $$('.mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell').first();
+    hourTime = $$(`${materialLocators.DatetimePicker.clock.hours.class} .${materialLocators.DatetimePicker.clock.cell()}`).first();
-    minutesTime = $$('.mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell').first();
+    minutesTime = $$(`${materialLocators.DatetimePicker.clock.minutes.class} .${materialLocators.DatetimePicker.clock.cell()}`).first();
-    firstEnabledHourSelector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)';
+    firstEnabledSelector = `.${materialLocators.DatetimePicker.clock.cell()}:not(.${materialLocators.DatetimePicker.clock.cell('disabled')}`;
-    firstEnabledMinutesSelector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)';
+    hoursPicker = $(materialLocators.DatetimePicker.clock.hours.class);
-    hoursPicker = $('.mat-datetimepicker-clock-hours');
+    minutePicker = $(materialLocators.DatetimePicker.clock.minutes.class);
-    minutePicker = $('.mat-datetimepicker-clock-minutes');
 
     async waitTillDateDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.datePicker);
@@ -47,7 +47,7 @@ export class DateTimePickerCalendarPage {
     async setDate(date?: string): Promise<boolean> {
         try {
             if (date) {
-                await BrowserActions.clickScript(element.all(by.cssContainingText(`.mat-datepicker-calendar-body-cell-content`, date)).first());
+                await BrowserActions.clickScript(element.all(by.cssContainingText(materialLocators.Datepicker.calendar.body.cell.content.class, date)).first());
             } else {
                 await this.setToday();
             }
@@ -59,14 +59,15 @@ export class DateTimePickerCalendarPage {
     }
 
     async checkCalendarTodayDayIsDisabled(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsPresent(element(by.cssContainingText('.mat-calendar-body-cell-content', await BrowserActions.getText(this.today))));
+        const locatorString = materialLocators.Calendar.body.cell.content.class;
+        await BrowserVisibility.waitUntilElementIsPresent(element(by.cssContainingText(locatorString, await BrowserActions.getText(this.today))));
     }
 
     async setDefaultEnabledHour(): Promise<void> {
-        await BrowserActions.click(this.hoursPicker.$$(this.firstEnabledHourSelector).first());
+        await BrowserActions.click(this.hoursPicker.$$(this.firstEnabledSelector).first());
     }
 
     async setDefaultEnabledMinutes() {
-        await BrowserActions.click(this.minutePicker.$$(this.firstEnabledMinutesSelector).first());
+        await BrowserActions.click(this.minutePicker.$$(this.firstEnabledSelector).first());
     }
 }

lib/testing/src/lib/protractor/core/pages/material/date-time-picker.page.ts

@@ -18,19 +18,20 @@
 import { ElementFinder, $ } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
 import { DateTimePickerCalendarPage } from './date-time-picker-calendar.page';
+import { materialLocators } from './material-locators';
 
 export class DateTimePickerPage {
 
     rootElement: ElementFinder;
-    dateTimePicker = $('.mat-datetimepicker-toggle');
+    dateTimePicker = $(materialLocators.DatetimePicker.toggle.class);
-    datePicker = $('.mat-datepicker-toggle');
+    datePicker = $(materialLocators.Datepicker.toggle.class);
     dateTime = new DateTimePickerCalendarPage();
 
     constructor(rootElement?: ElementFinder) {
         if (rootElement) {
             this.rootElement = rootElement;
-            this.dateTimePicker  = this.rootElement.$('.mat-datetimepicker-toggle');
+            this.dateTimePicker  = this.rootElement.$(materialLocators.DatetimePicker.toggle.class);
-            this.datePicker  = this.rootElement.$('.mat-datepicker-toggle');
+            this.datePicker  = this.rootElement.$(materialLocators.Datepicker.toggle.class);
         }
     }
 

lib/testing/src/lib/protractor/core/pages/material/dropdown.page.ts

@@ -19,12 +19,13 @@ import { element, by, ElementFinder, browser, $$, $ } from 'protractor';
 import { BrowserVisibility } from '../../utils/browser-visibility';
 import { BrowserActions } from '../../utils/browser-actions';
 import { Logger } from '../../utils/logger';
+import { materialLocators } from './material-locators';
 
 export class DropdownPage {
 
     dropDownElement: ElementFinder;
 
-    constructor(dropDownElement = $$('div[class="mat-select-arrow-wrapper"]').first()) {
+    constructor(dropDownElement = $$(`div[class="${materialLocators.Select.arrow.wrapper.root}"]`).first()) {
         this.dropDownElement = dropDownElement;
     }
 
@@ -35,13 +36,13 @@ export class DropdownPage {
 
     async selectOption(option: string): Promise<void> {
         Logger.log(`Select dropdown option ${option}`);
-        const optionElement = element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first();
+        const optionElement = element.all(by.cssContainingText(`${materialLocators.Option.root} span${materialLocators.Option.text.class}`, option)).first();
         await BrowserActions.click(optionElement);
         await browser.waitForAngular();
     }
 
     async getValue(): Promise<string> {
-        return BrowserActions.getText($('mat-form-field span'));
+        return BrowserActions.getText($(`${materialLocators.Form.field.root} span`));
     }
 
     async getDropdownOptionList(): Promise<string> {
@@ -49,7 +50,7 @@ export class DropdownPage {
     }
 
     async getNumberOfOptions(): Promise<number> {
-        const dropdownOptions = $$('.mat-select-panel mat-option');
+        const dropdownOptions = $$(`${materialLocators.Select.panel.class} ${materialLocators.Option.root}`);
         return dropdownOptions.count();
     }
 
@@ -66,30 +67,30 @@ export class DropdownPage {
     }
 
     async checkOptionIsSelected(option: string): Promise<void> {
-        const selectedOption = this.dropDownElement.element(by.cssContainingText('.mat-select-value-text span', option));
+        const selectedOption = this.dropDownElement.element(by.cssContainingText(`${materialLocators.Select.value.text} span`, option));
         await BrowserVisibility.waitUntilElementIsVisible(selectedOption);
     }
 
     async selectOptionFromIndex(index: number): Promise<void> {
-        const value = element.all(by.className('mat-option')).get(index);
+        const value = element.all(by.className(materialLocators.Option.root)).get(index);
         await BrowserActions.click(value);
     }
 
     async checkOptionsPanelIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible($$(`.mat-select-panel`).first());
+        await BrowserVisibility.waitUntilElementIsVisible($$(materialLocators.Select.panel.class).first());
     }
 
     async getSelectedOptionText(): Promise<string> {
-        const selectedOption = this.dropDownElement.$('.mat-select-value-text span');
+        const selectedOption = this.dropDownElement.$(`${materialLocators.Select.value.text} span`);
         return BrowserActions.getText(selectedOption);
     }
 
     async checkOptionIsDisplayed(option: string): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first());
+        await BrowserVisibility.waitUntilElementIsVisible(element.all(by.cssContainingText(`${materialLocators.Option.root} span${materialLocators.Option.text.class}`, option)).first());
     }
 
     async checkOptionIsNotDisplayed(option: string): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsNotVisible(element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first());
+        await BrowserVisibility.waitUntilElementIsNotVisible(element.all(by.cssContainingText(`${materialLocators.Option.root} span${materialLocators.Option.text.class}`, option)).first());
     }
 
     async selectDropdownOption(option: string): Promise<void> {

lib/testing/src/lib/protractor/core/pages/material/material-locators.ts

@@ -0,0 +1,431 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const materialLocators = {
+  Accent: {
+    class: '.mat-accent'
+  },
+  Accordion: {
+    root: 'mat-accordion'
+  },
+  Autocomplete: {
+    panel: {
+      class: '.mat-autocomplete-panel',
+      root: 'mat-autocomplete-panel'
+    }
+  },
+  Button: {
+    class: '.mat-button',
+    disabled: 'mat-button-disabled',
+    wrapper: '.mat-button-wrapper'
+  },
+  Calendar: {
+    root: 'mat-calendar',
+    body: {
+      cell: {
+        root: 'mat-calendar-body-cell',
+        content: {
+          class: '.mat-calendar-body-cell-content'
+        }
+      },
+      today: {
+        class: '.mat-calendar-body-today'
+      },
+      active: {
+        root: 'mat-calendar-body-active'
+      }
+    },
+    button: (navigation: 'next' | 'previous' | 'period') => `mat-calendar-${navigation}-button`
+  },
+  Card: {
+    root: 'mat-card',
+    class: '.mat-card',
+    content: {
+      class: '.mat-card-content',
+      root: 'mat-card-content'
+    },
+    title: {
+      class: '.mat-card-title',
+      root: 'mat-card-title'
+    },
+    actions: 'mat-card-actions',
+    subtitle: {
+      root: 'mat-card-subtitle'
+    }
+  },
+  Checkbox: {
+    root: 'mat-checkbox',
+    class: '.mat-checkbox',
+    layout: '.mat-checkbox-layout',
+    label: {
+      class: '.mat-checkbox-label',
+      root: 'mat-checkbox-label'
+    },
+    checked: {
+      class: '.mat-checkbox-checked',
+      root: 'mat-checkbox-checked'
+    },
+    disabled: {
+      root: 'mat-checkbox-disabled'
+    },
+    inner: {
+      container: {
+        class: '.mat-checkbox-inner-container'
+      }
+    }
+  },
+  Checked: {
+    root: 'mat-checked'
+  },
+  Chip: {
+    root: 'mat-chip',
+    class: '.mat-chip',
+    list: {
+      root: 'mat-chip-list',
+      class: '.mat-chip-list'
+    }
+  },
+  Datepicker: {
+    root: 'mat-datepicker',
+    calendar: {
+      body: {
+        cell: {
+          content: {
+            class: '.mat-datepicker-calendar-body-cell-content'
+          }
+        }
+      }
+    },
+    toggle: {
+      root: 'mat-datepicker-toggle',
+      class: '.mat-datepicker-toggle'
+    }
+  },
+  DatetimePicker: {
+    root: 'mat-datetimepicker-content',
+    popup: '.mat-datetimepicker-popup',
+    calendar: {
+      header: {
+        date: {
+          class: '.mat-datetimepicker-calendar-header-date',
+          time: '.mat-datetimepicker-calendar-header-date-time'
+        },
+        year: '.mat-datetimepicker-calendar-header-year'
+      },
+      body: {
+        active: '.mat-datetimepicker-calendar-body-active',
+        cell: {
+          class: '.mat-datetimepicker-calendar-body-cell-content',
+          root: 'mat-datetimepicker-calendar-body-cell-content'
+        }
+      },
+      content: '.mat-datetimepicker-calendar-content',
+      nextButton: '.mat-datetimepicker-calendar-next-button'
+    },
+    clock: {
+      class: '.mat-datetimepicker-clock',
+      hours: {
+        class: '.mat-datetimepicker-clock-hours'
+      },
+      minutes: {
+        class: '.mat-datetimepicker-clock-minutes'
+      },
+      cell: (attribute?: 'selected' | 'disabled') => attribute ? `mat-datetimepicker-clock-cell-${attribute}` : 'mat-datetimepicker-clock-cell'
+    },
+    month: {
+      view: 'mat-datetimepicker-month-view'
+    },
+    toggle: {
+      root: 'mat-datetimepicker-toggle',
+      class: '.mat-datetimepicker-toggle'
+    }
+  },
+  Dialog: {
+    container: {
+      root: 'mat-dialog-container',
+      class: '.mat-dialog-container'
+    },
+    content: {
+      root: 'mat-dialog-content',
+      class: '.mat-dialog-content'
+    },
+    actions: {
+      class: `.mat-dialog-actions`,
+      root: `mat-dialog-actions`
+    },
+    title: '.mat-dialog-title'
+  },
+  Disabled: {
+    root: 'mat-disabled'
+  },
+  Drawer: {
+    class: '.mat-drawer',
+    end: '.mat-drawer-end'
+  },
+  Error: {
+    class: '.mat-error',
+    root: 'mat-error'
+  },
+  Expanded: {
+    class: '.mat-expanded',
+    root: 'mat-expanded'
+  },
+  Expansion: {
+    panel: {
+      root: 'mat-expansion-panel',
+      class: '.mat-expansion-panel',
+      body: {
+        class: '.mat-expansion-panel-body'
+      },
+      content: {
+        class: '.mat-expansion-panel-content'
+      },
+      header: {
+        class: '.mat-expansion-panel-header',
+        root: 'mat-expansion-panel-header'
+      },
+      title: '.mat-expansion-panel-header-title'
+    },
+    indicator: '.mat-expansion-indicator'
+  },
+  Focus: {
+    indicator: '.mat-focus-indicator'
+  },
+  Focused: {
+    root: 'mat-focused'
+  },
+  Form: {
+    field: {
+      class: '.mat-form-field',
+      root: 'mat-form-field',
+      label: {
+        wrapper: '.mat-form-field-label-wrapper'
+      }
+    },
+    fieldInfix: '.mat-form-field-infix'
+  },
+  Header: {
+    cell: '.mat-header-cell'
+  },
+  Hint: {
+    class: 'mat-hint'
+  },
+  Icon: {
+    root: 'mat-icon',
+    class: '.mat-icon',
+    button: {
+      class: '.mat-icon-button',
+      root: 'mat-icon-button'
+    }
+  },
+  Input: {
+    class: '.mat-input-element'
+  },
+  Label: {
+    root: 'mat-label'
+  },
+  List: {
+    class: '.mat-list',
+    root: 'mat-list',
+    item: {
+      root: 'mat-list-item',
+      class: '.mat-list-item'
+    },
+    option: 'mat-list-option',
+    text: {
+      class: '.mat-list-text'
+    },
+    selectionList: 'mat-selection-list'
+  },
+  Menu: {
+    content: {
+      class: '.mat-menu-content',
+      root: 'mat-menu-content'
+    },
+    panel: '.mat-menu-panel',
+    item: {
+      class: '.mat-menu-item',
+      submenu: {
+        trigger: {
+          root: `mat-menu-item-submenu-trigger`
+        }
+      }
+    }
+  },
+  Month: {
+    content: '.mat-month-content'
+  },
+  Option: {
+    root: 'mat-option',
+    class: '.mat-option',
+    group: 'mat-optgroup',
+    text: {
+      class: '.mat-option-text',
+      root: 'mat-option-text'
+    }
+  },
+  Paginator: {
+    class: '.mat-paginator',
+    range: {
+      label: '.mat-paginator-range-label'
+    },
+    navigation: (rangeAction: string) => `.mat-paginator-navigation-${rangeAction}`
+  },
+  Panel: {
+    title: 'mat-panel-title'
+  },
+  Primary: {
+    class: '.mat-primary'
+  },
+  Progress: {
+    bar: {
+      root: 'mat-progress-bar',
+      class: '.mat-progress-bar'
+    },
+    spinner: {
+      root: 'mat-progress-spinner',
+      class: '.mat-progress-spinner'
+    }
+  },
+  Radio: {
+    root: 'mat-radio',
+    button: {
+      class: '.mat-radio-button',
+      root: 'mat-radio-button'
+    },
+    group: 'mat-radio-group',
+    checked: 'mat-radio-checked',
+    label: '.mat-radio-label'
+  },
+  Ripple: {
+    class: '.mat-ripple',
+    element: {
+      class: '.mat-ripple-element',
+      root: 'mat-ripple-element'
+    }
+  },
+  Select: {
+    root: 'mat-select',
+    class: '.mat-select',
+    arrow: {
+      class: '.mat-select-arrow',
+      wrapper: {
+        root: '.mat-select-arrow-wrapper'
+      }
+    },
+    placeholder: {
+      class: '.mat-select-placeholder'
+    },
+    panel: {
+      class: '.mat-select-panel',
+      wrap: '.mat-select-panel-wrap'
+    },
+    value: {
+      class: '.mat-select-value',
+      text: '.mat-select-value-text'
+    },
+    minLine: '.mat-select-min-line',
+    trigger: '.mat-select-trigger'
+  },
+  Slide: {
+    toggle: {
+      class: '.mat-slide-toggle',
+      root: 'mat-slide-toggle',
+      input: '.mat-slide-toggle-input'
+    }
+  },
+  Selection: {
+    list: {
+      root: 'mat-selection-list'
+    }
+  },
+  Sidenav: {
+    root: 'mat-sidenav'
+  },
+  Snackbar: {
+    container: {
+      class: '.mat-snack-bar-container'
+    }
+  },
+  Sort: {
+    header: {
+      container: '.mat-sort-header-container'
+    }
+  },
+  Spinner: {
+    root: 'mat-spinner'
+  },
+  Tab: {
+    disabled: '.mat-tab-disabled',
+    header: {
+      class: '.mat-tab-header',
+      pagination: {
+        after: '.mat-tab-header-pagination-after',
+        before: '.mat-tab-header-pagination-before',
+        chevron: '.mat-tab-header-pagination-chevron'
+      }
+    },
+    body: {
+      active: '.mat-tab-body-active',
+      content: '.mat-tab-body-content'
+    },
+    label: {
+      class: '.mat-tab-label',
+      root: 'mat-tab-label',
+      active: {
+        class: '.mat-tab-label-active',
+        root: 'mat-tab-label-active'
+      },
+      content: {
+        class: '.mat-tab-label-content',
+        root: 'mat-tab-label-content'
+      }
+    },
+    labels: {
+      class: '.mat-tab-labels'
+    },
+    list: '.mat-tab-list'
+  },
+  Table: {
+    class: '.mat-table',
+    root: 'mat-table',
+    row: {
+      root: 'mat-row',
+      class: '.mat-row'
+    },
+    cell: {
+      class: '.mat-cell',
+      root: 'mat-cell'
+    },
+    column: (matColumn: string) => `.mat-column-${matColumn}`
+  },
+  Toolbar: {
+    root: 'mat-toolbar',
+    class: '.mat-toolbar'
+  },
+  Tooltip: {
+    root: 'mat-tooltip-component',
+    class: '.mat-tooltip',
+    trigger: '.mat-tooltip-trigger'
+  },
+  Tree: {
+    root: 'mat-tree',
+    node: {
+      root: 'mat-tree-node'
+    }
+  }
+};

lib/testing/src/lib/protractor/core/pages/material/public-api.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+export * from './material-locators';
 export * from './tabs.page';
 export * from './date-picker-calendar.page';
 export * from './date-time-picker.page';

lib/testing/src/lib/protractor/core/pages/material/tabs.page.ts

@@ -18,18 +18,19 @@
 import { element, by, $$ } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
 import { BrowserVisibility } from '../../utils/browser-visibility';
+import { materialLocators } from './material-locators';
 
 export class TabsPage {
 
-    tabs = $$(`div[id*='mat-tab-label']`);
+    tabs = $$(`div[id*='${materialLocators.Tab.label.root}']`);
 
     async clickTabByTitle(tabTitle): Promise<void> {
-        const tab = element(by.cssContainingText(`div[id*='mat-tab-label']`, tabTitle));
+        const tab = element(by.cssContainingText(`div[id*='${materialLocators.Tab.label.root}']`, tabTitle));
         await BrowserActions.click(tab);
     }
 
     async checkTabIsSelectedByTitle(tabTitle): Promise<void> {
-        const tab = element(by.cssContainingText(`div[id*='mat-tab-label']`, tabTitle));
+        const tab = element(by.cssContainingText(`div[id*='${materialLocators.Tab.label.root}']`, tabTitle));
         const result = await BrowserActions.getAttribute(tab, 'aria-selected');
         await expect(result).toBe('true');
     }

lib/testing/src/lib/protractor/core/pages/material/toggle.page.ts

@@ -17,12 +17,13 @@
 
 import { ElementFinder } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
+import { materialLocators } from './material-locators';
 
 export class TogglePage {
 
     async enableToggle(toggle: ElementFinder): Promise<void> {
         const check = await BrowserActions.getAttribute(toggle, 'class');
-        if (check.indexOf('mat-checked') < 0) {
+        if (check.indexOf(materialLocators.Checked.root) < 0) {
             const elem = toggle.$$('input').first();
             await BrowserActions.clickScript(elem);
         }
@@ -30,7 +31,7 @@ export class TogglePage {
 
     async disableToggle(toggle: ElementFinder): Promise<void> {
         const check = await BrowserActions.getAttribute(toggle, 'class');
-        if (check.indexOf('mat-checked') >= 0) {
+        if (check.indexOf(materialLocators.Checked.root) >= 0) {
             const elem = toggle.$$('input').first();
             await BrowserActions.clickScript(elem);
         }

lib/testing/src/lib/protractor/core/pages/pagination.page.ts

@@ -19,6 +19,7 @@ import { by, element, browser, $, $$ } from 'protractor';
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { BrowserActions } from '../utils/browser-actions';
 import { Logger } from '../utils/logger';
+import { materialLocators } from './public-api';
 
 export class PaginationPage {
 
@@ -26,7 +27,7 @@ export class PaginationPage {
     pageSelectorArrow = $('button[data-automation-id="page-selector"]');
     itemsPerPage = $('.adf-pagination__max-items');
     itemsPerPageOpenDropdown = $('.adf-pagination__perpage-block button');
-    itemsPerPageOptions = $$('.adf-pagination__page-selector .mat-menu-item');
+    itemsPerPageOptions = $$(`.adf-pagination__page-selector ${materialLocators.Menu.item.class}`);
     currentPage = $('.adf-pagination__current-page');
     totalPages = $('.adf-pagination__total-pages');
     paginationRange = $('.adf-pagination__range');
@@ -34,7 +35,7 @@ export class PaginationPage {
     nextButtonDisabled = $('button[class*="adf-pagination__next-button"][disabled]');
     previousButtonDisabled = $('button[class*="adf-pagination__previous-button"][disabled]');
     pageDropDown = $('div[class*="adf-pagination__actualinfo-block"] button');
-    pageDropDownOptions = $$('div[class*="mat-menu-content"] button');
+    pageDropDownOptions = $$(`div[class*="${materialLocators.Menu.content.root}"] button`);
     paginationSection = $('adf-pagination');
     paginationSectionEmpty = $('adf-pagination[class*="adf-pagination__empty"]');
     totalFiles = $('.adf-pagination__range');
@@ -42,7 +43,7 @@ export class PaginationPage {
     async selectItemsPerPage(numberOfItem: string): Promise<void> {
         await BrowserActions.clickExecuteScript(`div[class*="adf-pagination__perpage-block"] button`);
         await BrowserVisibility.waitUntilElementIsVisible(this.pageSelectorDropDown);
-        const itemsPerPage = element.all(by.cssContainingText('.mat-menu-item', numberOfItem)).first();
+        const itemsPerPage = element.all(by.cssContainingText(materialLocators.Menu.item.class, numberOfItem)).first();
         await BrowserVisibility.waitUntilElementIsPresent(itemsPerPage);
         await BrowserActions.click(itemsPerPage);
         await BrowserVisibility.waitUntilElementIsNotVisible(this.pageSelectorDropDown);
@@ -94,7 +95,7 @@ export class PaginationPage {
 
     async clickOnPageDropdownOption(numberOfItemPerPage: string): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.pageDropDownOptions.first());
-        const option = element(by.cssContainingText('div[class*="mat-menu-content"] button', numberOfItemPerPage));
+        const option = element(by.cssContainingText(`div[class*="${materialLocators.Menu.content.root}"] button`, numberOfItemPerPage));
         await BrowserActions.click(option);
     }
 

lib/testing/src/lib/protractor/core/pages/settings.page.ts

@@ -19,6 +19,7 @@ import { $, browser, by, element } from 'protractor';
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { BrowserActions } from '../utils/browser-actions';
 import { DropdownPage } from '../../core/pages/material/dropdown.page';
+import { materialLocators } from './public-api';
 
 export class SettingsPage {
     settingsURL: string = browser.baseUrl + '/settings';
@@ -27,13 +28,13 @@ export class SettingsPage {
     authHostText = $('input[id="oauthHost"]');
     logoutUrlText = $('input[id="logout-url"]');
     identityHostText = $('input[id="identityHost"]');
-    ssoRadioButton = element(by.cssContainingText('[id*="mat-radio"]', 'SSO'));
+    ssoRadioButton = element(by.cssContainingText(`[id*="${materialLocators.Radio.root}"]`, 'SSO'));
-    silentLoginToggleLabel = $('mat-slide-toggle[formcontrolname="silentLogin"] label');
+    silentLoginToggleLabel = $(`${materialLocators.Slide.toggle.root}[formcontrolname="silentLogin"] label`);
-    silentLoginToggleElement = $('mat-slide-toggle[formcontrolname="silentLogin"]');
+    silentLoginToggleElement = $(`${materialLocators.Slide.toggle.root}[formcontrolname="silentLogin"]`);
-    implicitFlowLabel = $('mat-slide-toggle[formcontrolname="implicitFlow"] label');
+    implicitFlowLabel = $(`${materialLocators.Slide.toggle.root}[formcontrolname="implicitFlow"] label`);
-    implicitFlowElement = $('mat-slide-toggle[formcontrolname="implicitFlow"]');
+    implicitFlowElement = $(`${materialLocators.Slide.toggle.root}[formcontrolname="implicitFlow"]`);
     applyButton = $('button[data-automation-id="settings-apply-button"]');
-    providerDropdown = new DropdownPage($('mat-select[id="adf-provider-selector"]'));
+    providerDropdown = new DropdownPage($(`${materialLocators.Select.root}[id="adf-provider-selector"]`));
 
     async goToSettingsPage(): Promise<void> {
         let currentUrl;
@@ -101,7 +102,7 @@ export class SettingsPage {
     async setSilentLogin(enableToggle) {
         await BrowserVisibility.waitUntilElementIsVisible(this.silentLoginToggleElement);
 
-        const isChecked = (await BrowserActions.getAttribute(this.silentLoginToggleElement, 'class')).includes('mat-checked');
+        const isChecked = (await BrowserActions.getAttribute(this.silentLoginToggleElement, 'class')).includes(materialLocators.Checked.root);
 
         if (isChecked && !enableToggle || !isChecked && enableToggle) {
             await BrowserActions.click(this.silentLoginToggleLabel);
@@ -111,7 +112,7 @@ export class SettingsPage {
     async setImplicitFlow(enableToggle) {
         await BrowserVisibility.waitUntilElementIsVisible(this.implicitFlowElement);
 
-        const isChecked = (await BrowserActions.getAttribute(this.implicitFlowElement, 'class')).includes('mat-checked');
+        const isChecked = (await BrowserActions.getAttribute(this.implicitFlowElement, 'class')).includes(materialLocators.Checked.root);
 
         if (isChecked && !enableToggle || !isChecked && enableToggle) {
             await BrowserActions.click(this.implicitFlowLabel);

lib/testing/src/lib/protractor/core/pages/user-info.page.ts

@@ -18,9 +18,10 @@
 import { $, $$ } from 'protractor';
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { BrowserActions } from '../utils/browser-actions';
+import { materialLocators } from './public-api';
 
 export class UserInfoPage {
-    dialog = $$('mat-card[class*="adf-userinfo-card"]').first();
+    dialog = $$(`${materialLocators.Card.root}[class*="adf-userinfo-card"]`).first();
     userInfoSsoHeaderTitle = this.dialog.$('div[id="identity-username"]');
     userInfoSsoTitle = $('.adf-userinfo__detail-title');
     ssoEmail = $('#identity-email');

lib/testing/src/lib/protractor/core/pages/viewer.page.ts

@@ -20,6 +20,7 @@ import { TabsPage } from './material/tabs.page';
 import { BrowserVisibility } from '../utils/browser-visibility';
 import { element, by, browser, protractor, $, $$ } from 'protractor';
 import { Logger } from '../utils/logger';
+import { materialLocators } from './public-api';
 
 const MAX_LOADING_TIME = 120000;
 
@@ -48,7 +49,7 @@ export class ViewerPage {
     infoSideBar = $('#adf-right-sidebar');
     viewer = $('adf-viewer');
     imgViewer = $('adf-img-viewer');
-    activeTab = $('div[class*="mat-tab-label-active"]');
+    activeTab = $(`div[class*="${materialLocators.Tab.label.active.root}"]`);
     toolbar = $('#adf-viewer-toolbar');
     canvasLayer = $$('.canvasWrapper > canvas').first();
 
@@ -68,12 +69,12 @@ export class ViewerPage {
 
         if (await this.isSpinnerPresent()) {
             Logger.log('wait spinner disappear');
-            await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME);
+            await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
         } else {
             try {
                 Logger.log('wait spinner is present');
-                await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName('mat-progress-spinner')));
+                await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName(materialLocators.Progress.spinner.root)));
-                await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME);
+                await BrowserVisibility.waitUntilElementIsNotVisible(element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
             } catch (error) {}
         }
     }
@@ -252,8 +253,9 @@ export class ViewerPage {
     }
 
     async checkTabIsActive(tabName: string): Promise<void> {
+        const materialLocatorPart = `div${materialLocators.Tab.labels.class} div${materialLocators.Tab.label.active.class} ${materialLocators.Tab.label.content.class}`;
         const tab = element(
-            by.cssContainingText('.adf-info-drawer-layout-content div.mat-tab-labels div.mat-tab-label-active .mat-tab-label-content', tabName)
+            by.cssContainingText(`.adf-info-drawer-layout-content ${materialLocatorPart}`, tabName)
         );
         await BrowserVisibility.waitUntilElementIsVisible(tab);
     }
@@ -335,7 +337,7 @@ export class ViewerPage {
         let isSpinnerPresent;
 
         try {
-            isSpinnerPresent = await element(by.tagName('mat-progress-spinner')).isDisplayed();
+            isSpinnerPresent = await element(by.tagName(materialLocators.Progress.spinner.root)).isDisplayed();
         } catch (error) {
             isSpinnerPresent = false;
         }

lib/testing/src/lib/protractor/process-services-cloud/app/app-list-cloud.page.ts

@@ -18,6 +18,7 @@
 import { $$, $, ElementFinder } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { materialLocators } from '../../public-api';
 
 export class AppListCloudPage {
 
@@ -26,7 +27,7 @@ export class AppListCloudPage {
     nameOfAllApps = $$('adf-cloud-app-details div[class*="item-card-title"] h1');
     firstApp = $$('adf-cloud-app-details div[class*="item-card-title"] h1').first();
 
-    getAppNameLocatorByAppName = (appName: string): ElementFinder => $(`mat-card[title="${appName}"]`);
+    getAppNameLocatorByAppName = (appName: string): ElementFinder => $(`${materialLocators.Card.root}[title="${appName}"]`);
 
     async checkApsContainer(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.apsAppsContainer);
@@ -34,7 +35,7 @@ export class AppListCloudPage {
     }
 
     async goToApp(applicationName: string): Promise<void> {
-        await BrowserActions.clickExecuteScript('mat-card[title="' + applicationName + '"]');
+        await BrowserActions.clickExecuteScript(`${materialLocators.Card.root}[title="` + applicationName + `"]`);
     }
 
     async countAllApps(): Promise<number> {

lib/testing/src/lib/protractor/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts

@@ -23,6 +23,7 @@ import { DropdownPage } from '../../core/pages/material/dropdown.page';
 import { PeopleCloudComponentPage } from './people-cloud-component.page';
 import { DatePickerPage } from '../../core/pages/material/date-picker.page';
 import { TestElement } from '../../core/test-element';
+import { materialLocators } from '../../public-api';
 
 export interface FilterProps {
     name?: string;
@@ -41,23 +42,23 @@ export class EditProcessFilterCloudComponentPage {
     saveButton = $('button[data-automation-id="adf-filter-action-save"]');
     saveAsButton = $('button[data-automation-id="adf-filter-action-saveAs"]');
     deleteButton = $('button[data-automation-id="adf-filter-action-delete"]');
-    filter = $(`adf-cloud-edit-process-filter mat-expansion-panel-header`);
+    filter = $(`adf-cloud-edit-process-filter ${materialLocators.Expansion.panel.header.root}`);
 
-    appNameDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-appName']`));
+    appNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-appName']`));
-    statusDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-status']`));
+    statusDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-status']`));
-    sortDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-sort']`));
+    sortDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-sort']`));
-    orderDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-order']`));
+    orderDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-order']`));
-    processDefinitionNameDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-processDefinitionName']`));
+    processDefinitionNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-processDefinitionName']`));
-    suspendedDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-suspendedDateRange']`));
+    suspendedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-suspendedDateRange']`));
-    startedDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-startedDateRange']`));
+    startedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-startedDateRange']`));
-    completedDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-completedDateRange']`));
+    completedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-completedDateRange']`));
-    suspendedDateRangeWithin = new DatePickerPage($(`mat-datepicker-toggle[data-automation-id='adf-cloud-edit-process-property-date-range-suspendedDateRange']`));
+    suspendedDateRangeWithin = new DatePickerPage($(`${materialLocators.Datepicker.toggle.root}[data-automation-id='adf-cloud-edit-process-property-date-range-suspendedDateRange']`));
 
     peopleCloudComponent = new PeopleCloudComponentPage();
     editProcessFilterDialogPage = new EditProcessFilterDialogPage();
 
-    private expansionPanelExtended = this.rootElement.$('mat-expansion-panel-header.mat-expanded');
+    private expansionPanelExtended = this.rootElement.$(`${materialLocators.Expansion.panel.header.root}${materialLocators.Expanded.class}`);
-    private content = TestElement.byCss('adf-cloud-edit-process-filter mat-expansion-panel [style*="visible"]');
+    private content = TestElement.byCss(`adf-cloud-edit-process-filter ${materialLocators.Expansion.panel.root} [style*="visible"]`);
 
     editProcessFilterDialog(): EditProcessFilterDialogPage {
         return this.editProcessFilterDialogPage;
@@ -97,7 +98,7 @@ export class EditProcessFilterCloudComponentPage {
     }
 
     getStateFilterDropDownValue(): Promise<string> {
-        return BrowserActions.getText($(`mat-form-field[data-automation-id='status'] span`));
+        return BrowserActions.getText($(`${materialLocators.Form.field.root}[data-automation-id='status'] span`));
     }
 
     async setSortFilterDropDown(option) {
@@ -106,7 +107,7 @@ export class EditProcessFilterCloudComponentPage {
     }
 
     async getSortFilterDropDownValue(): Promise<string> {
-        const sortLocator = $$(`mat-form-field[data-automation-id='sort'] span`).first();
+        const sortLocator = $$(`${materialLocators.Form.field.root}[data-automation-id='sort'] span`).first();
         return BrowserActions.getText(sortLocator);
     }
 
@@ -116,7 +117,7 @@ export class EditProcessFilterCloudComponentPage {
     }
 
     getOrderFilterDropDownValue(): Promise<string> {
-        return BrowserActions.getText($(`mat-form-field[data-automation-id='order'] span`));
+        return BrowserActions.getText($(`${materialLocators.Form.field.root}[data-automation-id='order'] span`));
     }
 
     async setAppNameDropDown(option: string) {
@@ -153,7 +154,7 @@ export class EditProcessFilterCloudComponentPage {
     }
 
     async checkAppNamesAreUnique(): Promise<boolean> {
-        const appNameList = $$('mat-option[data-automation-id="adf-cloud-edit-process-property-optionsappName"] span');
+        const appNameList = $$(`${materialLocators.Option.root}[data-automation-id="adf-cloud-edit-process-property-optionsappName"] span`);
         const appTextList: any = await appNameList.getText();
         const uniqueArray = appTextList.filter((appName) => {
             const sameAppNameArray = appTextList.filter((eachApp) => eachApp === appName);
@@ -168,7 +169,7 @@ export class EditProcessFilterCloudComponentPage {
     }
 
     isApplicationListLoaded(): Promise<boolean> {
-        const emptyList = $(`[data-automation-id='adf-cloud-edit-process-property-appName'] .mat-select-placeholder`);
+        const emptyList = $(`[data-automation-id='adf-cloud-edit-process-property-appName'] ${materialLocators.Select.placeholder.class}`);
         return BrowserVisibility.waitUntilElementIsNotVisible(emptyList);
     }
 

lib/testing/src/lib/protractor/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts

@@ -23,6 +23,7 @@ import { DataTableComponentPage } from '../../core/pages/data-table-component.pa
 import { PeopleCloudComponentPage } from './people-cloud-component.page';
 import { GroupCloudComponentPage } from './group-cloud-component.page';
 import { DatePickerPage } from '../../core/pages/material/date-picker.page';
+import { materialLocators } from '../../public-api';
 
 export type StatusType = 'All' | 'Created' | 'Assigned' | 'Cancelled' | 'Suspended' | 'Completed';
 
@@ -43,28 +44,28 @@ export class EditTaskFilterCloudComponentPage {
     saveButton = $('[data-automation-id="adf-filter-action-save"]');
     saveAsButton = $('[data-automation-id="adf-filter-action-saveAs"]');
     deleteButton = $('[data-automation-id="adf-filter-action-delete"]');
-    filter = $(`adf-cloud-edit-task-filter mat-expansion-panel-header`);
+    filter = $(`adf-cloud-edit-task-filter ${materialLocators.Expansion.panel.header.root}`);
 
-    appNameDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-appName']`));
+    appNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-appName']`));
-    statusDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-status']`));
+    statusDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-status']`));
-    sortDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-sort']`));
+    sortDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-sort']`));
     priorityDropdown = new DropdownPage(this.priority);
-    orderDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-order']`));
+    orderDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-order']`));
-    completedDateDropdown = new DropdownPage($(`mat-select[data-automation-id="adf-cloud-edit-process-property-completedDateRange"]`));
+    completedDateDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="adf-cloud-edit-process-property-completedDateRange"]`));
     assignmentDropdown = new DropdownPage($(`.adf-task-assignment-filter`));
-    processDefinitionNameDropdown = new DropdownPage($('mat-select[data-automation-id="adf-cloud-edit-task-property-processDefinitionName"]'));
+    processDefinitionNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="adf-cloud-edit-task-property-processDefinitionName"]`));
-    createdDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-createdDateRange']`));
+    createdDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-createdDateRange']`));
-    createdDateRangeWithin = new DatePickerPage($(`mat-datepicker-toggle[data-automation-id='adf-cloud-edit-process-property-date-range-createdDateRange']`));
+    createdDateRangeWithin = new DatePickerPage($(`${materialLocators.Datepicker.toggle.root}[data-automation-id='adf-cloud-edit-process-property-date-range-createdDateRange']`));
-    dueDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-dueDateRange']`));
+    dueDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-dueDateRange']`));
-    dueDateRangeWithin = new DatePickerPage($(`mat-datepicker-toggle[data-automation-id='adf-cloud-edit-picker-date-range-dueDateRange']`));
+    dueDateRangeWithin = new DatePickerPage($(`${materialLocators.Datepicker.toggle.root}[data-automation-id='adf-cloud-edit-picker-date-range-dueDateRange']`));
 
     peopleCloudComponent = new PeopleCloudComponentPage();
     groupCloudComponent = new GroupCloudComponentPage();
 
     dataTable = new DataTableComponentPage( $('adf-cloud-task-list'));
 
-    private expansionPanelExtended = this.rootElement.$('mat-expansion-panel-header.mat-expanded');
+    private expansionPanelExtended = this.rootElement.$(`${materialLocators.Expansion.panel.header.root}${materialLocators.Expanded.class}`);
-    private content = this.rootElement.$('div.mat-expansion-panel-content[style*="visible"]');
+    private content = this.rootElement.$(`div${materialLocators.Expansion.panel.content.class}[style*="visible"]`);
 
     async isFilterDisplayed(): Promise<boolean> {
         return BrowserVisibility.waitUntilElementIsVisible(this.filter);

lib/testing/src/lib/protractor/process-services-cloud/pages/form-cloud-component.page.ts

@@ -19,11 +19,12 @@ import { $$, $ } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { ConfigEditorPage } from '../../core/pages/config-editor-page';
+import { materialLocators } from '../../public-api';
 
 export class FormCloudComponentPage {
 
-    formCloudEditor = $$('.mat-tab-list .mat-tab-label').get(1);
+    formCloudEditor = $$(`${materialLocators.Tab.list} ${materialLocators.Tab.label.class}`).get(1);
-    formCloudRender = $$('.mat-tab-list .mat-tab-label').get(0);
+    formCloudRender = $$(`${materialLocators.Tab.list} ${materialLocators.Tab.label.class}`).get(0);
 
     configEditorPage = new ConfigEditorPage();
 

lib/testing/src/lib/protractor/process-services-cloud/pages/group-cloud-component.page.ts

@@ -20,13 +20,14 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { FormFields } from '../../core/pages/form/form-fields';
 import { TestElement } from '../../core/test-element';
+import { materialLocators } from '../../public-api';
 
 export class GroupCloudComponentPage {
     groupCloudSearch = $('input[data-automation-id="adf-cloud-group-search-input"]');
     groupField = $('group-cloud-widget .adf-readonly');
     formFields = new FormFields();
 
-    getGroupRowLocatorByName = async (name: string): Promise<ElementFinder> => $$(`mat-option[data-automation-id="adf-cloud-group-chip-${name}"]`).first();
+    getGroupRowLocatorByName = async (name: string): Promise<ElementFinder> => $$(`${materialLocators.Option.root}[data-automation-id="adf-cloud-group-chip-${name}"]`).first();
 
     async searchGroups(name: string): Promise<void> {
         await BrowserActions.clearSendKeys(this.groupCloudSearch, name, 100);
@@ -59,7 +60,7 @@ export class GroupCloudComponentPage {
 
     async checkSelectedGroup(group: string): Promise<boolean> {
         try {
-            await TestElement.byText('mat-chip[data-automation-id*="adf-cloud-group-chip-"]', group).waitVisible();
+            await TestElement.byText(`${materialLocators.Chip.root}[data-automation-id*="adf-cloud-group-chip-"]`, group).waitVisible();
             return true;
         } catch (e) {
             return false;
@@ -67,11 +68,11 @@ export class GroupCloudComponentPage {
     }
 
     async checkGroupNotSelected(group: string): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText('mat-chip[data-automation-id*="adf-cloud-group-chip-"]', group)));
+        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText(`${materialLocators.Chip.root}[data-automation-id*="adf-cloud-group-chip-"]`, group)));
     }
 
     async removeSelectedGroup(group: string): Promise<void> {
-        const locator = $(`mat-chip[data-automation-id*="adf-cloud-group-chip-${group}"] mat-icon`);
+        const locator = $(`${materialLocators.Chip.root}[data-automation-id*="adf-cloud-group-chip-${group}"] ${materialLocators.Icon.root}`);
         await BrowserActions.click(locator);
     }
 

lib/testing/src/lib/protractor/process-services-cloud/pages/people-cloud-component.page.ts

@@ -20,6 +20,7 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { FormFields } from '../../core/pages/form/form-fields';
 import { TestElement } from '../../core/test-element';
+import { materialLocators } from '../../public-api';
 
 export class PeopleCloudComponentPage {
     peopleCloudSearch = $('input[data-automation-id="adf-people-cloud-search-input"]');
@@ -28,10 +29,10 @@ export class PeopleCloudComponentPage {
     formFields = new FormFields();
     labelLocator: Locator = by.css(`label[class*='adf-label']`);
     inputLocator: Locator = by.css('input');
-    assigneeChipList = $('mat-chip-list[data-automation-id="adf-cloud-people-chip-list"]');
+    assigneeChipList = $(`${materialLocators.Chip.list.root}[data-automation-id="adf-cloud-people-chip-list"]`);
-    noOfUsersDisplayed = $$('mat-option span.adf-people-label-name');
+    noOfUsersDisplayed = $$(`${materialLocators.Chip.list.root} span.adf-people-label-name`);
 
-    getAssigneeRowLocatorByContainingName = async (name: string): Promise<ElementFinder> => element.all(by.cssContainingText('mat-option span.adf-people-label-name', name)).first();
+    getAssigneeRowLocatorByContainingName = async (name: string): Promise<ElementFinder> => element.all(by.cssContainingText(`${materialLocators.Option.root} span.adf-people-label-name`, name)).first();
 
     async clearAssignee(): Promise<void> {
         await BrowserActions.clearSendKeys(this.peopleCloudSearch, ' ');
@@ -64,12 +65,12 @@ export class PeopleCloudComponentPage {
 
     async getChipAssignee(): Promise<string> {
         await BrowserVisibility.waitUntilElementIsVisible(this.assigneeChipList);
-        return this.assigneeChipList.all(by.css('mat-chip')).first().getText();
+        return this.assigneeChipList.all(by.css(materialLocators.Chip.root)).first().getText();
     }
 
     async getChipAssigneeCount(): Promise<number> {
         await BrowserVisibility.waitUntilElementIsVisible(this.assigneeChipList);
-        return this.assigneeChipList.all(by.css('mat-chip')).count();
+        return this.assigneeChipList.all(by.css(materialLocators.Chip.root)).count();
     }
 
     async checkUserIsDisplayed(name: string): Promise<boolean> {
@@ -104,7 +105,7 @@ export class PeopleCloudComponentPage {
 
     async checkSelectedPeople(person: string): Promise<boolean> {
         try {
-        	await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText('mat-chip-list mat-chip', person)));
+        	await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText(`${materialLocators.Chip.list.root} ${materialLocators.Chip.root}`, person)));
             return true;
         } catch (e) {
             return false;

lib/testing/src/lib/protractor/process-services-cloud/pages/process-filters-cloud-component.page.ts

@@ -18,6 +18,7 @@
 import { ElementFinder, $ } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { materialLocators } from '../../public-api';
 
 const FILTERS = {
     all: 'all-processes',
@@ -27,7 +28,7 @@ const FILTERS = {
 
 export class ProcessFiltersCloudComponentPage {
 
-    processFilters = $(`mat-expansion-panel[data-automation-id='Process Filters']`);
+    processFilters = $(`${materialLocators.Expansion.panel.root}[data-automation-id='Process Filters']`);
     activeFilter = $('.adf-active [data-automation-id="adf-filter-label"]');
     processFiltersList = $('adf-cloud-process-filters');
 

lib/testing/src/lib/protractor/process-services-cloud/pages/start-process-cloud-component.page.ts

@@ -19,6 +19,7 @@ import { by, element, Key, protractor, browser, ElementFinder, $, $$ } from 'pro
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { FormFields } from '../../core/pages/form/form-fields';
+import { materialLocators } from '../../public-api';
 
 export class StartProcessCloudPage {
 
@@ -33,7 +34,7 @@ export class StartProcessCloudPage {
     processDefinition = $('input[id="processDefinitionName"]');
     processDefinitionOptionsPanel = $('div[class*="processDefinitionOptions"]');
 
-    getSelectProcessDropdownLocatorByName = (name: string): ElementFinder => element(by.cssContainingText('.mat-option-text', name));
+    getSelectProcessDropdownLocatorByName = (name: string): ElementFinder => element(by.cssContainingText(materialLocators.Option.text.class, name));
 
     async checkNoProcessMessage(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.noProcess);

lib/testing/src/lib/protractor/process-services-cloud/pages/start-tasks-cloud-component.page.ts

@@ -19,13 +19,14 @@ import { element, by, Key, ElementFinder, $, $$ } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { DropdownPage } from '../../core/pages/material/dropdown.page';
+import { materialLocators } from '../../public-api';
 
 export class StartTasksCloudPage {
 
     name = $('input[id="name_id"]');
     dueDate = $('input[id="date_id"]');
     description = $('textarea[id="description_id"]');
-    priority = $('mat-select[formcontrolname="priority"]');
+    priority = $(`${materialLocators.Select.root}[formcontrolname="priority"]`);
     startButton = $('button[id="button-start"]');
     startButtonEnabled = $('button[id="button-start"]:not(disabled)');
     cancelButton = $('button[id="button-cancel"]');
@@ -77,7 +78,7 @@ export class StartTasksCloudPage {
         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);
     }
@@ -88,20 +89,20 @@ export class StartTasksCloudPage {
 
     async selectFormDefinition(option: string): Promise<void> {
         await BrowserActions.click(this.formDefinitionSelector);
-        const row = element(by.xpath(`//mat-option/child::span [text() = '${option}']`));
+        const row = element(by.xpath(`//${materialLocators.Option.root}/child::span [text() = '${option}']`));
         await BrowserActions.click(row);
     }
 
     async checkFormDefinitionIsDisplayed(option: string): Promise<void> {
         await BrowserActions.click(this.formDefinitionSelector);
-        const row = element(by.cssContainingText('mat-option span', option));
+        const row = element(by.cssContainingText(`${materialLocators.Option.root} span`, option));
         await BrowserVisibility.waitUntilElementIsVisible(row);
         await BrowserActions.closeMenuAndDialogs();
     }
 
     async checkFormDefinitionIsNotDisplayed(option: string): Promise<void> {
         await BrowserActions.click(this.formDefinitionSelector);
-        const row = element(by.cssContainingText('mat-option span', option));
+        const row = element(by.cssContainingText(`${materialLocators.Option.root} span`, option));
         await BrowserVisibility.waitUntilElementIsNotVisible(row);
         await BrowserActions.closeMenuAndDialogs();
     }

lib/testing/src/lib/protractor/process-services-cloud/pages/task-filters-cloud-component.page.ts

@@ -18,11 +18,12 @@
 import { ElementFinder, $, $$ } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { materialLocators } from '../../public-api';
 
 export class TaskFiltersCloudComponentPage {
 
     filter: ElementFinder;
-    taskFilters = $(`mat-expansion-panel[data-automation-id='Task Filters']`);
+    taskFilters = $(`${materialLocators.Expansion.panel.root}[data-automation-id='Task Filters']`);
     activeFilter = $('.adf-active [data-automation-id="adf-filter-label"]');
 
     getTaskFilterLocatorByFilterName = async (filterName: string): Promise<ElementFinder> => $$(`button[data-automation-id="${filterName}_filter"]`).first();

lib/testing/src/lib/protractor/process-services/pages/process-filters.page.ts

@@ -17,6 +17,7 @@
 
 import { $ } from 'protractor';
 import { FiltersPage } from './filters.page';
+import { materialLocators } from '../../public-api';
 
 export class ProcessFiltersPage {
     defaultProcessFilters = {
@@ -30,7 +31,7 @@ export class ProcessFiltersPage {
     runningFilter = $('button[data-automation-id="Running_filter"]');
     completedFilter = $('button[data-automation-id="Completed_filter"]');
     allFilter = $('button[data-automation-id="All_filter"]');
-    accordionMenu = $('.app-processes-menu mat-accordion');
+    accordionMenu = $(`.app-processes-menu ${materialLocators.Accordion.root}`);
 
     async clickRunningFilterButton(): Promise<void> {
         await this.filtersPage.clickFilterButton(this.runningFilter);

lib/testing/src/lib/protractor/process-services/pages/process-instance-tasks.page.ts

@@ -18,11 +18,12 @@
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { by, $ } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
+import { materialLocators } from '../../public-api';
 
 export class ProcessInstanceTasksPage {
 
     startProcessDialog = $('#adf-start-process-dialog');
-    title = this.startProcessDialog.$('h4.mat-dialog-title');
+    title = this.startProcessDialog.$(`h4${materialLocators.Dialog.title}`);
     closeButton = this.startProcessDialog.element(by.cssContainingText(`div.adf-start-process-dialog-actions button span`, 'Close'));
     startForm = $('div[data-automation-id="start-form"]');
 

lib/testing/src/lib/protractor/process-services/pages/start-process.page.ts

@@ -21,6 +21,7 @@ import { BrowserActions } from '../../core/utils/browser-actions';
 import { DropdownPage } from '../../core/pages/material/dropdown.page';
 import { FormFields } from '../../core/pages/form/form-fields';
 import { Logger } from '../../core/utils/logger';
+import { materialLocators } from '../../public-api';
 
 export class StartProcessPage {
 
@@ -34,10 +35,10 @@ export class StartProcessPage {
     startProcessButtonDisabled = $('button[data-automation-id="btn-start"][disabled]');
     noProcess = $('.adf-empty-content__title');
     processDefinition = $('input[id="processDefinitionName"]');
-    processDefinitionOptionsPanel = $('div[class*="mat-autocomplete-panel"]');
+    processDefinitionOptionsPanel = $(`div[class*="${materialLocators.Autocomplete.panel.root}"]`);
 
     processDefinitionDropdown = new DropdownPage($('#adf-select-process-dropdown'));
-    applicationDropdown = new DropdownPage($('[data-automation-id*="start-process-app"] .mat-select-arrow'));
+    applicationDropdown = new DropdownPage($(`[data-automation-id*="start-process-app"] ${materialLocators.Select.arrow.class}`));
 
     async checkNoProcessMessage(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.noProcess);
@@ -77,7 +78,7 @@ export class StartProcessPage {
             }
         }
         try {
-            await BrowserVisibility.waitUntilElementIsVisible($('.mat-card-content'), 2000);
+            await BrowserVisibility.waitUntilElementIsVisible($(materialLocators.Card.content.class), 2000);
         } catch (error) {
             Logger.log(`No start form on process`);
         }
@@ -148,7 +149,7 @@ export class StartProcessPage {
         return BrowserActions.getInputValue(this.processDefinition);
     }
 
-    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);
     }

lib/testing/src/lib/protractor/process-services/pages/task-filters.page.ts

@@ -17,6 +17,7 @@
 
 import { $ } from 'protractor';
 import { FiltersPage } from './filters.page';
+import { materialLocators } from '../../public-api';
 
 export class TaskFiltersPage {
     defaultTaskFilters = {
@@ -32,7 +33,7 @@ export class TaskFiltersPage {
     queuedTask = $('[data-automation-id="Queued Tasks_filter"]');
     completedTask = $('[data-automation-id="Completed Tasks_filter"]');
     involvedTask = $('[data-automation-id="Involved Tasks_filter"]');
-    accordionMenu = $('.app-processes-menu mat-accordion');
+    accordionMenu = $(`.app-processes-menu ${materialLocators.Accordion.root}`);
 
     async clickMyTasksFilterButton(): Promise<void> {
         await this.filtersPage.clickFilterButton(this.myTasks);