Updated tests for composition-flex-layout and dashboard-files

.github/workflows/playwright_pre.yml

@@ -21,7 +21,7 @@ jobs:
           BASE_URL: ${{ secrets.BASE_URL }}
           LOGIN_EMAIL: ${{ secrets.LOGIN_EMAIL }}
           LOGIN_PWD: ${{ secrets.LOGIN_PWD }}
-        run: npx playwright test --project=chrome -gv 'PERF'
+        run: npx playwright test -gv 'PERF'
       - uses: actions/upload-artifact@v3
         if: always()
         with:

pages/dashboard-page.js

@@ -230,15 +230,18 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async deleteFiles() {
-    for (const el of await this.fileInfoPanel.elementHandles()) {
-      await el.click({ button: "right" });
+    let counter = 0;
+    while (await this.fileInfoPanel.count()) {
+      await this.fileInfoPanel.first().click({ button: "right" });
       await this.deleteFileMenuItem.click();
       await this.deleteFileButton.click();
+      counter++;
     }
+    await expect(this.fileInfoPanel).toHaveCount(0);
   }
 
   async deleteFilesIfExist() {
-    await expect(this.numberOfFilesText).toBeVisible();
+    await this.numberOfFilesText.waitFor();
     const text = (await this.numberOfFilesText.innerText()).valueOf();
     if (!text.includes("0 files")) {
       await this.deleteFiles();
@@ -267,6 +270,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
         await this.deleteProjectButton.click();
       }
     }
+    await expect(this.projectNameTitle).toHaveCount(1);
   }
 
   async waitForPageLoaded() {
@@ -275,11 +279,10 @@ exports.DashboardPage = class DashboardPage extends BasePage {
 
   async isDashboardOpened() {
     await this.page.waitForURL(/.*dashboard\/team/, { waitUntil: "load" });
-    await expect(this.page).toHaveTitle(/.*Projects - Your Penpot/);
+    await this.page.waitForResponse(/get-team-recent-files/);
   }
 
   async checkNumberOfFiles(numberOfFiles) {
-    await this.isDashboardOpened();
     await expect(this.numberOfFilesText.first()).toHaveText(numberOfFiles);
   }
 
@@ -331,6 +334,10 @@ exports.DashboardPage = class DashboardPage extends BasePage {
     await expect(this.successMessage).toHaveText(message);
   }
 
+  async waitSuccessMessageHidden() {
+    await this.successMessage.waitFor({ state:"hidden" });
+  }
+
   async isInfoMessageDisplayed(message) {
     await expect(this.infoMessage).toHaveText(message);
   }

pages/main-page.js

@@ -23,7 +23,7 @@ exports.MainPage = class MainPage extends BasePage {
 
     //Viewport
     this.viewport = page.locator('div[class="viewport"]');
-    this.createdLayer = page.locator('div *[id^="shape"] >> nth=0');
+    this.createdLayer = page.locator('div[class="viewport"] [id^="shape"] >> nth=0');
     this.createdBoardTitle = page.locator('g[class="frame-title"] >> nth=0');
     this.textbox = page.locator(
       'div[role="textbox"] div[contenteditable="true"]'
@@ -662,7 +662,7 @@ exports.MainPage = class MainPage extends BasePage {
   }
 
   async waitForChangeIsSaved() {
-    await expect(this.savedChangesIcon).toBeVisible();
+    await this.savedChangesIcon.waitFor({ state: "visible" });
   }
 
   async isCreatedLayerVisible() {
@@ -687,6 +687,12 @@ exports.MainPage = class MainPage extends BasePage {
     await this.clickOnEnter();
   }
 
+  async isLayerAddedToBoard(layer) {
+    const layerSel = await
+      this.page.locator(`ul.element-children li.selected span.element-name:has-text('${layer}')`);
+    await expect(layerSel).toBeVisible();
+  }
+
   async changeHeightAndWidthForLayer(height, width) {
     await this.changeWidthForLayer(width);
     await this.changeHeightForLayer(height);

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

@@ -1,27 +1,33 @@
-const { expect } = require("@playwright/test");
+const { expect, test } = 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.describe("Flex Layout & Elements", async () => {
-    mainTest.beforeEach(async ({ page }, testInfo) => {
-      testInfo.setTimeout(testInfo.timeout + 30000);
-        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();
-    });
+test.describe("Flex Layout & Elements", async () => {
+    test.beforeEach(async ({ page, browserName }, testInfo) => {
+      testInfo.setTimeout(testInfo.timeout + 20000);
+      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();
+      if (browserName !== "webkit") {
+        await mainPage.isLayerAddedToBoard("Rectangle");
+      }
+      await mainPage.clickCreateEllipseButton();
+      await mainPage.clickViewportTwice();
+      await mainPage.waitForChangeIsSaved();
+      if (browserName !== "webkit") {
+        await mainPage.isLayerAddedToBoard("Ellipse");
+      }
+      await mainPage.clickCreatedBoardTitleOnCanvas();
+  });
 
     mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => {
         const mainPage = new MainPage(page);
@@ -482,29 +488,38 @@ mainTest.describe("Flex Layout & Elements", async () => {
 
 });
 
-mainTest.describe("Margins & Paddings & Position", async () => {
-    mainTest.beforeEach(async ({ page }, testInfo) => {
-        testInfo.setTimeout(testInfo.timeout + 30000);
-        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();
-    });
+test.describe("Margins & Paddings & Position", async () => {
+    test.beforeEach(async ({ page, browserName }, testInfo) => {
+      testInfo.setTimeout(testInfo.timeout + 20000);
+      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();
+      if (browserName !== "webkit") {
+        await mainPage.isLayerAddedToBoard("Ellipse");
+      }
+      await mainPage.clickCreateEllipseButton();
+      await mainPage.clickViewportTwice();
+      await mainPage.waitForChangeIsSaved();
+      if (browserName !== "webkit") {
+        await mainPage.isLayerAddedToBoard("Ellipse");
+      }
+      await mainPage.clickCreateEllipseButton();
+      await mainPage.clickViewportTwice();
+      await mainPage.waitForChangeIsSaved();
+      if (browserName !== "webkit") {
+        await mainPage.isLayerAddedToBoard("Ellipse");
+      }
+      await mainPage.clickCreatedBoardTitleOnCanvas();
+      await mainPage.addFlexLayoutViaRightClick();
+      await mainPage.waitForChangeIsSaved();
+  });
 
     mainTest("FL-37 Set margins and padding to 0", async ({ page }) => {
         const mainPage = new MainPage(page);
@@ -551,7 +566,6 @@ mainTest.describe("Margins & Paddings & Position", async () => {
 
     mainTest("FL-42 Use absolute position and look if element still inside a board",
         async ({ page }) => {
-        mainTest.setTimeout(120000);
         const mainPage = new MainPage(page);
         const layersPage = new LayersPage(page);
         const designPanelPage = new DesignPanelPage(page);

tests/dashboard/dashboard-files.spec.js

@@ -43,7 +43,7 @@ dashboardTest(
     await dashboardPage.isSuccessMessageDisplayed(
       "Your file has been duplicated successfully"
     );
-    await dashboardPage.reloadPage();
+    await dashboardPage.waitSuccessMessageHidden();
     await dashboardPage.checkNumberOfFiles("2 files");
   }
 );
@@ -104,6 +104,8 @@ dashboardTest(
     const mainPage = new MainPage(page);
     await mainPage.clickPencilBoxButton();
     await dashboardPage.deleteFileViaRightclick();
+    await dashboardPage.isSuccessMessageDisplayed("Your file has been deleted successfully");
+    await dashboardPage.waitSuccessMessageHidden();
     await dashboardPage.checkNumberOfFiles("0 files");
   }
 );
@@ -311,6 +313,8 @@ dashboardTest(
     const mainPage = new MainPage(page);
     await mainPage.clickPencilBoxButton();
     await dashboardPage.deleteFileViaRightclick();
+    await dashboardPage.isSuccessMessageDisplayed("Your file has been deleted successfully");
+    await dashboardPage.waitSuccessMessageHidden();
     await dashboardPage.checkNumberOfFiles("0 files");
   }
 );
@@ -326,6 +330,8 @@ dashboardTest(
     const mainPage = new MainPage(page);
     await mainPage.clickPencilBoxButton();
     await dashboardPage.deleteFileViaOptionsIcon();
+    await dashboardPage.isSuccessMessageDisplayed("Your file has been deleted successfully");
+    await dashboardPage.waitSuccessMessageHidden();
     await dashboardPage.checkNumberOfFiles("0 files");
   }
 );