diff --git a/pages/base-page.js b/pages/base-page.js index 9c62ec67..e3b97f7f 100644 --- a/pages/base-page.js +++ b/pages/base-page.js @@ -25,7 +25,8 @@ exports.BasePage = class BasePage { this.copyLayer = page .locator('div[class*="viewport"] [class*="viewport-selrect"]') .last(); - this.createdBoardTitle = page.locator('g[class="frame-title"] div >> nth=0'); + this.createdBoardTitle = page.getByTestId('viewport').getByText('Board').first(); + this.deleteLayerMenuItem = page .getByRole('listitem') .filter({ hasText: 'Delete' }); @@ -138,6 +139,7 @@ exports.BasePage = class BasePage { .getByRole('listitem') .filter({ hasText: 'Merge cells' }); this.acceptCookieButton = page.locator('button[class*="CookieConsent_accept"]'); + this.renameOption = page.getByRole('listitem').filter({ hasText: 'Rename' }); } async clearInput(input, browserName) { @@ -178,6 +180,10 @@ exports.BasePage = class BasePage { } } + async clickShortcutAltN(browserName) { + await this.page.keyboard.press('Alt+N'); + } + async reloadPage() { await this.page.reload(); } @@ -377,6 +383,11 @@ exports.BasePage = class BasePage { await expect(this.wrapperMessage).toBeVisible({ timeout: 10000 }); } + async renameCreatedBoardViaRightClick() { + await this.createdBoardTitle.click({ button: 'right', force: true }); + await this.renameOption.click(); + } + async acceptCookie() { if (await this.acceptCookieButton.isVisible()) { await this.acceptCookieButton.click(); diff --git a/pages/workspace/layers-panel-page.js b/pages/workspace/layers-panel-page.js index b5513f89..a3e0f6d9 100644 --- a/pages/workspace/layers-panel-page.js +++ b/pages/workspace/layers-panel-page.js @@ -1,7 +1,7 @@ const { expect } = require('@playwright/test'); -const { BasePage } = require('../base-page'); +const { MainPage } = require('../workspace/main-page'); -exports.LayersPanelPage = class LayersPanelPage extends BasePage { +exports.LayersPanelPage = class LayersPanelPage extends MainPage { /** * @param {import('@playwright/test').Page} page */ @@ -9,13 +9,12 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage { super(page); this.layersTab = page.getByRole('tab', { name: 'layers' }); - this.layersSidebar = page.locator('div#layers'); + this.layersSidebar = page.getByTestId('layer-tree'); + this.layersRows = page.getByTestId('layer-row'); this.sidebarLayerItem = page.locator( 'div[class*="workspace_sidebar_layer_item__layer-row"]', ); - this.createdLayerOnLayersPanelNameInput = page.locator( - 'div[class*="element-list-body"] input[class*="element-name"]', - ); + this.createdLayerOnLayersPanelNameInput = this.layersRows.getByRole('textbox'); this.searchLayersIcon = page.locator('svg[class="icon-search"]'); this.searchLayersInput = page.getByPlaceholder('Search layers'); this.searchedLayerOnLayersPanelNameText = page.locator( @@ -62,11 +61,34 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage { await this.clickLayerOnLayersTab(name); } - async renameCreatedLayer(newName) { + async typeNameForCreatedLayer(newName) { await this.createdLayerOnLayersPanelNameInput.fill(newName); + } + + async typeNameCreatedLayerAndEnter(newName) { + await this.typeNameForCreatedLayer(newName); + await this.clickOnEnter(); + } + + async typeNameCreatedLayerAndClickOnViewport(newName, x, y) { + await this.typeNameForCreatedLayer(newName); + await this.clickViewportByCoordinates(x, y, 3); + } + + async isNotRenameLayerInputDisplayed(newName) { + await expect(this.createdLayerOnLayersPanelNameInput).toHaveCount(0); await this.clickOnEnter(); } + async renameLayerViaRightClick(layerName, browserName = 'chrome') { + const layerSel = this.layersRows.getByText(layerName); + await layerSel.last().click({ + button: 'right', + force: true, + }); + await this.renameOption.locator('span').first().click(); + } + async isLayerNameDisplayed(name) { await expect(this.createdLayerOnLayersPanelSpan).toHaveText(name); } diff --git a/tests/components/main-components/update-main-components.spec.js b/tests/components/main-components/update-main-components.spec.js index 75edb31e..bd54c842 100644 --- a/tests/components/main-components/update-main-components.spec.js +++ b/tests/components/main-components/update-main-components.spec.js @@ -453,12 +453,12 @@ mainTest.describe(() => { await layersPanelPage.clickCopyComponentOnLayersTab(); await layersPanelPage.doubleClickCopyComponentOnLayersTab(); - await layersPanelPage.renameCreatedLayer('test'); + await layersPanelPage.typeNameCreatedLayerAndEnter('test'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isCopyComponentNameDisplayed('test'); await layersPanelPage.clickMainComponentOnLayersTab(); await layersPanelPage.doubleClickMainComponentOnLayersTab(); - await layersPanelPage.renameCreatedLayer('dfsfs'); + await layersPanelPage.typeNameCreatedLayerAndEnter('dfsfs'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isCopyComponentNameDisplayed('test'); await layersPanelPage.clickMainComponentOnLayersTab(); diff --git a/tests/composition/composition-board.spec.js b/tests/composition/composition-board.spec.js index 899339d9..f64f332d 100644 --- a/tests/composition/composition-board.spec.js +++ b/tests/composition/composition-board.spec.js @@ -58,21 +58,81 @@ mainTest.describe(() => { }); }); - mainTest(qase(219, 'CO-4 Rename board with valid name'), async ({ page }) => { - const newName = 'New test board'; - const renamedName = 'renamed board'; - const mainPage = new MainPage(page); - const layersPanelPage = new LayersPanelPage(page); - await mainPage.doubleClickCreatedBoardTitleOnCanvas(); - await layersPanelPage.renameCreatedLayer(newName); - await mainPage.waitForChangeIsSaved(); - await layersPanelPage.isBoardNameDisplayed(newName); + mainTest( + qase(219, 'Rename board (by double clicking) with valid name'), + async ({ page }) => { + const newName = 'New test board'; + const renamedName = 'renamed board'; + const mainPage = new MainPage(page); + const layersPanelPage = new LayersPanelPage(page); + // Rename board by double clicking on the board + await mainPage.doubleClickCreatedBoardTitleOnCanvas(); + await layersPanelPage.typeNameCreatedLayerAndEnter(newName); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(newName); + // Rename board by double clicking on the board layer + await layersPanelPage.doubleClickLayerOnLayersTab(newName); + await layersPanelPage.typeNameCreatedLayerAndClickOnViewport( + renamedName, + 900, + 100, + ); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(renamedName); + }, + ); - await layersPanelPage.doubleClickLayerOnLayersTab(newName); - await layersPanelPage.renameCreatedLayer(renamedName); - await mainPage.waitForChangeIsSaved(); - await layersPanelPage.isBoardNameDisplayed(renamedName); - }); + mainTest( + qase(1923, 'Rename board (by shortcut) with valid name'), + async ({ page }) => { + const newName = 'New test board'; + const renamedName = 'renamed board'; + const mainPage = new MainPage(page); + const layersPanelPage = new LayersPanelPage(page); + // rename by shortcut while the board is selected + await layersPanelPage.clickShortcutAltN(); + await layersPanelPage.typeNameCreatedLayerAndClickOnViewport( + newName, + 900, + 100, + ); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(newName); + // try to rename by shortcut while nothing is selected + await layersPanelPage.clickShortcutAltN(); + await layersPanelPage.isNotRenameLayerInputDisplayed(); + // rename by shortcut while the board layer is selected + await layersPanelPage.selectLayerByName(newName); + await layersPanelPage.clickShortcutAltN(); + await layersPanelPage.typeNameCreatedLayerAndEnter(renamedName); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(renamedName); + }, + ); + + mainTest( + qase(1924, 'Rename board (by context menu) with valid name'), + async ({ page }) => { + const newName = 'New test board'; + const renamedName = 'renamed board'; + const mainPage = new MainPage(page); + const layersPanelPage = new LayersPanelPage(page); + // rename by RMB context menu while the board is selected + await mainPage.renameCreatedBoardViaRightClick(); + await layersPanelPage.typeNameCreatedLayerAndClickOnViewport( + newName, + 900, + 100, + ); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(newName); + // rename by RMB context menu while the board layer is selected + await layersPanelPage.renameLayerViaRightClick(newName); + await layersPanelPage.typeNameCreatedLayerAndEnter(renamedName); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.isBoardNameDisplayed(renamedName); + }, + ); mainTest(qase(220, 'CO-5 Rename board with empty field'), async ({ page }) => { const defaultBoardName = 'Board'; @@ -362,7 +422,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await mainPage.doubleClickCreatedBoardTitleOnCanvas(); - await layersPanelPage.renameCreatedLayer('Test'); + await layersPanelPage.typeNameForCreatedLayer('Test'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isBoardNameDisplayed('Test'); await layersPanelPage.searchLayer('test'); @@ -379,7 +439,7 @@ mainTest.describe(() => { await mainPage.pressFlexLayoutShortcut(); await mainPage.waitForChangeIsSaved(); await mainPage.doubleClickCreatedBoardTitleOnCanvas(); - await layersPanelPage.renameCreatedLayer('Main Board'); + await layersPanelPage.typeNameForCreatedLayer('Main Board'); await mainPage.waitForChangeIsSaved(); await mainPage.createDefaultBoardByCoordinates(200, 200); await designPanelPage.changeHeightAndWidthForLayer('200', '200'); @@ -419,13 +479,13 @@ mainTest.describe(() => { await mainPage.clickViewportByCoordinates(100, 150); await mainPage.waitForChangeIsSaved(); await mainPage.doubleClickBoardTitleOnCanvas('Board'); - await layersPanelPage.renameCreatedLayer(board1); + await layersPanelPage.typeNameForCreatedLayer(board1); await mainPage.waitForChangeIsSaved(); await mainPage.clickCreateBoardButton(); await mainPage.clickViewportByCoordinates(250, 300); await mainPage.waitForChangeIsSaved(); await mainPage.doubleClickBoardTitleOnCanvas('Board'); - await layersPanelPage.renameCreatedLayer(board2); + await layersPanelPage.typeNameForCreatedLayer(board2); await mainPage.waitForChangeIsSaved(); }); diff --git a/tests/composition/composition-curve.spec.js b/tests/composition/composition-curve.spec.js index d7fc8328..854e59d5 100644 --- a/tests/composition/composition-curve.spec.js +++ b/tests/composition/composition-curve.spec.js @@ -51,7 +51,7 @@ mainTest.describe(() => { await mainPage.drawCurve(900, 300, 600, 200); await mainPage.waitForChangeIsSaved(); await layersPanelPage.doubleClickLayerOnLayersTab('Path'); - await layersPanelPage.renameCreatedLayer('renamed curve'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed curve'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed curve'); }, diff --git a/tests/composition/composition-ellipse.spec.js b/tests/composition/composition-ellipse.spec.js index ff25eb10..8f7d363b 100644 --- a/tests/composition/composition-ellipse.spec.js +++ b/tests/composition/composition-ellipse.spec.js @@ -49,7 +49,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await layersPanelPage.doubleClickLayerOnLayersTab('Ellipse'); - await layersPanelPage.renameCreatedLayer('renamed ellipse'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed ellipse'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed ellipse'); }); diff --git a/tests/composition/composition-grid-layout.spec.js b/tests/composition/composition-grid-layout.spec.js index 9c16a435..c4866601 100644 --- a/tests/composition/composition-grid-layout.spec.js +++ b/tests/composition/composition-grid-layout.spec.js @@ -898,7 +898,7 @@ mainTest( await designPanelPage.changeHeightAndWidthForLayer('300', '400'); await mainPage.waitForChangeIsSaved(); await mainPage.doubleClickCreatedBoardTitleOnCanvas(); - await layersPanelPage.renameCreatedLayer('Dashboard'); + await layersPanelPage.typeNameCreatedLayerAndEnter('Dashboard'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isBoardNameDisplayed('Dashboard'); await layersPanelPage.clickLayerOnLayersTab('Dashboard'); diff --git a/tests/composition/composition-image.spec.js b/tests/composition/composition-image.spec.js index f8788788..8cb21c8e 100644 --- a/tests/composition/composition-image.spec.js +++ b/tests/composition/composition-image.spec.js @@ -49,7 +49,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await layersPanelPage.doubleClickLayerOnLayersTab('images'); - await layersPanelPage.renameCreatedLayer('renamed image'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed image'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed image'); }); diff --git a/tests/composition/composition-path.spec.js b/tests/composition/composition-path.spec.js index 3be3e1ec..8d80ea1b 100644 --- a/tests/composition/composition-path.spec.js +++ b/tests/composition/composition-path.spec.js @@ -72,7 +72,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await layersPanelPage.doubleClickLayerOnLayersTab('Path'); - await layersPanelPage.renameCreatedLayer('renamed path'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed path'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed path'); }); @@ -161,7 +161,7 @@ mainTest.describe(() => { const path1 = 'Path #1'; const path2 = 'Path #2'; await layersPanelPage.doubleClickLayerOnLayersTab('Path'); - await layersPanelPage.renameCreatedLayer(path1); + await layersPanelPage.typeNameCreatedLayerAndEnter(path1); await mainPage.waitForChangeIsSaved(); await mainPage.clickCreatePathButton(); await mainPage.clickViewportByCoordinates(200, 300); @@ -171,7 +171,7 @@ mainTest.describe(() => { await mainPage.clickOnDesignTab(); await mainPage.waitForChangeIsSaved(); await layersPanelPage.doubleClickLayerOnLayersTab('Path'); - await layersPanelPage.renameCreatedLayer(path2); + await layersPanelPage.typeNameCreatedLayerAndEnter(path2); await mainPage.waitForChangeIsSaved(); await mainPage.clickViewportOnce(); await layersPanelPage.hideUnhideLayerByIconOnLayersTab(path1); diff --git a/tests/composition/composition-rectangle.spec.js b/tests/composition/composition-rectangle.spec.js index a32d63e4..507aac5f 100644 --- a/tests/composition/composition-rectangle.spec.js +++ b/tests/composition/composition-rectangle.spec.js @@ -239,7 +239,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await layersPanelPage.doubleClickLayerOnLayersTab('Rectangle'); - await layersPanelPage.renameCreatedLayer('renamed rectangle'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed rectangle'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed rectangle'); }); diff --git a/tests/composition/composition-text.spec.js b/tests/composition/composition-text.spec.js index bf211af8..caf9260a 100644 --- a/tests/composition/composition-text.spec.js +++ b/tests/composition/composition-text.spec.js @@ -267,7 +267,7 @@ mainTest.describe(() => { const mainPage = new MainPage(page); const layersPanelPage = new LayersPanelPage(page); await layersPanelPage.doubleClickLayerOnLayersTab('Hello World!'); - await layersPanelPage.renameCreatedLayer('renamed text'); + await layersPanelPage.typeNameCreatedLayerAndEnter('renamed text'); await mainPage.waitForChangeIsSaved(); await layersPanelPage.isLayerNameDisplayed('renamed text'); }); diff --git a/tests/panels-features/panels-features-prototype.spec.js b/tests/panels-features/panels-features-prototype.spec.js index 45bab51a..0cb17ede 100644 --- a/tests/panels-features/panels-features-prototype.spec.js +++ b/tests/panels-features/panels-features-prototype.spec.js @@ -163,16 +163,16 @@ mainTest( const layersPanelPage = new LayersPanelPage(page); await mainPage.createDefaultBoardByCoordinates(900, 100); await layersPanelPage.doubleClickLayerOnLayersTab('Board'); - await layersPanelPage.renameCreatedLayer('Board #1'); + await layersPanelPage.typeNameCreatedLayerAndEnter('Board #1'); await mainPage.createDefaultBoardByCoordinates(500, 200); await layersPanelPage.doubleClickLayerOnLayersTab('Board'); - await layersPanelPage.renameCreatedLayer('Board #2'); + await layersPanelPage.typeNameCreatedLayerAndEnter('Board #2'); await prototypePanelPage.clickPrototypeTab(); await prototypePanelPage.dragAndDropPrototypeArrowConnector(900, 100); await mainPage.waitForChangeIsSaved(); await mainPage.createDefaultBoardByCoordinates(200, 600); await layersPanelPage.doubleClickLayerOnLayersTab('Board'); - await layersPanelPage.renameCreatedLayer('Board #3'); + await layersPanelPage.typeNameCreatedLayerAndEnter('Board #3'); await mainPage.clickViewportByCoordinates(500, 200); await prototypePanelPage.clickFirstInteractionRecord(); await prototypePanelPage.selectInteractionDestination('Board #3');