From 74d342ee2c49237ede7589429864e76826fad3f0 Mon Sep 17 00:00:00 2001 From: chalapkoStanislav Date: Mon, 18 Nov 2024 19:09:39 +0200 Subject: [PATCH] fix(locators) change button locators --- pages/dashboard/dashboard-page.js | 50 +++++++++++-------- pages/workspace/assets-panel-page.js | 14 +++--- pages/workspace/comments-panel-page.js | 6 +-- pages/workspace/design-panel-page.js | 48 +++++++----------- pages/workspace/inspect-panel-page.js | 4 ++ pages/workspace/main-page.js | 8 +-- pages/workspace/prototype-panel-page.js | 6 ++- .../ui-theme-features-light-mode.spec.js | 2 +- 8 files changed, 68 insertions(+), 70 deletions(-) diff --git a/pages/dashboard/dashboard-page.js b/pages/dashboard/dashboard-page.js index 59cff437..ef1b8b3e 100644 --- a/pages/dashboard/dashboard-page.js +++ b/pages/dashboard/dashboard-page.js @@ -42,9 +42,9 @@ exports.DashboardPage = class DashboardPage extends BasePage { this.moveToOtherTeamMenuItem = page .getByRole('menuitem') .filter({ hasText: 'Move to other team' }); - this.dashboardLibraryItem = page.locator( - `button[title="New File 1"] div[class*="dashboard_grid__library"]`, - ); + this.dashboardLibraryItem = page + .getByRole('button', { name: 'New File 1' }) + .locator(`div[class*="dashboard_grid__library"]`); this.downloadFilePenpotMenuItem = page.getByTestId('download-binary-file'); this.downloadFileStandardMenuItem = page.getByTestId('download-standard-file'); this.dashboardSection = page.locator('[class="main_ui_dashboard__dashboard"]'); @@ -164,7 +164,9 @@ exports.DashboardPage = class DashboardPage extends BasePage { this.onboardingContinueCreateTeamBtn = page.locator( 'button[label="Continue creating team"]', ); - this.onboardingContinueWithoutTeamBtn = page.getByRole('button').filter({hasText: 'Continue without team'}); + this.onboardingContinueWithoutTeamBtn = page + .getByRole('button') + .filter({ hasText: 'Continue without team' }); this.onboardingInviteInput = page.locator( 'input[class*="components_forms__inside-input"]', ); @@ -598,17 +600,17 @@ exports.DashboardPage = class DashboardPage extends BasePage { await this.openFile(); } async openFileWithName(name) { - const fileTitle = this.page.locator(`button[title="${name}"]`); + const fileTitle = this.page.getByRole('button', { name: name }); await fileTitle.first().dblclick(); } async isFileVisibleByName(name) { - const elem = this.page.locator(`button[title="${name}"]`); + const elem = this.page.getByRole('button', { name: name }); await expect(elem.first()).toBeVisible(); } async deleteFileWithNameViaRightClick(name) { - const elem = this.page.locator(`button[title="${name}"]`).first(); + const elem = this.page.getByRole('button', { name: name }).first(); await elem.click({ button: 'right' }); await this.deleteFileMenuItem.click(); } @@ -618,7 +620,7 @@ exports.DashboardPage = class DashboardPage extends BasePage { } async moveFileToOtherTeamViaRightClick(fileName, otherTeamName) { - const elem = this.page.locator(`button[title="${fileName}"]`).first(); + const elem = this.page.getByRole('button', { name: fileName }).first(); await elem.click({ button: 'right' }); await expect(this.moveToFileMenuItem).toBeVisible(); await this.moveToFileMenuItem.click(); @@ -631,21 +633,23 @@ exports.DashboardPage = class DashboardPage extends BasePage { } async addFileWithNameAsSharedLibraryViaRightClick(fileName) { - const elem = this.page.locator(`button[title="${fileName}"]`).first(); + const elem = this.page.getByRole('button', { name: fileName }).first(); await elem.click({ button: 'right' }); await this.addFileAsSharedLibraryMenuItem.click(); await this.addFileAsSharedLibraryButton.click(); } async isFilePresentWithName(fileName) { - const fileNameTitle = this.page.locator( - `button[title="${fileName}"] div[class*="item-info"] h3`, - ); + const fileNameTitle = this.page.this.page + .getByRole('button', { name: fileName }) + .locator(`div[class*="item-info"] h3`); await expect(fileNameTitle).toHaveText(fileName); } async renameFileWithNameViaRightClick(oldFileName, newFileName) { - const fileTitle = this.page.locator(`button[title="${oldFileName}"]`).first(); + const fileTitle = this.page.this.page + .getByRole('button', { name: oldFileName }) + .first(); let text = await fileTitle.textContent(); await fileTitle.click({ button: 'right' }); await this.renameFileMenuItem.click(); @@ -660,9 +664,11 @@ exports.DashboardPage = class DashboardPage extends BasePage { async clickOnOnboardingContinueBtn() { await this.onboardingContinueBtn.click(); - await this.page.waitForResponse(response => - response.url() === `${process.env.BASE_URL}api/rpc/command/push-audit-events` && - response.status() === 200 + await this.page.waitForResponse( + (response) => + response.url() === + `${process.env.BASE_URL}api/rpc/command/push-audit-events` && + response.status() === 200, ); } @@ -875,11 +881,13 @@ exports.DashboardPage = class DashboardPage extends BasePage { } async clickOnOnboardingContinueWithoutTeamButton() { - if(await this.onboardingContinueWithoutTeamBtn.isVisible()) { - await this.onboardingContinueWithoutTeamBtn.click() - await this.page.waitForResponse(response => - response.url() === `${process.env.BASE_URL}api/rpc/command/push-audit-events` && - response.status() === 200 + if (await this.onboardingContinueWithoutTeamBtn.isVisible()) { + await this.onboardingContinueWithoutTeamBtn.click(); + await this.page.waitForResponse( + (response) => + response.url() === + `${process.env.BASE_URL}api/rpc/command/push-audit-events` && + response.status() === 200, ); } } diff --git a/pages/workspace/assets-panel-page.js b/pages/workspace/assets-panel-page.js index 401ad7cc..02648f66 100644 --- a/pages/workspace/assets-panel-page.js +++ b/pages/workspace/assets-panel-page.js @@ -48,9 +48,7 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage { this.fileLibraryGroupTitle = page.locator('div[class*="group-title"]'); this.fileLibraryListViewButton = page.getByTitle('List view', { exact: true }); this.fileLibraryGridViewButton = page.getByTitle('Grid view', { exact: true }); - this.addFileLibraryColorButton = page.locator( - 'button[class*="assets_colors__assets-btn"]', - ); + this.addFileLibraryColorButton = page.getByRole('button', { name: 'Add color' }); this.fileLibraryColorsColorBullet = page.locator( 'div[class*="assets_colors__bullet-block"]', ); @@ -58,9 +56,9 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage { this.fileLibraryColorsColorNameInput = page.locator( 'input[class*="element-name"]', ); - this.addFileLibraryTypographyButton = page.locator( - 'button[class*="typographies__assets-btn"]', - ); + this.addFileLibraryTypographyButton = page.getByRole('button', { + name: 'Add typography', + }); this.minimizeFileLibraryTypographyButton = page.locator( 'div[class*="typography__action-btn"]', ); @@ -83,8 +81,8 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage { this.assetsTypeDropdown = page.locator('ul[class*="context-menu-items"]'); this.assetsTypeAll = page.locator('#section-all'); this.assetsTypeComponents = page.locator('#section-components'); - this.assetsTypeColors = page.locator('#section-color'); - this.assetsTypeTypographies = page.locator('#section-typography'); + this.assetsTypeColors = page.locator('#section-colors'); + this.assetsTypeTypographies = page.locator('#section-typographies'); this.duplicateMainComponentMenuItem = page .getByRole('menuitem') .filter({ hasText: 'Duplicate main' }); diff --git a/pages/workspace/comments-panel-page.js b/pages/workspace/comments-panel-page.js index cd2c483f..9cc63f2f 100644 --- a/pages/workspace/comments-panel-page.js +++ b/pages/workspace/comments-panel-page.js @@ -31,9 +31,9 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage { 'div[class*="comments-container"] div.main_ui_comments__resolved', ); this.commentReplyInput = page.getByPlaceholder('Reply'); - this.commentOptionsButton = page.locator( - 'div[class*="comments__options"] svg[class="icon-menu"]', - ); + this.commentOptionsButton = page + .locator('div[class*="viewport_comments__comments-section"]') + .getByRole('button', { name: 'Options' }); this.commentEditOptionMenuItem = page .getByRole('listitem') .filter({ hasText: 'Edit' }); diff --git a/pages/workspace/design-panel-page.js b/pages/workspace/design-panel-page.js index 1559efbd..6f7f98a1 100644 --- a/pages/workspace/design-panel-page.js +++ b/pages/workspace/design-panel-page.js @@ -48,7 +48,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { 'div[class*="fill__element-content"] div[class*="opacity-element-wrapper"] input', ); this.addFillButton = page.getByRole('button', { name: 'Add fill color' }); - this.removeFillButton = page.getByRole('button', { name: 'Remove color' }); + this.removeFillButton = page + .locator('div[class*="fill__element-content"]') + .getByRole('button', { name: 'Remove color' }); this.componentColorInput = page.locator( `input[class*='rows_color_row__color-input']`, ); @@ -72,15 +74,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { this.shadowOpacityInput = page.locator( 'div[class*="shadow-advanced-options"] div[class*="color_row__opacity"] input', ); - this.shadowShowIcon = page.locator( - 'div[class*="shadow__actions"] svg[class="icon-shown"]', - ); - this.shadowUnhideIcon = page.locator( - 'div[class*="shadow__actions"] svg[class="icon-hide"]', - ); - this.shadowRemoveIcon = page.locator( - 'div[class*="shadow__actions"] svg[class="icon-remove"]', - ); + this.shadowShowIcon = page.getByRole('button', { name: 'Toggle shadow' }); + this.shadowUnhideIcon = page.getByRole('button', { name: 'Toggle shadow' }); + this.shadowRemoveIcon = page.getByRole('button', { name: 'Remove shadow' }); this.shadowTypeField = page.locator('div[class*="shadow-type-select"]'); //Design panel - Flex Layout section @@ -203,28 +199,22 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { //Design panel - Blur section this.blurSection = page.getByText('Blur', { exact: true }); - this.addBlurButton = page.getByTestId('add-blur'); + this.addBlurButton = page.getByRole('button', { name: 'Add blur' }); this.blurMoreOptions = page.locator('button[class*="blur__show-more"]'); this.blurValueInput = page.locator('#blur-input-sidebar'); - this.blurHideIcon = page.locator( - 'div[class*="blur__actions"] svg[class="icon-shown"]', - ); - this.blurUnhideIcon = page.locator( - 'div[class*="blur__actions"] svg[class="icon-hide"]', - ); - this.blurRemoveIcon = page.locator( - 'div[class*="blur__actions"] svg[class="icon-remove"]', - ); + this.blurHideIcon = page.getByRole('button', { name: 'Toggle blur' }); + this.blurUnhideIcon = page.getByRole('button', { name: 'Toggle blur' }); + this.blurRemoveIcon = page.getByRole('button', { name: 'Remove blur' }); //Design panel - Stroke section - this.addStrokeButton = page.getByTestId('add-stroke'); + this.addStrokeButton = page.getByRole('button', { name: 'Add stroke color' }); this.strokeSection = page.getByText('Stroke', { exact: true }); this.strokeColorBullet = page.locator( 'div[class*="bullet-wrapper"] div[class*="color_bullet__is-not-library-color"]', ); - this.strokeRemoveIcon = page.locator( - 'div[class*="stroke-data"] button[class*="remove-btn"]', - ); + this.strokeRemoveIcon = page + .locator('div[class*="stroke__element-content"]') + .getByRole('button', { name: 'Remove color' }); this.strokeColorInput = page.locator( 'div[class*="stroke-data"] input[class*="color-input"]', ); @@ -247,7 +237,9 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { this.textUpperCaseIcon = page.locator('svg.icon-text-uppercase'); this.textLowerCaseIcon = page.locator('svg.icon-text-lowercase'); this.textTitleCaseIcon = page.locator('svg.icon-text-mixed'); - this.textMoreOptionsIcon = page.locator('button[class*="text__more-options"]'); + this.textMoreOptionsIcon = page + .locator('div[class*="text__element-content"]') + .getByRole('button', { name: 'Options' }); this.textVerticalOptionsBlock = page.locator( 'div[class*="vertical-align-options"]', ); @@ -265,10 +257,8 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { //Design panel - Export section this.exportSection = page.getByText('Export', { exact: true }); - this.addExportButton = page.locator('button[class*="exports__add-export"]'); - this.removeExportButton = page.locator( - 'button[class*="exports__action-btn"] svg[class="icon-remove"]', - ); + this.addExportButton = page.getByRole('button', { name: 'Add export' }); + this.removeExportButton = page.getByRole('button', { name: 'Remove export' }); this.exportElementButton = page.getByRole('button', { name: /Export \d+ element/, }); diff --git a/pages/workspace/inspect-panel-page.js b/pages/workspace/inspect-panel-page.js index 046029f6..c0a47bc2 100644 --- a/pages/workspace/inspect-panel-page.js +++ b/pages/workspace/inspect-panel-page.js @@ -36,4 +36,8 @@ exports.InspectPanelPage = class InspectPanelPage extends BasePage { async openCodeTab() { await this.codeTabButton.click(); } + + async waitForCodeButtonVisible() { + await this.codeTabButton.waitFor({ state: 'visible', timeout: 10000 }); + } }; diff --git a/pages/workspace/main-page.js b/pages/workspace/main-page.js index 40c95e2c..f0d6519d 100644 --- a/pages/workspace/main-page.js +++ b/pages/workspace/main-page.js @@ -134,12 +134,8 @@ exports.MainPage = class MainPage extends BasePage { //Zoom this.zoomButton = page.getByTitle('Zoom', { exact: true }); - this.zoomPlusButton = page.locator( - 'button[class*="header__zoom-btn"] svg[class="icon-add"]', - ); - this.zoomMinusButton = page.locator( - 'button[class*="header__zoom-btn"] svg[class="icon-remove"]', - ); + this.zoomPlusButton = page.getByRole('button', { name: 'Zoom in' }); + this.zoomMinusButton = page.getByRole('button', { name: 'Zoom out' }); this.zoomResetButton = page.getByRole('button', { name: 'Reset' }); this.zoomToFitAllMenuItem = page .getByRole('listitem') diff --git a/pages/workspace/prototype-panel-page.js b/pages/workspace/prototype-panel-page.js index 91869420..9364ffa1 100644 --- a/pages/workspace/prototype-panel-page.js +++ b/pages/workspace/prototype-panel-page.js @@ -17,7 +17,9 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage { ); this.prototypePanelFlowNameText = page.locator('span[class*="flow-name-label"]'); this.prototypePanelFlowNameInput = page.locator('input[class*="interactions"]'); - this.addInteractionButton = page.locator('button[class*="add-interaction-btn"]'); + this.addInteractionButton = page.getByRole('button', { + name: 'Add interaction', + }); this.removeSecondInteractionButton = page.locator( 'button[class*="interactions__remove-btn"] >>nth=1', ); @@ -27,7 +29,7 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage { this.interactionDestinationField = page.locator( '//*[text()="Destination"]//parent::div//div[contains(@class, "custom-select")]', ); - this.removeFlowButton = page.locator('button[class*="remove-flow-btn"]'); + this.removeFlowButton = page.getByRole('button', { name: 'Remove flow' }); } async clickPrototypeTab() { diff --git a/tests/ui-theme/ui-theme-features-light-mode.spec.js b/tests/ui-theme/ui-theme-features-light-mode.spec.js index 50b92ced..89147926 100644 --- a/tests/ui-theme/ui-theme-features-light-mode.spec.js +++ b/tests/ui-theme/ui-theme-features-light-mode.spec.js @@ -108,7 +108,7 @@ mainTest.describe('Settings - UI THEME', () => { }, ); await inspectPanelPage.openInspectTab(); - await mainPage.waitForChangeIsSaved(); + await inspectPanelPage.waitForCodeButtonVisible(); await expect(mainPage.fileRightSidebarAside).toHaveScreenshot( 'inspect-file-right-sidebar-image.png', {