Add tests for Flex Layout feature (firefox, chrome, webkit);

fix failed tests for firefox and webkit;

pages/main-page.js

@@ -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();
   }

pages/workspace/design-panel.js

@@ -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();
+    }
+
+}

pages/workspace/layers.js

@@ -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();
+    }
+
+}

playwright.config.js

@@ -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.

tests/composition/composition-flex-layout.spec.js

@@ -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 }) => {
+mainTest.describe("Flex Layout & Elements", async () => {
-  const mainPage = new MainPage(page);
+    mainTest.beforeEach(async ({ page }) => {
-  await mainPage.clickCreateBoardButton();
+        const mainPage = new MainPage(page);
-  await mainPage.clickViewportTwice();
+        await mainPage.clickCreateBoardButton();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickViewportTwice();
-  await mainPage.isCreatedLayerVisible();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.changeHeightAndWidthForLayer("300", "300");
+        await mainPage.isCreatedLayerVisible();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.changeHeightAndWidthForLayer("300", "300");
-  await mainPage.clickCreateRectangleButton();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.clickViewportTwice();
+        await mainPage.clickCreateRectangleButton();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickViewportTwice();
-  await mainPage.clickCreateEllipseButton();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.clickViewportTwice();
+        await mainPage.clickCreateEllipseButton();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickViewportTwice();
-  await mainPage.clickCreatedBoardTitleOnCanvas();
+        await mainPage.waitForChangeIsSaved();
-});
+        await mainPage.clickCreatedBoardTitleOnCanvas();
+    });
 
-mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => {
+    mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => {
-  const mainPage = new MainPage(page);
+        const mainPage = new MainPage(page);
-  await mainPage.addFlexLayoutViaRightClick();
+        await mainPage.addFlexLayoutViaRightClick();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.isLayoutIconVisibleOnLayer();
-  await mainPage.isLayoutMenuExpanded();
+        await mainPage.isLayoutMenuExpanded();
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-});
+    });
 
-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 mainPage = new MainPage(page);
-  await mainPage.pressFlexLayoutShortcut();
+        await mainPage.pressFlexLayoutShortcut();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.isLayoutIconVisibleOnLayer();
-  await mainPage.isLayoutMenuExpanded();
+        await mainPage.isLayoutMenuExpanded();
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-});
+    });
 
-mainTest(
+    mainTest(
-  "FL-4 Remove flex layout from board from rightclick",
+        "FL-4 Remove flex layout from board from rightclick",
-  async ({ page }) => {
+        async ({ page }) => {
-    const mainPage = new MainPage(page);
+            const mainPage = new MainPage(page);
-    await mainPage.addFlexLayoutViaRightClick();
+            await mainPage.addFlexLayoutViaRightClick();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer();
+            await mainPage.isLayoutIconVisibleOnLayer();
-    await mainPage.isLayoutMenuExpanded();
+            await mainPage.isLayoutMenuExpanded();
-    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+            await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-    await mainPage.clickCreatedBoardTitleOnCanvas();
+            await mainPage.clickCreatedBoardTitleOnCanvas();
-    await mainPage.removeFlexLayoutViaRightClick();
+            await mainPage.removeFlexLayoutViaRightClick();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer(false);
+            await mainPage.isLayoutIconVisibleOnLayer(false);
-    await mainPage.isLayoutMenuExpanded(false);
+            await mainPage.isLayoutMenuExpanded(false);
-    await expect(mainPage.viewport).toHaveScreenshot(
+            await expect(mainPage.viewport).toHaveScreenshot(
-      "board-without-layout.png"
+                "board-without-layout.png"
+            );
+        }
     );
-  }
-);
 
-mainTest(
+    mainTest(
-  "FL-5 Remove flex layout from board from shortcut",
+        "FL-5 Remove flex layout from board from shortcut",
-  async ({ page }) => {
+        async ({ page }) => {
-    const mainPage = new MainPage(page);
+            const mainPage = new MainPage(page);
-    await mainPage.pressFlexLayoutShortcut();
+            await mainPage.pressFlexLayoutShortcut();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer();
+            await mainPage.isLayoutIconVisibleOnLayer();
-    await mainPage.isLayoutMenuExpanded();
+            await mainPage.isLayoutMenuExpanded();
-    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+            await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-    await mainPage.clickCreatedBoardTitleOnCanvas();
+            await mainPage.clickCreatedBoardTitleOnCanvas();
-    await mainPage.pressFlexLayoutShortcut();
+            await mainPage.pressFlexLayoutShortcut();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer(false);
+            await mainPage.isLayoutIconVisibleOnLayer(false);
-    await mainPage.isLayoutMenuExpanded(false);
+            await mainPage.isLayoutMenuExpanded(false);
-    await expect(mainPage.viewport).toHaveScreenshot(
+            await expect(mainPage.viewport).toHaveScreenshot(
-      "board-without-layout.png"
+                "board-without-layout.png"
+            );
+        }
     );
-  }
-);
 
-mainTest(
+    mainTest(
-  "FL-6 Remove flex layout from board from Design panel",
+        "FL-6 Remove flex layout from board from Design panel",
-  async ({ page }) => {
+        async ({ page }) => {
-    const mainPage = new MainPage(page);
+            const mainPage = new MainPage(page);
-    await mainPage.pressFlexLayoutShortcut();
+            await mainPage.pressFlexLayoutShortcut();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer();
+            await mainPage.isLayoutIconVisibleOnLayer();
-    await mainPage.isLayoutMenuExpanded();
+            await mainPage.isLayoutMenuExpanded();
-    await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+            await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-    await mainPage.clickCreatedBoardTitleOnCanvas();
+            await mainPage.clickCreatedBoardTitleOnCanvas();
-    await mainPage.removeLayoutFromDesignPanel();
+            await mainPage.removeLayoutFromDesignPanel();
-    await mainPage.waitForChangeIsSaved();
+            await mainPage.waitForChangeIsSaved();
-    await mainPage.isLayoutIconVisibleOnLayer(false);
+            await mainPage.isLayoutIconVisibleOnLayer(false);
-    await mainPage.isLayoutMenuExpanded(false);
+            await mainPage.isLayoutMenuExpanded(false);
-    await expect(mainPage.viewport).toHaveScreenshot(
+            await expect(mainPage.viewport).toHaveScreenshot(
-      "board-without-layout.png"
+                "board-without-layout.png"
+            );
+        }
     );
-  }
-);
 
-mainTest("FL-7 Change direction", async ({ page }) => {
+    mainTest("FL-7 Change direction", async ({ page }) => {
-  const mainPage = new MainPage(page);
+        const mainPage = new MainPage(page);
-  await mainPage.pressFlexLayoutShortcut();
+        await mainPage.pressFlexLayoutShortcut();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.isLayoutIconVisibleOnLayer();
-  await mainPage.isLayoutMenuExpanded();
+        await mainPage.isLayoutMenuExpanded();
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
-  await mainPage.clickCreatedBoardTitleOnCanvas();
+        await mainPage.clickCreatedBoardTitleOnCanvas();
-  await mainPage.changeLayoutDirection("Row reverse");
+        await mainPage.changeLayoutDirection("Row reverse");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot(
+        await expect(mainPage.viewport).toHaveScreenshot(
-    "layout-row-reverse-direction.png"
+            "layout-row-reverse-direction.png"
-  );
+        );
-  await mainPage.changeLayoutDirection("Column");
+        await mainPage.changeLayoutDirection("Column");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot(
+        await expect(mainPage.viewport).toHaveScreenshot(
-    "layout-column-direction.png"
+            "layout-column-direction.png"
-  );
+        );
-  await mainPage.changeLayoutDirection("Column reverse");
+        await mainPage.changeLayoutDirection("Column reverse");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot(
+        await expect(mainPage.viewport).toHaveScreenshot(
-    "layout-column-reverse-direction.png"
+            "layout-column-reverse-direction.png"
-  );
+        );
-  await mainPage.changeLayoutDirection("Row");
+        await mainPage.changeLayoutDirection("Row");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png");
+        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 }) => {
+mainTest.describe("Margins & Paddings & Position", async () => {
-  const mainPage = new MainPage(page);
+    mainTest.beforeEach(async ({ page }) => {
-  await mainPage.pressFlexLayoutShortcut();
+        const mainPage = new MainPage(page);
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickCreateBoardButton();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.clickViewportTwice();
-  await mainPage.isLayoutMenuExpanded();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await mainPage.isCreatedLayerVisible();
-  await mainPage.clickCreatedBoardTitleOnCanvas();
+        await mainPage.changeHeightAndWidthForLayer("500", "500");
-  await mainPage.changeLayoutAlignment("Center");
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickCreateEllipseButton();
-  await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png");
+        await mainPage.clickViewportTwice();
-  await mainPage.changeLayoutAlignment("End");
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickCreateEllipseButton();
-  await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png");
+        await mainPage.clickViewportTwice();
-  await mainPage.changeLayoutAlignment("Start");
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickCreateEllipseButton();
-  await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png");
+        await mainPage.clickViewportTwice();
-});
+        await mainPage.waitForChangeIsSaved();
+        await mainPage.clickCreatedBoardTitleOnCanvas();
+        await mainPage.addFlexLayoutViaRightClick();
+        await mainPage.waitForChangeIsSaved();
+    });
 
-mainTest("FL-10 Change justification", async ({ page }) => {
+    mainTest("FL-37 Set margins and padding to 0", async ({ page }) => {
-  const mainPage = new MainPage(page);
+        const mainPage = new MainPage(page);
-  await mainPage.pressFlexLayoutShortcut();
+        await mainPage.changeLayoutVerticalPadding("0");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.changeLayoutHorizontalPadding("0");
-  await mainPage.isLayoutMenuExpanded();
+        await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await mainPage.changeLayoutColumnGap("0");
-  await mainPage.clickCreatedBoardTitleOnCanvas();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.changeLayoutJustification("Center");
+        await expect(mainPage.viewport).toHaveScreenshot("layout-padding-gap-0.png");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.clickLayoutVerticalPaddingField();
-  await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png");
+        await expect(mainPage.viewport).toHaveScreenshot("layout-no-vertical-padding.png");
-  await mainPage.changeLayoutJustification("End");
+        await mainPage.clickLayoutHorizontalPaddingField();
-  await mainPage.waitForChangeIsSaved();
+        await expect(mainPage.viewport).toHaveScreenshot("layout-no-horizont-padding.png");
-  await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png");
+        await mainPage.clickLayoutColumnGapField();
-  await mainPage.changeLayoutJustification("Space between");
+        await expect(mainPage.viewport).toHaveScreenshot("layout-no-column-gap.png");
-  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 }) => {
+    mainTest("FL-39 Gap click highlight", async ({ page }) => {
-  const mainPage = new MainPage(page);
+        const mainPage = new MainPage(page);
-  await mainPage.pressFlexLayoutShortcut();
+        await mainPage.changeLayoutColumnGap("20");
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.isLayoutIconVisibleOnLayer();
+        await mainPage.clickLayoutColumnGapField();
-  await mainPage.isLayoutMenuExpanded();
+        await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-highlighted.png");
-  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 }) => {
+    mainTest("FL-42 Use absolute position and look if element still inside a board",
-  const mainPage = new MainPage(page);
+        async ({ page }) => {
-  await mainPage.pressFlexLayoutShortcut();
+        const mainPage = new MainPage(page);
-  await mainPage.waitForChangeIsSaved();
+        const layersPage = new LayersPage(page);
-  await mainPage.isLayoutIconVisibleOnLayer();
+        const designPanelPage = new DesignPanelPage(page);
-  await mainPage.isLayoutMenuExpanded();
+
-  await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png");
+        await layersPage.selectBoardChildEllipse();
-  await mainPage.clickCreatedBoardTitleOnCanvas();
+        await designPanelPage.waitFlexElementSectionExpanded();
-  await mainPage.changeLayoutDirection("Column");
+        await designPanelPage.setFlexElementPositionAbsolute();
-  await mainPage.waitForChangeIsSaved();
+        await mainPage.waitForChangeIsSaved();
-  await mainPage.changeLayoutRowGap("5");
+        await expect(mainPage.viewport).toHaveScreenshot("flex-element-position-absolute.png");
-  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"
-  );
 });