From b8e62534bf26c16790298632a3f24c5b572e7c4e Mon Sep 17 00:00:00 2001 From: Rafal Szmit Date: Thu, 7 Mar 2024 19:33:03 +0100 Subject: [PATCH] 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 --- .../page-object/components/basic/index.ts | 2 - .../page-object/components/index.ts | 1 + .../{basic => material}/error.component.ts | 3 +- .../page-object/components/material/index.ts | 19 + .../components/material/material-locators.ts | 25 + .../validation.component.ts | 3 +- .../components/group.component.ts | 2 +- .../components/people.component.ts | 2 +- .../pages/upload-dialog.page.ts | 4 +- .../pages/version-manager.page.ts | 4 +- e2e/core/pages/content-services.page.ts | 4 +- e2e/core/pages/metadata-view.page.ts | 20 +- .../form-field/dropdown-widget.e2e.ts | 4 +- .../pages/tasks-cloud-demo.page.ts | 5 +- .../pages/attach-form.page.ts | 4 +- .../pages/dialog/start-task-dialog.page.ts | 6 +- .../pages/process-details.page.ts | 4 +- .../pages/process-list-demo.page.ts | 8 +- .../pages/process-service-tab-bar.page.ts | 10 +- .../pages/process-services.page.ts | 8 +- .../pages/task-details.page.ts | 4 +- .../pages/task-list-demo.page.ts | 12 +- e2e/process-services/pages/tasks.page.ts | 10 +- e2e/search/pages/search-bar.page.ts | 8 +- .../core/dialog/edit-json-dialog.ts | 3 +- .../card-view/card-view-boolean-item.page.ts | 3 +- .../card-view/card-view-date-item.page.ts | 3 +- .../card-view/card-view-select-item.page.ts | 3 +- .../card-view/card-view-text-item.page.ts | 3 +- .../core/pages/data-table-component.page.ts | 21 +- .../protractor/core/pages/form/form-fields.ts | 7 +- .../protractor/core/pages/form/form.page.ts | 3 +- .../form/widgets/attach-file-widget.page.ts | 17 +- .../form/widgets/checkbox-widget.page.ts | 9 +- .../form/widgets/date-time-widget.page.ts | 5 +- .../form/widgets/dropdown-widget.page.ts | 7 +- .../form/widgets/dynamic-table-widget.page.ts | 7 +- .../pages/form/widgets/group-widget.page.ts | 3 +- .../form/widgets/radio-buttons-widget.page.ts | 3 +- .../core/pages/form/widgets/tab.page.ts | 9 +- .../form/widgets/typeahead-widget.page.ts | 3 +- .../lib/protractor/core/pages/header.page.ts | 13 +- .../core/pages/material/checkbox.page.ts | 5 +- .../material/date-picker-calendar.page.ts | 29 +- .../core/pages/material/date-picker.page.ts | 3 +- .../date-time-picker-calendar.page.ts | 23 +- .../pages/material/date-time-picker.page.ts | 9 +- .../core/pages/material/dropdown.page.ts | 21 +- .../core/pages/material/material-locators.ts | 431 ++++++++++++++++++ .../core/pages/material/public-api.ts | 1 + .../core/pages/material/tabs.page.ts | 7 +- .../core/pages/material/toggle.page.ts | 5 +- .../protractor/core/pages/pagination.page.ts | 9 +- .../protractor/core/pages/settings.page.ts | 17 +- .../protractor/core/pages/user-info.page.ts | 3 +- .../lib/protractor/core/pages/viewer.page.ts | 14 +- .../app/app-list-cloud.page.ts | 5 +- ...dit-process-filter-cloud-component.page.ts | 35 +- .../edit-task-filter-cloud-component.page.ts | 27 +- .../pages/form-cloud-component.page.ts | 5 +- .../pages/group-cloud-component.page.ts | 9 +- .../pages/people-cloud-component.page.ts | 13 +- .../process-filters-cloud-component.page.ts | 3 +- .../start-process-cloud-component.page.ts | 3 +- .../pages/start-tasks-cloud-component.page.ts | 11 +- .../task-filters-cloud-component.page.ts | 3 +- .../pages/process-filters.page.ts | 3 +- .../pages/process-instance-tasks.page.ts | 3 +- .../pages/start-process.page.ts | 9 +- .../pages/task-filters.page.ts | 3 +- 70 files changed, 764 insertions(+), 239 deletions(-) rename e2e-playwright/page-object/components/{basic => material}/error.component.ts (88%) create mode 100644 e2e-playwright/page-object/components/material/index.ts create mode 100644 e2e-playwright/page-object/components/material/material-locators.ts rename e2e-playwright/page-object/components/{basic => material}/validation.component.ts (88%) create mode 100644 lib/testing/src/lib/protractor/core/pages/material/material-locators.ts diff --git a/e2e-playwright/page-object/components/basic/index.ts b/e2e-playwright/page-object/components/basic/index.ts index 0a69fa2196..5323e55b3e 100644 --- a/e2e-playwright/page-object/components/basic/index.ts +++ b/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'; diff --git a/e2e-playwright/page-object/components/index.ts b/e2e-playwright/page-object/components/index.ts index 95ca067018..07bb0aad6e 100644 --- a/e2e-playwright/page-object/components/index.ts +++ b/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'; diff --git a/e2e-playwright/page-object/components/basic/error.component.ts b/e2e-playwright/page-object/components/material/error.component.ts similarity index 88% rename from e2e-playwright/page-object/components/basic/error.component.ts rename to e2e-playwright/page-object/components/material/error.component.ts index 508e750c6c..ea3014876f 100644 --- a/e2e-playwright/page-object/components/basic/error.component.ts +++ b/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) { diff --git a/e2e-playwright/page-object/components/material/index.ts b/e2e-playwright/page-object/components/material/index.ts new file mode 100644 index 0000000000..215a0fb660 --- /dev/null +++ b/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'; diff --git a/e2e-playwright/page-object/components/material/material-locators.ts b/e2e-playwright/page-object/components/material/material-locators.ts new file mode 100644 index 0000000000..c604bd7547 --- /dev/null +++ b/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' + } +}; diff --git a/e2e-playwright/page-object/components/basic/validation.component.ts b/e2e-playwright/page-object/components/material/validation.component.ts similarity index 88% rename from e2e-playwright/page-object/components/basic/validation.component.ts rename to e2e-playwright/page-object/components/material/validation.component.ts index e861871ee9..8060fefbbc 100644 --- a/e2e-playwright/page-object/components/basic/validation.component.ts +++ b/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) { diff --git a/e2e-playwright/process-services-cloud/components/group.component.ts b/e2e-playwright/process-services-cloud/components/group.component.ts index d1161bf099..ea1f0ff9fe 100644 --- a/e2e-playwright/process-services-cloud/components/group.component.ts +++ b/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'; diff --git a/e2e-playwright/process-services-cloud/components/people.component.ts b/e2e-playwright/process-services-cloud/components/people.component.ts index 0b0ae1c7b0..0055d2c42e 100644 --- a/e2e-playwright/process-services-cloud/components/people.component.ts +++ b/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'; diff --git a/e2e/content-services/pages/upload-dialog.page.ts b/e2e/content-services/pages/upload-dialog.page.ts index a70bcc8efb..05eb957c8e 100644 --- a/e2e/content-services/pages/upload-dialog.page.ts +++ b/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']`); diff --git a/e2e/content-services/pages/version-manager.page.ts b/e2e/content-services/pages/version-manager.page.ts index c8a3498502..cacc2b15ba 100644 --- a/e2e/content-services/pages/version-manager.page.ts +++ b/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 { 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 { diff --git a/e2e/core/pages/content-services.page.ts b/e2e/core/pages/content-services.page.ts index 1eebfb420f..e47096a910 100644 --- a/e2e/core/pages/content-services.page.ts +++ b/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 { const actionButton = $(`button[data-automation-id="context-${actionName}"`); diff --git a/e2e/core/pages/metadata-view.page.ts b/e2e/core/pages/metadata-view.page.ts index 8815076cbe..95e4aaadf6 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -16,12 +16,12 @@ */ import { $, by, element, Key, protractor, ElementFinder } from 'protractor'; -import { BrowserActions, BrowserVisibility, DropdownPage, TestElement, Logger } from '@alfresco/adf-testing'; +import { BrowserActions, BrowserVisibility, DropdownPage, TestElement, Logger, materialLocators } from '@alfresco/adf-testing'; export class MetadataViewPage { title = $(`div[info-drawer-title]`); - expandedAspect = $(`mat-expansion-panel-header[aria-expanded='true']`); - aspectTitle = `mat-panel-title`; + expandedAspect = $(`${materialLocators.Expansion.panel.header.root}[aria-expanded='true']`); + aspectTitle = materialLocators.Panel.title; name = $(`[data-automation-id='card-textitem-value-properties.cm:name']`); creator = $(`[data-automation-id='card-textitem-value-createdByUser.displayName']`); createdDate = $(`span[data-automation-id='card-dateitem-createdAt']`); @@ -37,9 +37,9 @@ export class MetadataViewPage { readonlySwitch = $(`#adf-metadata-readonly`); multiSwitch = $(`#adf-metadata-multi`); defaultPropertiesSwitch = $('#adf-metadata-default-properties'); - closeButton = element(by.cssContainingText('button.mat-button span', 'Close')); + closeButton = element(by.cssContainingText(`button${materialLocators.Button.class} span`, 'Close')); displayAspect = $(`input[data-placeholder='Display Aspect']`); - applyAspect = element(by.cssContainingText(`button span.mat-button-wrapper`, 'Apply Aspect')); + applyAspect = element(by.cssContainingText(`button span${materialLocators.Button.wrapper}`, 'Apply Aspect')); saveMetadataButton = $(`[data-automation-id='save-metadata']`); saveGeneralMetadataButton = $(`[data-automation-id='save-general-info-metadata']`); resetMetadataButton = $(`[data-automation-id='reset-metadata']`); @@ -47,7 +47,7 @@ export class MetadataViewPage { private getMetadataGroupLocator = async (groupName: string): Promise => $(`[data-automation-id="adf-metadata-group-${groupName}"]`); private getExpandedMetadataGroupLocator = async (groupName: string): Promise => - $(`[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 { return BrowserActions.getText(this.title); @@ -116,7 +116,7 @@ export class MetadataViewPage { async clickOnPropertiesTab(): Promise { 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 { 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 { 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 { @@ -208,7 +208,7 @@ export class MetadataViewPage { } async changeContentType(option: string, attempt = 0, maxAttempt = 3): Promise { - 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; diff --git a/e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts b/e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts index e1cdba1638..51a179b73d 100644 --- a/e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts +++ b/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'); diff --git a/e2e/process-services-cloud/pages/tasks-cloud-demo.page.ts b/e2e/process-services-cloud/pages/tasks-cloud-demo.page.ts index c5dd305a2b..128f3467e0 100644 --- a/e2e/process-services-cloud/pages/tasks-cloud-demo.page.ts +++ b/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(); diff --git a/e2e/process-services/pages/attach-form.page.ts b/e2e/process-services/pages/attach-form.page.ts index d00735430d..bc917b74d5 100644 --- a/e2e/process-services/pages/attach-form.page.ts +++ b/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 { diff --git a/e2e/process-services/pages/dialog/start-task-dialog.page.ts b/e2e/process-services/pages/dialog/start-task-dialog.page.ts index a5dd5fd550..38abf9d8b1 100644 --- a/e2e/process-services/pages/dialog/start-task-dialog.page.ts +++ b/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 { @@ -86,7 +86,7 @@ export class StartTaskDialogPage { await locator.sendKeys(Key.TAB); } - async checkValidationErrorIsDisplayed(error: string, elementRef = 'mat-error'): Promise { + async checkValidationErrorIsDisplayed(error: string, elementRef = materialLocators.Error.root): Promise { const errorElement = element(by.cssContainingText(elementRef, error)); await BrowserVisibility.waitUntilElementIsVisible(errorElement); } diff --git a/e2e/process-services/pages/process-details.page.ts b/e2e/process-services/pages/process-details.page.ts index 49e90214f4..2310768ee2 100644 --- a/e2e/process-services/pages/process-details.page.ts +++ b/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'); diff --git a/e2e/process-services/pages/process-list-demo.page.ts b/e2e/process-services/pages/process-list-demo.page.ts index f6d1794085..2ebe3720b3 100644 --- a/e2e/process-services/pages/process-list-demo.page.ts +++ b/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 { - const errorMessage = element(by.cssContainingText('mat-error', error)); + const errorMessage = element(by.cssContainingText(materialLocators.Error.root, error)); await BrowserVisibility.waitUntilElementIsVisible(errorMessage); } diff --git a/e2e/process-services/pages/process-service-tab-bar.page.ts b/e2e/process-services/pages/process-service-tab-bar.page.ts index b35a13c215..90ee7e4302 100644 --- a/e2e/process-services/pages/process-service-tab-bar.page.ts +++ b/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 { await BrowserActions.click(this.tasksButton); diff --git a/e2e/process-services/pages/process-services.page.ts b/e2e/process-services/pages/process-services.page.ts index f0b2c170ac..af7e18e204 100644 --- a/e2e/process-services/pages/process-services.page.ts +++ b/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 { await BrowserVisibility.waitUntilElementIsVisible(this.apsAppsContainer); diff --git a/e2e/process-services/pages/task-details.page.ts b/e2e/process-services/pages/task-details.page.ts index 20cf9ad5c8..05c0082053 100644 --- a/e2e/process-services/pages/task-details.page.ts +++ b/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 { 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); } diff --git a/e2e/process-services/pages/task-list-demo.page.ts b/e2e/process-services/pages/task-list-demo.page.ts index e05771efbb..d3e550ca96 100644 --- a/e2e/process-services/pages/task-list-demo.page.ts +++ b/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 { 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 { await BrowserVisibility.waitUntilElementIsVisible(this.pageForm); - const errorMessage = this.pageForm.$('mat-error'); + const errorMessage = this.pageForm.$(materialLocators.Error.root); return BrowserActions.getText(errorMessage); } diff --git a/e2e/process-services/pages/tasks.page.ts b/e2e/process-services/pages/tasks.page.ts index 4c292097aa..3016fd3e94 100644 --- a/e2e/process-services/pages/tasks.page.ts +++ b/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 { await this.clickOnCreateButton(); @@ -132,13 +132,13 @@ export class TasksPage { async removeChecklists(name: string): Promise { 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 { 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 { diff --git a/e2e/search/pages/search-bar.page.ts b/e2e/search/pages/search-bar.page.ts index 7c8c8a824a..9ccb00b6e2 100644 --- a/e2e/search/pages/search-bar.page.ts +++ b/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}']`); diff --git a/lib/testing/src/lib/protractor/core/dialog/edit-json-dialog.ts b/lib/testing/src/lib/protractor/core/dialog/edit-json-dialog.ts index fd239be376..888766dee2 100644 --- a/lib/testing/src/lib/protractor/core/dialog/edit-json-dialog.ts +++ b/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 { await BrowserVisibility.waitUntilElementIsVisible(this.dialog); diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-boolean-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-boolean-item.page.ts index 62cd9e3541..de08e9eb87 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-boolean-item.page.ts +++ b/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`)); diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-date-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-date-item.page.ts index 7561ba9963..84f4d65ac7 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-date-item.page.ts +++ b/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') { diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-select-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-select-item.page.ts index b2af436f45..0d8dc116c1 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-select-item.page.ts +++ b/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 { diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts index b433debb36..24c046c080 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts +++ b/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 { diff --git a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts index 0b18daf765..a776a45b9c 100644 --- a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts +++ b/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 { @@ -349,7 +350,7 @@ export class DataTableComponentPage { async waitTillContentLoaded(): Promise { 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.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME); + await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), 2000); + 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 { - 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; } diff --git a/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts b/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts index 9a9ffafb18..bd37c0d9bf 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts +++ b/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'); - saveButton = element(by.cssContainingText('mat-card-actions[class*="adf-for"] span', 'SAVE')); + refreshButton = $(`div[class*="form-reload-button"] ${materialLocators.Icon.root}`); + 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'); diff --git a/lib/testing/src/lib/protractor/core/pages/form/form.page.ts b/lib/testing/src/lib/protractor/core/pages/form/form.page.ts index 10a166e312..1741ce34c7 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/form.page.ts +++ b/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 { await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText('.adf-error-text', errorMessage))); diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/attach-file-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/attach-file-widget.page.ts index 8c37cb89cd..624e64e0c0 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/attach-file-widget.page.ts +++ b/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'); - attachedFileOptions = $('.mat-menu-panel .mat-menu-content'); - viewFileOptionButton = $(`.mat-menu-panel .mat-menu-content button[id$="show-file"]`); - downloadFileOptionButton = $(`.mat-menu-panel .mat-menu-content button[id$="download-file"]`); - removeFileOptionButton = TestElement.byCss(`.mat-menu-panel .mat-menu-content button[id$="remove"]`); + attachedFileMenu = $(`${materialLocators.List.item.root} button`); + attachedFileOptions = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class}`); + viewFileOptionButton = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="show-file"]`); + downloadFileOptionButton = $(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="download-file"]`); + removeFileOptionButton = TestElement.byCss(`${materialLocators.Menu.panel} ${materialLocators.Menu.content.class} button[id$="remove"]`); async attachFile(fieldId: string, fileLocation: string): Promise { const widget = await this.formFields.getWidget(fieldId); @@ -43,7 +44,7 @@ export class AttachFileWidgetPage { async checkNoFileIsAttached(fieldId: string): Promise { 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 { - 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)); } } diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/checkbox-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/checkbox-widget.page.ts index 37925c1d4a..0aee70cedd 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/checkbox-widget.page.ts +++ b/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"]'); - checkboxLocator = ('mat-checkbox'); + checkboxLabel = $(`span[class*="${materialLocators.Checkbox.label.root}"]`); + checkboxLocator = materialLocators.Checkbox.root; getCheckboxLabel(): Promise { return BrowserActions.getText(this.checkboxLabel); } async clickCheckboxInput(fieldId: string): Promise { - 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 { 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); } } diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/date-time-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/date-time-widget.page.ts index d740ae0b8e..c587ac5cdb 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/date-time-widget.page.ts +++ b/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 { - 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 { - 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); } diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts index 1d17a0c7bb..27ef2f769b 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts +++ b/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 { - 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 { 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 { - const optionLocator = TestElement.byText('mat-option span', name); + const optionLocator = TestElement.byText(`${materialLocators.Option.root} span`, name); await optionLocator.click(); } } diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/dynamic-table-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/dynamic-table-widget.page.ts index 0d47a1e3f8..441501930f 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/dynamic-table-widget.page.ts +++ b/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'); - calendarContent = $('.mat-datetimepicker-calendar-content'); + calendarHeader = $(materialLocators.DatetimePicker.calendar.header.date.time); + 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 { diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/group-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/group-widget.page.ts index b85beda499..b16d3b5a83 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/group-widget.page.ts +++ b/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 { return this.formFields.getFieldLabel(fieldId); diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/radio-buttons-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/radio-buttons-widget.page.ts index 04f2dce2a5..9504cd88a2 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/radio-buttons-widget.page.ts +++ b/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(); diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/tab.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/tab.page.ts index 4ca59ef3fb..cd7606500e 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/tab.page.ts +++ b/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 { - 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 { - 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 { - await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText('.mat-tab-label-content', tabLabel))); + await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText(materialLocators.Tab.label.content.class, tabLabel))); } } diff --git a/lib/testing/src/lib/protractor/core/pages/form/widgets/typeahead-widget.page.ts b/lib/testing/src/lib/protractor/core/pages/form/widgets/typeahead-widget.page.ts index d8f0d3c05d..5850d2f116 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/widgets/typeahead-widget.page.ts +++ b/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 { diff --git a/lib/testing/src/lib/protractor/core/pages/header.page.ts b/lib/testing/src/lib/protractor/core/pages/header.page.ts index f6ae6a6572..f01b157b09 100644 --- a/lib/testing/src/lib/protractor/core/pages/header.page.ts +++ b/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(); - positionEnd = $$('mat-radio-button[value="end"]').first(); - sideBarPositionRight = $('mat-sidenav.mat-drawer.mat-sidenav.mat-drawer-end'); - sideBarPositionLeft = $('mat-sidenav.mat-drawer.mat-sidenav'); + positionStart = $$(`${materialLocators.Radio.button.root}[value="start"]`).first(); + positionEnd = $$(`${materialLocators.Radio.button.root}[value="end"]`).first(); + sideBarPositionRight = $(`${materialLocators.Sidenav.root}${materialLocators.Drawer.class}${materialLocators.Sidenav.root}${materialLocators.Drawer.end}`); + sideBarPositionLeft = $(`${materialLocators.Sidenav.root}${materialLocators.Drawer.class}${materialLocators.Sidenav.root}`); async checkShowMenuCheckBoxIsDisplayed(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.checkBox); @@ -50,7 +51,7 @@ export class HeaderPage { } async clickShowMenuButton(): Promise { - const checkBox = $$('mat-checkbox').first(); + const checkBox = $$(materialLocators.Checkbox.root).first(); await BrowserActions.click(checkBox); } diff --git a/lib/testing/src/lib/protractor/core/pages/material/checkbox.page.ts b/lib/testing/src/lib/protractor/core/pages/material/checkbox.page.ts index 1d32f24ae9..5b5a0f965e 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/checkbox.page.ts +++ b/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); } } diff --git a/lib/testing/src/lib/protractor/core/pages/material/date-picker-calendar.page.ts b/lib/testing/src/lib/protractor/core/pages/material/date-picker-calendar.page.ts index 0340f3e3b7..24e216c901 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/date-picker-calendar.page.ts +++ b/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"]'); - nextMonthButton = $('button[class*="mat-calendar-next-button"]'); - previousMonthButton = $('button[class*="mat-calendar-previous-button"]'); - todayDate = TestElement.byCss('div.mat-calendar-body-today'); - periodButton = $('button[class*=mat-calendar-period-button]'); + datePicker = $(`${materialLocators.Calendar.root}[id*="${materialLocators.Datepicker.root}"]`); + nextMonthButton = $(`button[class*="${materialLocators.Calendar.button('next')}"]`); + previousMonthButton = $(`button[class*="${materialLocators.Calendar.button('previous')}"]`); + todayDate = TestElement.byCss(`div${materialLocators.Calendar.body.today}`); + periodButton = $(`button[class*=${materialLocators.Calendar.button('period')}]`); + + focusedElement = `div${materialLocators.Calendar.body.cell.content.class}${materialLocators.Focus.indicator}`; async getSelectedDate(): Promise { - 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 { 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 { 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 { - const startDayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${startDay}`)); - const endDayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${endDay}`)); + const startDayElement = element(by.cssContainingText(this.focusedElement, `${startDay}`)); + 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 monthElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${month}`)); - const dayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${day}`)); + const yearElement = element(by.cssContainingText(this.focusedElement, `${year}`)); + const monthElement = element(by.cssContainingText(this.focusedElement, `${month}`)); + const dayElement = element(by.cssContainingText(this.focusedElement, `${day}`)); await BrowserActions.click(this.periodButton); await BrowserActions.click(yearElement); diff --git a/lib/testing/src/lib/protractor/core/pages/material/date-picker.page.ts b/lib/testing/src/lib/protractor/core/pages/material/date-picker.page.ts index c86441d6e5..d1142ce3f1 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/date-picker.page.ts +++ b/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; } diff --git a/lib/testing/src/lib/protractor/core/pages/material/date-time-picker-calendar.page.ts b/lib/testing/src/lib/protractor/core/pages/material/date-time-picker-calendar.page.ts index aa4029c0db..4fa63d53e6 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/date-time-picker-calendar.page.ts +++ b/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'); - hourTime = $$('.mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell').first(); - minutesTime = $$('.mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell').first(); - firstEnabledHourSelector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)'; - firstEnabledMinutesSelector = '.mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled)'; - hoursPicker = $('.mat-datetimepicker-clock-hours'); - minutePicker = $('.mat-datetimepicker-clock-minutes'); + timePicker = $(materialLocators.DatetimePicker.clock.class); + hourTime = $$(`${materialLocators.DatetimePicker.clock.hours.class} .${materialLocators.DatetimePicker.clock.cell()}`).first(); + minutesTime = $$(`${materialLocators.DatetimePicker.clock.minutes.class} .${materialLocators.DatetimePicker.clock.cell()}`).first(); + firstEnabledSelector = `.${materialLocators.DatetimePicker.clock.cell()}:not(.${materialLocators.DatetimePicker.clock.cell('disabled')}`; + hoursPicker = $(materialLocators.DatetimePicker.clock.hours.class); + minutePicker = $(materialLocators.DatetimePicker.clock.minutes.class); async waitTillDateDisplayed(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.datePicker); @@ -47,7 +47,7 @@ export class DateTimePickerCalendarPage { async setDate(date?: string): Promise { 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 { - 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 { - 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()); } } diff --git a/lib/testing/src/lib/protractor/core/pages/material/date-time-picker.page.ts b/lib/testing/src/lib/protractor/core/pages/material/date-time-picker.page.ts index 2c17bbcb18..c6e5cfba6b 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/date-time-picker.page.ts +++ b/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'); - datePicker = $('.mat-datepicker-toggle'); + dateTimePicker = $(materialLocators.DatetimePicker.toggle.class); + datePicker = $(materialLocators.Datepicker.toggle.class); dateTime = new DateTimePickerCalendarPage(); constructor(rootElement?: ElementFinder) { if (rootElement) { this.rootElement = rootElement; - this.dateTimePicker = this.rootElement.$('.mat-datetimepicker-toggle'); - this.datePicker = this.rootElement.$('.mat-datepicker-toggle'); + this.dateTimePicker = this.rootElement.$(materialLocators.DatetimePicker.toggle.class); + this.datePicker = this.rootElement.$(materialLocators.Datepicker.toggle.class); } } diff --git a/lib/testing/src/lib/protractor/core/pages/material/dropdown.page.ts b/lib/testing/src/lib/protractor/core/pages/material/dropdown.page.ts index c7ff14464f..7f9cedbff4 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/dropdown.page.ts +++ b/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 { 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 { - return BrowserActions.getText($('mat-form-field span')); + return BrowserActions.getText($(`${materialLocators.Form.field.root} span`)); } async getDropdownOptionList(): Promise { @@ -49,7 +50,7 @@ export class DropdownPage { } async getNumberOfOptions(): Promise { - 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 { - 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 { - 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 { - await BrowserVisibility.waitUntilElementIsVisible($$(`.mat-select-panel`).first()); + await BrowserVisibility.waitUntilElementIsVisible($$(materialLocators.Select.panel.class).first()); } async getSelectedOptionText(): Promise { - 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 { - 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 { - 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 { diff --git a/lib/testing/src/lib/protractor/core/pages/material/material-locators.ts b/lib/testing/src/lib/protractor/core/pages/material/material-locators.ts new file mode 100644 index 0000000000..b0d0636caa --- /dev/null +++ b/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' + } + } +}; diff --git a/lib/testing/src/lib/protractor/core/pages/material/public-api.ts b/lib/testing/src/lib/protractor/core/pages/material/public-api.ts index 56e19a7333..2be3c63a24 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/public-api.ts +++ b/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'; diff --git a/lib/testing/src/lib/protractor/core/pages/material/tabs.page.ts b/lib/testing/src/lib/protractor/core/pages/material/tabs.page.ts index a8ca8307fd..5eefd2b038 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/tabs.page.ts +++ b/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 { - 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 { - 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'); } diff --git a/lib/testing/src/lib/protractor/core/pages/material/toggle.page.ts b/lib/testing/src/lib/protractor/core/pages/material/toggle.page.ts index 28c6f6861f..618e61e28d 100644 --- a/lib/testing/src/lib/protractor/core/pages/material/toggle.page.ts +++ b/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 { 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 { 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); } diff --git a/lib/testing/src/lib/protractor/core/pages/pagination.page.ts b/lib/testing/src/lib/protractor/core/pages/pagination.page.ts index 9f78890492..b660f43151 100644 --- a/lib/testing/src/lib/protractor/core/pages/pagination.page.ts +++ b/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 { 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 { 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); } diff --git a/lib/testing/src/lib/protractor/core/pages/settings.page.ts b/lib/testing/src/lib/protractor/core/pages/settings.page.ts index cbc6e6938d..a7285d5c19 100644 --- a/lib/testing/src/lib/protractor/core/pages/settings.page.ts +++ b/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')); - silentLoginToggleLabel = $('mat-slide-toggle[formcontrolname="silentLogin"] label'); - silentLoginToggleElement = $('mat-slide-toggle[formcontrolname="silentLogin"]'); - implicitFlowLabel = $('mat-slide-toggle[formcontrolname="implicitFlow"] label'); - implicitFlowElement = $('mat-slide-toggle[formcontrolname="implicitFlow"]'); + ssoRadioButton = element(by.cssContainingText(`[id*="${materialLocators.Radio.root}"]`, 'SSO')); + silentLoginToggleLabel = $(`${materialLocators.Slide.toggle.root}[formcontrolname="silentLogin"] label`); + silentLoginToggleElement = $(`${materialLocators.Slide.toggle.root}[formcontrolname="silentLogin"]`); + implicitFlowLabel = $(`${materialLocators.Slide.toggle.root}[formcontrolname="implicitFlow"] label`); + 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 { 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); diff --git a/lib/testing/src/lib/protractor/core/pages/user-info.page.ts b/lib/testing/src/lib/protractor/core/pages/user-info.page.ts index af3f87fde1..d286e8d811 100644 --- a/lib/testing/src/lib/protractor/core/pages/user-info.page.ts +++ b/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'); diff --git a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts b/lib/testing/src/lib/protractor/core/pages/viewer.page.ts index a9c858ab43..106360d2d1 100644 --- a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts +++ b/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.waitUntilElementIsNotVisible(element(by.tagName('mat-progress-spinner')), MAX_LOADING_TIME); + await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName(materialLocators.Progress.spinner.root))); + 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 { + 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; } diff --git a/lib/testing/src/lib/protractor/process-services-cloud/app/app-list-cloud.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/app/app-list-cloud.page.ts index 2cc3d20cee..ee32e481d3 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/app/app-list-cloud.page.ts +++ b/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 { await BrowserVisibility.waitUntilElementIsVisible(this.apsAppsContainer); @@ -34,7 +35,7 @@ export class AppListCloudPage { } async goToApp(applicationName: string): Promise { - await BrowserActions.clickExecuteScript('mat-card[title="' + applicationName + '"]'); + await BrowserActions.clickExecuteScript(`${materialLocators.Card.root}[title="` + applicationName + `"]`); } async countAllApps(): Promise { diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts index a30b286df2..4b57f0e2ce 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts +++ b/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']`)); - statusDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-status']`)); - sortDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-sort']`)); - orderDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-order']`)); - processDefinitionNameDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-processDefinitionName']`)); - suspendedDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-suspendedDateRange']`)); - startedDateRangeDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-process-property-startedDateRange']`)); - completedDateRangeDropdown = new DropdownPage($(`mat-select[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']`)); + appNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-appName']`)); + statusDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-status']`)); + sortDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-sort']`)); + orderDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-order']`)); + processDefinitionNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-processDefinitionName']`)); + suspendedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-suspendedDateRange']`)); + startedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-startedDateRange']`)); + completedDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-completedDateRange']`)); + 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 content = TestElement.byCss('adf-cloud-edit-process-filter mat-expansion-panel [style*="visible"]'); + private expansionPanelExtended = this.rootElement.$(`${materialLocators.Expansion.panel.header.root}${materialLocators.Expanded.class}`); + 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 { - 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 { - 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 { - 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 { - 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 { - 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); } diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts index b66b29361a..cf0e89e7b5 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/edit-task-filter-cloud-component.page.ts +++ b/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']`)); - statusDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-status']`)); - sortDropdown = new DropdownPage($(`mat-select[data-automation-id='adf-cloud-edit-task-property-sort']`)); + appNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-appName']`)); + statusDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-status']`)); + 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']`)); - completedDateDropdown = new DropdownPage($(`mat-select[data-automation-id="adf-cloud-edit-process-property-completedDateRange"]`)); + orderDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-task-property-order']`)); + 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"]')); - createdDateRangeDropdown = new DropdownPage($(`mat-select[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']`)); - dueDateRangeDropdown = new DropdownPage($(`mat-select[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']`)); + processDefinitionNameDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id="adf-cloud-edit-task-property-processDefinitionName"]`)); + createdDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-createdDateRange']`)); + createdDateRangeWithin = new DatePickerPage($(`${materialLocators.Datepicker.toggle.root}[data-automation-id='adf-cloud-edit-process-property-date-range-createdDateRange']`)); + dueDateRangeDropdown = new DropdownPage($(`${materialLocators.Select.root}[data-automation-id='adf-cloud-edit-process-property-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 content = this.rootElement.$('div.mat-expansion-panel-content[style*="visible"]'); + private expansionPanelExtended = this.rootElement.$(`${materialLocators.Expansion.panel.header.root}${materialLocators.Expanded.class}`); + private content = this.rootElement.$(`div${materialLocators.Expansion.panel.content.class}[style*="visible"]`); async isFilterDisplayed(): Promise { return BrowserVisibility.waitUntilElementIsVisible(this.filter); diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/form-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/form-cloud-component.page.ts index 736714a55a..3e1b092877 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/form-cloud-component.page.ts +++ b/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); - formCloudRender = $$('.mat-tab-list .mat-tab-label').get(0); + formCloudEditor = $$(`${materialLocators.Tab.list} ${materialLocators.Tab.label.class}`).get(1); + formCloudRender = $$(`${materialLocators.Tab.list} ${materialLocators.Tab.label.class}`).get(0); configEditorPage = new ConfigEditorPage(); diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/group-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/group-cloud-component.page.ts index 94bbf18595..01391f6f7a 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/group-cloud-component.page.ts +++ b/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 => $$(`mat-option[data-automation-id="adf-cloud-group-chip-${name}"]`).first(); + getGroupRowLocatorByName = async (name: string): Promise => $$(`${materialLocators.Option.root}[data-automation-id="adf-cloud-group-chip-${name}"]`).first(); async searchGroups(name: string): Promise { await BrowserActions.clearSendKeys(this.groupCloudSearch, name, 100); @@ -59,7 +60,7 @@ export class GroupCloudComponentPage { async checkSelectedGroup(group: string): Promise { 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 { - 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 { - 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); } diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/people-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/people-cloud-component.page.ts index 130e5f79a9..336c936610 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/people-cloud-component.page.ts +++ b/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"]'); - noOfUsersDisplayed = $$('mat-option span.adf-people-label-name'); + assigneeChipList = $(`${materialLocators.Chip.list.root}[data-automation-id="adf-cloud-people-chip-list"]`); + noOfUsersDisplayed = $$(`${materialLocators.Chip.list.root} span.adf-people-label-name`); - getAssigneeRowLocatorByContainingName = async (name: string): Promise => element.all(by.cssContainingText('mat-option span.adf-people-label-name', name)).first(); + getAssigneeRowLocatorByContainingName = async (name: string): Promise => element.all(by.cssContainingText(`${materialLocators.Option.root} span.adf-people-label-name`, name)).first(); async clearAssignee(): Promise { await BrowserActions.clearSendKeys(this.peopleCloudSearch, ' '); @@ -64,12 +65,12 @@ export class PeopleCloudComponentPage { async getChipAssignee(): Promise { 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 { 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 { @@ -104,7 +105,7 @@ export class PeopleCloudComponentPage { async checkSelectedPeople(person: string): Promise { 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; diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/process-filters-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/process-filters-cloud-component.page.ts index 41fc3b0de3..968f9c3607 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/process-filters-cloud-component.page.ts +++ b/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'); diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/start-process-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/start-process-cloud-component.page.ts index bd1ab1b08a..bf17234bce 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/start-process-cloud-component.page.ts +++ b/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 { await BrowserVisibility.waitUntilElementIsVisible(this.noProcess); diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/start-tasks-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/start-tasks-cloud-component.page.ts index 3a4d9fface..852263f31a 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/start-tasks-cloud-component.page.ts +++ b/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 { + async checkValidationErrorIsDisplayed(error: string, elementRef = materialLocators.Error.root): Promise { const errorElement = element(by.cssContainingText(elementRef, error)); await BrowserVisibility.waitUntilElementIsVisible(errorElement); } @@ -88,20 +89,20 @@ export class StartTasksCloudPage { async selectFormDefinition(option: string): Promise { 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 { 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 { 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(); } diff --git a/lib/testing/src/lib/protractor/process-services-cloud/pages/task-filters-cloud-component.page.ts b/lib/testing/src/lib/protractor/process-services-cloud/pages/task-filters-cloud-component.page.ts index 4bdae817e4..10c17c98e6 100644 --- a/lib/testing/src/lib/protractor/process-services-cloud/pages/task-filters-cloud-component.page.ts +++ b/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 => $$(`button[data-automation-id="${filterName}_filter"]`).first(); diff --git a/lib/testing/src/lib/protractor/process-services/pages/process-filters.page.ts b/lib/testing/src/lib/protractor/process-services/pages/process-filters.page.ts index 7034bf14c8..24ed3e8340 100644 --- a/lib/testing/src/lib/protractor/process-services/pages/process-filters.page.ts +++ b/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 { await this.filtersPage.clickFilterButton(this.runningFilter); diff --git a/lib/testing/src/lib/protractor/process-services/pages/process-instance-tasks.page.ts b/lib/testing/src/lib/protractor/process-services/pages/process-instance-tasks.page.ts index d3254feaf8..64fb627524 100644 --- a/lib/testing/src/lib/protractor/process-services/pages/process-instance-tasks.page.ts +++ b/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"]'); diff --git a/lib/testing/src/lib/protractor/process-services/pages/start-process.page.ts b/lib/testing/src/lib/protractor/process-services/pages/start-process.page.ts index 8484479538..dbf513997b 100644 --- a/lib/testing/src/lib/protractor/process-services/pages/start-process.page.ts +++ b/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 { 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 { + async checkValidationErrorIsDisplayed(error: string, elementRef = materialLocators.Error.root): Promise { const errorElement = element(by.cssContainingText(elementRef, error)); await BrowserVisibility.waitUntilElementIsVisible(errorElement); } diff --git a/lib/testing/src/lib/protractor/process-services/pages/task-filters.page.ts b/lib/testing/src/lib/protractor/process-services/pages/task-filters.page.ts index 355dbc53b9..4284cb9ddc 100644 --- a/lib/testing/src/lib/protractor/process-services/pages/task-filters.page.ts +++ b/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 { await this.filtersPage.clickFilterButton(this.myTasks);