[ACS-10956] Update eslint configuration for all automated tests related files (#4991)

* [ACS-10956] ACS-10956 updates eslint for more files * [ACS-10956] eslint update * Revert package-lock.json changes * Revert package-lock.json to develop version * testing eslint changes 1 * [ACS-10956] updated eslint for e2e folder * [ACS-10956] added eslint for aca-playwright-shared file * Sync package-lock.json with develop * [ACS-10956] eslint e2e now uses playwright and angular plugin. * [ACS-10956] changed error to warn for no-angular-material-selectors * [ACS-10956] two rules turned off for aca-playwright-shared * [ACS-10956] reverted changes for spec files * [ACS-10956] changed back to error * [ACS-10956] first eslint fixes * [ACS-10956] more eslint fixes * [ACS-10956] more eslint fixes pt 23 * [ACS-10956] last lintfix fixes * [ACS-10956] sonar fixes 1 * [ACS-10956] reverted package-lock.json * [ACS-10956] test fixes after the eslint changes 1 * [ACS-10956] sonar fix2 * [ACS-10956] test fixes after eslint update 24
2026-09-09 18:02:54 +00:00 · 2026-01-30 15:23:48 +01:00
parent bf367628ae
commit 19270e256c
61 changed files with 188 additions and 281 deletions
@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  extends: '../../.eslintrc.json',
+  extends: ['../../.eslintrc.json', '../../.eslintrc.e2e.json'],
  ignorePatterns: ['!**/*'],
  overrides: [
    {
@@ -10,7 +10,15 @@ module.exports = {
        createDefaultProgram: true
      },
      rules: {
-        'no-console': ['error', {'allow': ['info', 'log', 'warn', 'error'] }]
+        'no-console': ['error', {'allow': ['info', 'log', 'warn', 'error'] }],
+        'playwright/no-raw-locators': 'off'
+      }
+    },
+    {
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-misused-promises': 'off'
      }
    }
  ]
@@ -62,21 +62,19 @@ export enum MimeType {
 export class ActionsDropdownComponent extends BaseComponent {
  private static rootElement = 'aca-edit-rule-dialog aca-rule-action-list';

-  private getOptionLocator = (optionName: string): Locator =>
-    this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName }).first();
+  private getOptionLocator = (optionName: string): Locator => this.page.locator('[role=listbox] [role=option]', { hasText: optionName }).first();
  private ruleActionLocator = this.getChild('aca-rule-action');
  private addActionButtonLocator = this.getChild('[data-automation-id="rule-action-list-add-action-button"]');
  private actionDropdownLocator = this.getChild('[data-automation-id="rule-action-select"]');
  private actionAspectNameLocator = '[data-automation-id="header-aspect-name"] .adf-property-field';
  private actionCheckInInputLocator = '[data-automation-id="header-description"] input';
-  private actionAutoDeclareLocator = '[data-automation-id="header-version"] mat-select';
-  private actionSpecialiseTypeLocator = '[data-automation-id="header-type-name"] mat-select';
  private actionSimpleWorkflowStepInputLocator = '[data-automation-id="header-approve-step"] input';
-  private actionSimpleWorkflowApproveFolderLocator = `[data-automation-id="header-approve-folder"] mat-icon`;
  private actionSimpleWorkflowActionChoiceLocator = '[data-automation-id="content-node-selector-actions-choose"]';
  private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`;
  private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input';
  private actionSimpleWorkflowRejectFolderLocator = `[data-automation-id="header-reject-folder"] input`;
+  private readonly actionSimpleWorkflowApproveFolderLocator = `[data-automation-id="header-approve-folder"] [role="img"]`;
+  private readonly actionSpecialiseTypeLocator = '[data-automation-id="header-type-name"] [role="combobox"]';
  private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-id="select-box"][aria-label="Mimetype *"]');
  private readonly actionTransformAndCopyContentDestinationFolderLocator = '[data-automation-id="card-textitem-value-destination-folder"]';
  private readonly contentNodeSelectorSearchInput = '[data-automation-id="content-node-selector-search-input"]';
@@ -108,10 +106,6 @@ export class ActionsDropdownComponent extends BaseComponent {
    await this.dropdownSelection(AspectValue, this.actionAspectNameLocator, index);
  }

-  async insertAutoDeclareOptionsActionValues(autoDeclareOptionsValue: string, index: number): Promise<void> {
-    await this.dropdownSelection(autoDeclareOptionsValue, this.actionAutoDeclareLocator, index);
-  }
-
  async insertSpecialiseTypeActionValues(specialiseTypeValue: string, index: number): Promise<void> {
    await this.dropdownSelection(specialiseTypeValue, this.actionSpecialiseTypeLocator, index);
  }
@@ -39,7 +39,7 @@ export class AdfInfoDrawerComponent extends BaseComponent {
    this.getChild(`[data-automation-id="library-name-properties-wrapper"] input[placeholder='${labelText}']`);
  public getIdField = (labelText: string) => this.getChild(`[data-automation-id="library-id-properties-wrapper"] input[placeholder='${labelText}']`);
  public getVisibilityField = (labelText: string) =>
-    this.getChild(`[data-automation-id="library-visibility-properties-wrapper"] mat-select[ng-reflect-placeholder='${labelText}']`);
+    this.getChild(`[data-automation-id="library-visibility-properties-wrapper"] [role="combobox"][ng-reflect-placeholder='${labelText}']`);
  public getDescriptionField = this.getChild('[data-automation-id="library-description-properties-wrapper"] textarea');
  public propertiesTab = this.page.getByRole('tab', { name: 'Properties' });
  public commentsTab = this.page.getByRole('tab', { name: 'Comments' });
@@ -56,10 +56,11 @@ export class AdfInfoDrawerComponent extends BaseComponent {
  public editButton = this.page.getByRole('button', { name: 'Edit' });
  public cancelButton = this.page.getByRole('button', { name: 'Cancel' });
  public updateButton = this.page.getByRole('button', { name: 'Update' });
-  public hintMessage = this.page.locator('mat-hint');
-  public errorMessage = this.page.locator('mat-error');
+  public hintMessage = this.getChild('[data-automation-id="app-library-metadata-form-name-hint"]');
+  public errorNameMessage = this.getChild('[data-automation-id="library-name-properties-wrapper"] [aria-atomic="true"]');
+  public errorDescriptionMessage = this.getChild('[data-automation-id="library-description-properties-wrapper"] [aria-atomic="true"]');
  public expandDetailsButton = this.getChild(`button[title='Expand panel']`);
-  public expandedDetailsTabs = this.page.locator('.aca-details-container .mdc-tab__text-label');
+  public expandedDetailsTabs = this.page.locator('.aca-details-container [role="tab"]');
  public expandedDetailsPermissionsTab = this.expandedDetailsTabs.getByText('Permissions');
  public nameField = this.page.locator('input[placeholder=Name]');
  public idField = this.page.locator(`input[placeholder='Library ID']`);
@@ -72,7 +73,7 @@ export class AdfInfoDrawerComponent extends BaseComponent {
  public categoriesAccordionPenButton = this.categoriesAccordion.locator('[data-automation-id="meta-data-categories-edit"]');
  public tagsInput = this.tagsCreator.locator('input');
  public createTagButton = this.tagsCreator.locator('.adf-create-tag-label');
-  public tagsChips = this.tagsCreator.locator('mat-chip');
+  public tagsChips = this.tagsCreator.locator('[role="listitem"]');
  public tagsChipsXButton = this.tagsChips.locator('.adf-dynamic-chip-list-delete-icon');
  public tagsAccordionCancelButton = this.getChild('[data-automation-id="reset-tags-metadata"]');
  public tagsAccordionConfirmButton = this.getChild('[data-automation-id="save-tags-metadata"]');
@@ -29,7 +29,7 @@ import { timeouts } from '../../utils';
 export abstract class BaseComponent extends PlaywrightBase {
  private readonly rootElement: string;
  private overlayElement = this.page.locator('.cdk-overlay-backdrop-showing');
-  private progressBar = this.page.locator('mat-progress-bar');
+  private progressBar = this.page.locator('[role="progressbar"]');

  protected constructor(page: Page, rootElement: string) {
    super(page);
@@ -57,8 +57,8 @@ export abstract class BaseComponent extends PlaywrightBase {

  async spinnerWaitForReload(): Promise<void> {
    try {
-      await this.page.locator('mat-progress-spinner').waitFor({ state: 'attached', timeout: timeouts.medium });
-      await this.page.locator('mat-progress-spinner').waitFor({ state: 'detached', timeout: timeouts.normal });
+      await this.page.locator('[role="progressbar"]').waitFor({ state: 'attached', timeout: timeouts.medium });
+      await this.page.locator('[role="progressbar"]').waitFor({ state: 'detached', timeout: timeouts.normal });
    } catch (e) {
      this.logger.info('Spinner was not present');
    }
@@ -43,7 +43,7 @@ export enum Comparator {
 }

 export class ConditionComponent extends ManageRulesDialogComponent {
-  private getOptionLocator = (optionName: string): Locator => this.page.locator(`.cdk-overlay-pane .mat-mdc-option span`, { hasText: optionName });
+  private getOptionLocator = (optionName: string): Locator => this.page.locator('[role=listbox] [role=option]', { hasText: optionName }).first();

  private async selectField(fields: Partial<Field>, index: number): Promise<void> {
    await this.fieldDropDown.nth(index).click();
@@ -56,8 +56,6 @@ export class DataTableComponent extends BaseComponent {
  sitesName = this.page.locator('.adf-datatable-body [data-automation-id*="datatable-row"] [aria-label="Name"]');
  sitesRole = this.page.locator('.adf-datatable-body [data-automation-id*="datatable-row"] [aria-label="My Role"]');
  lockOwner = this.page.locator('.aca-locked-by--name');
-  uncheckedCheckbox = this.page.locator('.mat-mdc-checkbox');
-  checkedCheckbox = this.page.locator('.mat-mdc-checkbox-checked');
  highlightedText = '.aca-highlight';
  searchFileName = '.search-file-name';
  searchFileDescription = '[data-automation-id="search-results-entry-description"]';
@@ -107,14 +105,6 @@ export class DataTableComponent extends BaseComponent {
   */
  getByAriaLabelTitle = (title: string): Locator => this.getChild(`[aria-label="${title}"]`);

-  /**
-   * Method used in cases where we want to get the button (hamburger menu) for row element
-   *
-   * @returns reference to menu placed in row localized by the name
-   */
-  getActionsButtonByName = (name: string): Locator =>
-    this.getRowByName(name).locator('mat-icon', { hasText: new RegExp(`^\\s*more_vert\\s*$`, 'g') });
-
  /**
   * Method used in cases where we want to get the edit button and there is no hamburger menu
   *
@@ -142,7 +132,7 @@ export class DataTableComponent extends BaseComponent {
   *
   * @returns reference to checkbox placed in row localized by the name
   */
-  getCheckboxForElement = (item: string): Locator => this.getRowByName(item).locator('.mat-mdc-checkbox');
+  getCheckboxForElement = (item: string): Locator => this.getRowByName(item).locator('[type="checkbox"]');

  getColumnHeaderByTitleLocator = (headerTitle: string): Locator => this.getChild('[role="columnheader"]', { hasText: headerTitle });

@@ -179,22 +169,6 @@ export class DataTableComponent extends BaseComponent {
    await this.spinnerWaitForReload();
  }

-  /**
-   * Click action from the expandable kebab menu for the element in datatable
-   *
-   * @param name title of the record you would like to proceed
-   * @param action provide button title for the action
-   * @param subAction if the action is in sub menu, then provide it here
-   */
-  async performActionForElement(name: string, action: string, subAction?: string): Promise<void> {
-    await this.getActionsButtonByName(name).click();
-    await this.contextMenuActions.getButtonByText(action).click();
-
-    if (subAction) {
-      await this.contextMenuActions.getButtonByText(subAction).click();
-    }
-  }
-
  /**
   * This method is used when we want to perform double click on the dataTable row to open a file or folder
   *
@@ -251,15 +225,17 @@ export class DataTableComponent extends BaseComponent {
      if (!isSelected) {
        const row = this.getRowByName(name);
        await row.hover();
-        await row.locator(this.uncheckedCheckbox).click();
-        await row.locator(this.checkedCheckbox).waitFor({ state: 'visible', timeout: timeouts.large });
+        if (!(await this.getCheckboxForElement(name).isChecked())) {
+          await this.getCheckboxForElement(name).click();
+        }
      }
    }
  }

  async isRowSelected(itemName: string): Promise<boolean> {
    const row = this.getRowByName(itemName);
-    return row.locator(this.checkedCheckbox).isVisible();
+    await row.hover();
+    return this.getCheckboxForElement(itemName).isChecked();
  }

  async getColumnHeaders(): Promise<Array<string>> {
@@ -26,7 +26,7 @@ import { expect, Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';

 export class MatMenuComponent extends BaseComponent {
-  private static rootElement = '.mat-mdc-menu-content';
+  private static rootElement = '[role="menu"]';

  constructor(page: Page) {
    super(page, MatMenuComponent.rootElement);
@@ -60,11 +60,11 @@ export class MatMenuComponent extends BaseComponent {
  }

  async verifyActualMoreActions(expectedToolbarMore: string[]): Promise<void> {
-    await this.page.locator('.mat-mdc-menu-content').waitFor({ state: 'attached' });
-    const menus = await this.page.$$('.mat-mdc-menu-content .mat-mdc-menu-item');
+    await this.getChild('').waitFor();
+    const menus = await this.getChild('[role="menuitem"]').all();
    const actualMoreActions: string[] = await Promise.all(
      menus.map(async (button) => {
-        const title = await (await button.$('.mat-mdc-menu-item-text span')).innerText();
+        const title = await button.locator('span span').innerText();
        return title || '';
      })
    );
@@ -26,18 +26,16 @@ import { Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';

 export class DateTimePicker extends BaseComponent {
-  private static rootElement = '.mat-calendar';
-  calendar = this.getChild('.mat-datepicker-popup');
-  dayPicker = this.getChild('mat-month-view');
-  nextMonthBtn = this.getChild('.mat-calendar-next-button');
-  rootElemLocator = this.page.locator('.mat-datepicker-popup');
+  private static rootElement = '[role="dialog"]';
+  dayPicker = this.getChild('[role="grid"]');
+  nextMonthBtn = this.getChild('[aria-label="Next month"]');

  constructor(page: Page) {
    super(page, DateTimePicker.rootElement);
  }

  async isCalendarOpen(): Promise<boolean> {
-    const element = this.rootElemLocator;
+    const element = this.getChild('');
    return element.isVisible();
  }

@@ -29,7 +29,7 @@ export class AdfFolderDialogComponent extends BaseComponent {
  private static rootElement = 'adf-folder-dialog';

  public folderNameInputLocator = this.getChild('[id="adf-folder-name-input"]');
-  public folderNameInputHint = this.getChild('mat-hint');
+  public folderNameInputHint = this.getChild('[aria-atomic="true"] span');
  public folderTitleInput = this.getChild('[id="adf-folder-title-input"]');
  public folderDescriptionInput = this.getChild('[id="adf-folder-description-input"]');
  public createButton = this.getChild('[id="adf-folder-create-button"]');
@@ -40,7 +40,7 @@ export class AdfFolderDialogComponent extends BaseComponent {
  }

  public getLabelText = (text: string) => this.getChild('label', { hasText: text });
-  public getRequiredMarker = (text: string) => this.getLabelText(text).locator('.mat-mdc-form-field-required-marker');
+  public getRequiredMarker = (text: string) => this.getLabelText(text).locator('span');

  /**
   * This method is used when we want to fill in Create new Folder Dialog and choose Create button
@@ -37,9 +37,9 @@ export class AdfLibraryDialogComponent extends BaseComponent {
  }

  public getLabelText = (text: string) => this.getChild('label', { hasText: text });
-  public getRequiredMarker = (text: string) => this.getLabelText(text).locator('.mat-mdc-form-field-required-marker');
-  public getDialogTitle = (text: string) => this.getChild('.mat-mdc-dialog-title', { hasText: text });
-  public getErrorByText = (text: string): Locator => this.page.locator('mat-error', { hasText: text });
+  public getRequiredMarker = (text: string) => this.getLabelText(text).locator('span');
+  public getDialogTitle = (text: string) => this.getChild('h2', { hasText: text });
+  public getErrorByText = (text: string): Locator => this.getChild('.adf-library-dialog-form-field').getByText(text);

  /**
   * This method is used when we want to fill in Create Library Dialog and choose Create button
@@ -27,23 +27,23 @@ import { BaseComponent } from '../base.component';

 export class ContentNodeSelectorDialog extends BaseComponent {
  private static rootElement = 'adf-content-node-selector';
-
-  constructor(page: Page) {
-    super(page, ContentNodeSelectorDialog.rootElement);
-  }
+  private selectedRow = this.getChild('.adf-is-selected');
+  private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });

  public cancelButton = this.getChild('[data-automation-id="content-node-selector-actions-cancel"]');
  public actionButton = this.getChild('[data-automation-id="content-node-selector-actions-choose"]');
-  public locationDropDown = this.getChild('[id="site-dropdown-container"] mat-form-field');
-  private selectedRow = this.getChild('.adf-is-selected');
-  getOptionLocator = (optionName: string): Locator =>
-    this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName });
-  private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });
+  public locationDropDown = this.getChild('[id="site-dropdown-container"] .adf-sites-dropdown-form-field');
+
+  getOptionLocator = (optionName: string): Locator => this.page.locator('[role=listbox] [role=option]', { hasText: optionName }).first();
  getDialogTitle = (text: string) => this.getChild('[data-automation-id="content-node-selector-title"]', { hasText: text });
  getBreadcrumb = (text: string) => this.getChild('[data-automation-id="current-folder"]', { hasText: text });
  getFolderIcon = this.getChild('[data-automation-id="dropdown-breadcrumb-trigger"]');
  loadMoreButton = this.getChild('[data-automation-id="adf-infinite-pagination-button"]');

+  constructor(page: Page) {
+    super(page, ContentNodeSelectorDialog.rootElement);
+  }
+
  async loadMoreNodes(): Promise<void> {
    await this.spinnerWaitForReload();
    while (await this.loadMoreButton.isVisible()) {
@@ -27,7 +27,7 @@ import { BaseComponent } from '../base.component';
 import { timeouts } from '../../../utils';

 export class CreateFromTemplateDialogComponent extends BaseComponent {
-  private static rootElement = 'mat-dialog-container';
+  private static rootElement = '.aca-create-from-template-dialog';

  constructor(page: Page) {
    super(page, CreateFromTemplateDialogComponent.rootElement);
@@ -26,7 +26,7 @@ import { Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';

 export class EditDialog extends BaseComponent {
-  private static rootElement = 'mat-dialog-container';
+  private static rootElement = 'adf-folder-dialog';

  public editDialog = this.getChild('');
  public titleInput = this.getChild('[data-automation-id="adf-folder-dialog-title"]');
@@ -34,7 +34,7 @@ export class EditDialog extends BaseComponent {
  public updateButton = this.getChild('#adf-folder-create-button');
  public descriptionInput = this.getChild('#adf-folder-description-input');
  public nameInput = this.getChild('#adf-folder-name-input');
-  public fieldHint = this.getChild('mat-hint');
+  public fieldHint = this.getChild('[aria-atomic="true"] span');

  constructor(page: Page) {
    super(page, EditDialog.rootElement);
@@ -27,22 +27,21 @@ import { BaseComponent } from '../base.component';

 export class LinkRulesDialog extends BaseComponent {
  private static rootElement = 'aca-rule-set-picker';
-
-  constructor(page: Page) {
-    super(page, LinkRulesDialog.rootElement);
-  }
+  private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });

  cancelButton = this.getChild('[data-automation-id="content-node-selector-actions-cancel"]');
  selectFolderButton = this.getChild('button', { hasText: ' Select folder ' });
  emptyLinkRules = this.getChild('.adf-empty-content__title');
-  getOptionLocator = (optionName: string): Locator =>
-    this.page.locator('.mat-mdc-select-panel .mdc-list-item__primary-text', { hasText: optionName });
-  private getRowByName = (name: string | number): Locator => this.getChild(`adf-datatable-row`, { hasText: name.toString() });
+  getOptionLocator = (optionName: string): Locator => this.page.locator('[role=listbox] [role=option]', { hasText: optionName }).first();
  getDialogTitle = (text: string) => this.getChild('[data-automation-id="content-node-selector-title"]', { hasText: text });
  getBreadcrumb = (text: string) => this.getChild('[data-automation-id="current-folder"]', { hasText: text });
  getFolderIcon = this.getChild('.adf-dropdown-breadcrumb-icon', { hasText: 'folder' });
  getLibraryIcon = this.getChild('.adf-empty-content__icon', { hasText: 'library_books' });

+  constructor(page: Page) {
+    super(page, LinkRulesDialog.rootElement);
+  }
+
  async selectDestination(folderName: string): Promise<void> {
    const row = this.getRowByName(folderName);

@@ -22,7 +22,7 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { ElementHandle, Locator, Page } from '@playwright/test';
+import { ElementHandle, Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 import { timeouts } from '../../../utils';
 import { DateTimePicker } from '../datetime-picker/datetime-picker.component';
@@ -43,12 +43,13 @@ export class ShareDialogComponent extends BaseComponent {
  urlAction = this.getChild('.adf-input-action');
  expireToggle = this.getChild(`[data-automation-id='adf-expire-toggle']`);
  expireInput = this.getChild('input[formcontrolname="time"]');
-  datetimePickerButton = this.getChild('.mat-datepicker-toggle');
+  datetimePickerButton = this.getChild('[data-automation-id="adf-content-share-expiration-field"] button');
+  dateErrorText = this.getChild('[data-automation-id="adf-share-link-input-warning"]');
+  clockIcon = this.getChild('[adf-icon="timer"]');

  dateTimePicker = new DateTimePicker(this.page);

  getDialogLabel = () => this.getChild('label').innerText();
-  getErrorByText = (text: string): Locator => this.page.locator('mat-error', { hasText: text });

  async getLabels(): Promise<Array<string>> {
    return this.page.$$eval('.adf-share-link__label', (elements) => elements.map((element) => element.textContent));
@@ -29,8 +29,8 @@ export class ManageRules extends BaseComponent {
  private static rootElement = '.aca-manage-rules';

  public getGroupsList = (optionName: string): Locator => this.getChild('.aca-rule-list-item__header', { hasText: optionName });
-  public ruleToggle = this.getChild('.aca-manage-rules__container .mdc-switch').first();
-  public ruleToggleFalse = this.getChild('aca-rule-list-grouping aca-rule-list-item .mdc-switch--unselected').first();
+  public ruleToggle = this.getChild('.aca-manage-rules__container [role="switch"]').first();
+  public ruleToggleFalse = this.getChild('aca-rule-list-grouping aca-rule-list-item [role="switch"][aria-checked="false"]').first();
  public ruleDetailsTitle = this.getChild('.aca-manage-rules__container__rule-details__header__title__name');
  public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
  public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
@@ -68,8 +68,8 @@ export class PaginationComponent extends BaseComponent {

  async spinnerWaitForReload(): Promise<void> {
    try {
-      await this.page.locator('mat-progress-spinner').waitFor({ state: 'attached', timeout: 2000 });
-      await this.page.locator('mat-progress-spinner').waitFor({ state: 'detached', timeout: 2000 });
+      await this.page.locator('[role="progressbar"]').waitFor({ state: 'attached', timeout: 2000 });
+      await this.page.locator('[role="progressbar"]').waitFor({ state: 'detached', timeout: 2000 });
    } catch (e) {
      this.logger.info('Spinner was not present');
    }
@@ -44,5 +44,5 @@ export class SearchFilters extends BaseComponent {
  public menuCardClose = this.page.locator('.adf-search-filter-title-action');
  public menuCardClear = this.page.locator('#cancel-filter-button');
  public menuCardApply = this.page.locator('#apply-filter-button');
-  public dropdownOptions = this.page.locator(`mat-option`);
+  public dropdownOptions = this.page.locator(`[role="option"]`);
 }
@@ -37,13 +37,13 @@ export class SearchFiltersProperties extends BaseComponent {
  public fileSizeInput = this.getChild(`[placeholder$='Enter file size']`);
  public unitButton = this.getChild(`[data-automation-id='adf-search-properties-file-size-unit']`);
  public fileTypeInput = this.getChild(`[placeholder$='File Type']`);
-  public atLeastOption = this.page.locator(`mat-option`, { hasText: 'At Least' });
-  public atMostOption = this.page.locator(`mat-option`, { hasText: 'At Most' });
-  public exactlyOption = this.page.locator(`mat-option`, { hasText: 'Exactly' });
-  public kbUnit = this.page.locator(`mat-option`, { hasText: 'KB' });
-  public mbUnit = this.page.locator(`mat-option`, { hasText: 'MB' });
-  public gbUnit = this.page.locator(`mat-option`, { hasText: 'GB' });
-  public dropdownOptions = this.page.locator(`mat-option`);
+  public atLeastOption = this.page.locator(`[role="option"]`, { hasText: 'At Least' });
+  public atMostOption = this.page.locator(`[role="option"]`, { hasText: 'At Most' });
+  public exactlyOption = this.page.locator(`[role="option"]`, { hasText: 'Exactly' });
+  public kbUnit = this.page.locator(`[role="option"]`, { hasText: 'KB' });
+  public mbUnit = this.page.locator(`[role="option"]`, { hasText: 'MB' });
+  public gbUnit = this.page.locator(`[role="option"]`, { hasText: 'GB' });
+  public dropdownOptions = this.page.locator(`[role="option"]`);

  async setPropertiesParameters(
    page: SearchPage,
@@ -41,18 +41,15 @@ export class SearchOverlayComponent extends BaseComponent {
  }

  async isFoldersOptionChecked() {
-    const optClass = await this.searchFoldersOption.getAttribute('class');
-    return optClass.includes('.mat-mdc-checkbox-checked');
+    return this.searchFoldersOption.isChecked();
  }

  async isFilesOptionChecked() {
-    const optClass = await this.searchFilesOption.getAttribute('class');
-    return optClass.includes('.mat-mdc-checkbox-checked');
+    return this.searchFilesOption.isChecked();
  }

  async isLibrariesOptionChecked() {
-    const optClass = await this.searchLibrariesOption.getAttribute('class');
-    return optClass.includes('.mat-mdc-checkbox-checked');
+    return this.searchLibrariesOption.isChecked();
  }

  async clearOptions() {
@@ -33,8 +33,8 @@ export class SearchSortingPicker extends BaseComponent {

  public actionMenu = this.page.locator('[data-automation-id="auto_header_content_id_$thumbnail"]');
  public sortOrderButton = this.page.locator('#aca-button-sorting-menu');
-  public sortByDropdownExpanded = this.page.locator('.mat-mdc-menu-panel').first();
-  public sortByList = this.page.locator('.mat-mdc-menu-panel button');
+  public sortByDropdownExpanded = this.page.locator('[role="menu"]').first();
+  public sortByList = this.page.locator('[role="menu"] button');

  constructor(page: Page, rootElement = SearchSortingPicker.rootElement) {
    super(page, rootElement);
@@ -26,7 +26,7 @@ import { Page } from '@playwright/test';
 import { BaseComponent } from './base.component';

 export class SpinnerComponent extends BaseComponent {
-  private static rootElement = 'mat-progress-spinner';
+  private static rootElement = '[role="progressbar"]';

  constructor(page: Page, rootElement = SpinnerComponent.rootElement) {
    super(page, rootElement);
@@ -50,7 +50,9 @@ export const getExcludedTestsRegExpArray = (excludedJson: any, projectName: stri

  if (testIdsToExclude.length > 0) {
    console.warn(
-      `${prefix} ❌ Tests excluded for browser '${currentBrowser}' because of 🐛 : ${testIdsToExclude.join(', ')} (from keys: ${relevantKeys.join(', ')})`
+      `${prefix} ❌ Tests excluded for browser '${currentBrowser}' because of 🐛 : ${testIdsToExclude.join(', ')} (from keys: ${relevantKeys.join(
+        ', '
+      )})`
    );
  } else {
    console.info(`${prefix} ✅ No excluded tests for browser '${currentBrowser}' 🎉`);