penpot/penpotqa
1
0
Fork 0
mirror of https://github.com/penpot/penpotqa.git synced 2024-07-06 04:51:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tests and snapshots with new UI (composition > flex-layout, dashboard)

Browse Source
This commit is contained in:
KateMaruk 2023-12-23 22:14:24 +02:00
parent 4e05ee6ae8
commit fb4619dcdf
309 changed files with 3218 additions and 3715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/playwright_pre.yml vendored
View File

@ -1,7 +1,7 @@
name: Penpot Regression Tests on PRE env
on:
schedule: ## run tests each Thursday at 6:00am UTC
- cron: "00 6 * * 4"
- cron: '00 6 * * 4'
workflow_dispatch:
jobs:
tests_chromium:

3
.prettierrc
View File

@ -1,7 +1,6 @@
{
"singleQuote": false,
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"useTabs": false,
"semi": true
}

144
fixtures.js
View File

@ -1,6 +1,6 @@
const base = require("@playwright/test");
const { LoginPage } = require("./pages/login-page.js");
const { DashboardPage } = require("./pages/dashboard/dashboard-page.js");
const base = require('@playwright/test');
const { LoginPage } = require('./pages/login-page.js');
const { DashboardPage } = require('./pages/dashboard/dashboard-page.js');
const mainTest = base.test.extend({
page: async ({ page }, use) => {
@ -11,7 +11,7 @@ const mainTest = base.test.extend({
await loginPage.enterPwd(process.env.LOGIN_PWD);
await loginPage.clickLoginButton();
await dashboardPage.isDashboardOpenedAfterLogin();
await dashboardPage.isHeaderDisplayed("Projects");
await dashboardPage.isHeaderDisplayed('Projects');
await use(page);
},
});
@ -25,85 +25,85 @@ const dashboardTest = base.test.extend({
await loginPage.clickLoginButton();
const dashboardPage = new DashboardPage(page);
await dashboardPage.isDashboardOpenedAfterLogin();
await dashboardPage.isHeaderDisplayed("Projects");
await dashboardPage.isHeaderDisplayed('Projects');
await use(page);
},
});
const performanceTest = base.test.extend({
workingFile: [
"documents/Penpot - Design System v2.0.penpot",
'documents/Penpot - Design System v2.0.penpot',
{ option: true },
],
workingShapes: [
{
pageId: "582296a0-d6b1-11ec-a04a-cf2544e40df7",
singleId: "#shape-5bb9c720-d6b1-11ec-a04a-cf2544e40df7",
multipleFrameTitleId: "#frame-title-5bb92ae0-d6b1-11ec-a04a-cf2544e40df7",
pageId: '582296a0-d6b1-11ec-a04a-cf2544e40df7',
singleId: '#shape-5bb9c720-d6b1-11ec-a04a-cf2544e40df7',
multipleFrameTitleId: '#frame-title-5bb92ae0-d6b1-11ec-a04a-cf2544e40df7',
multipleIds: [
"#shape-5bb951f0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bb97900-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bb9a010-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bb9c720-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bb9ee30-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bba3c50-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbab180-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbad890-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbaffa0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbb26b0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbb4dc0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbb74d0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbc1111-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbc8640-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbcad51-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbd4990-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbd70a0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbdbec0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbe8211-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbef741-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bbfe1a0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc02fc1-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc14131-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc22b91-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc2eee0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc33d00-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc38b20-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc3d941-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc49c91-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc55fe1-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc64a40-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc69861-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc7d0e0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bc90961-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bcade20-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bcb2c41-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bcbef91-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bccd9f1-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bce1270-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bce6091-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bcf4af1-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd05c61-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd146c0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd194e0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd1bbf0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd390b0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd42cf0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd51750-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd56570-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd58c80-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd628c0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd6ec10-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd7af60-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd899c0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bd98420-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bda6e80-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bdae3b0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bdb7ff0-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bdc4340-d6b1-11ec-a04a-cf2544e40df7",
"#shape-5bdd2da0-d6b1-11ec-a04a-cf2544e40df7",
'#shape-5bb951f0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bb97900-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bb9a010-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bb9c720-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bb9ee30-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bba3c50-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbab180-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbad890-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbaffa0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbb26b0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbb4dc0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbb74d0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbc1111-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbc8640-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbcad51-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbd4990-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbd70a0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbdbec0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbe8211-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbef741-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bbfe1a0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc02fc1-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc14131-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc22b91-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc2eee0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc33d00-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc38b20-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc3d941-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc49c91-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc55fe1-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc64a40-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc69861-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc7d0e0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bc90961-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bcade20-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bcb2c41-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bcbef91-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bccd9f1-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bce1270-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bce6091-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bcf4af1-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd05c61-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd146c0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd194e0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd1bbf0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd390b0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd42cf0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd51750-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd56570-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd58c80-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd628c0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd6ec10-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd7af60-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd899c0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bd98420-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bda6e80-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bdae3b0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bdb7ff0-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bdc4340-d6b1-11ec-a04a-cf2544e40df7',
'#shape-5bdd2da0-d6b1-11ec-a04a-cf2544e40df7',
],
frameTitleId: "#frame-title-5b3247a0-d6b1-11ec-a04a-cf2544e40df7",
frameId: "#frame-container-5b3247a0-d6b1-11ec-a04a-cf2544e40df7",
frameTitleId: '#frame-title-5b3247a0-d6b1-11ec-a04a-cf2544e40df7',
frameId: '#frame-container-5b3247a0-d6b1-11ec-a04a-cf2544e40df7',
},
{ option: true },
],
@ -115,7 +115,7 @@ const performanceTest = base.test.extend({
await loginPage.clickLoginButton();
const dashboardPage = new DashboardPage(page);
await dashboardPage.waitForPageLoaded();
await dashboardPage.isHeaderDisplayed("Projects");
await dashboardPage.isHeaderDisplayed('Projects');
await dashboardPage.deleteProjectsIfExist();
await dashboardPage.deleteFilesIfExist();
await dashboardPage.importAndOpenFile(workingFile);

16
helpers/get-platform.js Normal file
View File

@ -0,0 +1,16 @@
export function getPlatformName() {
let platformName;
let currentOS = process.platform.toLowerCase();
switch (currentOS) {
case 'win32':
platformName = 'Windows';
break;
case 'darwin':
platformName = 'MacOS';
break;
default:
platformName = 'Linux';
}
return platformName;
}

17
helpers/string-generator.js
View File

@ -1,20 +1,3 @@
export const random = () => {
return Math.random().toString(36).substring(2, 9);
};
export function getPlatformName() {
let platformName;
let currentOS = process.platform.toLowerCase();
switch (currentOS) {
case "win32":
platformName = "Windows";
break;
case "darwin":
platformName = "MacOS";
break;
default:
platformName = "Linux";
}
return platformName;
}

2
package.json
View File

@ -5,6 +5,8 @@
"main": "index.js",
"scripts": {
"test": "npx playwright test --project=chrome -gv 'PERF'",
"file": "npx playwright test -g \"DA-77 Team.Switch between teams\"",
"spec": "npx playwright test tests/composition/composition-flex-layout.spec.js --project=webkit",
"firefox": "npx playwright test --project=firefox -gv 'PERF'",
"webkit": "npx playwright test --project=webkit -gv 'PERF'",
"performance": "npx playwright test --retries=1 --timeout=555550000 --project=chrome -g 'PERF'",

95
pages/base-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { getPlatformName } = require("../helpers/string-generator");
const { expect } = require('@playwright/test');
const { getPlatformName } = require('../helpers/get-platform');
exports.BasePage = class BasePage {
/**
@ -15,55 +15,59 @@ exports.BasePage = class BasePage {
//Layer right-click menu items
this.createdLayer = page.locator(
'div[class="viewport"] [id^="shape"] >> nth=0',
'div[class="viewport"] [id^="shape"] >> nth=0',
);
this.createdBoardTitle = page.locator('g[class="frame-title"] >> nth=0');
this.deleteLayerMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Delete")',
'ul[class*="workspace-context-menu"] li:has-text("Delete")',
);
this.hideLayerMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Hide")',
'ul[class*="workspace-context-menu"] li:has-text("Hide")',
);
this.showLayerMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Show")',
'ul[class*="workspace-context-menu"] li:has-text("Show")',
);
this.focusOnLayerMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Focus on")',
'ul[class*="workspace-context-menu"] li:has-text("Focus on")',
);
this.transformToPathMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Transform to path")',
'ul[class*="workspace-context-menu"] li:has-text("Transform to path")',
);
this.selectionToBoardMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Selection to board")',
'ul[class*="workspace-context-menu"] li:has-text("Selection to board")',
);
this.createComponentMenuItem = page.locator(
'ul[class="workspace-context-menu"] li:has-text("Create component")',
'ul[class="workspace-context-menu"] li:has-text("Create component")',
);
this.flipVerticalMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Flip vertical")',
'ul[class*="workspace-context-menu"] li:has-text("Flip vertical")',
);
this.flipHorizontalMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Flip horizontal")',
'ul[class*="workspace-context-menu"] li:has-text("Flip horizontal")',
);
this.editPathMenuItem = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Edit")',
'ul[class*="workspace-context-menu"] li:has-text("Edit")',
);
this.addFlexLayout = page.locator(
'ul[class*="workspace-context-menu"] li:has-text("Add flex layout")',
'ul[class*="workspace-context-menu"] li:has-text("Add flex layout")',
);
this.removeFlexLayout = page.locator(
'ul[class="workspace-context-menu"] li:has-text("Remove flex layout")',
'ul[class*="workspace-context-menu"] li:has-text("Remove flex layout")',
);
}
async clearInput(input) {
async clearInput(input, browserName) {
await input.click();
if (getPlatformName() === "MacOS") {
await this.page.keyboard.press("Meta+A");
if (getPlatformName() === 'MacOS') {
await this.page.keyboard.press('Meta+A');
} else {
await this.page.keyboard.press("Control+A");
if (browserName === 'webkit') {
await this.page.keyboard.press('Meta+A');
} else {
await this.page.keyboard.press('Control+A');
}
}
await this.page.keyboard.press("Delete");
await this.page.keyboard.press('Delete');
}
async reloadPage() {
@ -71,7 +75,7 @@ exports.BasePage = class BasePage {
}
async clickOnEnter() {
await this.page.keyboard.press("Enter");
await this.page.keyboard.press('Enter');
}
async isHeaderDisplayed(title) {
@ -83,15 +87,11 @@ exports.BasePage = class BasePage {
}
async waitSuccessMessageHidden() {
await this.successMessage.waitFor({ state: "hidden" });
}
async isInfoMessageDisplayed(message) {
await expect(this.infoMessage).toHaveText(message);
await this.successMessage.waitFor({ state: 'hidden' });
}
async waitInfoMessageHidden() {
await this.infoMessage.waitFor({ state: "hidden" });
await this.infoMessage.waitFor({ state: 'hidden' });
}
async clickMoveButton() {
@ -99,96 +99,97 @@ exports.BasePage = class BasePage {
}
async waitForChangeIsSaved() {
await this.savedChangesIcon.waitFor({ state: "visible" });
await this.savedChangesIcon.waitFor({ state: 'visible' });
}
async deleteLayerViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.deleteLayerMenuItem.click();
}
async hideLayerViaRightClickOnCanvas(title) {
const boardSel = this.page.locator(
`//*[text()="${title}"]//parent::*[@class="frame-title"]`,
`//*[text()="${title}"]//parent::*[@class="frame-title"]`,
);
await boardSel.click({ button: "right", force: true });
await boardSel.click({ button: 'right', force: true });
await this.hideLayerMenuItem.click();
}
async focusBoardViaRightClickOnCanvas(title) {
const boardSel = this.page.locator(
`//*[text()="${title}"]//parent::*[@class="frame-title"]`,
`//*[text()="${title}"]//parent::*[@class="frame-title"]`,
);
await boardSel.click({ button: "right", force: true });
await boardSel.click({ button: 'right', force: true });
await this.focusOnLayerMenuItem.click();
}
async focusLayerViaRightClickOnCanvas() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.focusOnLayerMenuItem.click();
}
async getLayerSelectorOnLayersTab(layer) {
return this.page.locator(`//*[text()="${layer}"]//parent::div[contains(@class, "element-list-body")]`);
return this.page.locator(
`//*[text()="${layer}"]//parent::div[contains(@class, "element-list-body")]`,
);
}
async focusLayerViaRightClickOnLayersTab(layer) {
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
await layerSel.click({ button: "right", force: true });
await layerSel.click({ button: 'right', force: true });
await this.focusOnLayerMenuItem.click();
}
async hideLayerViaRightClickOnLayersTab(layer) {
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
await layerSel.click({ button: "right", force: true });
await layerSel.click({ button: 'right', force: true });
await this.hideLayerMenuItem.click();
}
async unHideLayerViaRightClickOnLayersTab(layer) {
const layerSel = await this.getLayerSelectorOnLayersTab(layer);
await layerSel.click({ button: "right", force: true });
await layerSel.click({ button: 'right', force: true });
await this.showLayerMenuItem.click();
}
async transformToPathViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.transformToPathMenuItem.click();
}
async selectionToBoardViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.selectionToBoardMenuItem.click();
}
async createComponentViaRightClick() {
const layerSel = this.page.locator('div[class="viewport"] [id^="shape"]');
await layerSel.last().click({ button: "right", force: true });
await layerSel.last().click({ button: 'right', force: true });
await this.createComponentMenuItem.click();
}
async flipVerticalViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.flipVerticalMenuItem.click();
}
async flipHorizontalViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.flipHorizontalMenuItem.click();
}
async openNodesPanelViaRightClick() {
await this.createdLayer.click({ button: "right", force: true });
await this.createdLayer.click({ button: 'right', force: true });
await this.editPathMenuItem.click();
}
async addFlexLayoutViaRightClick() {
await this.createdBoardTitle.click({ button: "right", force: true });
await this.createdBoardTitle.click({ button: 'right', force: true });
await this.addFlexLayout.click();
}
async removeFlexLayoutViaRightClick() {
await this.createdBoardTitle.click({ button: "right", force: true });
await this.createdBoardTitle.click({ button: 'right', force: true });
await this.removeFlexLayout.click();
}
};

162
pages/dashboard/dashboard-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("../base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('../base-page');
exports.DashboardPage = class DashboardPage extends BasePage {
/**
@ -12,7 +12,9 @@ exports.DashboardPage = class DashboardPage extends BasePage {
this.numberOfFilesText = page.locator(
'div[class*="project-name-wrapper"] span[class*="projects__info"]',
);
this.fileTile = page.locator('div[class*="dashboard-grid"] div[class*="grid-item-th"]');
this.fileTile = page.locator(
'div[class*="dashboard-grid"] div[class*="grid-item-th"]',
);
this.fileNameTitle = page.locator('div[class*="item-info"] h3');
this.deleteFileMenuItem = page.locator('a[data-test="file-delete"]');
this.deleteFileButton = page.locator(
@ -75,69 +77,73 @@ exports.DashboardPage = class DashboardPage extends BasePage {
);
this.pinUnpinProjectButton = page.locator('button[alt="Pin/Unpin"] svg');
this.projectOptionsMenuButton = page.locator(
'*[data-test="project-options"] .icon-actions',
'button[data-test="project-options"]',
);
this.projectsSidebarItem = page.locator('li:has-text("Projects")');
this.draftsSidebarItem = page.locator('li:has-text("Drafts")');
this.librariesSidebarItem = page.locator('li:has-text("Libraries")');
this.pinnedProjectsSidebarItem = page.locator(
'div[data-test="pinned-projects"] li',
'div[data-test="pinned-projects"]',
);
this.searchInput = page.locator("#search-input");
this.searchInput = page.locator('#search-input');
this.projectOptions = page.locator('[data-test="project-options"]');
// Import files
this.fileImport = page.locator('a[data-test="file-import"]');
this.modalTitle = page.locator('h2[class*="modal-title"]');
this.modalCancelButton = page.locator(
".modal-footer .action-buttons .cancel-button",
'div[class*="modal-footer"] input[class*="cancel-button"]',
);
this.modalAcceptButton = page.locator(
'div[class*="modal-footer"] input[class*="accept-btn"]',
);
this.modalAcceptButton = page.locator('div[class*="modal-footer"] input[class*="accept-btn"]');
this.feedbackBanner = page.locator('div[class*="feedback-banner"]');
this.feedbackBannerMessage = page.locator('div[class*="feedback-banner"] div[class*="message"]');
this.importErrorMessage = page.locator('div[class="error-message"]');
this.feedbackBannerMessage = page.locator(
'div[class*="feedback-banner"] div[class*="message"]',
);
this.importErrorMessage = page.locator('div[class*="error-message"]');
//Fonts
this.fontsSidebarItem = page.locator('li:has-text("Fonts")');
this.uploadFontSelector = page.locator("#font-upload");
this.uploadFontButton = page.locator('button:has-text("Upload")');
this.uploadFontSelector = page.locator('#font-upload');
this.uploadFontButton = page.locator('button:text-is("Upload")');
this.fontNameTableCell = page.locator(
'div[class="font-item table-row"] div[class="table-field family"]',
'div[class*="installed-fonts"] div[class*="table-row"] div[class*="dashboard_fonts__family"]',
);
this.fontStyleTableCell = page.locator(
'div[class="font-item table-row"] div[class="table-field variants"]',
'div[class*="installed-fonts"] div[class*="table-row"] div[class*="dashboard_fonts__variants"]',
);
this.fontOptionsMenuButton = page.locator(
'div[class="table-field options"] svg[class="icon-actions"]',
'div[class*="fonts__options"] svg[class="icon-actions"]',
);
this.editFontMenuItem = page.locator('a[data-test="font-edit"]');
this.deleteFontMenuItem = page.locator('a[data-test="font-delete"]');
this.deleteFontButton = page.locator('input[value="Delete"]');
this.fontsTablePlaceholder = page.locator(
'div[class="fonts-placeholder"] div[class="label"]',
'div[class*="fonts-placeholder"] div[class*="label"]',
);
this.fontNameInput = page.locator(
'div[class="font-item table-row"] input[type="text"]',
'div[class*="table-row"] input[type="text"]',
);
this.saveFontButton = page.locator('button:has-text("Save")');
this.saveFontButton = page.locator('button:text-is("Save")');
this.searchFontInput = page.locator('input[placeholder="Search font"]');
this.fontFormatError = page.locator('div[class="banner error fixed"]');
//Libraries & Templates
this.librariesAndTemplatesCarouselButton = page.locator(
"div.dashboard-templates-section div.title button",
'div[class*="dashboard-templates-section"] div[class*="title"] button',
);
this.librariesAndTemplatesSection = page.locator(
'div[class="dashboard-templates-section "]',
'div[class*="dashboard-templates-section"]',
);
this.librariesAndTemplatesSectionCollapsed = page.locator(
'div[class="dashboard-templates-section collapsed"]',
'div[class*="dashboard_templates__collapsed"]',
);
this.librariesAndTemplatesSectionLeftArrowButton = page.locator(
'button[class="button left"]',
'button[class*="left"]',
);
this.librariesAndTemplatesSectionRightArrowButton = page.locator(
'button[class="button right"]',
'button[class*="right"]',
);
this.continueButton = page.locator('input[value="Continue"]');
this.acceptButton = page.locator('input[value="Accept"]');
@ -155,7 +161,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async deleteFileViaRightclick() {
await this.fileTile.click({ button: "right" });
await this.fileTile.click({ button: 'right' });
await this.deleteFileMenuItem.click();
await this.deleteFileButton.click();
}
@ -170,25 +176,25 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async deleteFiles() {
let counter = 0;
while (await this.fileInfoPanel.count()) {
await this.fileInfoPanel.first().click({ button: "right" });
while (await this.fileTile.count()) {
await this.fileTile.first().click({ button: 'right' });
await this.deleteFileMenuItem.click();
await this.deleteFileButton.click();
counter++;
}
await expect(this.fileInfoPanel).toHaveCount(0);
await expect(this.fileTile).toHaveCount(0);
}
async deleteFilesIfExist() {
await this.numberOfFilesText.waitFor();
const text = (await this.numberOfFilesText.innerText()).valueOf();
if (!text.includes("0 files")) {
if (!text.includes('0 files')) {
await this.deleteFiles();
}
}
async deleteProjectViaRightclick() {
await this.projectNameTitle.first().click({ button: "right" });
await this.projectNameTitle.first().click({ button: 'right' });
await this.deleteProjectMenuItem.click();
await this.deleteProjectButton.click();
}
@ -203,8 +209,8 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async deleteProjectsIfExist() {
for (const project of await this.projectNameTitle.elementHandles()) {
const name = (await project.innerText()).valueOf();
if (!name.includes("Drafts")) {
await project.click({ button: "right" });
if (!name.includes('Drafts')) {
await project.click({ button: 'right' });
await this.deleteProjectMenuItem.click();
await this.deleteProjectButton.click();
}
@ -213,31 +219,31 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async waitForPageLoaded() {
await this.page.waitForLoadState("networkidle");
await this.page.waitForLoadState('networkidle');
}
async isDashboardOpenedAfterLogin() {
await this.page.waitForURL(/.*dashboard\/team/, { waitUntil: "load" });
await this.page.waitForURL(/.*dashboard\/team/, { waitUntil: 'load' });
}
async checkNumberOfFiles(numberOfFiles) {
await expect(this.numberOfFilesText.first()).toHaveText(numberOfFiles);
}
async renameFile(newFileName, byRightClick=true) {
async renameFile(newFileName, byRightClick = true) {
let text = await this.fileNameTitle.textContent();
if (byRightClick) {
await this.fileTile.click({ button: "right" });
await this.fileTile.click({ button: 'right' });
} else {
await this.clickOnFileOptions();
}
await this.renameFileMenuItem.click();
await this.fileNameInput.click();
for (let i = 0; i <= text.length; i++) {
await this.page.keyboard.press("Backspace");
await this.page.keyboard.press('Backspace');
}
await this.fileNameInput.pressSequentially(newFileName);
await this.page.keyboard.press("Enter");
await this.page.keyboard.press('Enter');
await this.isFilePresent(newFileName);
}
@ -246,7 +252,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async duplicateFileViaRightclick() {
await this.fileTile.click({ button: "right" });
await this.fileTile.click({ button: 'right' });
await this.duplicateFileMenuItem.click();
}
@ -256,7 +262,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async addFileAsSharedLibraryViaRightclick() {
await this.fileTile.click({ button: "right" });
await this.fileTile.click({ button: 'right' });
await this.addFileAsSharedLibraryMenuItem.click();
await this.addFileAsSharedLibraryButton.click();
}
@ -274,7 +280,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async deleteFileAsSharedLibraryViaRightclick() {
await this.fileTile.click({ button: "right" });
await this.fileTile.click({ button: 'right' });
await this.delFileAsSharedLibraryMenuItem.click();
await this.delFileAsSharedLibraryButton.click();
}
@ -293,26 +299,26 @@ exports.DashboardPage = class DashboardPage extends BasePage {
await expect(this.sharedLibraryIcon).not.toBeVisible();
}
async downloadFileViaRightClick(isStandardFile=true) {
await this.fileTile.click({ button: "right" });
async downloadFileViaRightClick(isStandardFile = true) {
await this.fileTile.click({ button: 'right' });
if (isStandardFile) {
await this.downloadFileStandardMenuItem.click();
} else {
await this.downloadFilePenpotMenuItem.click();
}
await this.page.waitForEvent("download");
await this.page.waitForEvent('download');
await expect(this.downloadFileTickIcon).toBeVisible();
await this.downloadFileCloseButton.click();
}
async downloadFileViaOptionsIcon(isStandardFile=true) {
async downloadFileViaOptionsIcon(isStandardFile = true) {
await this.clickOnFileOptions();
if (isStandardFile) {
await this.downloadFileStandardMenuItem.click();
} else {
await this.downloadFilePenpotMenuItem.click();
}
await this.page.waitForEvent("download");
await this.page.waitForEvent('download');
await expect(this.downloadFileTickIcon).toBeVisible();
await this.downloadFileCloseButton.click();
}
@ -323,7 +329,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async setProjectName(newProjectName) {
await this.projectNameInput.pressSequentially(newProjectName);
await this.page.keyboard.press("Enter");
await this.page.keyboard.press('Enter');
}
async isProjectTitleDisplayed(newProjectName) {
@ -338,14 +344,14 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async renameProjectViaRightclick(newProjectName) {
let text = await this.projectNameTitle.first().textContent();
await this.projectNameTitle.first().click({ button: "right" });
await this.projectNameTitle.first().click({ button: 'right' });
await this.renameProjectMenuItem.click();
await this.projectNameInput.click();
for (let i = 0; i <= text.length; i++) {
await this.page.keyboard.press("Backspace");
await this.page.keyboard.press('Backspace');
}
await this.projectNameInput.pressSequentially(newProjectName);
await this.page.keyboard.press("Enter");
await this.page.keyboard.press('Enter');
await expect(this.projectNameTitle.first()).toHaveText(newProjectName);
}
@ -356,15 +362,15 @@ exports.DashboardPage = class DashboardPage extends BasePage {
await this.renameProjectMenuItem.click();
await this.projectNameInput.click();
for (let i = 0; i <= text.length; i++) {
await this.page.keyboard.press("Backspace");
await this.page.keyboard.press('Backspace');
}
await this.projectNameInput.pressSequentially(newProjectName);
await this.page.keyboard.press("Enter");
await this.page.keyboard.press('Enter');
await expect(this.projectNameTitle.first()).toHaveText(newProjectName);
}
async duplicateProjectViaRightclick() {
await this.projectNameTitle.first().click({ button: "right" });
await this.projectNameTitle.first().click({ button: 'right' });
await this.duplicateProjectMenuItem.click();
}
@ -376,16 +382,16 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async openSidebarItem(item) {
switch (item) {
case "Projects":
case 'Projects':
await this.projectsSidebarItem.click();
break;
case "Drafts":
case 'Drafts':
await this.draftsSidebarItem.click();
break;
case "Fonts":
case 'Fonts':
await this.fontsSidebarItem.click();
break;
case "Libraries":
case 'Libraries':
await this.librariesSidebarItem.click();
break;
}
@ -394,7 +400,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async openProjectFromLeftSidebar(projectName) {
const projectSel = await this.page.locator(
`div[data-test="pinned-projects"] span.element-title:has-text("${projectName}")`,
`div[data-test="pinned-projects"] span[class*="element-title"]:has-text("${projectName}")`,
);
await projectSel.click();
await this.isHeaderDisplayed(projectName);
@ -402,22 +408,22 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async checkNoLibrariesExist() {
await expect(this.noLibrariesPlacelder).toContainText(
"Files added to Libraries will appear here.",
'Files added to Libraries will appear here.',
);
}
async clickUnpinProjectButton() {
await this.projectNameTitle.first().hover();
await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin-fill");
await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin-fill');
await this.pinUnpinProjectButton.click();
await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin");
await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin');
}
async clickPinProjectButton() {
await this.projectNameTitle.first().hover();
await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin");
await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin');
await this.pinUnpinProjectButton.click();
await expect(this.pinUnpinProjectButton).toHaveClass("icon-pin-fill");
await expect(this.pinUnpinProjectButton).toHaveClass('icon-pin-fill');
}
async checkPinnedProjectsSidebarItem(text) {
@ -431,21 +437,25 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async uploadFont(filePath) {
await this.uploadFontSelector.setInputFiles(filePath);
await this.uploadFontButton.click();
await expect(this.uploadFontButton).not.toBeVisible();
await this.uploadFontButton.waitFor({ state: 'hidden' });
}
async uploadFontWithInvalidFormat(filePath) {
const fontName = filePath.split("/")[1];
const fontName = filePath.split('/')[1];
const warning = `The font '${fontName}' could not be loaded`;
await this.uploadFontSelector.setInputFiles(filePath);
await expect(this.fontFormatError).toHaveText(warning);
}
async isFontUploaded(fontName, fontStyle) {
async isFontExists(fontName, fontStyle) {
await expect(this.fontNameTableCell).toHaveText(fontName);
await expect(this.fontStyleTableCell).toHaveText(fontStyle);
}
async isFontNotExist(fontName) {
await expect(this.fontNameTableCell).not.toHaveText(fontName);
}
async deleteFont() {
await this.fontOptionsMenuButton.click();
await this.deleteFontMenuItem.click();
@ -459,15 +469,12 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async editFont(newFontName) {
await this.fontOptionsMenuButton.click();
await this.editFontMenuItem.click();
await this.clearInput(this.fontNameInput);
await this.fontNameInput.pressSequentially(newFontName);
await this.fontNameInput.fill(newFontName);
await this.saveFontButton.click();
await expect(this.fontNameTableCell).toHaveText(newFontName);
}
async searchFont(fontName) {
await this.searchFontInput.pressSequentially(fontName);
await expect(this.fontNameTableCell).toHaveText(fontName);
await expect(this.fontNameTableCell).toHaveCount(1);
}
@ -486,8 +493,8 @@ exports.DashboardPage = class DashboardPage extends BasePage {
async isLibrariesAndTemplatesCarouselVisible() {
try {
await this.librariesAndTemplatesSection.waitFor({
state: "visible",
timeout: 4000,
state: 'visible',
timeout: 5000,
});
return true;
} catch (error) {
@ -510,7 +517,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async flipLibrariesAndTemplatesCarousel(direction, times = 1) {
if (direction === "left") {
if (direction === 'left') {
await this.librariesAndTemplatesSectionLeftArrowButton.click({
clickCount: times,
});
@ -542,26 +549,25 @@ exports.DashboardPage = class DashboardPage extends BasePage {
}
async importFileProcessingSuccess(file) {
const fileChooserPromise = this.page.waitForEvent("filechooser");
const fileChooserPromise = this.page.waitForEvent('filechooser');
await this.fileImport.click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(file);
await expect(this.modalTitle).toHaveText("Import Penpot files");
await expect(this.modalTitle).toHaveText('Import Penpot files');
await this.modalAcceptButton.click();
await this.feedbackBanner.waitFor();
await expect(this.feedbackBannerMessage).toHaveText(
"1 file has been imported successfully.",
'1 file has been imported successfully.',
);
await this.modalAcceptButton.click();
}
async importFileProcessingError(file) {
const fileChooserPromise = this.page.waitForEvent("filechooser");
const fileChooserPromise = this.page.waitForEvent('filechooser');
await this.fileImport.click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(file);
await expect(this.modalTitle).toBeVisible();
await expect(this.modalTitle).toHaveText("Import Penpot files");
await expect(this.modalTitle).toHaveText('Import Penpot files');
await expect(this.modalAcceptButton).toBeVisible();
await expect(this.modalAcceptButton).toBeDisabled();

139
pages/dashboard/team-page.js
View File

@ -1,5 +1,5 @@
const { BasePage } = require("../base-page");
const { expect } = require("@playwright/test");
const { BasePage } = require('../base-page');
const { expect } = require('@playwright/test');
exports.TeamPage = class TeamPage extends BasePage {
/**
@ -11,34 +11,40 @@ exports.TeamPage = class TeamPage extends BasePage {
// Teams
this.teamCurrentBtn = page.locator('button[class*="current-team"]');
this.teamList = page.locator('ul[class*="teams-dropdown"]');
this.createNewTeamMenuItem = page.locator("#teams-selector-create-team");
this.teamNameInput = page.locator("#name");
this.createNewTeamMenuItem = page.locator('#teams-selector-create-team');
this.teamNameInput = page.locator('#name');
this.createNewTeamButton = page.locator(
'button[name="submit"] span:text-is("Create new team")',
);
this.teamCurrentNameDiv = page.locator(
'button[class*="current-team"] div[class*="team-name"]',
);
this.teamListItem = page.locator(
'li[class="team-name"] span[class="team-text"]',
);
this.teamNameLabel = page.locator('div[class*="team__name"]');
this.teamOptionsMenuButton = page.locator(
'button[class*="switch-options"]',
);
this.deleteTeamMenuItem = page.locator("#teams-options-delete-team");
this.deleteTeamMenuItem = page.locator('#teams-options-delete-team');
this.deleteTeamButton = page.locator('input[value="Delete team"]');
this.teamSettingsMenuItem = page.locator('li[data-test="team-settings"]');
this.renameTeamMenuItem = page.locator('li[data-test="rename-team"]');
this.uploadTeamImageButton = page.locator('input[type="file"]');
this.renameTeamInput = page.locator("#name");
this.updateTeamButton = page.locator('input[value="Update team"]');
this.teamOwnerSpan = page.locator("div.owner-block .owner span.text");
this.teamMembersSpan = page.locator("div.owner-block .summary span.text");
this.teamProjectsSpan = page.locator("div.stats-block .projects span.text");
this.teamFilesSpan = page.locator("div.stats-block .files span.text");
this.teamInfoSection = page.locator('div[class="block info-block"]');
this.teamOwnerSection = page.locator('div[class="block owner-block"]');
this.teamStatsSection = page.locator('div[class="block stats-block"]');
this.renameTeamInput = page.locator('#name');
this.updateTeamButton = page.locator('button:has-text("Update team")');
this.teamOwnerSpan = page.locator(
'div[class$="team__owner"] span[class*="team__text"]',
);
this.teamMembersSpan = page.locator(
'div[class*="team__summary"] span[class*="team__text"]',
);
this.teamProjectsSpan = page.locator(
'div[class*="team__projects"] span[class*="team__text"]',
);
this.teamFilesSpan = page.locator(
'div[class*="team__files"] span[class*="team__text"]',
);
this.teamInfoSection = page.locator('div[class*="info-block"]');
this.teamOwnerSection = page.locator('div[class*="team__owner-block"]');
this.teamStatsSection = page.locator('div[class*="team__stats-block"]');
//Invitations
this.invitationsMenuItem = page.locator('li[data-test="team-invitations"]');
@ -46,36 +52,39 @@ exports.TeamPage = class TeamPage extends BasePage {
'a[data-test="invite-member"]',
);
this.inviteMembersPopUpHeader = page.locator(
'div[class^="modal dashboard-invite-modal form-container "] div[class="title"]',
'div[class*="modal-team-container"] div[class*="title"]',
);
this.inviteMembersTeamHeroButton = page.locator(
'button[class="btn-primary invite"]',
'button:has-text("Invite members")',
);
this.inviteMembersToTeamRoleSelectorButton = page.locator(
'div[class="custom-select"]',
);
this.inviteMembersToTeamRoleSelector = page.locator(
'div[class="custom-select"] select',
'div[class*="custom-select"]',
);
this.adminRoleSelector = page.locator('li:has-text("Admin")');
this.editorRoleSelector = page.locator('li:has-text("Editor")');
this.inviteMembersToTeamEmailInput = page.locator(
'input[placeholder="Emails, comma separated"]',
);
this.sendInvitationButton = page.locator('input[value="Send invitation"]');
this.invitationRecord = page.locator('div[class="table-row"]');
this.sendInvitationButton = page.locator(
'button:has-text("Send invitation")',
);
this.invitationRecord = page.locator(
'div[class*="table-rows"] div[class*="table-row"]',
);
this.invitationRecordEmailCell = page.locator(
'div[class="table-field mail"]',
'div[class*="dashboard_team__mail"]',
);
this.invitationRecordRoleCell = page.locator(
'div[class="table-field roles"]',
'div[class*="dashboard_team__roles"]',
);
this.invitationRecordRoleSelector = page.locator(
'div[class="rol-selector has-priv"]',
'div[class*="team__has-priv"]',
);
this.invitationRecordStatusCell = page.locator(
'div[class="table-field status"] div',
'div[class*="dashboard_team__status"] div',
);
this.invitationRecordOptionsMenuButton = page.locator(
'div[class="table-field actions"] svg[class="icon-actions"]',
'div[class*="dashboard_team__actions"] span',
);
this.invitationRecordResendInvititationMenuItem = page.locator(
'li:has-text("Resend invitation")',
@ -84,7 +93,7 @@ exports.TeamPage = class TeamPage extends BasePage {
'li:has-text("Delete invitation")',
);
this.invitationWarningSpan = page.locator(
"div.dashboard-invite-modal .warning span.text",
'div[class*="warning-msg"] span[class*="team__message"]',
);
}
@ -109,7 +118,7 @@ exports.TeamPage = class TeamPage extends BasePage {
async switchTeam(teamName) {
await this.openTeamsListIfClosed();
const teamOption = this.page.locator(
`li.team-name span.team-text:has-text("${teamName}")`,
`li[class*="team-name"] span[class*="team-text"]:text-is("${teamName}")`,
);
await teamOption.click();
await this.isTeamSelected(teamName);
@ -117,50 +126,23 @@ exports.TeamPage = class TeamPage extends BasePage {
async deleteTeam(teamName) {
await this.openTeamsListIfClosed();
for (const el of await this.teamCurrentNameDiv.elementHandles()) {
const text = (await el.innerText()).valueOf();
if (text.includes(teamName)) {
await el.click();
await this.isTeamSelected(teamName);
await this.teamOptionsMenuButton.click();
await this.deleteTeamMenuItem.click();
await this.deleteTeamButton.click();
await expect(this.teamCurrentBtn).not.toHaveText(teamName);
}
const teamSel = this.page.locator(
`ul[class*="teams-dropdown"] li[class*="team-name"] span[title="${teamName}"]`,
);
if (await teamSel.isVisible()) {
await teamSel.click();
await this.isTeamSelected(teamName);
await this.teamOptionsMenuButton.click();
await this.deleteTeamMenuItem.click();
await this.deleteTeamButton.click();
await expect(this.teamCurrentBtn).not.toHaveText(teamName);
await expect(this.teamCurrentBtn).toHaveText('Your Penpot');
}
}
async deleteTeams(teams) {
await this.openTeamsListIfClosed();
for (const team of teams) {
const teamSel = this.page.locator(`li.team-name span:text-is("${team}")`);
if (await teamSel.isVisible()) {
await teamSel.click();
await this.isTeamSelected(team);
await this.teamOptionsMenuButton.click();
await this.deleteTeamMenuItem.click();
await this.deleteTeamButton.click();
await expect(this.teamCurrentBtn).toHaveText("Your Penpot");
await this.openTeamsListIfClosed();
}
}
}
async deleteTeamsIfExist() {
await this.openTeamsListIfClosed();
for (const teamName of await this.teamListItem.allInnerTexts()) {
if (!teamName.includes("Your Penpot")) {
const teamSel = this.page
.locator(`li.team-name span.team-text:text-is("${teamName}")`)
.last();
await teamSel.click();
await this.teamOptionsMenuButton.waitFor();
await this.teamOptionsMenuButton.click();
await this.deleteTeamMenuItem.click();
await this.deleteTeamButton.click();
await expect(this.teamCurrentBtn).toHaveText("Your Penpot");
await this.openTeamsListIfClosed();
}
await this.deleteTeam(team);
}
}
@ -175,7 +157,7 @@ exports.TeamPage = class TeamPage extends BasePage {
async openInvitationsPageViaOptionsMenu() {
await this.teamOptionsMenuButton.click();
await this.invitationsMenuItem.click();
await this.isHeaderDisplayed("Invitations");
await this.isHeaderDisplayed('Invitations');
}
async clickInviteMembersToTeamButton() {
@ -191,7 +173,7 @@ exports.TeamPage = class TeamPage extends BasePage {
}
async enterEmailToInviteMembersPopUp(email) {
await this.inviteMembersToTeamEmailInput.pressSequentially(email);
await this.inviteMembersToTeamEmailInput.fill(email);
}
async clickSendInvitationButton() {
@ -215,11 +197,11 @@ exports.TeamPage = class TeamPage extends BasePage {
async selectInvitationRoleInPopUp(role) {
await this.inviteMembersToTeamRoleSelectorButton.click();
switch (role) {
case "Admin":
await this.inviteMembersToTeamRoleSelector.selectOption("admin");
case 'Admin':
await this.adminRoleSelector.click();
break;
case "Editor":
await this.inviteMembersToTeamRoleSelector.selectOption("editor");
case 'Editor':
await this.editorRoleSelector.click();
break;
}
}
@ -246,7 +228,7 @@ exports.TeamPage = class TeamPage extends BasePage {
async openTeamSettingsPageViaOptionsMenu() {
await this.teamOptionsMenuButton.click();
await this.teamSettingsMenuItem.click();
await this.isHeaderDisplayed("Settings");
await this.isHeaderDisplayed('Settings');
}
async uploadTeamImage(filePath) {
@ -272,7 +254,6 @@ exports.TeamPage = class TeamPage extends BasePage {
async renameTeam(teamName) {
await this.teamOptionsMenuButton.click();
await this.renameTeamMenuItem.click();
await this.clearInput(this.renameTeamInput);
await this.renameTeamInput.fill(teamName);
await this.updateTeamButton.click();
}

12
pages/login-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("./base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('./base-page');
exports.LoginPage = class LoginPage extends BasePage {
/**
@ -9,8 +9,8 @@ exports.LoginPage = class LoginPage extends BasePage {
super(page);
this.pageTitle = page.locator('h1[data-test="login-title"]');
this.emailInput = page.locator("#email");
this.pwdInput = page.locator("#password");
this.emailInput = page.locator('#email');
this.pwdInput = page.locator('#password');
this.loginButton = page.locator('button[data-test="login-submit"]');
this.emailInputError = page.locator('div[data-test="-error"]');
this.section = page.locator('section[class="auth-content"]');
@ -19,7 +19,7 @@ exports.LoginPage = class LoginPage extends BasePage {
}
async goto() {
await this.page.goto("/#/auth/login");
await this.page.goto('/#/auth/login');
}
async enterEmail(loginEmail) {
@ -63,6 +63,6 @@ exports.LoginPage = class LoginPage extends BasePage {
}
async isLoginPageOpened() {
await expect(this.pageTitle).toHaveText("Great to see you again!");
await expect(this.pageTitle).toHaveText('Great to see you again!');
}
};

34
pages/profile-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("./base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('./base-page');
exports.ProfilePage = class ProfilePage extends BasePage {
/**
@ -10,7 +10,6 @@ exports.ProfilePage = class ProfilePage extends BasePage {
//Account
this.profileMenuButton = page.locator('div[data-test="profile-btn"]');
this.profileNameSpan = page.locator("div.profile span");
this.yourAccountMenuItem = page.locator(
'li[data-test="profile-profile-opt"]',
);
@ -18,7 +17,7 @@ exports.ProfilePage = class ProfilePage extends BasePage {
this.giveFeedbackMenuItem = page.locator(
'li[data-test="feedback-profile-opt"]',
);
this.backToDashboardBtn = page.locator('div.back-to-dashboard');
this.backToDashboardBtn = page.locator('div[class*="back-to-dashboard"]');
//Profile
this.profileNameInput = page.locator('#fullname');
@ -27,20 +26,26 @@ exports.ProfilePage = class ProfilePage extends BasePage {
this.profileImageInput = page.locator(
'input[data-test="profile-image-input"]',
);
this.profileAvatarBlock = page.locator('div.main_ui_settings_profile__form-container');
this.profileAvatarBlock = page.locator(
'div.main_ui_settings_profile__form-container',
);
//Feedback
this.feedbackSubjectInput = page.locator("#subject");
this.feedbackDescriptionInput = page.locator("textarea");
this.feedbackSubjectInput = page.locator('#subject');
this.feedbackDescriptionInput = page.locator('textarea');
this.sendFeedbackButton = page.locator('button[name="submit"]');
//Password
this.passwordSidebarOption = page.locator('li span:text-is("Password")');
this.passwordFormHeader = page.locator('div[class*="password__form-container"] h2');
this.passwordOldInput = page.locator("#password-old");
this.passwordFormHeader = page.locator(
'div[class*="password__form-container"] h2',
);
this.passwordOldInput = page.locator('#password-old');
this.passwordNewInput = page.locator('input[label="New password"]');
this.passwordConfirmInput = page.locator('input[label="Confirm password"]');
this.updateSettingsBtn = page.locator('button[data-test="submit-password"]');
this.updateSettingsBtn = page.locator(
'button[data-test="submit-password"]',
);
this.passwordInputError = page.locator('div[data-test="-error"]');
}
@ -56,7 +61,7 @@ exports.ProfilePage = class ProfilePage extends BasePage {
async openPasswordPageInAccount() {
await this.passwordSidebarOption.click();
await expect(this.passwordFormHeader).toHaveText("Change password");
await expect(this.passwordFormHeader).toHaveText('Change password');
}
async enterCurrentPassword(value) {
@ -85,6 +90,7 @@ exports.ProfilePage = class ProfilePage extends BasePage {
}
async changeProfileName(newName) {
await this.clearInput(this.profileNameInput);
await this.profileNameInput.fill(newName);
await this.saveSettingsButton.click();
}
@ -113,16 +119,12 @@ exports.ProfilePage = class ProfilePage extends BasePage {
await expect(this.profileMenuButton).toHaveText(name);
}
async getProfileFullName() {
return await this.profileNameSpan.innerText();
}
async uploadProfileImage(filePath) {
await this.profileImageInput.setInputFiles(filePath);
}
async backToDashboardFromAccount() {
await this.backToDashboardBtn.click();
await this.isHeaderDisplayed("Projects");
await this.isHeaderDisplayed('Projects');
}
};

12
pages/register-page.js
View File

@ -1,5 +1,5 @@
const { BasePage } = require("./base-page");
const { expect } = require("@playwright/test");
const { BasePage } = require('./base-page');
const { expect } = require('@playwright/test');
exports.RegisterPage = class RegisterPage extends BasePage {
/**
@ -9,19 +9,19 @@ exports.RegisterPage = class RegisterPage extends BasePage {
super(page);
this.pageTitle = page.locator('h1[data-test="registration-title"]');
this.emailInput = page.locator("#email");
this.passwordInput = page.locator("#password");
this.emailInput = page.locator('#email');
this.passwordInput = page.locator('#password');
this.createAccountBtn = page.locator(
'button[data-test="register-form-submit"]',
);
this.emailInputError = page.locator('div[data-test="email-input-error"]');
this.passwordInputHint = page.locator("div.main_ui_components_forms__hint");
this.passwordInputHint = page.locator('div.main_ui_components_forms__hint');
this.passwordInputError = page.locator('div[data-test="-error"]');
}
async isRegisterPageOpened() {
await expect(this.pageTitle).toBeVisible();
await expect(this.pageTitle).toHaveText("Create an account");
await expect(this.pageTitle).toHaveText('Create an account');
}
async enterEmail(email) {

68
pages/workspace/assets-panel-page.js
View File

@ -1,5 +1,5 @@
const { BasePage } = require("../base-page");
const { expect } = require("@playwright/test");
const { BasePage } = require('../base-page');
const { expect } = require('@playwright/test');
exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
/**
@ -11,12 +11,12 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
//Assets panel
this.assetsTab = page.locator('div[data-id="assets"]');
this.assetsSectionButton = page.locator(
"button[class*=assets__section-button]",
'button[class*=assets__section-button]',
);
this.assetsComponentsOption = page.locator("#section-components");
this.assetsColorsOption = page.locator("#section-color");
this.assetsTypographiesOption = page.locator("#section-typography");
this.assetsAllOption = page.locator("#section-all");
this.assetsComponentsOption = page.locator('#section-components');
this.assetsColorsOption = page.locator('#section-color');
this.assetsTypographiesOption = page.locator('#section-typography');
this.assetsAllOption = page.locator('#section-all');
this.assetsPanel = page.locator('div[class*="assets-bar"]');
this.librariesTab = page.locator('div[class="libraries-button"]');
this.assetsSectionName = page.locator(
@ -40,7 +40,7 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
this.createGroupFileLibraryMenuItem = page.locator('li:has-text("Group")');
this.renameGroupFileLibraryMenuItem = page.locator('li:has-text("Rename")');
this.ungroupFileLibraryMenuItem = page.locator('li:has-text("Ungroup")');
this.groupNameInput = page.locator("#asset-name");
this.groupNameInput = page.locator('#asset-name');
this.createGroupButton = page.locator('input[value="Create"]');
this.renameGroupButton = page.locator('input[value="Rename"]');
this.fileLibraryGroupTitle = page.locator('div[class*="group-title"]');
@ -92,7 +92,7 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
'input[value="Unpublish"]',
);
this.closeLibrariesPopUpButton = page.locator(
"div.libraries-dialog a.close",
'div.libraries-dialog a.close',
);
this.addAsSharedLibraryButton = page.locator(
'input[value="Add as Shared Library"]',
@ -100,11 +100,11 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
this.removeAsSharedLibraryButton = page.locator('input[value="Unpublish"]');
this.sharedLibraryBadge = page.locator('span[class*="shared-badge"]');
this.searchLibraryInput = page.locator(
"div.libraries-search input.search-input",
'div.libraries-search input.search-input',
);
this.clearSearchInputIcon = page.locator("div.search-close svg.icon-close");
this.searchIcon = page.locator("div.libraries-content div.search-icon");
this.librariesEmptyList = page.locator("div.section-list-empty");
this.clearSearchInputIcon = page.locator('div.search-close svg.icon-close');
this.searchIcon = page.locator('div.libraries-content div.search-icon');
this.librariesEmptyList = page.locator('div.section-list-empty');
}
async clickAssetsTab() {
@ -112,7 +112,7 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async switchToAssetsPanelViaShortcut() {
await this.page.keyboard.press("Alt+I");
await this.page.keyboard.press('Alt+I');
}
async isAssetsPanelDisplayed() {
@ -136,12 +136,12 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async duplicateFileLibraryComponents() {
await this.fileLibraryGraphicsComponentLabel.click({ button: "right" });
await this.fileLibraryGraphicsComponentLabel.click({ button: 'right' });
await this.duplicateFileLibraryMenuItem.click();
}
async deleteFileLibraryComponents() {
await this.fileLibraryGraphicsComponentLabel.click({ button: "right" });
await this.fileLibraryGraphicsComponentLabel.click({ button: 'right' });
await this.deleteFileLibraryMenuItem.click();
}
@ -193,16 +193,16 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
async selectTypeFromAllAssetsSelector(type) {
await this.clickOnAssetsSectionButton();
switch (type) {
case "All assets":
case 'All assets':
await this.assetsAllOption.click();
break;
case "Components":
case 'Components':
await this.assetsComponentsOption.click();
break;
case "Colors":
case 'Colors':
await this.assetsColorsOption.click();
break;
case "Typographies":
case 'Typographies':
await this.assetsTypographiesOption.click();
break;
}
@ -226,12 +226,12 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async deleteFileLibraryGraphics() {
await this.fileLibraryGraphicsUploadedImageLabel.click({ button: "right" });
await this.fileLibraryGraphicsUploadedImageLabel.click({ button: 'right' });
await this.deleteFileLibraryMenuItem.click();
}
async createGroupFileLibraryGraphics(newGroupName) {
await this.fileLibraryGraphicsUploadedImageLabel.click({ button: "right" });
await this.fileLibraryGraphicsUploadedImageLabel.click({ button: 'right' });
await this.createGroupFileLibraryMenuItem.click();
await this.groupNameInput.fill(newGroupName);
await this.createGroupButton.click();
@ -246,14 +246,14 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async renameGroupFileLibrary(newGroupName) {
await this.fileLibraryGroupTitle.click({ button: "right" });
await this.fileLibraryGroupTitle.click({ button: 'right' });
await this.renameGroupFileLibraryMenuItem.click();
await this.groupNameInput.fill(newGroupName);
await this.renameGroupButton.click();
}
async ungroupFileLibrary() {
await this.fileLibraryGroupTitle.click({ button: "right" });
await this.fileLibraryGroupTitle.click({ button: 'right' });
await this.ungroupFileLibraryMenuItem.click();
}
@ -275,18 +275,18 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async editFileLibraryColor() {
await this.fileLibraryColorsColorBullet.click({ button: "right" });
await this.fileLibraryColorsColorBullet.click({ button: 'right' });
await this.editFileLibraryMenuItem.click();
}
async renameFileLibraryColor(newColorName) {
await this.fileLibraryColorsColorBullet.click({ button: "right" });
await this.fileLibraryColorsColorBullet.click({ button: 'right' });
await this.renameFileLibraryMenuItem.click();
await this.fileLibraryColorsColorNameInput.fill(newColorName);
}
async deleteFileLibraryColor() {
await this.fileLibraryColorsColorBullet.click({ button: "right" });
await this.fileLibraryColorsColorBullet.click({ button: 'right' });
await this.deleteFileLibraryMenuItem.click();
}
@ -297,7 +297,7 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
async clickAndPressAltFileLibraryColorsColorBullet() {
await this.fileLibraryColorsColorBullet.click({
delay: 500,
modifiers: ["Alt"],
modifiers: ['Alt'],
});
}
@ -315,33 +315,33 @@ exports.AssetsPanelPage = class AssetsPanelPage extends BasePage {
}
async editFileLibraryTypography() {
await this.fileLibraryTypographyRecord.click({ button: "right" });
await this.fileLibraryTypographyRecord.click({ button: 'right' });
await this.editFileLibraryMenuItem.click();
}
async renameFileLibraryTypography(newName) {
await this.fileLibraryTypographyRecord.click({ button: "right" });
await this.fileLibraryTypographyRecord.click({ button: 'right' });
await this.renameFileLibraryMenuItem.click();
// await this.clearInput(this.typographyNameInput);
await this.typographyNameInput.fill(newName);
}
async deleteFileLibraryTypography() {
await this.fileLibraryTypographyRecord.click({ button: "right" });
await this.fileLibraryTypographyRecord.click({ button: 'right' });
await this.deleteFileLibraryMenuItem.click();
}
async createGroupFileLibraryAssets(assetType, newGroupName) {
let selector;
switch (assetType) {
case "Colors":
case 'Colors':
selector = this.fileLibraryColorsColorBullet;
break;
case "Typographies":
case 'Typographies':
selector = this.fileLibraryTypographyRecord;
break;
}
await selector.click({ button: "right" });
await selector.click({ button: 'right' });
await this.createGroupFileLibraryMenuItem.click();
await this.groupNameInput.fill(newGroupName);
await this.createGroupButton.click();

10
pages/workspace/color-palette-page.js
View File

@ -1,5 +1,5 @@
const { BasePage } = require("../base-page");
const { expect } = require("@playwright/test");
const { BasePage } = require('../base-page');
const { expect } = require('@playwright/test');
exports.ColorPalettePage = class ColorPalettePage extends BasePage {
/**
@ -8,7 +8,7 @@ exports.ColorPalettePage = class ColorPalettePage extends BasePage {
constructor(page) {
super(page);
this.popUp = page.locator('div[class*="colorpicker-tooltip"]');
this.hexInput = page.locator("#hex-value");
this.hexInput = page.locator('#hex-value');
this.saveColorStyleButton = page.locator(
'button:has-text("Save color style")',
);
@ -44,8 +44,8 @@ exports.ColorPalettePage = class ColorPalettePage extends BasePage {
async clickColorBullet(isFileLibrary = true, value = 0) {
const classAttr = isFileLibrary
? "color_bullet_new__is-library-color"
: "color_bullet_new__is-not-library-color";
? 'color_bullet_new__is-library-color'
: 'color_bullet_new__is-not-library-color';
const selector = this.page.locator(
`div[class*="selected-colors"] div[class*="${classAttr}"] >> nth=${value}`,
);

8
pages/workspace/comments-panel-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("../base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('../base-page');
exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
/**
@ -32,7 +32,7 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
'div[class="comments-section"] div[class*="thread-bubble"]',
);
this.commentResolvedThreadIcon = page.locator(
"div.comments-section div.main_ui_comments__resolved",
'div.comments-section div.main_ui_comments__resolved',
);
this.commentReplyInput = page.locator('textarea[placeholder="Reply"]');
this.commentOptionsButton = page.locator(
@ -138,7 +138,7 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
async isResolveCommentCheckboxSelected() {
await expect(this.resolveCommentCheckbox).toHaveClass(
"main_ui_comments__options-resolve checked",
'main_ui_comments__options-resolve checked',
);
}
};

340
pages/workspace/design-panel-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("../base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('../base-page');
exports.DesignPanelPage = class DesignPanelPage extends BasePage {
/**
@ -41,9 +41,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
this.fillOpacityInput = page.locator(
'div[class*="fill__element-content"] div[class*="opacity-element-wrapper"] input',
);
this.addFillButton = page.locator(
'button[class*="fill__add-fill"]',
);
this.addFillButton = page.locator('button[class*="fill__add-fill"]');
this.removeFillButton = page.locator(
'div[class*="fill__element-content"] svg[class="icon-remove-refactor"]',
);
@ -82,98 +80,90 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
this.shadowTypeField = page.locator('div[class*="shadow-type-select"]');
//Design panel - Flex Layout section
this.flexElementSection = page.locator(
'div[class="element-set-content layout-item-menu"]',
this.flexLayoutMenu = page.locator('div[class*="flex-layout-menu"]');
this.flexElementMenu = page.locator('div[class*="flex-element-menu"]');
this.flexLayoutCollapsedIcon = page.locator(
'div[class*="layout_container"] button[class*="collapsabled-icon"]',
);
this.flexElementAlignStartBtn = page.locator(
'div.layout-item-menu button[alt="Align self start"]',
'label[title="Align self start"] span',
);
this.flexElementAlignCenterBtn = page.locator(
'div.layout-item-menu button[alt="Align self center"]',
'label[title="Align self center"] span',
);
this.flexElementAlignEndBtn = page.locator(
'div.layout-item-menu button[alt="Align self end"]',
'label[title="Align self end"] span',
);
this.flexElementMarginVertInput = page.locator(
'div[class="margin-row"] div[alt="Vertical margin"] input',
'div[title="Vertical margin"] input',
);
this.flexElementMarginHorizontInput = page.locator(
'div[class="margin-row"] div[alt="Horizontal margin"] input',
'div[title="Horizontal margin"] input',
);
this.flexElementPositionAbsolute = page.locator(
'div[class="layout-row"] button[alt="Absolute"]',
);
this.removeLayoutButton = page.locator(
'div[class="element-set-title"] button[class="remove-layout"]',
'label[for=":absolute-position"] span',
);
this.layoutSection = page.locator(
'div[class*="layout_container__element-title"]:has-text("Layout")',
'div[class*="layout_container__element-title"]:has-text("Layout")',
);
this.layoutDirectRowBtn = page.locator(
'div[class="layout-row"] button[alt="Row"]',
this.layoutRemoveButton = page.locator(
'div[class*="layout_container__element-title"] button[class*="remove-layout"]',
);
this.layoutDirectRowBtn = page.locator('label[title="Row"] span');
this.layoutDirectRowReverseBtn = page.locator(
'div[class="layout-row"] button[alt="Row reverse"]',
);
this.layoutDirectColumnBtn = page.locator(
'div[class="layout-row"] button[alt="Column"]',
'label[title="Row reverse"] span',
);
this.layoutDirectColumnBtn = page.locator('label[title="Column"] span');
this.layoutDirectColumnReverseBtn = page.locator(
'div[class="layout-row"] button[alt="Column reverse"]',
'label[title="Column reverse"] span',
);
this.layoutAlignStartBtn = page.locator(
'div[class="layout-row"] button[alt="Align items start"]',
'label[title="Align items start"] span',
);
this.layoutAlignCenterBtn = page.locator(
'div[class="layout-row"] button[alt="Align items center"]',
'label[title="Align items center"] span',
);
this.layoutAlignEndBtn = page.locator(
'div[class="layout-row"] button[alt="Align items end"]',
'label[title="Align items end"] span',
);
this.layoutJustifyStartBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content start"]',
'label[title="Justify content start"] span',
);
this.layoutJustifyCenterBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content center"]',
'label[title="Justify content center"] span',
);
this.layoutJustifyEndBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content end"]',
'label[title="Justify content end"] span',
);
this.layoutJustifySpaceBetweenBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content space-between"]',
'label[title="Justify content space-between"] span',
);
this.layoutJustifySpaceAroundBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content space-around"]',
'label[title="Justify content space-around"] span',
);
this.layoutJustifySpaceEvenlyBtn = page.locator(
'div[class="layout-row"] button[alt="Justify content space-evenly"]',
);
this.layoutColumnGapInput = page.locator(
'div[class="gap-group"] div[alt="Column gap"] input',
);
this.layoutRowGapInput = page.locator(
'div[class="gap-group"] div[alt="Row gap"] input',
'label[title="Justify content space-evenly"] span',
);
this.layoutColumnGapInput = page.locator('div[title="Column gap"] input');
this.layoutRowGapInput = page.locator('div[title="Row gap"] input');
this.layoutVerticalPaddingInput = page.locator(
'div[class="padding-group"] div[alt="Vertical padding"] input',
'div[title="Vertical padding"] input',
);
this.layoutHorizontPaddingInput = page.locator(
'div[class="padding-group"] div[alt="Horizontal padding"] input',
'div[title="Horizontal padding"] input',
);
this.layoutIndepPaddingsIcon = page.locator(
'div[class="padding-icons"] div[alt="Independent paddings"]',
);
this.layoutPaddingTopInput = page.locator(
'div[class="padding-row"] div[alt="Top"] input',
'button[class*="padding-toggle"]',
);
this.layoutPaddingTopInput = page.locator('div[title="Top padding"] input');
this.layoutPaddingRightInput = page.locator(
'div[class="padding-row"] div[alt="Right"] input',
'div[title="Right padding"] input',
);
this.layoutPaddingBottomInput = page.locator(
'div[class="padding-row"] div[alt="Bottom"] input',
'div[title="Bottom padding"] input',
);
this.layoutPaddingLeftInput = page.locator(
'div[class="padding-row"] div[alt="Left"] input',
'div[title="Left padding"] input',
);
//Design panel - Blur section
@ -182,7 +172,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
);
this.addBlurButton = page.locator('button[class*="blur__add-blur"]');
this.blurMoreOptions = page.locator('button[class*="blur__show-more"]');
this.blurValueInput = page.locator("#blur-input-sidebar");
this.blurValueInput = page.locator('#blur-input-sidebar');
this.blurHideIcon = page.locator(
'div[class*="blur__actions"] svg[class="icon-shown-refactor"]',
);
@ -202,7 +192,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
'div[class*="stroke-data"] div[class*="color_bullet_new__is-not-library-color"]',
);
this.strokeRemoveIcon = page.locator(
'div[title="Stroke color"] .icon-minus',
'div[class*="stroke-data"] button[class*="remove-btn"]',
);
this.strokeColorInput = page.locator(
'div[class*="stroke-data"] input[class*="color-input"]',
@ -213,111 +203,114 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
this.strokeOpacityInput = page.locator(
'div[class*="stroke-data"] input[class*="opacity-input"]',
);
this.strokePositionSelect = page.locator(
'//div[@title="Stroke width"]/parent::div//select[1]',
this.strokeAlignmentField = page.locator(
'div[data-test="stroke.alignment"]',
);
this.strokeTypeField = page.locator('div[data-test="stroke.style"]');
this.strokeTypeSelect = page.locator(
'//div[@title="Stroke width"]/parent::div//select[2]',
);
//Design panel - Text section
this.textUpperCaseIcon = page.locator("svg.icon-text-uppercase-refactor");
this.textLowerCaseIcon = page.locator("svg.icon-text-lowercase-refactor");
this.textTitleCaseIcon = page.locator("svg.icon-text-mixed-refactor");
this.textUpperCaseIcon = page.locator('svg.icon-text-uppercase-refactor');
this.textLowerCaseIcon = page.locator('svg.icon-text-lowercase-refactor');
this.textTitleCaseIcon = page.locator('svg.icon-text-mixed-refactor');
this.textMoreOptionsIcon = page.locator(
'button[class*="text__more-options"]',
);
this.textVerticalOptionsBlock = page.locator(
'div[class*="vertical-align-options"]',
);
this.textAlignTop = page.locator("svg.icon-text-top-refactor");
this.textAlignMiddle = page.locator("svg.icon-text-middle-refactor");
this.textAlignBottom = page.locator("svg.icon-text-bottom-refactor");
this.textIconLTR = page.locator("svg.icon-text-ltr-refactor");
this.textIconRTL = page.locator("svg.icon-text-rtl-refactor");
this.textAlignTop = page.locator('svg.icon-text-top-refactor');
this.textAlignMiddle = page.locator('svg.icon-text-middle-refactor');
this.textAlignBottom = page.locator('svg.icon-text-bottom-refactor');
this.textIconLTR = page.locator('svg.icon-text-ltr-refactor');
this.textIconRTL = page.locator('svg.icon-text-rtl-refactor');
//Design panel - Export section
this.exportSection = page.locator(
'div[class*="exports__element-title"]:has-text("Export")',
);
this.addExportButton = page.locator(
'button[class*="exports__add-export"]',
'div[class*="exports__element-title"]:has-text("Export")',
);
this.addExportButton = page.locator('button[class*="exports__add-export"]');
this.removeExportButton = page.locator(
'button[class*="exports__action-btn"] svg[class="icon-remove-refactor"]',
'button[class*="exports__action-btn"] svg[class="icon-remove-refactor"]',
);
this.exportElementButton = page.locator(
'button[class*="exports__export-btn"]',
'button[class*="exports__export-btn"]',
);
//Design panel - Grid section
this.gridSection = page.locator('div[class*=element-set]:has-text("Guides")');
this.gridMainOptionSection = page.locator('div[class="grid-option-main"]');
this.addGridButton = page.locator(
'button[class*="grid__add-grid"]',
this.gridSection = page.locator(
'div[class*=element-set]:has-text("Guides")',
);
this.gridMainOptionSection = page.locator('div[class="grid-option-main"]');
this.addGridButton = page.locator('button[class*="grid__add-grid"]');
this.removeGridButton = page.locator(
'div[class*="grid__actions"] svg[class="icon-remove-refactor"]',
'div[class*="grid__actions"] svg[class="icon-remove-refactor"]',
);
this.hideGridButton = page.locator(
'div[class*="grid__actions"] svg[class="icon-shown-refactor"]',
'div[class*="grid__actions"] svg[class="icon-shown-refactor"]',
);
this.unhideGridButton = page.locator(
'div[class*="grid__actions"] svg[class="icon-hide-refactor"]',
'div[class*="grid__actions"] svg[class="icon-hide-refactor"]',
);
this.gridTypeField = page.locator(
'div[class*="grid__option-row"] div[class*="type-select-wrapper"]',
'div[class*="grid__option-row"] div[class*="type-select-wrapper"]',
);
this.gridTypeSelectorSquareOption = page.locator('span:has-text("Square")');
this.gridTypeSelectorColumnsOption = page.locator(
'span:has-text("Columns")',
'span:has-text("Columns")',
);
this.gridTypeSelectorRowsOption = page.locator('span:has-text("Rows")');
this.gridSizeInput = page.locator('div[title="Size"] input');
this.gridColumnsRowsInput = page.locator('div[class*="grid__column-select"] input');
this.gridColumnsRowsInput = page.locator(
'div[class*="grid__column-select"] input',
);
this.gridActionsButton = page.locator(
'button[class*="grid__show-options"]',
'button[class*="grid__show-options"]',
);
this.gridOpacityInput = page.locator(
'div[class*="grid__advanced-row"] input[class*="opacity-input"]',
'div[class*="grid__advanced-row"] input[class*="opacity-input"]',
);
this.gridMoreOptionsButton = page.locator(
'div[class*="grid__advanced-row"] button[class*="show-more-options"]'
'div[class*="grid__advanced-row"] button[class*="show-more-options"]',
);
this.useDefaultGridButton = page.locator('button:has-text("Use default")');
this.gridWidthInput = page.locator(
'div[title="Width"] input[class*="grid__numeric-input"]',
'div[title="Width"] input[class*="grid__numeric-input"]',
);
this.gridHeightInput = page.locator(
'div[title="Height"] input[class*="grid__numeric-input"]',
'div[title="Height"] input[class*="grid__numeric-input"]',
);
}
async waitFlexElementSectionExpanded() {
await expect(this.flexElementSection).toBeVisible();
async isFlexElementSectionOpened() {
await expect(this.flexElementMenu).toBeVisible();
}
async changeFlexElementAlignment(alignment) {
switch (alignment) {
case "Start":
case 'Start':
await this.flexElementAlignStartBtn.click();
break;
case "Center":
case 'Center':
await this.flexElementAlignCenterBtn.click();
break;
case "End":
case 'End':
await this.flexElementAlignEndBtn.click();
break;
}
}
async changeFlexElementVerticalMargin(value) {
await this.flexElementMarginVertInput.fill(value);
await this.clickOnEnter();
}
async changeFlexElementHorizontalMargin(value) {
await this.flexElementMarginHorizontInput.fill(value);
async changeFlexElementMargin(type, value) {
switch (type) {
case 'Vertical':
await this.flexElementMarginVertInput.fill(value);
break;
case 'Horizontal':
await this.flexElementMarginHorizontInput.fill(value);
break;
}
await this.clickOnEnter();
}
@ -343,36 +336,16 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
await this.clickOnEnter();
}
async setStrokePosition(value) {
switch (value) {
case "Center":
await this.strokePositionSelect.selectOption(":center");
break;
case "Inside":
await this.strokePositionSelect.selectOption(":inner");
break;
case "Outside":
await this.strokePositionSelect.selectOption(":outer");
break;
}
async setStrokeAlignment(value) {
const optionSel = this.page.locator(`li span:text-is("${value}")`);
await this.strokeAlignmentField.click();
await optionSel.click();
}
async setStrokeType(value) {
if (await this.strokeTypeSelect.isHidden()) return;
switch (value) {
case "Solid":
await this.strokeTypeSelect.selectOption(":solid");
break;
case "Dotted":
await this.strokeTypeSelect.selectOption(":dotted");
break;
case "Dashed":
await this.strokeTypeSelect.selectOption(":dashed");
break;
case "Mixed":
await this.strokeTypeSelect.selectOption(":mixed");
break;
}
const optionSel = this.page.locator(`li span:text-is("${value}")`);
await this.strokeTypeField.click();
await optionSel.click();
}
async setStrokeWidth(value) {
@ -385,12 +358,14 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
await this.clickOnEnter();
}
async changeStrokeSettings(color, opacity, width, position, type = "") {
async changeStrokeSettings(color, opacity, width, position, type) {
await this.setStrokeColor(color);
await this.setStrokeOpacity(opacity);
await this.setStrokeWidth(width);
await this.setStrokePosition(position);
await this.setStrokeType(type);
await this.setStrokeAlignment(position);
if (type) {
await this.setStrokeType(type);
}
}
async clickFillColorIcon() {
@ -566,13 +541,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
async changeTextCase(value) {
switch (value) {
case "Upper":
case 'Upper':
await this.textUpperCaseIcon.click();
break;
case "Lower":
case 'Lower':
await this.textLowerCaseIcon.click();
break;
case "Title":
case 'Title':
await this.textTitleCaseIcon.click();
break;
}
@ -588,13 +563,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
async changeTextAlignment(value) {
await this.openTextMoreOptionsBlock();
switch (value) {
case "Top":
case 'Top':
await this.textAlignTop.click();
break;
case "Middle":
case 'Middle':
await this.textAlignMiddle.click();
break;
case "Bottom":
case 'Bottom':
await this.textAlignBottom.click();
break;
}
@ -603,10 +578,10 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
async changeTextDirection(value) {
await this.openTextMoreOptionsBlock();
switch (value) {
case "RTL":
case 'RTL':
await this.textIconRTL.click();
break;
case "LTR":
case 'LTR':
await this.textIconLTR.click();
break;
}
@ -620,65 +595,84 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
}
}
async isLayoutRemoveButtonExists(condition = true) {
if (condition === true) {
await expect(this.layoutRemoveButton).toBeVisible();
} else {
await expect(this.layoutRemoveButton).not.toBeVisible();
}
}
async removeLayoutFromDesignPanel() {
await this.removeLayoutButton.click();
await this.layoutRemoveButton.click();
}
async expandFlexLayoutMenu() {
if (!(await this.flexLayoutMenu.isVisible())) {
await this.flexLayoutCollapsedIcon.click();
}
await expect(this.flexLayoutMenu).toBeVisible();
}
async changeLayoutDirection(direction) {
await this.expandFlexLayoutMenu();
switch (direction) {
case "Row":
case 'Row':
await this.layoutDirectRowBtn.click();
break;
case "Row reverse":
case 'Row reverse':
await this.layoutDirectRowReverseBtn.click();
break;
case "Column":
case 'Column':
await this.layoutDirectColumnBtn.click();
break;
case "Column reverse":
case 'Column reverse':
await this.layoutDirectColumnReverseBtn.click();
break;
}
}
async changeLayoutAlignment(alignment) {
await this.expandFlexLayoutMenu();
switch (alignment) {
case "Start":
case 'Start':
await this.layoutAlignStartBtn.click();
break;
case "Center":
case 'Center':
await this.layoutAlignCenterBtn.click();
break;
case "End":
case 'End':
await this.layoutAlignEndBtn.click();
break;
}
}
async changeLayoutJustification(justify) {
await this.expandFlexLayoutMenu();
switch (justify) {
case "Start":
case 'Start':
await this.layoutJustifyStartBtn.click();
break;
case "Center":
case 'Center':
await this.layoutJustifyCenterBtn.click();
break;
case "End":
case 'End':
await this.layoutJustifyEndBtn.click();
break;
case "Space between":
case 'Space between':
await this.layoutJustifySpaceBetweenBtn.click();
break;
case "Space around":
case 'Space around':
await this.layoutJustifySpaceAroundBtn.click();
break;
case "Space evenly":
case 'Space evenly':
await this.layoutJustifySpaceEvenlyBtn.click();
break;
}
}
async changeLayoutColumnGap(value) {
await this.expandFlexLayoutMenu();
await this.layoutColumnGapInput.fill(value);
await this.clickOnEnter();
}
@ -688,17 +682,26 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
}
async changeLayoutRowGap(value) {
await this.expandFlexLayoutMenu();
await this.layoutRowGapInput.fill(value);
await this.clickOnEnter();
}
async changeLayoutVerticalPadding(value) {
await this.layoutVerticalPaddingInput.fill(value);
async changeLayoutPadding(type, value) {
await this.expandFlexLayoutMenu();
switch (type) {
case 'Vertical':
await this.layoutVerticalPaddingInput.fill(value);
break;
case 'Horizontal':
await this.layoutHorizontPaddingInput.fill(value);
break;
}
await this.clickOnEnter();
}
async changeLayoutHorizontalPadding(value) {
await this.layoutHorizontPaddingInput.fill(value);
await this.expandFlexLayoutMenu();
await this.clickOnEnter();
}
@ -711,26 +714,26 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
}
async switchToIndependentPadding() {
await this.expandFlexLayoutMenu();
await this.layoutIndepPaddingsIcon.click();
}
async changeLayoutTopPadding(value) {
await this.layoutPaddingTopInput.fill(value);
await this.clickOnEnter();
}
async changeLayoutBottomPadding(value) {
await this.layoutPaddingBottomInput.fill(value);
await this.clickOnEnter();
}
async changeLayoutRightPadding(value) {
await this.layoutPaddingRightInput.fill(value);
await this.clickOnEnter();
}
async changeLayoutLeftPadding(value) {
await this.layoutPaddingLeftInput.fill(value);
async changeLayoutIndependentPadding(type, value) {
await this.expandFlexLayoutMenu();
switch (type) {
case 'Bottom':
await this.layoutPaddingBottomInput.fill(value);
break;
case 'Right':
await this.layoutPaddingRightInput.fill(value);
break;
case 'Left':
await this.layoutPaddingLeftInput.fill(value);
break;
case 'Top':
await this.layoutPaddingTopInput.fill(value);
break;
}
await this.clickOnEnter();
}
@ -788,13 +791,13 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
async selectGridType(type) {
await this.gridTypeField.click();
switch (type) {
case "Square":
case 'Square':
await this.gridTypeSelectorSquareOption.click();
break;
case "Columns":
case 'Columns':
await this.gridTypeSelectorColumnsOption.click();
break;
case "Rows":
case 'Rows':
await this.gridTypeSelectorRowsOption.click();
break;
}
@ -811,5 +814,4 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
async changeHeightForGrid(value) {
await this.gridHeightInput.fill(value);
}
};

51
pages/workspace/layers-panel-page.js
View File

@ -1,5 +1,5 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("../base-page");
const { expect, Locator } = require('@playwright/test');
const { BasePage } = require('../base-page');
exports.LayersPanelPage = class LayersPanelPage extends BasePage {
/**
@ -21,35 +21,24 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
);
this.layoutIcon = page.locator('svg.icon-flex-vertical-refactor');
this.focusModeDiv = page.locator('div.focus-mode:text-is("Focus mode")');
this.layerBoardToggleContentExpand = page.locator(
"ul.element-list span.toggle-content.inverse",
this.layerItemToggleExpand = page.locator(
'div[class*="layers__element-list"] button[class*="sidebar_layer_item__inverse"]',
);
this.layerBoardToggleContentCollapse = page.locator(
"ul.element-list span.toggle-content",
);
this.layerBoardChildRect = page.locator(
'div[class="element-list-body "] span:has-text("Rectangle") >>nth=-1',
);
this.layerBoardChildEllipse = page.locator(
'div[class="element-list-body "] span:has-text("Ellipse") >>nth=-1',
'div[class*="layers__element-list"] button[class*="toggle-content"]',
);
}
async expandBoardOnLayers() {
if (!(await this.layerBoardToggleContentExpand.isVisible())) {
async expandBoardOnLayersTab() {
if (!(await this.layerItemToggleExpand.isVisible())) {
await this.layerBoardToggleContentCollapse.click();
await expect(this.layerBoardToggleContentExpand).toBeVisible();
await expect(this.layerItemToggleExpand).toBeVisible();
}
}
async selectBoardChildRect() {
await this.expandBoardOnLayers();
await this.layerBoardChildRect.click();
}
async selectBoardChildEllipse() {
await this.expandBoardOnLayers();
await this.layerBoardChildEllipse.click();
async selectBoardChildLayer(name) {
await this.expandBoardOnLayersTab();
await this.clickLayerOnLayersTab(name);
}
async renameCreatedLayer(newName) {
@ -65,15 +54,18 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
await expect(this.createdLayerOnLayersPanelNameText).toHaveText(name);
}
async doubleClickLayerOnLayersTab() {
await this.createdLayerOnLayersPanelNameText.dblclick();
async doubleClickLayerOnLayersTab(name) {
const layer = this.page.locator(
`div[class*="element-list-body"] span[class*="element-name"]:text-is("${name}") >>nth=0`,
);
await layer.dblclick();
}
async doubleClickLayerOnLayersTabViaTitle(title) {
const layerSel = this.page.locator(
`div[class*="element-list-body"] span[class*="element-name"]:text-is("${title}")`,
async clickLayerOnLayersTab(name) {
const layer = this.page.locator(
`div[class*="element-list-body"] span[class*="element-name"]:text-is("${name}") >>nth=0`,
);
await layerSel.dblclick();
await layer.click();
}
async doubleClickLayerIconOnLayersTab(layer) {
@ -92,7 +84,7 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
await expect(this.searchedLayerOnLayersPanelNameText).toHaveText(name);
}
async isLayoutIconVisibleOnLayer(condition=true) {
async isLayoutIconVisibleOnLayer(condition = true) {
if (condition === true) {
await expect(this.layoutIcon).toBeVisible();
} else {
@ -136,5 +128,4 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
await expect(layerSel).not.toBeVisible();
}
}
};

186
pages/workspace/main-page.js
View File

@ -1,6 +1,6 @@
const { expect } = require("@playwright/test");
const { BasePage } = require("../base-page");
const { getPlatformName } = require("../../helpers/string-generator");
const { expect } = require('@playwright/test');
const { BasePage } = require('../base-page');
const { getPlatformName } = require('../../helpers/get-platform');
exports.MainPage = class MainPage extends BasePage {
/**
@ -15,7 +15,7 @@ exports.MainPage = class MainPage extends BasePage {
this.createRectangleButton = page.locator('button[data-test="rect-btn"]');
this.createEllipseButton = page.locator('button[data-test="ellipse-btn"]');
this.createTextButton = page.locator('button[title="Text (T)"]');
this.uploadImageSelector = page.locator("#image-upload");
this.uploadImageSelector = page.locator('#image-upload');
this.createCurveButton = page.locator('button[data-test="curve-btn"]');
this.createPathButton = page.locator('button[data-test="path-btn"]');
this.colorsPaletteButton = page.locator('button[title^="Color Palette"]');
@ -29,7 +29,7 @@ exports.MainPage = class MainPage extends BasePage {
this.textbox = page.locator(
'div[role="textbox"] div[contenteditable="true"]',
);
this.guides = page.locator(".guides .new-guides");
this.guides = page.locator('.guides .new-guides');
//Node panel
this.pathActionsBlock = page.locator(
@ -60,32 +60,22 @@ exports.MainPage = class MainPage extends BasePage {
this.nodePanelMergeNodesButton = page.locator(
'button[title^="Merge nodes"]',
);
this.nodePanelDrawNodesButton = page.locator(
'button[title^="Draw nodes"]',
);
this.nodePanelMoveNodesButton = page.locator(
'button[title^="Move nodes"]',
);
this.nodePanelJoinNodesButton = page.locator(
'button[title^="Join nodes"]',
);
this.nodePanelDrawNodesButton = page.locator('button[title^="Draw nodes"]');
this.nodePanelMoveNodesButton = page.locator('button[title^="Move nodes"]');
this.nodePanelJoinNodesButton = page.locator('button[title^="Join nodes"]');
this.nodePanelSeparateNodesButton = page.locator(
'button[title^="Separate nodes"]',
);
this.nodePanelToCornerButton = page.locator(
'button[title^="To corner"]',
);
this.nodePanelToCurveButton = page.locator(
'button[title^="To curve"]',
);
this.nodePanelToCornerButton = page.locator('button[title^="To corner"]');
this.nodePanelToCurveButton = page.locator('button[title^="To curve"]');
// Main menu - first level
this.mainMenuButton = page.locator('div[class*="header__menu-btn"]');
this.mainMenuList = page.locator('ul[class*="header__menu"]');
this.viewMainMenuItem = page.locator("#file-menu-view");
this.fileMainMenuItem = page.locator("#file-menu-file");
this.editMainMenuItem = page.locator("#file-menu-edit");
this.helpInfoMenuItem = page.locator("#file-menu-help-info");
this.viewMainMenuItem = page.locator('#file-menu-view');
this.fileMainMenuItem = page.locator('#file-menu-file');
this.editMainMenuItem = page.locator('#file-menu-edit');
this.helpInfoMenuItem = page.locator('#file-menu-help-info');
// Main menu - second level
this.showRulersMainMenuSubItem = page.locator(
@ -100,7 +90,7 @@ exports.MainPage = class MainPage extends BasePage {
this.showGridsMainMenuSubItem = page.locator(
'li[data-test="display-grid"] span:text-is("Show grid")',
);
this.selectAllMainMenuSubItem = page.locator("#file-menu-select-all");
this.selectAllMainMenuSubItem = page.locator('#file-menu-select-all');
this.showColorPaletteMainMenuSubItem = page.locator(
'#file-menu-color-palette span:text-is("Show color palette")',
);
@ -122,25 +112,25 @@ exports.MainPage = class MainPage extends BasePage {
this.showHideUIMainMenuSubItem = page.locator(
'li[data-test="hide-ui"] span:text-is("Show / Hide UI")',
);
this.dowloadPenpotFileMenuSubItem = page.locator("#file-menu-binary-file");
this.dowloadPenpotFileMenuSubItem = page.locator('#file-menu-binary-file');
this.dowloadStandartFileMenuSubItem = page.locator(
"#file-menu-standard-file",
'#file-menu-standard-file',
);
this.addAsSharedLibraryFileMenuSubItem = page.locator(
"#file-menu-add-shared",
'#file-menu-add-shared',
);
this.removeAsSharedLibraryFileMenuSubItem = page.locator(
"#file-menu-remove-shared",
'#file-menu-remove-shared',
);
this.shortcutsMenuSubItem = page.locator("#file-menu-shortcuts");
this.shortcutsMenuSubItem = page.locator('#file-menu-shortcuts');
this.downloadFileTickIcon = page.locator('svg[class="icon-tick-refactor"]');
this.downloadFileCloseButton = page.locator('input[value="Close"]');
//Zoom
this.zoomButton = page.locator('div[title="Zoom"]');
this.zoomPlusButton = page.locator(
'button[class*="header__zoom-btn"] svg[class="icon-add-refactor"]',
);
'button[class*="header__zoom-btn"] svg[class="icon-add-refactor"]',
);
this.zoomMinusButton = page.locator(
'button[class*="header__zoom-btn"] svg[class="icon-remove-refactor"]',
);
@ -150,7 +140,9 @@ exports.MainPage = class MainPage extends BasePage {
//Pages
this.addPageButton = page.locator('button[class*="add-page"]');
this.pagesBlock = page.locator('div.main_ui_workspace_sidebar_sitemap__sitemap');
this.pagesBlock = page.locator(
'div.main_ui_workspace_sidebar_sitemap__sitemap',
);
this.firstPageListItem = page.locator(
'ul[class*="pages-list"] div[class*="element-list-body"] >>nth=0',
);
@ -172,7 +164,9 @@ exports.MainPage = class MainPage extends BasePage {
this.collapseExpandPagesButton = page.locator(
'span[class*="collapsabled-icon"]',
);
this.pageTrashIcon = page.locator('div[class*="selected"] svg[class="icon-delete-refactor"]');
this.pageTrashIcon = page.locator(
'div[class*="selected"] svg[class="icon-delete-refactor"]',
);
this.deletePageOkButton = page.locator('input[value="Ok"]');
// Bottom palette
@ -183,13 +177,11 @@ exports.MainPage = class MainPage extends BasePage {
'div[class*="text_palette__typography-item"]',
);
this.typographiesColorsBottomPanel = page.locator(
"div.main_ui_workspace_palette__wide",
'div.main_ui_workspace_palette__wide',
);
//Header
this.unSavedChangesIcon = page.locator(
'div[title="Unsaved changes"]',
);
this.unSavedChangesIcon = page.locator('div[title="Unsaved changes"]');
this.usersSection = page.locator('div[class*="users-section"]');
this.projectNameSpan = page.locator('div[class*="project-name"]');
this.fileNameSpan = page.locator('div[class*="file-name"]');
@ -230,18 +222,18 @@ exports.MainPage = class MainPage extends BasePage {
}
async typeTextFromKeyboard() {
await this.page.keyboard.press("H");
await this.page.keyboard.press("e");
await this.page.keyboard.press("l");
await this.page.keyboard.press("l");
await this.page.keyboard.press("o");
await this.page.keyboard.press("Space");
await this.page.keyboard.press("W");
await this.page.keyboard.press("o");
await this.page.keyboard.press("r");
await this.page.keyboard.press("l");
await this.page.keyboard.press("d");
await this.page.keyboard.press("!");
await this.page.keyboard.press('H');
await this.page.keyboard.press('e');
await this.page.keyboard.press('l');
await this.page.keyboard.press('l');
await this.page.keyboard.press('o');
await this.page.keyboard.press('Space');
await this.page.keyboard.press('W');
await this.page.keyboard.press('o');
await this.page.keyboard.press('r');
await this.page.keyboard.press('l');
await this.page.keyboard.press('d');
await this.page.keyboard.press('!');
}
async uploadImage(filePath) {
@ -301,9 +293,8 @@ exports.MainPage = class MainPage extends BasePage {
await boardSel.dblclick();
}
async focusLayerViaShortcut() {
await this.page.keyboard.press("F");
await this.page.keyboard.press('F');
}
async drawCurve(x1, y1, x2, y2) {
@ -330,18 +321,17 @@ exports.MainPage = class MainPage extends BasePage {
async pressFlexLayoutShortcut() {
await this.createdLayer.click({ force: true });
await this.page.keyboard.press("Shift+A");
await this.page.keyboard.press('Shift+A');
}
async flipVerticalViaShortcut() {
await this.createdLayer.click({ force: true });
await this.page.keyboard.press("Shift+V");
await this.page.keyboard.press('Shift+V');
}
async flipHorizontalViaShortcut() {
await this.createdLayer.click({ force: true });
await this.page.keyboard.press("Shift+H");
await this.page.keyboard.press('Shift+H');
}
async deleteLayerViaShortcut() {
@ -374,11 +364,11 @@ exports.MainPage = class MainPage extends BasePage {
}
async holdShiftKeyboardButton() {
await this.page.keyboard.down("Shift");
await this.page.keyboard.down('Shift');
}
async releaseShiftKeyboardButton() {
await this.page.keyboard.up("Shift");
await this.page.keyboard.up('Shift');
}
async clickAddNodeButtonOnNodePanel() {
@ -386,7 +376,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressShiftPlusKeyboardShortcut() {
await this.page.keyboard.press("Shift+NumpadAdd");
await this.page.keyboard.press('Shift+NumpadAdd');
}
async clickDeleteNodeButtonOnNodePanel() {
@ -394,7 +384,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressDeleteKeyboardButton() {
await this.page.keyboard.press("Delete");
await this.page.keyboard.press('Delete');
}
async clickMergeNodesButtonOnNodePanel() {
@ -402,7 +392,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressCtrlJKeyboardShortcut() {
await this.page.keyboard.press("Control+J");
await this.page.keyboard.press('Control+J');
}
async clickDrawNodesButtonOnNodePanel() {
@ -418,7 +408,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressJKeyboardShortcut() {
await this.page.keyboard.press("J");
await this.page.keyboard.press('J');
}
async clickSeparateNodesButtonOnNodePanel() {
@ -426,7 +416,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressKKeyboardShortcut() {
await this.page.keyboard.press("K");
await this.page.keyboard.press('K');
}
async clickToCornerButtonOnNodePanel() {
@ -434,7 +424,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressXKeyboardShortcut() {
await this.page.keyboard.press("X");
await this.page.keyboard.press('X');
}
async clickToCurveButtonOnNodePanel() {
@ -442,7 +432,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressCKeyboardShortcut() {
await this.page.keyboard.press("C");
await this.page.keyboard.press('C');
}
async clickMainMenuButton() {
@ -495,24 +485,23 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressHideShowRulersShortcut(browserName) {
const os = getPlatformName();
if (os === "MacOS") {
await this.page.keyboard.press("Meta+Shift+R");
if (getPlatformName() === 'MacOS') {
await this.page.keyboard.press('Meta+Shift+R');
} else {
if (browserName === "webkit") {
await this.page.keyboard.press("Meta+Shift+R");
if (browserName === 'webkit') {
await this.page.keyboard.press('Meta+Shift+R');
} else {
await this.page.keyboard.press("Control+Shift+R");
await this.page.keyboard.press('Control+Shift+R');
}
}
}
async pressHideShowGridsShortcut(browserName) {
const os = getPlatformName();
if (os === "MacOS") {
if (os === 'MacOS') {
await this.page.keyboard.press("Meta+'");
} else {
if (browserName === "webkit") {
if (browserName === 'webkit') {
await this.page.keyboard.press("Meta+'");
} else {
await this.page.keyboard.press("Control+'");
@ -522,13 +511,13 @@ exports.MainPage = class MainPage extends BasePage {
async pressSelectAllShortcut(browserName) {
const os = getPlatformName();
if (os === "MacOS") {
await this.page.keyboard.press("Meta+A");
if (os === 'MacOS') {
await this.page.keyboard.press('Meta+A');
} else {
if (browserName === "webkit") {
await this.page.keyboard.press("Meta+A");
if (browserName === 'webkit') {
await this.page.keyboard.press('Meta+A');
} else {
await this.page.keyboard.press("Control+A");
await this.page.keyboard.press('Control+A');
}
}
}
@ -599,23 +588,23 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressHideShowPixelGridShortcut() {
await this.page.keyboard.press("Shift+,");
await this.page.keyboard.press('Shift+,');
}
async pressHideShowUIShortcut() {
await this.page.keyboard.press("Backslash");
await this.page.keyboard.press('Backslash');
}
async downloadPenpotFileViaMenu() {
await this.dowloadPenpotFileMenuSubItem.click();
await this.page.waitForEvent("download");
await this.page.waitForEvent('download');
await expect(this.downloadFileTickIcon).toBeVisible();
await this.downloadFileCloseButton.click();
}
async downloadStandardFileViaMenu() {
await this.dowloadStandartFileMenuSubItem.click();
await this.page.waitForEvent("download");
await this.page.waitForEvent('download');
await expect(this.downloadFileTickIcon).toBeVisible();
await this.downloadFileCloseButton.click();
}
@ -640,11 +629,11 @@ exports.MainPage = class MainPage extends BasePage {
await expect(this.secondPageListItem).toHaveText(name);
}
async renamePageViaRightClick(newName, isFirstPage=true) {
async renamePageViaRightClick(newName, isFirstPage = true) {
if (isFirstPage) {
await this.firstPageListItem.click({ button: "right" });
await this.firstPageListItem.click({ button: 'right' });
} else {
await this.secondPageListItem.click({ button: "right" });
await this.secondPageListItem.click({ button: 'right' });
}
await this.renamePageMenuItem.click();
await this.pageNameInput.fill(newName);
@ -652,11 +641,11 @@ exports.MainPage = class MainPage extends BasePage {
}
async duplicatePageViaRightClick() {
await this.firstPageListItem.click({ button: "right" });
await this.firstPageListItem.click({ button: 'right' });
await this.duplicatePageMenuItem.click();
}
async clickOnPageOnLayersPanel(firstPage=true) {
async clickOnPageOnLayersPanel(firstPage = true) {
if (firstPage) {
await this.firstPageListItem.click();
} else {
@ -669,7 +658,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async deleteSecondPageViaRightClick() {
await this.secondPageListItem.click({ button: "right" });
await this.secondPageListItem.click({ button: 'right' });
await this.deletePageMenuItem.click();
await this.deletePageOkButton.click();
}
@ -697,7 +686,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressShortcutsPanelShortcut() {
await this.page.keyboard.press("Shift+?");
await this.page.keyboard.press('Shift+?');
}
async closeShortcutsPanel() {
@ -717,7 +706,7 @@ exports.MainPage = class MainPage extends BasePage {
}
async pressColorsPaletteShortcut() {
await this.page.keyboard.press("Alt+P");
await this.page.keyboard.press('Alt+P');
}
async isColorsPaletteDisplayed() {
@ -730,11 +719,11 @@ exports.MainPage = class MainPage extends BasePage {
async backToDashboardFromFileEditor() {
await this.clickPencilBoxButton();
await this.isHeaderDisplayed("Projects");
await this.isHeaderDisplayed('Projects');
}
async pressOpenTypographiesBottomPanelShortcut() {
await this.page.keyboard.press("Alt+T");
await this.page.keyboard.press('Alt+T');
await this.waitForBottomPaletteIsOpened();
}
@ -762,8 +751,8 @@ exports.MainPage = class MainPage extends BasePage {
await this.clickViewportByCoordinates(1200, 700);
await this.clickViewportByCoordinates(1000, 400);
await this.clickViewportByCoordinates(500, 200);
await this.clickOnDesignTab(); // todo: need to remove after issue fix
// await this.clickOnMainToolBar(); //todo issue 6171
await this.clickOnDesignTab(); // todo: need to remove after issue fix
// await this.clickOnMainToolBar(); //todo bug 6171 > need to uncomment after fix these 2 rows
// await this.clickMoveButton();
await this.waitForChangeIsSaved();
}
@ -773,8 +762,8 @@ exports.MainPage = class MainPage extends BasePage {
await this.clickViewportByCoordinates(500, 200);
await this.clickViewportByCoordinates(1200, 700);
await this.clickViewportByCoordinates(1000, 400);
await this.clickOnDesignTab(); // todo: need to remove after issue fix
// await this.clickOnMainToolBar(); //todo issue 6171
await this.clickOnDesignTab(); // todo: need to remove after issue fix
// await this.clickOnMainToolBar(); //todo bug 6171 > need to uncomment after fix these 2 rows
// await this.clickMoveButton();
await this.waitForChangeIsSaved();
}
@ -782,10 +771,10 @@ exports.MainPage = class MainPage extends BasePage {
async createDefaultTextLayer(browserName, x = 200, y = 300) {
await this.clickCreateTextButton();
await this.clickViewportByCoordinates(x, y);
if (browserName === "webkit") {
if (browserName === 'webkit') {
await this.typeTextFromKeyboard();
} else {
await this.typeText("Hello World!");
await this.typeText('Hello World!');
}
await this.clickMoveButton();
await this.waitForChangeIsSaved();
@ -798,5 +787,4 @@ exports.MainPage = class MainPage extends BasePage {
async clickOnDesignTab() {
await this.designTab.click();
}
};

13
pages/workspace/prototype-panel-page.js vendored
View File

@ -1,5 +1,5 @@
const { expect} = require("@playwright/test");
const { BasePage } = require("../base-page");
const { expect } = require('@playwright/test');
const { BasePage } = require('../base-page');
exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
/**
@ -34,9 +34,7 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
this.interactionDestinationField = page.locator(
'//*[text()="Destination"]//parent::div//div[contains(@class, "custom-select")]',
);
this.removeFlowButton = page.locator(
'div[class*="remove-flow-btn"]',
);
this.removeFlowButton = page.locator('div[class*="remove-flow-btn"]');
}
async clickPrototypeTab() {
@ -91,10 +89,9 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
async selectInteractionDestination(value) {
const optionSel = this.page.locator(
`div[class*="interaction-type-select"] span:has-text("${value}")`
`div[class*="interaction-type-select"] span:has-text("${value}")`,
);
await this.interactionDestinationField.click();
await optionSel.click();
}
}
};

34
playwright.config.js
View File

@ -2,7 +2,7 @@
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
require("dotenv").config();
require('dotenv').config();
/**
* @see https://playwright.dev/docs/test-configuration
@ -10,9 +10,9 @@ require("dotenv").config();
*/
const config = {
snapshotPathTemplate: `{testDir}/{testFileDir}/{testFileName}-snapshots/{projectName}/{arg}{ext}`,
testDir: "./tests",
testDir: './tests',
/* Maximum time one test can run for. */
timeout: process.env.CI ? 70 * 1000 : 60 * 1000,
timeout: process.env.CI ? 70 * 1000 : 50 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
@ -29,7 +29,7 @@ const config = {
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 2 : 2,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@ -38,38 +38,38 @@ const config = {
baseURL: process.env.BASE_URL,
headless: true,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
video: "on",
trace: 'on-first-retry',
video: 'on',
},
projects: [
{
name: "chrome",
name: 'chrome',
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0,
maxDiffPixelRatio: 0.01,
},
},
use: {
browserName: "chromium",
channel: "chrome",
browserName: 'chromium',
channel: 'chrome',
viewport: {
height: 969,
width: 1920,
},
launchOptions: {
ignoreDefaultArgs: ["--hide-scrollbars"],
ignoreDefaultArgs: ['--hide-scrollbars'],
},
},
},
{
name: "firefox",
name: 'firefox',
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0,
maxDiffPixelRatio: 0.01,
},
},
use: {
browserName: "firefox",
browserName: 'firefox',
viewport: {
height: 969,
width: 1920,
@ -77,14 +77,14 @@ const config = {
},
},
{
name: "webkit",
name: 'webkit',
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0,
maxDiffPixelRatio: 0.01,
},
},
use: {
browserName: "webkit",
browserName: 'webkit',
viewport: {
height: 969,
width: 1920,

91
tests/assets/assets-colors.spec.js
View File

@ -1,14 +1,16 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect, test } = require("@playwright/test");
const { ColorPalettePage } = require("../../pages/workspace/color-palette-page");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { AssetsPanelPage } = require("../../pages/workspace/assets-panel-page");
const { DesignPanelPage } = require("../../pages/workspace/design-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { expect, test } = require('@playwright/test');
const {
ColorPalettePage,
} = require('../../pages/workspace/color-palette-page');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { AssetsPanelPage } = require('../../pages/workspace/assets-panel-page');
const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -27,11 +29,11 @@ test.afterEach(async ({ page }) => {
await teamPage.deleteTeam(teamName);
});
mainTest("AS-22 Filter Colors from All Assets drop-down", async ({ page }) => {
mainTest('AS-22 Filter Colors from All Assets drop-down', async ({ page }) => {
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.clickAssetsTab();
await assetsPanelPage.selectTypeFromAllAssetsSelector("Colors");
await assetsPanelPage.isAssetsSectionNameDisplayed("Colors", "0");
await assetsPanelPage.selectTypeFromAllAssetsSelector('Colors');
await assetsPanelPage.isAssetsSectionNameDisplayed('Colors', '0');
});
test.describe(() => {
@ -41,97 +43,96 @@ test.describe(() => {
const colorPalettePopUp = new ColorPalettePage(page);
await assetsPanelPage.clickAssetsTab();
await assetsPanelPage.clickAddFileLibraryColorButton();
await colorPalettePopUp.setHex("#ffff00");
await colorPalettePopUp.setHex('#ffff00');
await colorPalettePopUp.clickSaveColorStyleButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
});
mainTest("AS-23 File library colors - add", async ({ page }) => {
mainTest('AS-23 File library colors - add', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
const colorPalettePopUp = new ColorPalettePage(page);
await assetsPanelPage.isColorAddedToFileLibraryColors("#ffff00");
await assetsPanelPage.isColorAddedToFileLibraryColors('#ffff00');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"colors-add-color.png",
'colors-add-color.png',
);
});
mainTest("AS-24 File library colors - edit", async ({ page }) => {
mainTest('AS-24 File library colors - edit', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
const colorPalettePopUp = new ColorPalettePage(page);
await assetsPanelPage.editFileLibraryColor();
await colorPalettePopUp.setHex("#00ff00");
await colorPalettePopUp.setHex('#00ff00');
await colorPalettePopUp.clickSaveColorStyleButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isColorAddedToFileLibraryColors("#ffff00#00ff00");
await assetsPanelPage.isColorAddedToFileLibraryColors('#ffff00#00ff00');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"colors-edit-color.png",
'colors-edit-color.png',
);
});
mainTest("AS-25 File library colors - rename", async ({ page }) => {
mainTest('AS-25 File library colors - rename', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.renameFileLibraryColor("test color");
await assetsPanelPage.renameFileLibraryColor('test color');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isColorAddedToFileLibraryColors("test color#ffff00");
await assetsPanelPage.isColorAddedToFileLibraryColors('test color#ffff00');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"colors-rename-color.png",
'colors-rename-color.png',
);
});
mainTest("AS-26 File library colors - delete", async ({ page }) => {
mainTest('AS-26 File library colors - delete', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.deleteFileLibraryColor();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isColorNotAddedToFileLibraryColors();
await assetsPanelPage.selectTypeFromAllAssetsSelector("Colors");
await assetsPanelPage.isAssetsSectionNameDisplayed("Colors", "0");
await assetsPanelPage.selectTypeFromAllAssetsSelector('Colors');
await assetsPanelPage.isAssetsSectionNameDisplayed('Colors', '0');
});
mainTest("AS-27 File library colors - create group", async ({ page }) => {
mainTest('AS-27 File library colors - create group', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets("Colors", "Test Group");
await assetsPanelPage.createGroupFileLibraryAssets('Colors', 'Test Group');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupCreated("Test Group");
await assetsPanelPage.isFileLibraryGroupCreated('Test Group');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"group-colors.png",
'group-colors.png',
);
});
mainTest("AS-29 File library colors - rename group", async ({ page }) => {
mainTest('AS-29 File library colors - rename group', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets("Colors", "Test Group");
await assetsPanelPage.createGroupFileLibraryAssets('Colors', 'Test Group');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.renameGroupFileLibrary("New Group");
await assetsPanelPage.renameGroupFileLibrary('New Group');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupCreated("New Group");
await assetsPanelPage.isFileLibraryGroupCreated('New Group');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"group-colors-renamed.png",
'group-colors-renamed.png',
);
});
mainTest("AS-32 File library colors- ungroup", async ({ page }) => {
mainTest('AS-32 File library colors- ungroup', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets("Colors", "Test Group");
await assetsPanelPage.createGroupFileLibraryAssets('Colors', 'Test Group');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.ungroupFileLibrary();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupRemoved();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"colors-add-color.png",
'colors-add-color.png',
);
});
mainTest("AS-34 File library colors - apply to element", async ({ page }) => {
mainTest('AS-34 File library colors - apply to element', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await mainPage.clickCreateBoardButton();
@ -140,11 +141,11 @@ test.describe(() => {
await assetsPanelPage.clickFileLibraryColorsColorBullet();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.createdLayer).toHaveScreenshot(
"apply-color-to-board.png",
'apply-color-to-board.png',
);
});
mainTest("AS-117 File library colors - apply to stroke", async ({ page }) => {
mainTest('AS-117 File library colors - apply to stroke', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
@ -156,7 +157,7 @@ test.describe(() => {
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportByCoordinates(900, 100);
await expect(mainPage.createdLayer).toHaveScreenshot(
"apply-color-to-stroke-board.png",
'apply-color-to-stroke-board.png',
);
});
});

210
tests/assets/assets-components.spec.js
View File

@ -1,210 +0,0 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect, test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const teamName = random().concat("autotest");
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
const dashboardPage = new DashboardPage(page);
const mainPage = new MainPage(page);
await teamPage.createTeam(teamName);
await teamPage.isTeamSelected(teamName);
await dashboardPage.createFileViaPlaceholder();
await mainPage.isMainPageLoaded();
});
test.afterEach(async ({ page }) => {
const teamPage = new TeamPage(page);
const mainPage = new MainPage(page);
await mainPage.backToDashboardFromFileEditor();
await teamPage.deleteTeam(teamName);
});
mainTest(
"AS-56 Filter Components from All Assets drop-down",
async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickAssetsTab();
await mainPage.selectTypeFromAllAssetsSelector("Components");
await mainPage.isAssetsSectionNameDisplayed("Components", "0");
},
);
mainTest("AS-57 Create component shape", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.isComponentAddedToFileLibraryComponents();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-rectangle.png",
);
});
mainTest("AS-58 Create component image", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.uploadImage("images/sample.jpeg");
await mainPage.waitForChangeIsSaved();
await mainPage.clickMoveButton();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.isComponentAddedToFileLibraryComponents();
await expect(mainPage.assetsPanel).toHaveScreenshot("components-image.png");
});
mainTest("AS-59 Create component text", async ({ page, browserName }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateTextButton();
await mainPage.clickViewportByCoordinates(200, 300);
if (browserName === "webkit") {
await mainPage.typeTextFromKeyboard();
} else {
await mainPage.typeText("Hello World!");
}
await mainPage.clickMoveButton();
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.isComponentAddedToFileLibraryComponents();
await expect(mainPage.assetsPanel).toHaveScreenshot("components-text.png");
});
mainTest("AS-61 Create component path", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreatePathButton();
await mainPage.clickViewportByCoordinates(500, 200);
await mainPage.clickViewportByCoordinates(1200, 700);
await mainPage.clickViewportByCoordinates(1000, 400);
await mainPage.clickViewportByCoordinates(500, 200);
await mainPage.waitForChangeIsSaved();
await mainPage.clickMoveButton();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.isComponentAddedToFileLibraryComponents();
await expect(mainPage.assetsPanel).toHaveScreenshot("components-path.png");
});
mainTest("AS-80 Duplicate component", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.duplicateFileLibraryComponents();
await mainPage.waitForChangeIsSaved();
await mainPage.isSecondComponentAddedToFileLibraryComponents();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-rectangle-duplicated.png",
);
});
mainTest("AS-81 Delete component", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.deleteFileLibraryComponents();
await mainPage.waitForChangeIsSaved();
await mainPage.isComponentNotAddedToFileLibraryComponents();
await mainPage.selectTypeFromAllAssetsSelector("Components");
await mainPage.isAssetsTitleDisplayed("Components (0)");
});
mainTest("AS-83 Components - create group", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.createGroupFileLibraryGraphics("Test Group");
await mainPage.waitForChangeIsSaved();
await mainPage.isFileLibraryGroupCreated("Test Group");
await expect(mainPage.assetsPanel).toHaveScreenshot("group-components.png");
});
mainTest("AS-85 Components - rename group", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.createGroupFileLibraryGraphics("Test Group");
await mainPage.waitForChangeIsSaved();
await mainPage.renameGroupFileLibrary("New Group");
await mainPage.waitForChangeIsSaved();
await mainPage.isFileLibraryGroupCreated("New Group");
await expect(mainPage.assetsPanel).toHaveScreenshot(
"group-components-renamed.png",
);
});
mainTest("AS-88 Components - ungroup", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(200, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await mainPage.createGroupFileLibraryGraphics("Test Group");
await mainPage.waitForChangeIsSaved();
await mainPage.ungroupFileLibrary();
await mainPage.waitForChangeIsSaved();
await mainPage.isFileLibraryGroupRemoved();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-rectangle.png",
);
});
mainTest("AS-90 Components - change view list tile", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportByCoordinates(300, 400);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateEllipseButton();
await mainPage.clickViewportByCoordinates(100, 200);
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.uploadImage("images/sample.jpeg");
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.createComponentViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.clickAssetsTab();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-tile-view.png",
);
await mainPage.clickFileLibraryChangeViewButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-list-view.png",
);
await mainPage.clickFileLibraryChangeViewButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.assetsPanel).toHaveScreenshot(
"components-tile-view.png",
);
});

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-list-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-path.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-rectangle-duplicated.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-rectangle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-text.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/components-tile-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/group-components-renamed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/chrome/group-components.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-list-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-path.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-rectangle-duplicated.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-rectangle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-text.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/components-tile-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/group-components-renamed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/firefox/group-components.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-list-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-path.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-rectangle-duplicated.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-rectangle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-text.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/components-tile-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/group-components-renamed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
tests/assets/assets-components.spec.js-snapshots/webkit/group-components.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

160
tests/assets/assets-shared-libraries.spec.js
View File

@ -1,160 +0,0 @@
const { mainTest } = require("../../fixtures");
const { expect, test } = require("@playwright/test");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { MainPage } = require("../../pages/workspace/main-page");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const teamName = random().concat("autotest");
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
const dashboardPage = new DashboardPage(page);
await teamPage.createTeam(teamName);
await teamPage.isTeamSelected(teamName);
await dashboardPage.createFileViaPlaceholder();
});
test.afterEach(async ({ page }) => {
const teamPage = new TeamPage(page);
await teamPage.deleteTeam(teamName);
});
test.describe("Tests with importing Penpot Libraries", () => {
test.beforeEach(async ({ page }) => {
const dashboardPage = new DashboardPage(page);
const mainPage = new MainPage(page);
await mainPage.backToDashboardFromFileEditor();
await dashboardPage.maximizeLibrariesAndTemplatesCarousel();
await dashboardPage.flipLibrariesAndTemplatesCarousel("right");
await dashboardPage.importSharedLibrary("Whiteboarding Kit");
await dashboardPage.minimizeLibrariesAndTemplatesCarousel();
await dashboardPage.reloadPage();
});
test.afterEach(async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.backToDashboardFromFileEditor();
});
mainTest(
"AS-92 Import shared library from LIBRARIES pop-up",
async ({ page }) => {
const mainPage = new MainPage(page);
const dashboardPage = new DashboardPage(page);
await dashboardPage.openSecondFile("New File 1");
await mainPage.isMainPageLoaded();
await mainPage.clickAssetsTab();
await mainPage.clickLibrariesTab();
await mainPage.clickAddSharedLibraryButton();
await mainPage.clickCloseLibrariesPopUpButton();
await mainPage.expandFileLibraryOnAccessPanel(
"Whiteboarding & mapping kit",
);
await expect(mainPage.assetsPanel).toHaveScreenshot(
"imported-library.png",
);
},
);
mainTest(
"AS-93 Remove shared library from LIBRARIES pop-up",
async ({ page }) => {
const mainPage = new MainPage(page);
const dashboardPage = new DashboardPage(page);
await dashboardPage.openSecondFile("New File 1");
await mainPage.isMainPageLoaded();
await mainPage.clickAssetsTab();
await mainPage.clickLibrariesTab();
await mainPage.clickAddSharedLibraryButton();
await mainPage.clickCloseLibrariesPopUpButton();
await mainPage.expandFileLibraryOnAccessPanel(
"Whiteboarding & mapping kit",
);
await expect(mainPage.assetsPanel).toHaveScreenshot(
"imported-library.png",
);
await mainPage.clickLibrariesTab();
await mainPage.clickRemoveSharedLibraryButton();
await mainPage.clickCloseLibrariesPopUpButton();
await mainPage.isFileLibraryOnAccessPanelNotDisplayed(
"Whiteboarding & mapping kit",
);
await expect(mainPage.assetsPanel).toHaveScreenshot(
"removed-library.png",
);
},
);
mainTest(
"AS-94 Search shared library in LIBRARIES pop-up",
async ({ page }) => {
const library1 = "Whiteboarding & mapping kit";
const library2 = "CircumIcons";
const mainPage = new MainPage(page);
const dashboardPage = new DashboardPage(page);
await dashboardPage.maximizeLibrariesAndTemplatesCarousel();
await dashboardPage.flipLibrariesAndTemplatesCarousel("right");
await dashboardPage.importSharedLibrary("Circum Icons pack");
await dashboardPage.minimizeLibrariesAndTemplatesCarousel();
await dashboardPage.reloadPage();
await dashboardPage.openSecondFile("New File 1");
await mainPage.isMainPageLoaded();
await mainPage.clickAssetsTab();
await mainPage.clickLibrariesTab();
await mainPage.searchForLibrary("Circ");
await mainPage.isLibraryFoundAfterSearch(library2, true);
await mainPage.isLibraryFoundAfterSearch(library1, false);
await mainPage.clearSearchLibraryInput();
await mainPage.searchForLibrary(library1);
await mainPage.isLibraryFoundAfterSearch(library2, false);
await mainPage.isLibraryFoundAfterSearch(library1, true);
await mainPage.clearSearchLibraryInput();
await mainPage.searchForLibrary("uncreated library");
await mainPage.isNoMatchedLibrariesFound("uncreated library");
await mainPage.clickCloseLibrariesPopUpButton();
},
);
});
test.describe("Tests wt importing Penpot Libraries", () => {
test.beforeEach(async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickAssetsTab();
await mainPage.uploadImageToFileLibraryGraphics("images/images.png");
await mainPage.waitForChangeIsSaved();
await mainPage.isImageUploadedToFileLibraryGraphics();
await mainPage.clickLibrariesTab();
await mainPage.clickPublishSharedLibraryButton();
await mainPage.isUnpublishLibraryBtnPresent();
await mainPage.clickCloseLibrariesPopUpButton();
await mainPage.isSharedLibraryBadgeVisible();
await mainPage.backToDashboardFromFileEditor();
});
mainTest("AS-95 Publish Shared library", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.openSidebarItem("Libraries");
await dashboardPage.isFilePresent("New File 1");
});
mainTest("AS-96 Unpublish Shared library", async ({ page }) => {
const mainPage = new MainPage(page);
const dashboardPage = new DashboardPage(page);
await dashboardPage.openSidebarItem("Libraries");
await dashboardPage.isFilePresent("New File 1");
await dashboardPage.openFile();
await mainPage.clickAssetsTab();
await mainPage.clickLibrariesTab();
await mainPage.unPublishSharedLibrary();
await mainPage.isPublishLibraryBtnPresent();
await mainPage.clickCloseLibrariesPopUpButton();
await mainPage.isSharedLibraryBadgeNotVisible();
await mainPage.backToDashboardFromFileEditor();
await dashboardPage.openSidebarItem("Libraries");
await dashboardPage.checkNoLibrariesExist();
});
});

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/chrome/imported-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/chrome/removed-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/firefox/imported-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/firefox/removed-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/webkit/imported-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
tests/assets/assets-shared-libraries.spec.js-snapshots/webkit/removed-library.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

22
tests/assets/assets-shortcuts-panel.spec.js
View File

@ -1,11 +1,11 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect, test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { expect, test } = require('@playwright/test');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -24,26 +24,26 @@ test.afterEach(async ({ page }) => {
await teamPage.deleteTeam(teamName);
});
mainTest("AS-110 Open panel main menu - help&info", async ({ page }) => {
mainTest('AS-110 Open panel main menu - help&info', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickMainMenuButton();
await mainPage.clickHelpInfoMainMenuItem();
await mainPage.clickShortcutsMainMenuSubItem();
await mainPage.isShortcutsPanelDisplayed();
await mainPage.clickViewportTwice();
await expect(mainPage.shortcutsPanel).toHaveScreenshot("shortcuts-panel.png");
await expect(mainPage.shortcutsPanel).toHaveScreenshot('shortcuts-panel.png');
await mainPage.clickMainMenuButton();
await mainPage.clickHelpInfoMainMenuItem();
await mainPage.clickShortcutsMainMenuSubItem();
await mainPage.isShortcutsPanelNotDisplayed();
});
mainTest("AS-115 Show/hide panel", async ({ page }) => {
mainTest('AS-115 Show/hide panel', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.pressShortcutsPanelShortcut();
await mainPage.isShortcutsPanelDisplayed();
await mainPage.clickViewportTwice();
await expect(mainPage.shortcutsPanel).toHaveScreenshot("shortcuts-panel.png");
await expect(mainPage.shortcutsPanel).toHaveScreenshot('shortcuts-panel.png');
await mainPage.closeShortcutsPanel();
await mainPage.isShortcutsPanelNotDisplayed();
});

100
tests/assets/assets-typographies.spec.js
View File

@ -1,12 +1,12 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect, test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { AssetsPanelPage } = require("../../pages/workspace/assets-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { expect, test } = require('@playwright/test');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { AssetsPanelPage } = require('../../pages/workspace/assets-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -26,17 +26,17 @@ test.afterEach(async ({ page }) => {
});
mainTest(
"AS-37 Filter Typographies from All Assets drop-down",
'AS-37 Filter Typographies from All Assets drop-down',
async ({ page }) => {
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.clickAssetsTab();
await assetsPanelPage.selectTypeFromAllAssetsSelector("Typographies");
await assetsPanelPage.isAssetsSectionNameDisplayed("Typographies", "0");
await assetsPanelPage.selectTypeFromAllAssetsSelector('Typographies');
await assetsPanelPage.isAssetsSectionNameDisplayed('Typographies', '0');
},
);
mainTest(
"AS-38 Typographic styles - add from Assets panel",
'AS-38 Typographic styles - add from Assets panel',
async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
@ -44,17 +44,17 @@ mainTest(
await assetsPanelPage.clickAddFileLibraryTypographyButton();
await mainPage.waitForChangeIsSaved();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-add-typography-expanded.png",
'typographies-add-typography-expanded.png',
);
await assetsPanelPage.minimizeFileLibraryTypography();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-add-typography-minimized.png",
'typographies-add-typography-minimized.png',
);
await assetsPanelPage.expandFileLibraryTypography();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-add-typography-expanded.png",
'typographies-add-typography-expanded.png',
);
},
);
@ -69,109 +69,109 @@ test.describe(() => {
await assetsPanelPage.minimizeFileLibraryTypography();
});
mainTest("AS-40 Typographic styles - edit", async ({ page }) => {
mainTest('AS-40 Typographic styles - edit', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.editFileLibraryTypography();
await assetsPanelPage.selectFont("Bellefair");
await assetsPanelPage.selectFontSize("12");
await assetsPanelPage.selectFont('Bellefair');
await assetsPanelPage.selectFontSize('12');
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-edit-typography-expanded.png",
'typographies-edit-typography-expanded.png',
);
await assetsPanelPage.minimizeFileLibraryTypography();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-edit-typography-minimized.png",
'typographies-edit-typography-minimized.png',
);
await assetsPanelPage.expandFileLibraryTypography();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-edit-typography-expanded.png",
'typographies-edit-typography-expanded.png',
);
});
mainTest("AS-41 Typographic styles - rename", async ({ page }) => {
mainTest('AS-41 Typographic styles - rename', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.renameFileLibraryTypography("Test Font");
await assetsPanelPage.renameFileLibraryTypography('Test Font');
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportTwice();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-rename-typography-minimized.png",
'typographies-rename-typography-minimized.png',
);
await assetsPanelPage.expandFileLibraryTypography();
await mainPage.waitForChangeIsSaved();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-rename-typography-expanded.png",
'typographies-rename-typography-expanded.png',
);
});
mainTest("AS-42 Typographic styles - delete", async ({ page }) => {
mainTest('AS-42 Typographic styles - delete', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.deleteFileLibraryTypography();
await mainPage.waitForChangeIsSaved();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-deleted-typography.png",
'typographies-deleted-typography.png',
);
});
mainTest("AS-43 Typographic styles - create group", async ({ page }) => {
mainTest('AS-43 Typographic styles - create group', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets(
"Typographies",
"Test Group",
'Typographies',
'Test Group',
);
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupCreated("Test Group");
await assetsPanelPage.isFileLibraryGroupCreated('Test Group');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"group-typographies.png",
'group-typographies.png',
);
});
mainTest("AS-45 Typographic styles - rename group", async ({ page }) => {
mainTest('AS-45 Typographic styles - rename group', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets(
"Typographies",
"Test Group",
'Typographies',
'Test Group',
);
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.renameGroupFileLibrary("New Group");
await assetsPanelPage.renameGroupFileLibrary('New Group');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupCreated("New Group");
await assetsPanelPage.isFileLibraryGroupCreated('New Group');
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"group-typographies-renamed.png",
'group-typographies-renamed.png',
);
});
mainTest("AS-48 Typographic styles - ungroup", async ({ page }) => {
mainTest('AS-48 Typographic styles - ungroup', async ({ page }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.createGroupFileLibraryAssets(
"Typographies",
"Test Group",
'Typographies',
'Test Group',
);
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.ungroupFileLibrary();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.isFileLibraryGroupRemoved();
await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
"typographies-add-typography-minimized.png",
'typographies-add-typography-minimized.png',
);
});
mainTest(
"AS-50 Typographic styles - apply style to text from Assets panel",
'AS-50 Typographic styles - apply style to text from Assets panel',
async ({ page, browserName }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.editFileLibraryTypography();
await assetsPanelPage.selectFont("Bad Script");
await assetsPanelPage.selectFontSize("36");
await assetsPanelPage.selectFont('Bad Script');
await assetsPanelPage.selectFontSize('36');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.minimizeFileLibraryTypography();
await mainPage.createDefaultTextLayer(browserName);
@ -179,7 +179,7 @@ test.describe(() => {
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportTwice();
await expect(mainPage.viewport).toHaveScreenshot(
"apply-typography-to-text_from_assets.png",
'apply-typography-to-text_from_assets.png',
{
mask: [mainPage.guides],
},
@ -188,13 +188,13 @@ test.describe(() => {
);
mainTest(
"AS-54 Typographic styles - apply style to text from Typographies panel",
'AS-54 Typographic styles - apply style to text from Typographies panel',
async ({ page, browserName }) => {
const mainPage = new MainPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.editFileLibraryTypography();
await assetsPanelPage.selectFont("Bad Script");
await assetsPanelPage.selectFontSize("36");
await assetsPanelPage.selectFont('Bad Script');
await assetsPanelPage.selectFontSize('36');
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.minimizeFileLibraryTypography();
await mainPage.createDefaultTextLayer(browserName);
@ -203,7 +203,7 @@ test.describe(() => {
await mainPage.waitForChangeIsSaved();
await mainPage.clickViewportTwice();
await expect(mainPage.viewport).toHaveScreenshot(
"apply-typography-to-text.png",
'apply-typography-to-text.png',
{
mask: [mainPage.guides, mainPage.typographiesColorsBottomPanel],
},

84
tests/color/color-picker.spec.js
View File

@ -1,14 +1,16 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { ColorPalettePage } = require("../../pages/workspace/color-palette-page");
const { expect, test } = require("@playwright/test");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { random } = require("../../helpers/string-generator");
const { DesignPanelPage } = require("../../pages/workspace/design-panel-page");
const { AssetsPanelPage } = require("../../pages/workspace/assets-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const {
ColorPalettePage,
} = require('../../pages/workspace/color-palette-page');
const { expect, test } = require('@playwright/test');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { random } = require('../../helpers/string-generator');
const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
const { AssetsPanelPage } = require('../../pages/workspace/assets-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -27,7 +29,7 @@ test.afterEach(async ({ page }) => {
await teamPage.deleteTeam(teamName);
});
mainTest("CP-1 Open color picker from Stroke menu", async ({ page }) => {
mainTest('CP-1 Open color picker from Stroke menu', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
@ -36,7 +38,7 @@ mainTest("CP-1 Open color picker from Stroke menu", async ({ page }) => {
await colorPalettePage.isColorPalettePopUpOpened();
});
mainTest("CP-2 Open color picker from Fill menu", async ({ page }) => {
mainTest('CP-2 Open color picker from Fill menu', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
const colorPalettePage = new ColorPalettePage(page);
@ -48,7 +50,7 @@ mainTest("CP-2 Open color picker from Fill menu", async ({ page }) => {
});
mainTest(
"CP-3 Open color picker from Canvas background menu",
'CP-3 Open color picker from Canvas background menu',
async ({ page }) => {
const designPanelPage = new DesignPanelPage(page);
const colorPalettePage = new ColorPalettePage(page);
@ -57,9 +59,9 @@ mainTest(
},
);
mainTest("CP-7 Use Recent colors", async ({ page }) => {
const color1 = "#FF0000";
const color2 = "#B1B2B5";
mainTest('CP-7 Use Recent colors', async ({ page }) => {
const color1 = '#FF0000';
const color2 = '#B1B2B5';
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
@ -79,18 +81,18 @@ mainTest("CP-7 Use Recent colors", async ({ page }) => {
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.createdLayer).toHaveScreenshot(
"board-recent-color.png",
'board-recent-color.png',
);
});
mainTest("CP-8 Use colors from File library", async ({ page }) => {
mainTest('CP-8 Use colors from File library', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.clickAssetsTab();
await assetsPanelPage.clickAddFileLibraryColorButton();
await colorPalettePage.setHex("#ffff00");
await colorPalettePage.setHex('#ffff00');
await colorPalettePage.clickSaveColorStyleButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
@ -101,11 +103,11 @@ mainTest("CP-8 Use colors from File library", async ({ page }) => {
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.createdLayer).toHaveScreenshot(
"rectangle-file-library-color.png",
'rectangle-file-library-color.png',
);
});
mainTest("CP-17 Open Color palette from shortcut", async ({ page }) => {
mainTest('CP-17 Open Color palette from shortcut', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
@ -113,24 +115,24 @@ mainTest("CP-17 Open Color palette from shortcut", async ({ page }) => {
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#FF0000");
await colorPalettePage.setHex('#FF0000');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#B1B2B5");
await colorPalettePage.setHex('#B1B2B5');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.pressColorsPaletteShortcut();
await mainPage.isColorsPaletteDisplayed();
await expect(mainPage.typographiesColorsBottomPanel).toHaveScreenshot(
"colors-panel.png",
'colors-panel.png',
);
await mainPage.pressColorsPaletteShortcut();
await mainPage.isColorsPaletteNotDisplayed();
});
mainTest("CP-18 Open Color palette from toolbar", async ({ page }) => {
mainTest('CP-18 Open Color palette from toolbar', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
@ -138,34 +140,34 @@ mainTest("CP-18 Open Color palette from toolbar", async ({ page }) => {
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#FF0000");
await colorPalettePage.setHex('#FF0000');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#B1B2B5");
await colorPalettePage.setHex('#B1B2B5');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.openCloseColorsPaletteFromSidebar();
await mainPage.isColorsPaletteDisplayed();
await expect(mainPage.typographiesColorsBottomPanel).toHaveScreenshot(
"colors-panel.png",
'colors-panel.png',
);
await mainPage.openCloseColorsPaletteFromSidebar();
await mainPage.isColorsPaletteNotDisplayed();
});
mainTest("CP-20 Choose file library colors", async ({ page }) => {
mainTest('CP-20 Choose file library colors', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const assetsPanelPage = new AssetsPanelPage(page);
await assetsPanelPage.clickAssetsTab();
await assetsPanelPage.clickAddFileLibraryColorButton();
await colorPalettePage.setHex("#ffff00");
await colorPalettePage.setHex('#ffff00');
await colorPalettePage.clickSaveColorStyleButton();
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await assetsPanelPage.clickAddFileLibraryColorButton();
await colorPalettePage.setHex("#cdc548");
await colorPalettePage.setHex('#cdc548');
await colorPalettePage.clickSaveColorStyleButton();
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
@ -175,16 +177,16 @@ mainTest("CP-20 Choose file library colors", async ({ page }) => {
await colorPalettePage.openColorPaletteMenu();
await colorPalettePage.isPaletteRecentColorsOptExist();
await colorPalettePage.isPaletteFileLibraryOptExist();
await colorPalettePage.selectColorPaletteMenuOption("File library");
await colorPalettePage.selectColorPaletteMenuOption('File library');
await expect(mainPage.typographiesColorsBottomPanel).toHaveScreenshot(
"colors-file-library.png",
'colors-file-library.png',
);
await mainPage.pressColorsPaletteShortcut();
await mainPage.isColorsPaletteNotDisplayed();
});
mainTest(
"CP-21 Click any layer and change Fill color from palette",
'CP-21 Click any layer and change Fill color from palette',
async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
@ -193,24 +195,24 @@ mainTest(
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#FF0000");
await colorPalettePage.setHex('#FF0000');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#B1B2B5");
await colorPalettePage.setHex('#B1B2B5');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.createdLayer).toHaveScreenshot(
"rectangle-color-B1B2B5.png",
'rectangle-color-B1B2B5.png',
);
await mainPage.pressColorsPaletteShortcut();
await mainPage.isColorsPaletteDisplayed();
await expect(mainPage.typographiesColorsBottomPanel).toHaveScreenshot(
"colors-panel.png",
'colors-panel.png',
);
await colorPalettePage.selectColorBulletFromPalette("#FF0000");
await colorPalettePage.selectColorBulletFromPalette('#FF0000');
await expect(mainPage.createdLayer).toHaveScreenshot(
"rectangle-color-FF0000.png",
'rectangle-color-FF0000.png',
);
await mainPage.pressColorsPaletteShortcut();
await mainPage.isColorsPaletteNotDisplayed();
@ -218,7 +220,7 @@ mainTest(
);
mainTest(
"CP-26 Open color picker from add or edit color in assets",
'CP-26 Open color picker from add or edit color in assets',
async ({ page }) => {
const assetsPanelPage = new AssetsPanelPage(page);
const colorPalettePage = new ColorPalettePage(page);

758
tests/composition/composition-board.spec.js
View File

@ -1,14 +1,16 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { ColorPalettePage } = require("../../pages/workspace/color-palette-page");
const { expect, test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { DesignPanelPage } = require("../../pages/workspace/design-panel-page");
const { LayersPanelPage } = require("../../pages/workspace/layers-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const {
ColorPalettePage,
} = require('../../pages/workspace/color-palette-page');
const { expect, test } = require('@playwright/test');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
const { LayersPanelPage } = require('../../pages/workspace/layers-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -27,493 +29,461 @@ test.afterEach(async ({ page }) => {
await teamPage.deleteTeam(teamName);
});
mainTest("CO-1 Change color background", async ({ page }) => {
mainTest('CO-1 Change color background', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickCanvasBackgroundColorIcon();
await colorPalettePage.setHex("#304d6a");
await colorPalettePage.setHex('#304d6a');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("color-background.png");
await expect(mainPage.viewport).toHaveScreenshot('color-background.png');
});
mainTest("CO-2 Create a board from toolbar", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await expect(mainPage.viewport).toHaveScreenshot("board.png", {
mask: [mainPage.guides],
});
});
mainTest("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.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickCreatedBoardTitleOnCanvas();
await layersPanelPage.renameCreatedLayer(newName);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isBoardNameDisplayed(newName);
await layersPanelPage.doubleClickLayerOnLayersTab();
await layersPanelPage.renameCreatedLayer(renamedName);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isBoardNameDisplayed(renamedName);
});
mainTest(
"CO-9 Add, hide, unhide, change type and delete Shadow to board",
async ({ page }) => {
test.describe(() => {
test.beforeEach(async ({ page }, testInfo) => {
testInfo.setTimeout(testInfo.timeout + 15000);
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddShadowButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-drop-shadow-default.png",
{
mask: [mainPage.guides],
},
);
await designPanelPage.hideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-drop-shadow-hide.png",
{
mask: [mainPage.guides],
},
);
await designPanelPage.unhideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-drop-shadow-unhide.png",
{
mask: [mainPage.guides],
},
);
await designPanelPage.selectTypeForShadow("Inner shadow");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-inner-shadow-default.png",
{
mask: [mainPage.guides],
},
);
await designPanelPage.removeShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-inner-shadow-remove.png",
{
mask: [mainPage.guides],
},
);
},
);
mainTest("CO-10 Add and edit Shadow to board", async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddShadowButton();
await designPanelPage.clickShadowActionsButton();
await designPanelPage.changeShadowSettings("10", "15", "10", "20", "50");
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex("#304d6a");
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-drop-shadow.png", {
mask: [mainPage.guides],
});
await designPanelPage.selectTypeForShadow("Inner shadow");
await designPanelPage.changeShadowSettings("5", "7", "9", "12", "25");
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex("#96e637");
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-inner-shadow.png", {
mask: [mainPage.guides],
});
});
mainTest(
"CO-12 Add, hide, unhide and delete Blur to board",
async ({ page }) => {
mainTest('CO-2 Create a board from toolbar', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await expect(mainPage.viewport).toHaveScreenshot('board.png', {
mask: [mainPage.guides],
});
});
mainTest('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);
await layersPanelPage.doubleClickLayerOnLayersTab(newName);
await layersPanelPage.renameCreatedLayer(renamedName);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isBoardNameDisplayed(renamedName);
});
mainTest(
'CO-9 Add, hide, unhide, change type and delete Shadow to board',
async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddShadowButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-drop-shadow-default.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.hideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-drop-shadow-hide.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.unhideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-drop-shadow-unhide.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.selectTypeForShadow('Inner shadow');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-inner-shadow-default.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.removeShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-inner-shadow-remove.png',
{
mask: [mainPage.guides],
},
);
},
);
mainTest('CO-10 Add and edit Shadow to board', async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await designPanelPage.clickAddShadowButton();
await designPanelPage.clickShadowActionsButton();
await designPanelPage.changeShadowSettings('10', '15', '10', '20', '50');
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex('#304d6a');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#304d6a");
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddBlurButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-blur-default.png", {
await expect(mainPage.viewport).toHaveScreenshot('board-drop-shadow.png', {
mask: [mainPage.guides],
});
await designPanelPage.hideBlur();
await designPanelPage.selectTypeForShadow('Inner shadow');
await designPanelPage.changeShadowSettings('5', '7', '9', '12', '25');
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex('#96e637');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-blur-hide.png", {
await expect(mainPage.viewport).toHaveScreenshot('board-inner-shadow.png', {
mask: [mainPage.guides],
});
await designPanelPage.unhideBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-blur-unhide.png", {
mask: [mainPage.guides],
});
await designPanelPage.removeBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-blur-remove.png", {
mask: [mainPage.guides],
});
},
);
mainTest("CO-13 Add and edit Blur to board", async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddBlurButton();
await designPanelPage.changeValueForBlur("55");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-blur.png", {
mask: [mainPage.guides],
});
});
mainTest.skip(
"CO-14 Add, edit and delete Stroke to board",
async ({ page }) => {
//todo add testid
mainTest(
'CO-12 Add, hide, unhide and delete Blur to board',
async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex('#304d6a');
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddBlurButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-blur-default.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.hideBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-blur-hide.png', {
mask: [mainPage.guides],
});
await designPanelPage.unhideBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-blur-unhide.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.removeBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-blur-remove.png',
{
mask: [mainPage.guides],
},
);
},
);
mainTest('CO-13 Add and edit Blur to board', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(100, 100);
await designPanelPage.clickAddBlurButton();
await designPanelPage.changeValueForBlur('55');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-blur.png', {
mask: [mainPage.guides],
});
});
mainTest('CO-14 Add, edit and delete Stroke to board', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddStrokeButton();
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-default.png",
'board-stroke-default.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeStrokeSettings(
"#43E50B",
"60",
"10",
"Inside",
"Dotted",
'#43E50B',
'60',
'10',
'Inside',
'Dotted',
);
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-inside-dotted.png",
'board-stroke-inside-dotted.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"80",
"5",
"Outside",
"Dashed",
'#F5358F',
'80',
'5',
'Outside',
'Dashed',
);
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-outside-dashed.png",
'board-stroke-outside-dashed.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"100",
"3",
"Center",
"Solid",
'#F5358F',
'100',
'3',
'Center',
'Solid',
);
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-center-solid.png",
'board-stroke-center-solid.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"40",
"4",
"Center",
"Mixed",
'#F5358F',
'40',
'4',
'Center',
'Mixed',
);
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-center-mixed.png",
'board-stroke-center-mixed.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.removeStroke();
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-stroke-remove.png",
'board-stroke-remove.png',
{
mask: [mainPage.guides],
},
);
},
);
});
mainTest("CO-25-1 Delete board via rightclick", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaRightClick();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("empty-canvas.png");
});
mainTest('CO-25-1 Delete board via rightclick', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaRightClick();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('empty-canvas.png');
});
mainTest("CO-25-2 Delete board via shortcut Del", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("empty-canvas.png");
});
mainTest('CO-25-2 Delete board via shortcut Del', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('empty-canvas.png');
});
mainTest("CO-28 Add rotation to board", async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeRotationForLayer("90");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-rotated-90.png");
await designPanelPage.changeRotationForLayer("120");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-rotated-120.png");
await designPanelPage.changeRotationForLayer("45");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-rotated-45.png");
await designPanelPage.changeRotationForLayer("360");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board-rotated-359.png");
});
mainTest('CO-28 Add rotation to board', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.changeRotationForLayer('90');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-rotated-90.png');
await designPanelPage.changeRotationForLayer('120');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-rotated-120.png');
await designPanelPage.changeRotationForLayer('45');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-rotated-45.png');
await designPanelPage.changeRotationForLayer('360');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board-rotated-359.png');
});
mainTest("CO-29 Change border radius multiple values", async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickIndividualCornersRadiusButton();
await designPanelPage.changeIndependentCorners("30", "60", "90", "120");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"board-changed-corners.png",
{
mainTest('CO-29 Change border radius multiple values', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickIndividualCornersRadiusButton();
await designPanelPage.changeIndependentCorners('30', '60', '90', '120');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'board-changed-corners.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeIndependentCorners('0', '0', '0', '0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('board.png', {
mask: [mainPage.guides],
});
});
mainTest.skip(
"CO-56 Click 'Focus off' board from shortcut F",
async ({ page }) => {
// todo bug 6359 > need to update after fix
const mainPage = new MainPage(page);
await mainPage.focusBoardViaRightClickOnCanvas('Board');
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab('Board', true);
await mainPage.isFocusModeOn();
await expect(page).toHaveScreenshot('board-single-focus-on.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.focusLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab('Board', true);
await mainPage.isFocusModeOff();
await expect(page).toHaveScreenshot('board-single-focus-off.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
},
);
await designPanelPage.changeIndependentCorners("0", "0", "0", "0");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("board.png", {
mask: [mainPage.guides],
mainTest('CO-411 Search board - ignore case', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
await mainPage.doubleClickCreatedBoardTitleOnCanvas();
await layersPanelPage.renameCreatedLayer('Test');
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isBoardNameDisplayed('Test');
await layersPanelPage.searchLayer('test');
await layersPanelPage.isLayerSearched('Test');
});
});
mainTest(
"CO-33 Zoom to board by double click board icon on the list",
async ({ page }) => {
test.describe(() => {
test.beforeEach(async ({ page }, testInfo) => {
testInfo.setTimeout(testInfo.timeout + 15000);
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = "Board #1";
const board2 = "Board #2";
const board1 = 'Board #1';
const board2 = 'Board #2';
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(100, 150);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await mainPage.doubleClickBoardTitleOnCanvas('Board');
await layersPanelPage.renameCreatedLayer(board1);
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(250, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await mainPage.doubleClickBoardTitleOnCanvas('Board');
await layersPanelPage.renameCreatedLayer(board2);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.doubleClickLayerIconOnLayersTab(board1);
await expect(mainPage.viewport).toHaveScreenshot("board-first-zoom.png", {
mask: [mainPage.guides],
});
await layersPanelPage.doubleClickLayerIconOnLayersTab(board2);
await expect(mainPage.viewport).toHaveScreenshot("board-second-zoom.png", {
mask: [mainPage.guides],
});
},
);
});
mainTest(
"CO-34 Hide and show board from rightclick and icons",
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = "Board #1";
const board2 = "Board #2";
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(100, 150);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await layersPanelPage.renameCreatedLayer(board1);
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(250, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await layersPanelPage.renameCreatedLayer(board2);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board1);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot("board-first-hide.png", {
mask: [mainPage.guides, mainPage.usersSection],
});
await mainPage.hideLayerViaRightClickOnCanvas(board2);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot("board-second-hide.png", {
mask: [mainPage.guides, mainPage.usersSection],
});
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board2, false);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot("board-second-show.png", {
mask: [mainPage.guides, mainPage.usersSection],
});
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board1, false);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot("board-first-show.png", {
mask: [mainPage.guides, mainPage.usersSection],
});
},
);
mainTest(
'CO-33 Zoom to board by double click board icon on the list',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = 'Board #1';
const board2 = 'Board #2';
await layersPanelPage.doubleClickLayerIconOnLayersTab(board1);
await expect(mainPage.viewport).toHaveScreenshot('board-first-zoom.png', {
mask: [mainPage.guides],
});
await layersPanelPage.doubleClickLayerIconOnLayersTab(board2);
await expect(mainPage.viewport).toHaveScreenshot(
'board-second-zoom.png',
{
mask: [mainPage.guides],
},
);
},
);
mainTest.skip(
"CO-53 Click 'Focus on' board from right click",
async ({ page }) => {
//todo issue 6359
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = "Board #1";
const board2 = "Board #2";
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(100, 150);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await layersPanelPage.renameCreatedLayer(board1);
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportByCoordinates(250, 300);
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickBoardTitleOnCanvas("Board");
await layersPanelPage.renameCreatedLayer(board2);
await mainPage.waitForChangeIsSaved();
mainTest(
'CO-34 Hide and show board from rightclick and icons',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = 'Board #1';
const board2 = 'Board #2';
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board1);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot('board-first-hide.png', {
mask: [mainPage.guides, mainPage.usersSection],
});
await mainPage.hideLayerViaRightClickOnCanvas(board2);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot('board-second-hide.png', {
mask: [mainPage.guides, mainPage.usersSection],
});
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board2, false);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot('board-second-show.png', {
mask: [mainPage.guides, mainPage.usersSection],
});
await layersPanelPage.hideUnhideLayerByIconOnLayersTab(board1, false);
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot('board-first-show.png', {
mask: [mainPage.guides, mainPage.usersSection],
});
},
);
await mainPage.focusBoardViaRightClickOnCanvas(board2);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab(board1, false);
await layersPanelPage.isLayerPresentOnLayersTab(board2, true);
await layersPanelPage.isFocusModeOn();
await expect(page).toHaveScreenshot("board-second-focus-on.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await layersPanelPage.clickOnFocusModeLabel();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab(board1, true);
await layersPanelPage.isLayerPresentOnLayersTab(board2, true);
await layersPanelPage.isFocusModeOff();
await expect(page).toHaveScreenshot("board-second-focus-off.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.focusLayerViaRightClickOnLayersTab(board1);
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab(board1, true);
await mainPage.isLayerPresentOnLayersTab(board2, false);
await mainPage.isFocusModeOn();
await expect(page).toHaveScreenshot("board-first-focus-on.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.clickOnFocusModeLabel();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab(board1, true);
await mainPage.isLayerPresentOnLayersTab(board2, true);
await mainPage.isFocusModeOff();
await expect(page).toHaveScreenshot("board-first-focus-off.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
},
);
mainTest.skip(
"CO-56 Click 'Focus off' board from shortcut F",
async ({ page }) => {
// todo issue 6359
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.focusBoardViaRightClickOnCanvas("Board");
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab("Board", true);
await mainPage.isFocusModeOn();
await expect(page).toHaveScreenshot("board-single-focus-on.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
maxDiffPixels: 5,
});
await mainPage.focusLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab("Board", true);
await mainPage.isFocusModeOff();
await expect(page).toHaveScreenshot("board-single-focus-off.png", {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
maxDiffPixels: 5,
});
},
);
mainTest("CO-411 Search board - ignore case", async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.doubleClickCreatedBoardTitleOnCanvas();
await layersPanelPage.renameCreatedLayer("Test");
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isBoardNameDisplayed("Test");
await layersPanelPage.searchLayer("test");
await layersPanelPage.isLayerSearched("Test");
mainTest.skip(
"CO-53 Click 'Focus on' board from right click",
async ({ page }) => {
// todo bug 6359 > need to update after fix
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const board1 = 'Board #1';
const board2 = 'Board #2';
await mainPage.focusBoardViaRightClickOnCanvas(board2);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab(board1, false);
await layersPanelPage.isLayerPresentOnLayersTab(board2, true);
await layersPanelPage.isFocusModeOn();
await expect(page).toHaveScreenshot('board-second-focus-on.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await layersPanelPage.clickOnFocusModeLabel();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab(board1, true);
await layersPanelPage.isLayerPresentOnLayersTab(board2, true);
await layersPanelPage.isFocusModeOff();
await expect(page).toHaveScreenshot('board-second-focus-off.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.focusLayerViaRightClickOnLayersTab(board1);
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab(board1, true);
await mainPage.isLayerPresentOnLayersTab(board2, false);
await mainPage.isFocusModeOn();
await expect(page).toHaveScreenshot('board-first-focus-on.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.clickOnFocusModeLabel();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayerPresentOnLayersTab(board1, true);
await mainPage.isLayerPresentOnLayersTab(board2, true);
await mainPage.isFocusModeOff();
await expect(page).toHaveScreenshot('board-first-focus-off.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
},
);
});

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/chrome/board-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/firefox/board-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tests/composition/composition-board.spec.js-snapshots/webkit/board-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 14 KiB

58
tests/composition/composition-comments.spec.js
View File

@ -1,12 +1,14 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect, test } = require("@playwright/test");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { random } = require("../../helpers/string-generator");
const { CommentsPanelPage } = require("../../pages/workspace/comments-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { expect, test } = require('@playwright/test');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { random } = require('../../helpers/string-generator');
const {
CommentsPanelPage,
} = require('../../pages/workspace/comments-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -31,47 +33,47 @@ test.describe(() => {
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.clickCreateCommentButton();
await mainPage.clickViewportTwice();
await commentsPanelPage.enterCommentText("Test Comment");
await commentsPanelPage.enterCommentText('Test Comment');
await commentsPanelPage.clickPostCommentButton();
});
mainTest("CO-339 Create comment from toolbar", async ({ page }) => {
const comment = "Test Comment";
mainTest('CO-339 Create comment from toolbar', async ({ page }) => {
const comment = 'Test Comment';
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.isCommentDisplayedInPopUp(comment);
await commentsPanelPage.isCommentDisplayedInCommentsPanel(comment);
await expect(page).toHaveScreenshot("comment-opened-pop-up.png", {
await expect(page).toHaveScreenshot('comment-opened-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
await commentsPanelPage.clickCreateCommentButton();
await commentsPanelPage.isCommentThreadIconDisplayed();
await expect(page).toHaveScreenshot("comment-closed-pop-up.png", {
await expect(page).toHaveScreenshot('comment-closed-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
});
mainTest(
"CO-346 Reply comment with valid text using Latin alphabet",
'CO-346 Reply comment with valid text using Latin alphabet',
async ({ page }) => {
const replyComment =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry";
'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.enterReplyText(replyComment);
await commentsPanelPage.clickPostCommentButton();
await commentsPanelPage.isCommentReplyDisplayedInPopUp(replyComment);
await commentsPanelPage.isCommentReplyDisplayedInCommentsPanel();
await expect(page).toHaveScreenshot("comment-reply.png", {
await expect(page).toHaveScreenshot('comment-reply.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
},
);
mainTest(
"CO-351 Edit comment with valid text using Latin alphabet",
'CO-351 Edit comment with valid text using Latin alphabet',
async ({ page }) => {
const editedComment = "Edited Test Comment";
const editedComment = 'Edited Test Comment';
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.clickCommentOptionsButton();
@ -84,13 +86,13 @@ test.describe(() => {
await commentsPanelPage.isCommentDisplayedInCommentsPanel(editedComment);
await commentsPanelPage.clickCommentThreadIcon();
await commentsPanelPage.isCommentDisplayedInPopUp(editedComment);
await expect(page).toHaveScreenshot("comment-edited.png", {
await expect(page).toHaveScreenshot('comment-edited.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
},
);
mainTest("CO-356 Delete thread", async ({ page }) => {
mainTest('CO-356 Delete thread', async ({ page }) => {
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.clickCommentOptionsButton();
@ -100,33 +102,33 @@ test.describe(() => {
await commentsPanelPage.isCommentsPanelPlaceholderDisplayed(
"You're all caught up! New comment notifications will appear here.",
);
await expect(page).toHaveScreenshot("comment-removed.png", {
await expect(page).toHaveScreenshot('comment-removed.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
});
mainTest("CO-360 Resolve comment", async ({ page }) => {
mainTest('CO-360 Resolve comment', async ({ page }) => {
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.clickResolveCommentCheckbox();
await commentsPanelPage.clickCreateCommentButton();
await commentsPanelPage.isCommentResolvedThreadIconDisplayed();
await expect(page).toHaveScreenshot("comment-resolved-closed-pop-up.png", {
await expect(page).toHaveScreenshot('comment-resolved-closed-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
await commentsPanelPage.clickResolvedCommentThreadIcon();
await commentsPanelPage.isResolveCommentCheckboxSelected();
await expect(page).toHaveScreenshot("comment-resolved-opened-pop-up.png", {
await expect(page).toHaveScreenshot('comment-resolved-opened-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
});
});
mainTest(
"CO-341 Post comment with valid text using Latin alphabet",
'CO-341 Post comment with valid text using Latin alphabet',
async ({ page }) => {
const comment =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
const mainPage = new MainPage(page);
const commentsPanelPage = new CommentsPanelPage(page);
await commentsPanelPage.clickCreateCommentButton();
@ -135,12 +137,12 @@ mainTest(
await commentsPanelPage.clickPostCommentButton();
await commentsPanelPage.isCommentDisplayedInPopUp(comment);
await commentsPanelPage.isCommentDisplayedInCommentsPanel(comment);
await expect(page).toHaveScreenshot("comment-latin-opened-pop-up.png", {
await expect(page).toHaveScreenshot('comment-latin-opened-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
await commentsPanelPage.clickCreateCommentButton();
await commentsPanelPage.isCommentThreadIconDisplayed();
await expect(page).toHaveScreenshot("comment-latin-closed-pop-up.png", {
await expect(page).toHaveScreenshot('comment-latin-closed-pop-up.png', {
mask: [commentsPanelPage.commentsAuthorSection, mainPage.usersSection],
});
},

30
tests/composition/composition-curve.spec.js
View File

@ -1,13 +1,13 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { expect } = require("@playwright/test");
const { test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { LayersPanelPage } = require("../../pages/workspace/layers-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { expect } = require('@playwright/test');
const { test } = require('@playwright/test');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { LayersPanelPage } = require('../../pages/workspace/layers-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -30,27 +30,27 @@ test.describe(() => {
// All tests in this describe group will get 2 retry attempts.
test.describe.configure({ retries: 2 });
mainTest("CO-268 Create curve line from toolbar", async ({ page }) => {
mainTest('CO-268 Create curve line from toolbar', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.clickCreateCurveButton();
await mainPage.drawCurve(900, 300, 600, 200);
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await expect(mainPage.viewport).toHaveScreenshot("curve.png");
await expect(mainPage.viewport).toHaveScreenshot('curve.png');
});
mainTest(
"CO-270 Rename path, that was created with curve with valid name",
'CO-270 Rename path, that was created with curve with valid name',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
await mainPage.clickCreateCurveButton();
await mainPage.drawCurve(900, 300, 600, 200);
await mainPage.waitForChangeIsSaved();
await layersPanelPage.doubleClickLayerOnLayersTab();
await layersPanelPage.renameCreatedLayer("renamed curve");
await layersPanelPage.doubleClickLayerOnLayersTab('Path');
await layersPanelPage.renameCreatedLayer('renamed curve');
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerNameDisplayed("renamed curve");
await layersPanelPage.isLayerNameDisplayed('renamed curve');
},
);
});

186
tests/composition/composition-ellipse.spec.js
View File

@ -1,14 +1,16 @@
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { ColorPalettePage } = require("../../pages/workspace/color-palette-page");
const { expect, test } = require("@playwright/test");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { LayersPanelPage } = require("../../pages/workspace/layers-panel-page");
const { DesignPanelPage } = require("../../pages/workspace/design-panel-page");
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const {
ColorPalettePage,
} = require('../../pages/workspace/color-palette-page');
const { expect, test } = require('@playwright/test');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const { LayersPanelPage } = require('../../pages/workspace/layers-panel-page');
const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -35,30 +37,30 @@ test.describe(() => {
await mainPage.waitForChangeIsSaved();
});
mainTest("CO-112 Create an ellipse from toolbar", async ({ page }) => {
mainTest('CO-112 Create an ellipse from toolbar', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await expect(mainPage.viewport).toHaveScreenshot("ellipse.png");
await expect(mainPage.viewport).toHaveScreenshot('ellipse.png');
});
mainTest("CO-114 Rename ellipse with valid name", async ({ page }) => {
mainTest('CO-114 Rename ellipse with valid name', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
await layersPanelPage.doubleClickLayerOnLayersTab();
await layersPanelPage.renameCreatedLayer("renamed ellipse");
await layersPanelPage.doubleClickLayerOnLayersTab('Ellipse');
await layersPanelPage.renameCreatedLayer('renamed ellipse');
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerNameDisplayed("renamed ellipse");
await layersPanelPage.isLayerNameDisplayed('renamed ellipse');
});
mainTest(
"CO-117 Add, hide, unhide, change type and delete Shadow to ellipse",
'CO-117 Add, hide, unhide, change type and delete Shadow to ellipse',
async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddShadowButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-drop-shadow-default.png",
'ellipse-drop-shadow-default.png',
{
mask: [mainPage.guides],
},
@ -66,7 +68,7 @@ test.describe(() => {
await designPanelPage.hideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-drop-shadow-hide.png",
'ellipse-drop-shadow-hide.png',
{
mask: [mainPage.guides],
},
@ -74,15 +76,15 @@ test.describe(() => {
await designPanelPage.unhideShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-drop-shadow-unhide.png",
'ellipse-drop-shadow-unhide.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.selectTypeForShadow("Inner shadow");
await designPanelPage.selectTypeForShadow('Inner shadow');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-inner-shadow-default.png",
'ellipse-inner-shadow-default.png',
{
mask: [mainPage.guides],
},
@ -90,7 +92,7 @@ test.describe(() => {
await designPanelPage.removeShadow();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-inner-shadow-remove.png",
'ellipse-inner-shadow-remove.png',
{
mask: [mainPage.guides],
},
@ -98,43 +100,44 @@ test.describe(() => {
},
);
mainTest("CO-118 Add and edit Shadow to ellipse", async ({ page }) => {
mainTest('CO-118 Add and edit Shadow to ellipse', async ({ page }) => {
test.setTimeout(60000);
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddShadowButton();
await designPanelPage.clickShadowActionsButton();
await designPanelPage.changeShadowSettings("10", "15", "10", "20", "50");
await designPanelPage.changeShadowSettings('10', '15', '10', '20', '50');
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex("#304d6a");
await colorPalettePage.setHex('#304d6a');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-drop-shadow.png");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-drop-shadow.png');
await designPanelPage.selectTypeForShadow("Inner shadow");
await designPanelPage.changeShadowSettings("5", "7", "9", "12", "25");
await designPanelPage.selectTypeForShadow('Inner shadow');
await designPanelPage.changeShadowSettings('5', '7', '9', '12', '25');
await designPanelPage.clickShadowColorIcon();
await colorPalettePage.setHex("#96e637");
await colorPalettePage.setHex('#96e637');
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-inner-shadow.png",
'ellipse-inner-shadow.png',
);
});
mainTest(
"CO-119 Add, hide, unhide and delete Blur to ellipse",
'CO-119 Add, hide, unhide and delete Blur to ellipse',
async ({ page }) => {
const mainPage = new MainPage(page);
const colorPalettePage = new ColorPalettePage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickFillColorIcon();
await colorPalettePage.setHex("#304d6a");
await colorPalettePage.setHex('#304d6a');
await mainPage.waitForChangeIsSaved();
await designPanelPage.clickAddBlurButton();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-blur-default.png",
'ellipse-blur-default.png',
{
mask: [mainPage.guides],
},
@ -142,7 +145,7 @@ test.describe(() => {
await designPanelPage.hideBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-blur-hide.png",
'ellipse-blur-hide.png',
{
mask: [mainPage.guides],
},
@ -150,7 +153,7 @@ test.describe(() => {
await designPanelPage.unhideBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-blur-unhide.png",
'ellipse-blur-unhide.png',
{
mask: [mainPage.guides],
},
@ -158,7 +161,7 @@ test.describe(() => {
await designPanelPage.removeBlur();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-blur-remove.png",
'ellipse-blur-remove.png',
{
mask: [mainPage.guides],
},
@ -166,26 +169,25 @@ test.describe(() => {
},
);
mainTest("CO-120 Add and edit Blur to ellipse", async ({ page }) => {
mainTest('CO-120 Add and edit Blur to ellipse', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddBlurButton();
await designPanelPage.changeValueForBlur("55");
await designPanelPage.changeValueForBlur('55');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-blur.png");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-blur.png');
});
mainTest.skip(
"CO-121 Add, edit and delete Stroke to ellipse",
mainTest(
'CO-121 Add, edit and delete Stroke to ellipse',
async ({ page }) => {
// todo add testid
test.setTimeout(70000);
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.clickAddStrokeButton();
await mainPage.clickViewportOnce();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-default.png",
'ellipse-stroke-default.png',
{
mask: [mainPage.guides],
},
@ -193,15 +195,15 @@ test.describe(() => {
await mainPage.clickOnLayerOnCanvas();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeStrokeSettings(
"#43E50B",
"70",
"13",
"Inside",
"Dotted",
'#43E50B',
'70',
'13',
'Inside',
'Dotted',
);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-inside-dotted.png",
'ellipse-stroke-inside-dotted.png',
{
mask: [mainPage.guides],
},
@ -209,15 +211,15 @@ test.describe(() => {
await mainPage.clickOnLayerOnCanvas();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"80",
"5",
"Outside",
"Dashed",
'#F5358F',
'80',
'5',
'Outside',
'Dashed',
);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-outside-dashed.png",
'ellipse-stroke-outside-dashed.png',
{
mask: [mainPage.guides],
},
@ -225,15 +227,15 @@ test.describe(() => {
await mainPage.clickOnLayerOnCanvas();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"100",
"3",
"Center",
"Solid",
'#F5358F',
'100',
'3',
'Center',
'Solid',
);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-center-solid.png",
'ellipse-stroke-center-solid.png',
{
mask: [mainPage.guides],
},
@ -241,15 +243,15 @@ test.describe(() => {
await mainPage.clickOnLayerOnCanvas();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeStrokeSettings(
"#F5358F",
"40",
"4",
"Center",
"Mixed",
'#F5358F',
'40',
'4',
'Center',
'Mixed',
);
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-center-mixed.png",
'ellipse-stroke-center-mixed.png',
{
mask: [mainPage.guides],
},
@ -259,7 +261,7 @@ test.describe(() => {
await designPanelPage.removeStroke();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"ellipse-stroke-remove.png",
'ellipse-stroke-remove.png',
{
mask: [mainPage.guides],
},
@ -268,75 +270,75 @@ test.describe(() => {
);
mainTest.skip(
//todo issue 6359
// todo bug 6359 > need to update after fix
"CO-126 Click 'Focus off' ellipse from shortcut F",
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
await mainPage.focusLayerViaRightClickOnCanvas();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab("Ellipse", true);
await layersPanelPage.isLayerPresentOnLayersTab('Ellipse', true);
await layersPanelPage.isFocusModeOn();
await expect(page).toHaveScreenshot("ellipse-single-focus-on.png", {
await expect(page).toHaveScreenshot('ellipse-single-focus-on.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
await mainPage.focusLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayerPresentOnLayersTab("Ellipse", true);
await layersPanelPage.isLayerPresentOnLayersTab('Ellipse', true);
await layersPanelPage.isFocusModeOff();
await expect(page).toHaveScreenshot("ellipse-single-focus-off.png", {
await expect(page).toHaveScreenshot('ellipse-single-focus-off.png', {
mask: [mainPage.guides, mainPage.usersSection, mainPage.zoomButton],
});
},
);
mainTest("CO-136-1 Delete ellipse via rightclick", async ({ page }) => {
mainTest('CO-136-1 Delete ellipse via rightclick', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaRightClick();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("empty-canvas.png");
await expect(mainPage.viewport).toHaveScreenshot('empty-canvas.png');
});
mainTest("CO-136-2 Delete ellipse via shortcut Del", async ({ page }) => {
mainTest('CO-136-2 Delete ellipse via shortcut Del', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.isCreatedLayerVisible();
await mainPage.deleteLayerViaShortcut();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("empty-canvas.png");
await expect(mainPage.viewport).toHaveScreenshot('empty-canvas.png');
});
mainTest("CO-138 Add rotation to ellipse", async ({ page }) => {
mainTest('CO-138 Add rotation to ellipse', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.changeRotationForLayer("90");
await designPanelPage.changeRotationForLayer('90');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-rotated-90.png");
await designPanelPage.changeRotationForLayer("120");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-rotated-90.png');
await designPanelPage.changeRotationForLayer('120');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-rotated-120.png");
await designPanelPage.changeRotationForLayer("45");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-rotated-120.png');
await designPanelPage.changeRotationForLayer('45');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-rotated-45.png");
await designPanelPage.changeRotationForLayer("360");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-rotated-45.png');
await designPanelPage.changeRotationForLayer('360');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-rotated-359.png");
await expect(mainPage.viewport).toHaveScreenshot('ellipse-rotated-359.png');
});
mainTest("CO-154 Transform ellipse to path", async ({ page }) => {
mainTest('CO-154 Transform ellipse to path', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.transformToPathViaRightClick();
await mainPage.waitForChangeIsSaved();
await expect(page).toHaveScreenshot("ellipse-to-path.png", {
await expect(page).toHaveScreenshot('ellipse-to-path.png', {
mask: [mainPage.usersSection, mainPage.guides],
});
});
mainTest("CO-161 Selection to board", async ({ page }) => {
mainTest('CO-161 Selection to board', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.selectionToBoardViaRightClick();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("ellipse-to-board.png", {
await expect(mainPage.viewport).toHaveScreenshot('ellipse-to-board.png', {
mask: [mainPage.guides],
});
});

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/chrome/ellipse-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/firefox/ellipse-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-center-mixed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-center-solid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-inside-dotted.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-outside-dashed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
tests/composition/composition-ellipse.spec.js-snapshots/webkit/ellipse-stroke-remove.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 18 KiB

818
tests/composition/composition-flex-layout.spec.js
View File

@ -1,13 +1,13 @@
const { expect, test } = require("@playwright/test");
const { mainTest } = require("../../fixtures");
const { MainPage } = require("../../pages/workspace/main-page");
const { LayersPanelPage } = require("../../pages/workspace/layers-panel-page");
const { DesignPanelPage } = require("../../pages/workspace/design-panel-page");
const { random } = require("../../helpers/string-generator");
const { TeamPage } = require("../../pages/dashboard/team-page");
const { DashboardPage } = require("../../pages/dashboard/dashboard-page");
const { expect, test } = require('@playwright/test');
const { mainTest } = require('../../fixtures');
const { MainPage } = require('../../pages/workspace/main-page');
const { LayersPanelPage } = require('../../pages/workspace/layers-panel-page');
const { DesignPanelPage } = require('../../pages/workspace/design-panel-page');
const { random } = require('../../helpers/string-generator');
const { TeamPage } = require('../../pages/dashboard/team-page');
const { DashboardPage } = require('../../pages/dashboard/dashboard-page');
const teamName = random().concat("autotest");
const teamName = random().concat('autotest');
test.beforeEach(async ({ page }) => {
const teamPage = new TeamPage(page);
@ -26,35 +26,35 @@ test.afterEach(async ({ page }) => {
await teamPage.deleteTeam(teamName);
});
test.describe("Flex Layout & Elements", async () => {
test.describe(() => {
test.beforeEach(async ({ page, browserName }, testInfo) => {
testInfo.setTimeout(testInfo.timeout + 10000);
if (browserName === 'webkit') {
testInfo.setTimeout(testInfo.timeout + 20000);
} else {
testInfo.setTimeout(testInfo.timeout + 15000);
}
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await mainPage.changeHeightAndWidthForLayer("300", "300");
await mainPage.clickCreateRectangleButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateEllipseButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
const designPanelPage = new DesignPanelPage(page);
await mainPage.createDefaultBoardByCoordinates(200, 300);
await designPanelPage.changeHeightAndWidthForLayer('300', '300');
await mainPage.createDefaultEllipseByCoordinates(200, 300);
await mainPage.createDefaultRectangleByCoordinates(200, 300);
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.waitForChangeIsSaved();
});
mainTest(
"FL-1 Add flex layout to board from rightclick",
'FL-1 Add flex layout to board from rightclick',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await designPanelPage.isLayoutRemoveButtonExists();
await expect(mainPage.viewport).toHaveScreenshot(
"board-with-layout.png",
'board-with-layout.png',
{
mask: [mainPage.guides],
},
@ -62,463 +62,410 @@ test.describe("Flex Layout & Elements", async () => {
},
);
mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => {
mainTest('FL-2 Add flex layout to board from shortcut', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.pressFlexLayoutShortcut();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
await layersPanelPage.isLayoutIconVisibleOnLayer();
await designPanelPage.isLayoutRemoveButtonExists();
await expect(mainPage.viewport).toHaveScreenshot('board-with-layout.png', {
mask: [mainPage.guides],
});
});
mainTest(
"FL-4 Remove flex layout from board from rightclick",
'FL-4 Remove flex layout from board from rightclick',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot(
"board-with-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer();
await designPanelPage.isLayoutRemoveButtonExists();
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.removeFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer(false);
await mainPage.isLayoutMenuExpanded(false);
await expect(mainPage.viewport).toHaveScreenshot(
"board-without-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer(false);
await designPanelPage.isLayoutRemoveButtonExists(false);
},
);
mainTest(
"FL-5 Remove flex layout from board from shortcut",
'FL-5 Remove flex layout from board from shortcut',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.pressFlexLayoutShortcut();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot(
"board-with-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer();
await designPanelPage.isLayoutRemoveButtonExists();
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.pressFlexLayoutShortcut();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer(false);
await mainPage.isLayoutMenuExpanded(false);
await expect(mainPage.viewport).toHaveScreenshot(
"board-without-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer(false);
await designPanelPage.isLayoutRemoveButtonExists(false);
},
);
mainTest(
"FL-6 Remove flex layout from board from Design panel",
'FL-6 Remove flex layout from board from Design panel',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot(
"board-with-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer();
await designPanelPage.isLayoutRemoveButtonExists();
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.removeLayoutFromDesignPanel();
await designPanelPage.removeLayoutFromDesignPanel();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer(false);
await mainPage.isLayoutMenuExpanded(false);
await expect(mainPage.viewport).toHaveScreenshot(
"board-without-layout.png",
{
mask: [mainPage.guides],
},
);
await layersPanelPage.isLayoutIconVisibleOnLayer(false);
await designPanelPage.isLayoutRemoveButtonExists(false);
},
);
mainTest("FL-7 Change direction", async ({ page }) => {
mainTest('FL-7 Change direction', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutDirection("Row reverse");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-row-reverse-direction.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutDirection("Column");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-direction.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutDirection("Column reverse");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-reverse-direction.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutDirection("Row");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-row-direction.png",
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-9 Change alignment", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutAlignment("Center");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-align-center.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutAlignment("End");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png", {
mask: [mainPage.guides],
});
await mainPage.changeLayoutAlignment("Start");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png", {
mask: [mainPage.guides],
});
});
mainTest("FL-10 Change justification", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutJustification("Center");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-justify-center.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutJustification("End");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png", {
mask: [mainPage.guides],
});
await mainPage.changeLayoutJustification("Space between");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-justify-space-between.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutJustification("Space around");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-justify-space-around.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutJustification("Space evenly");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-justify-space-evenly.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutJustification("Start");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-justify-start.png",
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-12 Change column gap", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutColumnGap("5");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-gap-5.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutColumnGap("15");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-gap-15.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutColumnGap("0");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-gap-0.png",
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-13 Change row gap", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutDirection("Column");
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutRowGap("5");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-5.png", {
mask: [mainPage.guides],
});
await mainPage.changeLayoutRowGap("15");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png", {
mask: [mainPage.guides],
});
await mainPage.changeLayoutRowGap("0");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png", {
mask: [mainPage.guides],
});
});
mainTest("FL-14 Change single padding", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.changeLayoutVerticalPadding("5");
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutHorizontalPadding("15");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-padding-5-15.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutHorizontalPadding("0");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-horizontal_padding-0.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutVerticalPadding("0");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-vertical_padding-0.png",
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-15 Change multiple padding", async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.switchToIndependentPadding();
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutTopPadding("10");
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutLeftPadding("15");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-top-left-padding-10-15.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutJustification("End");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-top-left-padding-10-15-justify.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutRightPadding("20");
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutAlignment("End");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-top-left-right-padding-justify-align.png",
{
mask: [mainPage.guides],
},
);
await mainPage.changeLayoutBottomPadding("25");
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-top-left-right-bottom-padding.png",
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-21 Flex elements change - alignment", async ({ page }) => {
const mainPage = new MainPage(page);
const layersPage = new LayersPanelPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
mask: [mainPage.guides],
});
await layersPage.selectBoardChildRect();
await designPanelPage.waitFlexElementSectionExpanded();
await designPanelPage.changeFlexElementAlignment("Center");
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutDirection('Row reverse');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-align-center.png",
'layout-row-reverse-direction.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementAlignment("End");
await designPanelPage.changeLayoutDirection('Column');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-align-end.png",
'layout-column-direction.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementAlignment("Start");
await designPanelPage.changeLayoutDirection('Column reverse');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-align-start.png",
'layout-column-reverse-direction.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutDirection('Row');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-row-direction.png',
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-22 Flex elements - change margin single", async ({ page }) => {
mainTest('FL-9 Change alignment', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPage = new LayersPanelPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await mainPage.isLayoutIconVisibleOnLayer();
await mainPage.isLayoutMenuExpanded();
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png", {
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutAlignment('Center');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-align-center.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutAlignment('End');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-align-end.png', {
mask: [mainPage.guides],
});
await designPanelPage.changeLayoutAlignment('Start');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-align-start.png', {
mask: [mainPage.guides],
});
});
await layersPage.selectBoardChildRect();
await designPanelPage.waitFlexElementSectionExpanded();
await designPanelPage.changeFlexElementVerticalMargin("10");
mainTest('FL-10 Change justification', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeFlexElementHorizontalMargin("25");
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutJustification('Center');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-margin-10-25.png",
'layout-justify-center.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementVerticalMargin("0");
await designPanelPage.changeLayoutJustification('End');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-justify-end.png', {
mask: [mainPage.guides],
});
await designPanelPage.changeLayoutJustification('Space between');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-margin-vert-0.png",
'layout-justify-space-between.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementHorizontalMargin("0");
await designPanelPage.changeLayoutJustification('Space around');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-margin-horizont-0.png",
'layout-justify-space-around.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutJustification('Space evenly');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-justify-space-evenly.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutJustification('Start');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-justify-start.png',
{
mask: [mainPage.guides],
},
);
});
mainTest('FL-12 Change column gap', async ({ page }) => {
const mainPage = new MainPage(page);
const designPanelPage = new DesignPanelPage(page);
const layersPanelPage = new LayersPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutColumnGap('5');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-column-gap-5.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutColumnGap('15');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-column-gap-15.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutColumnGap('0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-column-gap-0.png',
{
mask: [mainPage.guides],
},
);
});
mainTest('FL-13 Change row gap', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutDirection('Column');
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeLayoutRowGap('5');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-row-gap-5.png', {
mask: [mainPage.guides],
});
await designPanelPage.changeLayoutRowGap('15');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-row-gap-15.png', {
mask: [mainPage.guides],
});
await designPanelPage.changeLayoutRowGap('0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot('layout-row-gap-0.png', {
mask: [mainPage.guides],
});
});
mainTest('FL-14 Change single padding', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.changeLayoutPadding('Vertical', '5');
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeLayoutPadding('Horizontal', '15');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-padding-5-15.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutPadding('Horizontal', '0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-horizontal_padding-0.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutPadding('Vertical', '0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-vertical_padding-0.png',
{
mask: [mainPage.guides],
},
);
});
mainTest('FL-15 Change multiple padding', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await mainPage.clickCreatedBoardTitleOnCanvas();
await designPanelPage.switchToIndependentPadding();
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeLayoutIndependentPadding('Top', '10');
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeLayoutIndependentPadding('Left', '15');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-top-left-padding-10-15.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutJustification('End');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-top-left-padding-10-15-justify.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutIndependentPadding('Right', '20');
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeLayoutAlignment('End');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-top-left-right-padding-justify-align.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeLayoutIndependentPadding('Bottom', '25');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'layout-top-left-right-bottom-padding.png',
{
mask: [mainPage.guides],
},
);
});
mainTest.skip('FL-21 Flex elements change - alignment', async ({ page }) => {
// todo bug 6389 > need to update after fix
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await layersPanelPage.selectBoardChildLayer('Rectangle');
await designPanelPage.isFlexElementSectionOpened();
await designPanelPage.changeFlexElementAlignment('Center');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-align-center.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementAlignment('End');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-align-end.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementAlignment('Start');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-align-start.png',
{
mask: [mainPage.guides],
},
);
});
mainTest('FL-22 Flex elements - change margin single', async ({ page }) => {
const mainPage = new MainPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
await layersPanelPage.isLayoutIconVisibleOnLayer();
await layersPanelPage.selectBoardChildLayer('Rectangle');
await designPanelPage.isFlexElementSectionOpened();
await designPanelPage.changeFlexElementMargin('Vertical', '10');
await mainPage.waitForChangeIsSaved();
await designPanelPage.changeFlexElementMargin('Horizontal', '25');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-margin-10-25.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementMargin('Vertical', '0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-margin-vert-0.png',
{
mask: [mainPage.guides],
},
);
await designPanelPage.changeFlexElementMargin('Horizontal', '0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
'flex-element-margin-horizont-0.png',
{
mask: [mainPage.guides],
},
@ -526,73 +473,71 @@ test.describe("Flex Layout & Elements", async () => {
});
});
test.describe("Margins & Paddings & Position", async () => {
test.describe(() => {
test.beforeEach(async ({ page, browserName }, testInfo) => {
testInfo.setTimeout(testInfo.timeout + 10000);
if (browserName === 'webkit') {
testInfo.setTimeout(testInfo.timeout + 20000);
} else {
testInfo.setTimeout(testInfo.timeout + 15000);
}
const mainPage = new MainPage(page);
await mainPage.clickCreateBoardButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.isCreatedLayerVisible();
await mainPage.changeHeightAndWidthForLayer("500", "500");
await mainPage.clickCreateEllipseButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateEllipseButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
await mainPage.clickCreateEllipseButton();
await mainPage.clickViewportTwice();
await mainPage.waitForChangeIsSaved();
const designPanelPage = new DesignPanelPage(page);
await mainPage.createDefaultBoardByCoordinates(200, 300);
await designPanelPage.changeHeightAndWidthForLayer('500', '500');
await mainPage.createDefaultEllipseByCoordinates(200, 300);
await mainPage.createDefaultEllipseByCoordinates(200, 300);
await mainPage.createDefaultEllipseByCoordinates(200, 300);
await mainPage.clickCreatedBoardTitleOnCanvas();
await mainPage.addFlexLayoutViaRightClick();
await mainPage.waitForChangeIsSaved();
});
mainTest("FL-37 Set margins and padding to 0", async ({ page }) => {
mainTest('FL-37 Set margins and padding to 0', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.changeLayoutVerticalPadding("0");
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.changeLayoutPadding('Vertical', '0');
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutHorizontalPadding("0");
await designPanelPage.changeLayoutPadding('Horizontal', '0');
await mainPage.waitForChangeIsSaved();
await mainPage.changeLayoutColumnGap("0");
await designPanelPage.changeLayoutColumnGap('0');
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-padding-gap-0.png",
'layout-padding-gap-0.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickLayoutVerticalPaddingField();
await designPanelPage.clickLayoutVerticalPaddingField();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-no-vertical-padding.png",
'layout-padding-gap-0.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickLayoutHorizontalPaddingField();
await designPanelPage.clickLayoutHorizontalPaddingField();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-no-horizont-padding.png",
'layout-padding-gap-0.png',
{
mask: [mainPage.guides],
},
);
await mainPage.clickLayoutColumnGapField();
await designPanelPage.clickLayoutColumnGapField();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-no-column-gap.png",
'layout-padding-gap-0.png',
{
mask: [mainPage.guides],
},
);
});
mainTest("FL-39 Gap click highlight", async ({ page }) => {
mainTest('FL-39 Gap click highlight', async ({ page }) => {
const mainPage = new MainPage(page);
await mainPage.changeLayoutColumnGap("20");
const designPanelPage = new DesignPanelPage(page);
await designPanelPage.changeLayoutColumnGap('20');
await mainPage.waitForChangeIsSaved();
await mainPage.clickLayoutColumnGapField();
await designPanelPage.clickLayoutColumnGapField();
await expect(mainPage.viewport).toHaveScreenshot(
"layout-column-gap-highlighted.png",
'layout-column-gap-highlighted.png',
{
mask: [mainPage.guides],
},
@ -600,20 +545,19 @@ test.describe("Margins & Paddings & Position", async () => {
});
mainTest(
"FL-42 Use absolute position and look if element still inside a board",
'FL-42 Use absolute position and look if element still inside a board',
async ({ page }) => {
const mainPage = new MainPage(page);
const layersPage = new LayersPanelPage(page);
const layersPanelPage = new LayersPanelPage(page);
const designPanelPage = new DesignPanelPage(page);
await layersPage.selectBoardChildEllipse();
await designPanelPage.waitFlexElementSectionExpanded();
await layersPanelPage.selectBoardChildLayer('Ellipse');
await designPanelPage.isFlexElementSectionOpened();
await designPanelPage.setFlexElementPositionAbsolute();
await mainPage.waitForChangeIsSaved();
await expect(mainPage.viewport).toHaveScreenshot(
"flex-element-position-absolute.png",
await expect(page).toHaveScreenshot(
'flex-element-position-absolute.png',
{
mask: [mainPage.guides],
mask: [mainPage.guides, mainPage.usersSection],
},
);
},

Some files were not shown because too many files have changed in this diff Show More