diff --git a/images/horizontal_sample.jpg b/images/horizontal_sample.jpg new file mode 100644 index 0000000..12ef359 Binary files /dev/null and b/images/horizontal_sample.jpg differ diff --git a/images/mini_sample2.jpg b/images/mini_sample2.jpg new file mode 100644 index 0000000..4b970e6 Binary files /dev/null and b/images/mini_sample2.jpg differ diff --git a/images/vertical_sample.jpg b/images/vertical_sample.jpg new file mode 100644 index 0000000..b65c53c Binary files /dev/null and b/images/vertical_sample.jpg differ diff --git a/pages/workspace/design-panel-page.js b/pages/workspace/design-panel-page.js index 053af29..f49479d 100644 --- a/pages/workspace/design-panel-page.js +++ b/pages/workspace/design-panel-page.js @@ -104,9 +104,8 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { this.gridEditButton = page.locator( 'button[alt="Grid edit mode"]', ); - this.gridDoneButton = page.locator( - 'button[class*="done-btn"]', - ); + this.gridDoneButton = page.locator('button[class*="done-btn"]'); + this.gridLocateButton = page.locator('button[class*="locate-btn"]'); this.gridLayoutMenu = page.locator('div[class*="grid-layout-menu"]').first(); this.manualButton = page.locator('label[for=":manual"]'); this.areaButton = page.locator('label[for=":area"]'); @@ -718,6 +717,10 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage { await this.gridDoneButton.click(); } + async clickGridLocateButton() { + await this.gridLocateButton.click(); + } + async expandFlexLayoutMenu() { if (!(await this.flexLayoutMenu.isVisible())) { await this.flexLayoutCollapsedIcon.click(); diff --git a/pages/workspace/main-page.js b/pages/workspace/main-page.js index c8c89b3..2f7323c 100644 --- a/pages/workspace/main-page.js +++ b/pages/workspace/main-page.js @@ -308,6 +308,13 @@ exports.MainPage = class MainPage extends BasePage { await boardSel.dblclick(); } + async hoverBoardOnCanvas() { + const boardSel = this.page.locator( + `rect[class="main viewport-selrect"]`, + ); + await boardSel.hover(); + } + async focusLayerViaShortcut() { await this.page.keyboard.press('F'); } @@ -944,4 +951,17 @@ exports.MainPage = class MainPage extends BasePage { const cellLocator = await this.page.locator(`rect[class*="grid-cell-outline"] >>nth=${cell-1}`); await cellLocator.click(); } + + async dragAndDropComponentToAnotherFraction(cellNumber, page) { + await this.page.waitForTimeout(200); + const selectedElement = this.page.locator( + `rect[class*="main viewport-selrect"]`, + ); + const board = this.page.locator( + `rect[class*="grid-cell-outline"] >>nth=${cellNumber-1}`, + ); + await selectedElement.hover(); + await page.waitForTimeout(500); + await selectedElement.dragTo(board); + } }; diff --git a/tests/composition/composition-grid-layout.spec.js b/tests/composition/composition-grid-layout.spec.js index ba982f6..959382e 100644 --- a/tests/composition/composition-grid-layout.spec.js +++ b/tests/composition/composition-grid-layout.spec.js @@ -9,10 +9,11 @@ const { DashboardPage } = require('../../pages/dashboard/dashboard-page'); const { updateTestResults } = require('./../../helpers/saveTestResults.js'); const { InspectPanelPage } = require('../../pages/workspace/inspect-panel-page'); const { AssetsPanelPage } = require('../../pages/workspace/assets-panel-page'); +const { ColorPalettePage } = require('../../pages/workspace/color-palette-page'); const teamName = random().concat('autotest'); -let teamPage,dashboardPage,mainPage,designPanelPage,layersPanelPage,inspectPanelPage,assetsPanelPage; +let teamPage,dashboardPage,mainPage,designPanelPage,layersPanelPage,inspectPanelPage,assetsPanelPage,colorPalettePage; test.beforeEach(async ({ page }) => { teamPage = new TeamPage(page); dashboardPage = new DashboardPage(page); @@ -21,6 +22,7 @@ test.beforeEach(async ({ page }) => { layersPanelPage = new LayersPanelPage(page); inspectPanelPage = new InspectPanelPage(page); assetsPanelPage = new AssetsPanelPage(page); + colorPalettePage = new ColorPalettePage(page); await teamPage.createTeam(teamName); await teamPage.isTeamSelected(teamName); await dashboardPage.createFileViaPlaceholder(); @@ -385,6 +387,30 @@ test.describe(() => { }); }); + mainTest('PENPOT-1713 Add 4 pictures of different sizes and change the color for the back', async ({ page }) => { + await mainPage.uploadImage('images/horizontal_sample.jpg'); + await layersPanelPage.dragAndDropComponentToBoard('horizontal_sample'); + await mainPage.waitForChangeIsSaved(); + await mainPage.uploadImage('images/vertical_sample.jpg'); + await layersPanelPage.dragAndDropComponentToBoard('vertical_sample'); + await mainPage.waitForChangeIsSaved(); + await mainPage.uploadImage('images/mini_sample2.jpg'); + await layersPanelPage.dragAndDropComponentToBoard('mini_sample2'); + await mainPage.waitForChangeIsSaved(); + + await mainPage.clickViewportOnce(); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.waitForChangeIsSaved(); + + await designPanelPage.clickFillColorIcon(); + await colorPalettePage.setHex('#FF0000'); + await mainPage.waitForChangeIsSaved(); + + await expect(mainPage.viewport).toHaveScreenshot('red-board-with-4-image.png', { + mask: [mainPage.guides], + }); + }); + mainTest('PENPOT-1745 Check code section', async ({ page }) => { await mainPage.createDefaultRectangleByCoordinates(200, 200, true); await layersPanelPage.dragAndDropComponentToBoard('Rectangle'); @@ -502,6 +528,81 @@ test.describe(() => { }); }); + mainTest('PENPOT-1737 Locate button', async ({ page }) => { + await mainPage.clickBoardOnCanvas(); + await designPanelPage.changeAxisXandYForLayer('400', '2000'); + await designPanelPage.addLayoutFromDesignPanel('grid'); + await designPanelPage.openGridEditModeFromDesignPanel(); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot('board-not-visible.png', { + mask: [mainPage.guides], + }); + await designPanelPage.clickGridLocateButton(); + await expect(mainPage.viewport).toHaveScreenshot('board-visible.png', { + mask: [mainPage.guides], + }); + }); + + // mainTest.only('PENPOT-1738 Move element inside grid board', async ({ page }) => { + // await mainPage.createDefaultRectangleByCoordinates(200, 200, true); + // await layersPanelPage.dragAndDropComponentToBoard('Rectangle'); + // await mainPage.waitForChangeIsSaved(); + // await mainPage.dragAndDropComponentToAnotherFraction(2, page); + // await mainPage.waitForChangeIsSaved(); + // await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-move-element.png', { + // mask: [mainPage.guides], + // }); + // }); + + mainTest('PENPOT-1739,1742 Duplicate vertical and horizontal direction, undo element duplication', async ({ browserName }) => { + await mainPage.createDefaultRectangleByCoordinates(200, 200, true); + await layersPanelPage.dragAndDropComponentToBoard('Rectangle'); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickViewportOnce(); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.waitForChangeIsSaved(); + + await designPanelPage.changeLayoutDirection('Column', false); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.clickLayerOnLayersTab('Rectangle'); + await mainPage.duplicateLayerViaLayersTab('Rectangle'); + await expect(mainPage.viewport).toHaveScreenshot( + 'column-direction-rectangle.png', { + mask: [mainPage.guides], + }); + await mainPage.clickShortcutCtrlZ(browserName); + await mainPage.clickViewportOnce(); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.waitForChangeIsSaved(); + await designPanelPage.changeLayoutDirection('Row', false); + await mainPage.waitForChangeIsSaved(); + await layersPanelPage.clickLayerOnLayersTab('Rectangle'); + await mainPage.duplicateLayerViaLayersTab('Rectangle'); + await expect(mainPage.viewport).toHaveScreenshot( + 'row-direction-rectangle.png', { + mask: [mainPage.guides], + }); + }); + + mainTest('PENPOT-1743 Undo element editing', async ({ browserName }) => { + await mainPage.createDefaultRectangleByCoordinates(200, 200, true); + await layersPanelPage.dragAndDropComponentToBoard('Rectangle'); + await mainPage.waitForChangeIsSaved(); + await designPanelPage.clickFillColorIcon(); + await colorPalettePage.setHex('#00FF00'); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + 'rectangle-green-color.png', { + mask: [mainPage.guides], + }); + await mainPage.clickViewportOnce(); + await mainPage.clickShortcutCtrlZ(browserName); + await expect(mainPage.viewport).toHaveScreenshot( + 'rectangle-undo-color.png', { + mask: [mainPage.guides], + }); + }); + mainTest('PENPOT-1746 Check to add area - manually', async ({ page }) => { await mainPage.clickBoardOnCanvas(); await mainPage.doubleClickBoardOnCanvas(); @@ -529,7 +630,7 @@ test.describe(() => { }); }); -mainTest('PENPOT-1707 Add grid lines, and upload the images, check removed some image', async ({ page, browserName }) => { +mainTest('PENPOT-1707,1741 Add grid lines, and upload the images, check removed some image', async ({ page, browserName }) => { await mainPage.createDefaultBoardByCoordinates(400, 300); await designPanelPage.changeHeightAndWidthForLayer('500', '600'); await mainPage.waitForChangeIsSaved(); diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-not-visible.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-not-visible.png new file mode 100644 index 0000000..096b573 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-not-visible.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-visible.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-visible.png new file mode 100644 index 0000000..d43d986 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/board-visible.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/column-direction-rectangle.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/column-direction-rectangle.png new file mode 100644 index 0000000..16678a9 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/column-direction-rectangle.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-green-color.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-green-color.png new file mode 100644 index 0000000..2a1d2f7 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-green-color.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-undo-color.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-undo-color.png new file mode 100644 index 0000000..9db681a Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/rectangle-undo-color.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/red-board-with-4-image.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/red-board-with-4-image.png new file mode 100644 index 0000000..9b80d69 Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/red-board-with-4-image.png differ diff --git a/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/row-direction-rectangle.png b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/row-direction-rectangle.png new file mode 100644 index 0000000..6f6aa0b Binary files /dev/null and b/tests/composition/composition-grid-layout.spec.js-snapshots/win32/chrome/row-direction-rectangle.png differ