Add tests for Flex Layout feature (firefox, chrome, webkit);
fix failed tests for firefox and webkit;
|
@ -208,7 +208,7 @@ exports.MainPage = class MainPage extends BasePage {
|
|||
this.removeLayoutButton = page.locator(
|
||||
'div[class="element-set-title"] button[class="remove-layout"]'
|
||||
);
|
||||
this.layoutMenu = page.locator(
|
||||
this.layoutSection = page.locator(
|
||||
'div[class="element-set-content layout-menu"]'
|
||||
);
|
||||
this.layoutDirectRowBtn = page.locator(
|
||||
|
@ -818,9 +818,9 @@ exports.MainPage = class MainPage extends BasePage {
|
|||
|
||||
async isLayoutMenuExpanded(condition = true) {
|
||||
if (condition === true) {
|
||||
await expect(this.layoutMenu).toBeVisible();
|
||||
await expect(this.layoutSection).toBeVisible();
|
||||
} else {
|
||||
await expect(this.layoutMenu).toBeHidden();
|
||||
await expect(this.layoutSection).toBeHidden();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -895,6 +895,10 @@ exports.MainPage = class MainPage extends BasePage {
|
|||
await this.clickOnEnter();
|
||||
}
|
||||
|
||||
async clickLayoutColumnGapField() {
|
||||
await this.layoutColumnGapInput.click();
|
||||
}
|
||||
|
||||
async changeLayoutRowGap(value) {
|
||||
await this.layoutRowGapInput.fill(value);
|
||||
await this.clickOnEnter();
|
||||
|
@ -910,6 +914,14 @@ exports.MainPage = class MainPage extends BasePage {
|
|||
await this.clickOnEnter();
|
||||
}
|
||||
|
||||
async clickLayoutVerticalPaddingField() {
|
||||
await this.layoutVerticalPaddingInput.click();
|
||||
}
|
||||
|
||||
async clickLayoutHorizontalPaddingField() {
|
||||
await this.layoutHorizontPaddingInput.click();
|
||||
}
|
||||
|
||||
async switchToIndependentPadding() {
|
||||
await this.layoutIndepPaddingsIcon.click();
|
||||
}
|
||||
|
|
57
pages/workspace/design-panel.js
Normal file
|
@ -0,0 +1,57 @@
|
|||
const {expect} = require("@playwright/test");
|
||||
const { BasePage } = require("../base-page");
|
||||
exports.DesignPanelPage = class DesignPanelPage extends BasePage {
|
||||
|
||||
/**
|
||||
* @param {import('@playwright/test').Page} page
|
||||
*/
|
||||
constructor(page) {
|
||||
super(page);
|
||||
|
||||
// 'Flex element' section
|
||||
this.flexElementSection = page.locator('div[class="element-set-content layout-item-menu"]');
|
||||
this.flexElementAlignStartBtn = page.locator('div.layout-item-menu button[alt="Align self start"]');
|
||||
this.flexElementAlignCenterBtn = page.locator('div.layout-item-menu button[alt="Align self center"]');
|
||||
this.flexElementAlignEndBtn = page.locator('div.layout-item-menu button[alt="Align self end"]');
|
||||
this.flexElementMarginVertInput = page.locator(
|
||||
'div[class="margin-row"] div[alt="Vertical margin"] input'
|
||||
);
|
||||
this.flexElementMarginHorizontInput = page.locator(
|
||||
'div[class="margin-row"] div[alt="Horizontal margin"] input'
|
||||
);
|
||||
this.flexElementPositionAbsolute = page.locator('div[class="layout-row"] button[alt="Absolute"]');
|
||||
}
|
||||
|
||||
async waitFlexElementSectionExpanded() {
|
||||
await expect(this.flexElementSection).toBeVisible();
|
||||
}
|
||||
|
||||
async changeFlexElementAlignment(alignment) {
|
||||
switch (alignment) {
|
||||
case 'Start':
|
||||
await this.flexElementAlignStartBtn.click({delay: 2000});
|
||||
break;
|
||||
case 'Center':
|
||||
await this.flexElementAlignCenterBtn.click({delay: 2000});
|
||||
break;
|
||||
case 'End':
|
||||
await this.flexElementAlignEndBtn.click({delay: 2000});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async changeFlexElementVerticalMargin(value) {
|
||||
await this.flexElementMarginVertInput.fill(value);
|
||||
await this.clickOnEnter();
|
||||
}
|
||||
|
||||
async changeFlexElementHorizontalMargin(value) {
|
||||
await this.flexElementMarginHorizontInput.fill(value);
|
||||
await this.clickOnEnter();
|
||||
}
|
||||
|
||||
async setFlexElementPositionAbsolute() {
|
||||
await this.flexElementPositionAbsolute.click();
|
||||
}
|
||||
|
||||
}
|
39
pages/workspace/layers.js
Normal file
|
@ -0,0 +1,39 @@
|
|||
const {expect} = require("@playwright/test");
|
||||
const { BasePage } = require("../base-page");
|
||||
|
||||
exports.LayersPage = class LayersPage extends BasePage {
|
||||
|
||||
/**
|
||||
* @param {import('@playwright/test').Page} page
|
||||
*/
|
||||
constructor(page) {
|
||||
super(page);
|
||||
|
||||
this.layerBoardToggleContentExpand = page.locator('ul.element-list span.toggle-content.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'
|
||||
);
|
||||
}
|
||||
|
||||
async expandBoardOnLayers() {
|
||||
if (!await this.layerBoardToggleContentExpand.isVisible()) {
|
||||
await this.layerBoardToggleContentCollapse.click();
|
||||
await expect(this.layerBoardToggleContentExpand).toBeVisible();
|
||||
}
|
||||
}
|
||||
|
||||
async selectBoardChildRect() {
|
||||
await this.expandBoardOnLayers();
|
||||
await this.layerBoardChildRect.click();
|
||||
}
|
||||
|
||||
async selectBoardChildEllipse() {
|
||||
await this.expandBoardOnLayers();
|
||||
await this.layerBoardChildEllipse.click();
|
||||
}
|
||||
|
||||
}
|
|
@ -12,7 +12,7 @@ const config = {
|
|||
snapshotPathTemplate: `{testDir}/{testFileDir}/{testFileName}-snapshots/{projectName}/{arg}{ext}`,
|
||||
testDir: "./tests",
|
||||
/* Maximum time one test can run for. */
|
||||
timeout: 30 * 1000,
|
||||
timeout: 50 * 1000,
|
||||
expect: {
|
||||
/**
|
||||
* Maximum time expect() should wait for the condition to be met.
|
||||
|
|
|
@ -1,244 +1,391 @@
|
|||
const { expect } = require("@playwright/test");
|
||||
const { mainTest } = require("../../fixtures");
|
||||
const { MainPage } = require("../../pages/main-page");
|
||||
const { LayersPage } = require("../../pages/workspace/layers");
|
||||
const { DesignPanelPage} = require("../../pages/workspace/design-panel");
|
||||
|
||||
mainTest.beforeEach(async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.clickCreateBoardButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isCreatedLayerVisible();
|
||||
await mainPage.changeHeightAndWidthForLayer("300", "300");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreateRectangleButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreateEllipseButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
});
|
||||
mainTest.describe("Flex Layout & Elements", async () => {
|
||||
mainTest.beforeEach(async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.clickCreateBoardButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isCreatedLayerVisible();
|
||||
await mainPage.changeHeightAndWidthForLayer("300", "300");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreateRectangleButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreateEllipseButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
});
|
||||
|
||||
mainTest("FL-1 Add flex layout to board from rightclick", 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");
|
||||
});
|
||||
mainTest("FL-1 Add flex layout to board from rightclick", 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");
|
||||
});
|
||||
|
||||
mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
});
|
||||
mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
});
|
||||
|
||||
mainTest(
|
||||
"FL-4 Remove flex layout from board from rightclick",
|
||||
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");
|
||||
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"
|
||||
mainTest(
|
||||
"FL-4 Remove flex layout from board from rightclick",
|
||||
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");
|
||||
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"
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
mainTest(
|
||||
"FL-5 Remove flex layout from board from shortcut",
|
||||
async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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"
|
||||
mainTest(
|
||||
"FL-5 Remove flex layout from board from shortcut",
|
||||
async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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"
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
mainTest(
|
||||
"FL-6 Remove flex layout from board from Design panel",
|
||||
async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.removeLayoutFromDesignPanel();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer(false);
|
||||
await mainPage.isLayoutMenuExpanded(false);
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"board-without-layout.png"
|
||||
mainTest(
|
||||
"FL-6 Remove flex layout from board from Design panel",
|
||||
async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.removeLayoutFromDesignPanel();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer(false);
|
||||
await mainPage.isLayoutMenuExpanded(false);
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"board-without-layout.png"
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
mainTest("FL-7 Change direction", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutDirection("Row reverse");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-row-reverse-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Column");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-column-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Column reverse");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-column-reverse-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Row");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png");
|
||||
mainTest("FL-7 Change direction", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutDirection("Row reverse");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-row-reverse-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Column");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-column-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Column reverse");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-column-reverse-direction.png"
|
||||
);
|
||||
await mainPage.changeLayoutDirection("Row");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png");
|
||||
});
|
||||
|
||||
mainTest("FL-9 Change alignment", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutAlignment("Center");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png");
|
||||
await mainPage.changeLayoutAlignment("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png");
|
||||
await mainPage.changeLayoutAlignment("Start");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png");
|
||||
});
|
||||
|
||||
mainTest("FL-10 Change justification", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutJustification("Center");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png");
|
||||
await mainPage.changeLayoutJustification("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png");
|
||||
await mainPage.changeLayoutJustification("Space between");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-between.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Space around");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-around.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Space evenly");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-evenly.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Start");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-start.png");
|
||||
});
|
||||
|
||||
mainTest("FL-12 Change column gap", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutColumnGap("5");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-5.png");
|
||||
await mainPage.changeLayoutColumnGap("15");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-15.png");
|
||||
await mainPage.changeLayoutColumnGap("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-0.png");
|
||||
});
|
||||
|
||||
mainTest("FL-13 Change row gap", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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");
|
||||
await mainPage.changeLayoutRowGap("15");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png");
|
||||
await mainPage.changeLayoutRowGap("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png");
|
||||
});
|
||||
|
||||
mainTest("FL-14 Change single padding", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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");
|
||||
await mainPage.changeLayoutHorizontalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-horizontal_padding-0.png"
|
||||
);
|
||||
await mainPage.changeLayoutVerticalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-vertical_padding-0.png"
|
||||
);
|
||||
});
|
||||
|
||||
mainTest("FL-15 Change multiple padding", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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");
|
||||
await mainPage.changeLayoutJustification("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-padding-10-15-justify.png");
|
||||
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");
|
||||
await mainPage.changeLayoutBottomPadding("25");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-right-bottom-padding.png");
|
||||
});
|
||||
|
||||
|
||||
mainTest("FL-21 Flex elements change - alignment", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
const layersPage = new LayersPage(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 layersPage.selectBoardChildRect();
|
||||
await designPanelPage.waitFlexElementSectionExpanded();
|
||||
await designPanelPage.changeFlexElementAlignment("Center");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-center.png");
|
||||
await designPanelPage.changeFlexElementAlignment("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-end.png");
|
||||
await designPanelPage.changeFlexElementAlignment("Start");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-start.png");
|
||||
});
|
||||
|
||||
mainTest("FL-22 Flex elements - change margin single", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
const layersPage = new LayersPage(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 layersPage.selectBoardChildRect();
|
||||
await designPanelPage.waitFlexElementSectionExpanded();
|
||||
await designPanelPage.changeFlexElementVerticalMargin("10");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await designPanelPage.changeFlexElementHorizontalMargin("25");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-10-25.png");
|
||||
await designPanelPage.changeFlexElementVerticalMargin("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-vert-0.png");
|
||||
await designPanelPage.changeFlexElementHorizontalMargin("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-horizont-0.png");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
mainTest("FL-9 Change alignment", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutAlignment("Center");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png");
|
||||
await mainPage.changeLayoutAlignment("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png");
|
||||
await mainPage.changeLayoutAlignment("Start");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png");
|
||||
});
|
||||
mainTest.describe("Margins & Paddings & Position", async () => {
|
||||
mainTest.beforeEach(async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.clickCreateBoardButton();
|
||||
await mainPage.clickViewportTwice();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isCreatedLayerVisible();
|
||||
await mainPage.changeHeightAndWidthForLayer("500", "500");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
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();
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.addFlexLayoutViaRightClick();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
});
|
||||
|
||||
mainTest("FL-10 Change justification", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutJustification("Center");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png");
|
||||
await mainPage.changeLayoutJustification("End");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png");
|
||||
await mainPage.changeLayoutJustification("Space between");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-between.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Space around");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-around.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Space evenly");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-justify-space-evenly.png"
|
||||
);
|
||||
await mainPage.changeLayoutJustification("Start");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-justify-start.png");
|
||||
});
|
||||
mainTest("FL-37 Set margins and padding to 0", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.changeLayoutVerticalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.changeLayoutHorizontalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.changeLayoutColumnGap("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-padding-gap-0.png");
|
||||
await mainPage.clickLayoutVerticalPaddingField();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-no-vertical-padding.png");
|
||||
await mainPage.clickLayoutHorizontalPaddingField();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-no-horizont-padding.png");
|
||||
await mainPage.clickLayoutColumnGapField();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-no-column-gap.png");
|
||||
});
|
||||
|
||||
mainTest("FL-12 Change column gap", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
await mainPage.clickCreatedBoardTitleOnCanvas();
|
||||
await mainPage.changeLayoutColumnGap("5");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-5.png");
|
||||
await mainPage.changeLayoutColumnGap("15");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-15.png");
|
||||
await mainPage.changeLayoutColumnGap("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-0.png");
|
||||
});
|
||||
mainTest("FL-39 Gap click highlight", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.changeLayoutColumnGap("20");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.clickLayoutColumnGapField();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-highlighted.png");
|
||||
});
|
||||
|
||||
mainTest("FL-13 Change row gap", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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");
|
||||
await mainPage.changeLayoutRowGap("15");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png");
|
||||
await mainPage.changeLayoutRowGap("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png");
|
||||
});
|
||||
mainTest("FL-42 Use absolute position and look if element still inside a board",
|
||||
async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
const layersPage = new LayersPage(page);
|
||||
const designPanelPage = new DesignPanelPage(page);
|
||||
|
||||
await layersPage.selectBoardChildEllipse();
|
||||
await designPanelPage.waitFlexElementSectionExpanded();
|
||||
await designPanelPage.setFlexElementPositionAbsolute();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("flex-element-position-absolute.png");
|
||||
});
|
||||
|
||||
mainTest("FL-14 Change single padding", async ({ page }) => {
|
||||
const mainPage = new MainPage(page);
|
||||
await mainPage.pressFlexLayoutShortcut();
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await mainPage.isLayoutIconVisibleOnLayer();
|
||||
await mainPage.isLayoutMenuExpanded();
|
||||
await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
|
||||
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");
|
||||
await mainPage.changeLayoutHorizontalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-horizontal_padding-0.png"
|
||||
);
|
||||
await mainPage.changeLayoutVerticalPadding("0");
|
||||
await mainPage.waitForChangeIsSaved();
|
||||
await expect(mainPage.viewport).toHaveScreenshot(
|
||||
"layout-vertical_padding-0.png"
|
||||
);
|
||||
});
|
||||
|
|
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 18 KiB |