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/process-services/pages/attach-form.page.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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