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/basic/error.component.ts → 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/basic/validation.component.ts → 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,15 +16,15 @@
  */
 
 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');
     dialog = $('div[id="upload-dialog"]');
     minimizedDialog = $('div[class*="upload-dialog--minimized"]');
     uploadedStatusIcon = '.adf-file-uploading-row__status--done';
     cancelledStatusIcon = 'div[class*="status--cancelled"]';
-    errorStatusIcon = 'div[class*="status--error"] mat-icon';
+    errorStatusIcon = `div[class*="status--error"] ${materialLocators.Icon.root}`;
     rowByRowName = by.xpath('ancestor::adf-file-uploading-list-row');
     title = $('span[class*="upload-dialog__title"]');
     toggleMinimizeButton = $(`[data-automation-id='adf-upload-dialog__toggle-minimize']`);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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