Merge pull request #73 from penpot/webkit_fix

Webkit fix

pages/base-page.js

@@ -210,7 +210,7 @@ exports.BasePage = class BasePage {
   }
 
   async isHeaderDisplayed(title) {
-    await expect(this.header).toHaveText(title);
+    await expect(this.header).toHaveText(title, { timeout: 20000 });
   }
 
   async isSuccessMessageDisplayed(message) {

pages/dashboard/dashboard-page.js

@@ -518,7 +518,7 @@ exports.DashboardPage = class DashboardPage extends BasePage {
     await expect(this.modalTitle).toBeVisible();
     await expect(this.modalTitle).toHaveText('Import Penpot files');
     await this.modalAcceptButton.click();
-    await this.feedbackBannerMessage.waitFor({timeout:30000});
+    await this.feedbackBannerMessage.waitFor({timeout:60000});
     await expect(this.feedbackBannerMessage).toHaveText(
       '1 file has been imported successfully.',
     );
@@ -884,4 +884,8 @@ exports.DashboardPage = class DashboardPage extends BasePage {
   async checkPageNumber(number) {
     await expect(this.onboardingPaginator).toHaveText(`${number}/5`);
   }
+
+  async waitForCreateFilePlaceholderVisible() {
+    await this.createFileButtonPlaceholder.first().waitFor({ state: 'visible' });
+  }
 };

pages/dashboard/team-page.js

@@ -10,6 +10,7 @@ exports.TeamPage = class TeamPage extends BasePage {
 
     // Teams
     this.teamCurrentBtn = page.locator('button[class*="current-team"]');
+    this.teamCurrentBtnWebkit = page.locator('button[class*="current-team"] div span').first();
     this.teamList = page.locator('ul[class*="teams-dropdown"]');
     this.createNewTeamMenuItem = page.locator('#teams-selector-create-team');
     this.teamNameInput = page.locator('#name');
@@ -111,8 +112,14 @@ exports.TeamPage = class TeamPage extends BasePage {
     await this.createNewTeamButton.click();
   }
 
-  async isTeamSelected(teamName) {
-    await expect(this.teamCurrentBtn).toHaveText(teamName);
+  async isTeamSelected(teamName, browserName = 'chrome') {
+    browserName === 'webkit'
+      ? await expect(this.teamCurrentBtnWebkit).toHaveText(teamName)
+      : await expect(this.teamCurrentBtn).toHaveText(teamName);
+  }
+
+  async waitForTeamBtn(timeout = 10000) {
+    await this.teamCurrentBtnWebkit.waitFor({ state: 'visible' , timeout: timeout});
   }
 
   async openTeamsListIfClosed() {

pages/workspace/layers-panel-page.js

@@ -38,7 +38,6 @@ exports.LayersPanelPage = class LayersPanelPage extends BasePage {
       'span[class*="element-name"] >> nth=1',
     );
     this.layoutIcon = page.locator('svg.icon-flex-vertical');
-    // this.focusModeDiv = page.locator('div.focus-mode:text-is("Focus mode")');
     this.layerItemToggleExpand = page.locator(
       'div[class*="layers__element-list"] button[class*="sidebar_layer_item__inverse"]',
     );

pages/workspace/main-page.js

@@ -338,6 +338,16 @@ exports.MainPage = class MainPage extends BasePage {
     await expect(this.viewport).toBeVisible();
   }
 
+  async isMainPageVisible() {
+    try {
+      await this.viewport.waitFor({ state: 'visible' , timeout: 8000});
+      return true;
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  }
+
   async isProjectAndFileNameExistInFile(projectName, fileName) {
     await expect(this.projectNameSpan).toContainText(projectName);
     await expect(this.fileNameSpan.last()).toHaveText(fileName);
@@ -676,8 +686,10 @@ exports.MainPage = class MainPage extends BasePage {
     await expect(this.firstPageListItem).toHaveText(name);
   }
 
-  async isSecondPageAddedToAssetsPanel() {
-    await expect(this.secondPageListItem).toBeVisible();
+  async isSecondPageAddedToAssetsPanel(added = true) {
+    added
+      ? await expect(this.secondPageListItem).toBeVisible()
+      : await expect(this.secondPageListItem).not.toBeVisible();
   }
 
   async isSecondPageNameDisplayed(name) {
@@ -816,9 +828,7 @@ exports.MainPage = class MainPage extends BasePage {
     await this.clickViewportByCoordinates(1200, 700);
     await this.clickViewportByCoordinates(1000, 400);
     await this.clickViewportByCoordinates(500, 200);
-    await this.clickOnDesignTab(); // todo: need to remove after issue fix
-    // await this.clickOnMainToolBar(); //todo bug 6171 > need to uncomment after fix these 2 rows
-    // await this.clickMoveButton();
+    await this.clickOnDesignTab();
     await this.waitForChangeIsSaved();
   }
 
@@ -829,9 +839,6 @@ exports.MainPage = class MainPage extends BasePage {
     await this.clickViewportByCoordinates(1000, 400);
     await this.clickMoveNodesButtonOnNodePanel();
     await this.clickDrawNodesButtonOnNodePanel();
-    // await this.clickOnDesignTab();  // todo: need to remove after issue fix
-    // await this.clickOnMainToolBar(); //todo bug 6171 > need to uncomment after fix these 2 rows
-    // await this.clickMoveButton();
     await this.waitForChangeIsSaved();
   }
 
@@ -860,7 +867,7 @@ exports.MainPage = class MainPage extends BasePage {
     if (platform === 'darwin') {
       await this.typeTextFromKeyboard();
     } else if(browserName === 'webkit') {
-      await this.page.waitForTimeout(400);
+      await this.page.waitForTimeout(2000);
       await this.typeTextFromKeyboard();
     } else {
       await this.typeText('Hello World!');

pages/workspace/view-mode-page.js

@@ -281,6 +281,10 @@ exports.ViewModePage = class ViewModePage extends BasePage {
       : await expect(this.viewerLoyautSection).not.toBeVisible();
   }
 
+  async waitForViewerSection(timeout = 10000) {
+    await this.viewerLoyautSection.waitFor({ state: 'visible' , timeout: timeout});
+  }
+
   async clickDestroyLincButton() {
     await this.destroyLincButton.click();
     await this.destroyLincButton.click();

tests/assets/assets-colors.spec.js

@@ -12,13 +12,16 @@ const { qase } = require('playwright-qase-reporter/dist/playwright');
 
 const teamName = random().concat('autotest');
 
-test.beforeEach(async ({ page }) => {
+test.beforeEach(async ({ page, browserName }) => {
   const teamPage = new TeamPage(page);
   const dashboardPage = new DashboardPage(page);
   const mainPage = new MainPage(page);
   await teamPage.createTeam(teamName);
   await teamPage.isTeamSelected(teamName);
   await dashboardPage.createFileViaPlaceholder();
+  browserName === 'webkit' && !( await mainPage.isMainPageVisible())
+    ? await dashboardPage.createFileViaPlaceholder()
+    : null;
   await mainPage.isMainPageLoaded();
 });
 
@@ -48,7 +51,7 @@ mainTest.describe(() => {
     await colorPalettePopUp.clickSaveColorStyleButton();
     await mainPage.clickViewportTwice();
     await mainPage.waitForChangeIsSaved();
-  }); 
+  });
 
   mainTest(qase(933,'AS-23 File library colors - add'), async ({ page }) => {
     const assetsPanelPage = new AssetsPanelPage(page);

tests/assets/assets-shortcuts-panel.spec.js

@@ -9,13 +9,16 @@ const { qase } = require('playwright-qase-reporter/dist/playwright');
 
 const teamName = random().concat('autotest');
 
-test.beforeEach(async ({ page }) => {
+test.beforeEach(async ({ page, browserName }) => {
   const teamPage = new TeamPage(page);
   const dashboardPage = new DashboardPage(page);
   const mainPage = new MainPage(page);
   await teamPage.createTeam(teamName);
   await teamPage.isTeamSelected(teamName);
   await dashboardPage.createFileViaPlaceholder();
+  browserName === 'webkit' && !( await mainPage.isMainPageVisible())
+    ? await dashboardPage.createFileViaPlaceholder()
+    : null;
   await mainPage.isMainPageLoaded();
 });
 

tests/assets/shared-libraries.spec.js

@@ -14,7 +14,7 @@ const { qase } = require('playwright-qase-reporter/dist/playwright');
 const teamName = random().concat('autotest');
 
 let dashboardPage, teamPage, mainPage, assetsPanelPage, designPanelPage, layersPanelPage, colorPalettePage;
-test.beforeEach(async ({ page }) => {
+mainTest.beforeEach(async ({ page }) => {
   dashboardPage = new DashboardPage(page);
   teamPage = new TeamPage(page);
   mainPage = new MainPage(page);
@@ -27,7 +27,7 @@ test.beforeEach(async ({ page }) => {
   await mainPage.isMainPageLoaded();
 });
 
-test.afterEach(async ({}, testInfo) => {
+mainTest.afterEach(async ({}, testInfo) => {
   await teamPage.deleteTeam(teamName);
   await updateTestResults(testInfo.status, testInfo.retry)
 });
@@ -465,8 +465,8 @@ mainTest.describe(() => {
   });
 });
 
-test.describe(() => {
-  test.beforeEach(async ({ page }, testInfo) => {
+mainTest.describe(() => {
+  mainTest.beforeEach(async ({ page }, testInfo) => {
     await testInfo.setTimeout(testInfo.timeout + 30000);
     await mainPage.createDefaultRectangleByCoordinates(200, 200);
     await mainPage.createComponentViaRightClick();
@@ -521,48 +521,39 @@ test.describe(() => {
     await dashboardPage.checkNumberOfFiles('3 files');
   });
 
-  // mainTest(
-  //   qase(1092,'PENPOT-1092 Delete library which is used by a few files ( 1 library in a few files)'),
-  //   async () => {
-  //     await dashboardPage.deleteFileWithNameViaRightClick('New File 1');
-  //     await expect(dashboardPage.deleteFileModalWindow).toHaveScreenshot(
-  //       'library-delete-warning.png',
-  //     );
-  //     await dashboardPage.clickDeleteFileButton();
-  //
-  //     await dashboardPage.openFileWithName('New File 2');
-  //     await mainPage.isSecondPageNameDisplayed('Main components');
-  //     await mainPage.clickOnPageOnLayersPanel(false);
-  //     await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
-  //       'library-backup-layers.png',
-  //     );
-  //     await expect(mainPage.viewport).toHaveScreenshot(
-  //       'library-backup-viewport.png',
-  //     );
-  //     await assetsPanelPage.clickAssetsTab();
-  //     await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
-  //       'library-backup-assets.png',
-  //     );
-  //     await mainPage.clickPencilBoxButton();
-  //     await dashboardPage.isHeaderDisplayed('Projects');
-  //
-  //     await dashboardPage.openFileWithName('New File 3');
-  //     await mainPage.isSecondPageNameDisplayed('Main components');
-  //     await mainPage.clickOnPageOnLayersPanel(false);
-  //     await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
-  //       'library-backup-layers.png',
-  //     );
-  //     await expect(mainPage.viewport).toHaveScreenshot(
-  //       'library-backup-viewport.png',
-  //     );
-  //     await assetsPanelPage.clickAssetsTab();
-  //     await expect(assetsPanelPage.assetsPanel).toHaveScreenshot(
-  //       'library-backup-assets.png',
-  //     );
-  //   },
-  // );
-
-  test.afterEach(async () => {
+  mainTest(
+    qase(1092,'PENPOT-1092 Delete library which is used by a few files ( 1 library in a few files)'),
+    async () => {
+      await dashboardPage.deleteFileWithNameViaRightClick('New File 1');
+      await expect(dashboardPage.deleteFileModalWindow).toHaveScreenshot(
+        'library-delete-warning.png',
+      );
+      await dashboardPage.clickDeleteFileButton();
+
+      await dashboardPage.openFileWithName('New File 2');
+      await mainPage.isSecondPageAddedToAssetsPanel(false);
+      await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+        'library-without-library-layers.png',
+      );
+      await expect(mainPage.viewport).toHaveScreenshot(
+        'library-without-library-viewport.png',
+      );
+
+      await mainPage.clickPencilBoxButton();
+      await dashboardPage.isHeaderDisplayed('Projects');
+
+      await dashboardPage.openFileWithName('New File 3');
+      await mainPage.isSecondPageAddedToAssetsPanel(false);
+      await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
+        'library-without-library-layers.png',
+      );
+      await expect(mainPage.viewport).toHaveScreenshot(
+        'library-without-library-viewport.png',
+      );
+    },
+  );
+
+  mainTest.afterEach(async () => {
     await mainPage.backToDashboardFromFileEditor();
   });
 });

tests/components/main-components/create-main-components.spec.js

@@ -13,12 +13,15 @@ const { qase } = require('playwright-qase-reporter/dist/playwright');
 
 const teamName = random().concat('autotest');
 
-test.beforeEach(async ({ page }) => {
+test.beforeEach(async ({ page, browserName }) => {
   const dashboardPage = new DashboardPage(page);
   const teamPage = new TeamPage(page);
   const mainPage = new MainPage(page);
   await teamPage.createTeam(teamName);
   await dashboardPage.createFileViaPlaceholder();
+  browserName === 'webkit' && !( await mainPage.isMainPageVisible())
+    ? await dashboardPage.createFileViaPlaceholder()
+    : null;
   await mainPage.isMainPageLoaded();
 });
 

tests/components/main-components/update-main-components.spec.js

@@ -170,6 +170,7 @@ mainTest.describe(() => {
       await page.waitForTimeout(200);
       await mainPage.waitForChangeIsSaved();
       await mainPage.refreshPage();
+      await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot(
         'main-copies-component-shadow-default.png',
         {
@@ -186,7 +187,7 @@ mainTest.describe(() => {
       await layersPanelPage.clickMainComponentOnLayersTab();
       await mainPage.waitForChangeIsSaved();
       await mainPage.refreshPage();
-      await page.waitForTimeout(200);
+      await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-shadow-updated.png', {
         mask: [mainPage.guides, mainPage.guidesFragment],
         maxDiffPixels: 0,
@@ -238,7 +239,9 @@ mainTest.describe(() => {
 
 mainTest.describe("Text", () => {
   mainTest.beforeEach(async ({ page, browserName }, testInfo) => {
-    await testInfo.setTimeout(testInfo.timeout + 15000);
+    browserName === 'webkit'
+      ? await testInfo.setTimeout(testInfo.timeout + 40000)
+      : await testInfo.setTimeout(testInfo.timeout + 15000);
     await mainPage.createDefaultTextLayer(browserName);
     await mainPage.createComponentViaRightClick();
     await mainPage.waitForChangeIsSaved();
@@ -254,7 +257,7 @@ mainTest.describe("Text", () => {
 
   mainTest(
     qase(1448,'PENPOT-1448 Create a component from text and 2 copies of it, change font, style and size of main'),
-    async () => {
+    async ({browserName}) => {
       await layersPanelPage.clickMainComponentOnLayersTab();
       await layersPanelPage.selectMainComponentChildLayer();
       await designPanelPage.changeTextFont('Source Serif 4');
@@ -263,7 +266,8 @@ mainTest.describe("Text", () => {
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.clickMainComponentOnLayersTab();
       await mainPage.page.waitForTimeout(4000);
-      await mainPage.refreshPage();
+      browserName === 'webkit' ? null : await mainPage.refreshPage();
+      await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-text.png', {
         mask: [mainPage.guides, mainPage.guidesFragment],
         maxDiffPixels: 0,
@@ -318,6 +322,7 @@ mainTest.describe(() => {
       await designPanelPage.isFillHexCodeSetComponent('050e23');
       await mainPage.waitForChangeIsSaved();
       await mainPage.refreshPage();
+      await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot(
         'main-copies-component-change-fill.png',
       );

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

@@ -548,17 +548,6 @@ mainTest.describe(() => {
     });
   });
 
-  // mainTest.only('PENPOT-1738 Move element inside grid board', async ({ page }) => {
-  //   await mainPage.createDefaultRectangleByCoordinates(200, 200, true);
-  //   await layersPanelPage.dragAndDropComponentToBoard('Rectangle');
-  //   await mainPage.waitForChangeIsSaved();
-  //   await mainPage.dragAndDropComponentToAnotherFraction(2, page);
-  //   await mainPage.waitForChangeIsSaved();
-  //   await expect(mainPage.viewport).toHaveScreenshot('board-with-grid-move-element.png', {
-  //     mask: [mainPage.guides],
-  //   });
-  // });
-
   mainTest(qase([1739,1742],'PENPOT-1739,1742 Duplicate vertical and horizontal direction, undo element duplication'), async ({ browserName }) => {
     await mainPage.createDefaultRectangleByCoordinates(410, 410, true);
     await mainPage.waitForChangeIsSaved();