Update playwright version, update snapshots with adding mask, fix issue with page loading, fix failed tests

fixtures.js

@@ -10,6 +10,7 @@ const mainTest = base.test.extend({
     await loginPage.enterPwd(process.env.LOGIN_PWD);
     await loginPage.clickLoginButton();
     const dashboardPage = new DashboardPage(page);
+    await dashboardPage.isDashboardOpened();
     await dashboardPage.isHeaderDisplayed("Projects");
     await dashboardPage.deleteProjectsIfExist();
     await dashboardPage.deleteFilesIfExist();
@@ -26,7 +27,7 @@ const dashboardTest = base.test.extend({
     await loginPage.enterPwd(process.env.LOGIN_PWD);
     await loginPage.clickLoginButton();
     const dashboardPage = new DashboardPage(page);
-    await dashboardPage.waitForPageLoaded();
+    await dashboardPage.isDashboardOpened();
     await dashboardPage.isHeaderDisplayed("Projects");
     await dashboardPage.deleteProjectsIfExist();
     await dashboardPage.deleteFilesIfExist();

package-lock.json

@@ -12,24 +12,24 @@
         "prettier": "^2.7.1"
       },
       "devDependencies": {
-        "@playwright/test": "^1.34.3",
+        "@playwright/test": "^1.35.1",
         "dotenv": "^16.0.3"
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.34.3"
+        "playwright-core": "1.35.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
@@ -65,15 +65,15 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16"
       }
     },
     "node_modules/prettier": {
@@ -93,14 +93,14 @@
   },
   "dependencies": {
     "@playwright/test": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.34.3"
+        "playwright-core": "1.35.1"
       }
     },
     "@types/node": {
@@ -123,9 +123,9 @@
       "optional": true
     },
     "playwright-core": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
       "dev": true
     },
     "prettier": {

package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/penpot/penpotqa#readme",
   "devDependencies": {
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.35.1",
     "dotenv": "^16.0.3"
   },
   "dependencies": {

pages/dashboard-page.js

@@ -16,14 +16,14 @@ exports.DashboardPage = class DashboardPage extends BasePage {
     );
     this.fileTile = page.locator('div[class="grid-item-th"]');
     this.secondFileTile = page.locator('div[class="grid-item-th"] >>nth=1');
-    this.fileInfoPanel = page.locator('div[class="item-info"]');
+    this.fileInfoPanel = 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(
       'input[value="Delete files"],input[value="Delete file"]'
     );
     this.createFileButtonPlaceholder = page.locator(
-      'button[class="create-new"]'
+      'div[class="dashboard-grid"] button[class="create-new"]'
     );
     this.createFileButtonTitlePanel = page.locator(
       '*[data-test="project-new-file"]'
@@ -184,7 +184,10 @@ exports.DashboardPage = class DashboardPage extends BasePage {
       '//*[text()="Libraries & Templates"]//parent::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"]'
     );
     this.librariesAndTemplatesSectionLeftArrowButton = page.locator(
       'button[class="button left"]'
@@ -234,6 +237,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async deleteFilesIfExist() {
+    await expect(this.numberOfFilesText).toBeVisible();
     const text = (await this.numberOfFilesText.innerText()).valueOf();
     if (!text.includes("0 files")) {
       await this.deleteFiles();
@@ -253,28 +257,26 @@ exports.DashboardPage = class DashboardPage extends BasePage {
     await this.deleteProjectButton.click();
   }
 
-  async deleteProjects() {
-    for (const el of await this.projectNameTitle.elementHandles()) {
-      const text = (await el.innerText()).valueOf();
-      if (!text.includes("Drafts")) {
-        await el.click({ button: "right" });
+  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" });
         await this.deleteProjectMenuItem.click();
         await this.deleteProjectButton.click();
       }
     }
   }
 
-  async deleteProjectsIfExist() {
-    const text = (await this.projectNameTitle.first().innerText()).valueOf();
-    if (!text.includes("Drafts")) {
-      await this.deleteProjects();
-    }
-  }
-
   async waitForPageLoaded() {
     await this.page.waitForLoadState("networkidle");
   }
 
+  async isDashboardOpened() {
+    await expect(this.page).toHaveURL(/.*dashboard/);
+    await expect(this.page).toHaveTitle(/.*Projects - Your Penpot/);
+  }
+
   async checkNumberOfFiles(numberOfFiles) {
     await this.waitForPageLoaded();
     await expect(this.numberOfFilesText.first()).toHaveText(numberOfFiles);
@@ -678,7 +680,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async clickLibrariesAndTemplatesCarouselButton() {
-    await this.librariesAndTemplatesCarouselButton.dispatchEvent('click');
+    await this.librariesAndTemplatesCarouselButton.click();
   }
 
   async isLibrariesAndTemplatesSectionDisplayed() {
@@ -686,7 +688,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   }
 
   async isLibrariesAndTemplatesSectionNotDisplayed() {
-    await expect(this.librariesAndTemplatesSection).not.toBeVisible();
+    await expect(this.librariesAndTemplatesSectionCollapsed).toBeVisible();
   }
 
   async minimizeLibrariesAndTemplatesCarouselIfExpanded() {

pages/main-page.js

@@ -63,10 +63,10 @@ exports.MainPage = class MainPage extends BasePage {
     this.layersTab = page.locator('div[data-id=":layers"]');
     this.layersPanel = page.locator('div[class="layers-tab"]');
     this.createdLayerOnLayersPanelNameInput = page.locator(
-      'div[class^="element-list-body"] span[class="element-name"]'
+      'div[class^="element-list-body"] input[class="element-name"]'
     );
     this.createdLayerOnLayersPanelNameText = page.locator(
-      'span[class="element-name"]'
+      'div[class^="element-list-body"] span[class="element-name"]'
     );
     this.searchLayersIcon = page.locator('svg[class="icon-search"]');
     this.searchLayersInput = page.locator('input[placeholder="Search layers"]');

playwright.config.js

@@ -63,6 +63,11 @@ const config = {
     },
     {
       name: "firefox",
+      expect: {
+        toHaveScreenshot: {
+          maxDiffPixelRatio: 0.01
+        }
+      },
       use: {
         browserName: "firefox",
         viewport: {
@@ -73,6 +78,11 @@ const config = {
     },
     {
       name: "webkit",
+      expect: {
+        toHaveScreenshot: {
+          maxDiffPixelRatio: 0.01
+        }
+      },
       use: {
         browserName: "webkit",
         viewport: {

tests/composition/composition-board.spec.js

@@ -19,7 +19,10 @@ mainTest("CO-2 Create a board from toolbar", async ({ page }) => {
   await mainPage.clickViewportTwice();
   await mainPage.waitForChangeIsSaved();
   await mainPage.isCreatedLayerVisible();
-  await expect(mainPage.viewport).toHaveScreenshot("board.png");
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "board.png", {
+      mask: [mainPage.guides]
+    });
 });
 
 mainTest("CO-4 Rename board with valid name", async ({ page }) => {
@@ -53,7 +56,10 @@ mainTest("CO-10 Add and edit Shadow to board", async ({ page }) => {
   await colorPalettePopUp.setHex("#304d6a");
   await mainPage.clickViewportTwice();
   await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board-drop-shadow.png");
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "board-drop-shadow.png", {
+      mask: [mainPage.guides]
+    });
   await mainPage.selectTypeForShadow("Inner shadow");
   await mainPage.changeXForShadow("5");
   await mainPage.changeYForShadow("7");
@@ -64,7 +70,10 @@ mainTest("CO-10 Add and edit Shadow to board", async ({ page }) => {
   await colorPalettePopUp.setHex("#96e637");
   await mainPage.clickViewportTwice();
   await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board-inner-shadow.png");
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "board-inner-shadow.png", {
+      mask: [mainPage.guides]
+    });
 });
 
 mainTest("CO-13 Add and edit Blur to board", async ({ page }) => {
@@ -74,7 +83,10 @@ mainTest("CO-13 Add and edit Blur to board", async ({ page }) => {
   await mainPage.clickAddBlurButton();
   await mainPage.changeValueForBlur("55");
   await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board-blur.png");
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "board-blur.png", {
+      mask: [mainPage.guides]
+    });
 });
 
 mainTest("CO-25-1 Delete board via rightclick", async ({ page }) => {
@@ -134,7 +146,10 @@ mainTest("CO-29 Change border radius multiple values", async ({ page }) => {
   await mainPage.changeThirdCornerRadiusForLayer("0");
   await mainPage.changeFourthCornerRadiusForLayer("0");
   await mainPage.waitForChangeIsSaved();
-  await expect(mainPage.viewport).toHaveScreenshot("board.png");
+  await expect(mainPage.viewport).toHaveScreenshot(
+    "board.png", {
+      mask: [mainPage.guides]
+    });
 });
 
 mainTest("CO-411 Search board - ignore case", async ({ page }) => {