added snapshots for macOS

test fixes
updated methods for macOS

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "npx playwright test --project=chrome -gv 'PERF'",
+    "updateSnapshots": "npx playwright test --update-snapshots",
     "firefox": "npx playwright test --project=firefox -gv 'PERF'",
     "webkit": "npx playwright test --project=webkit -gv 'PERF'",
     "performance": "npx playwright test --retries=1 --timeout=555550000 --project=chrome -g 'PERF'",

pages/workspace/comments-panel-page.js

@@ -17,7 +17,7 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
       'div[class*="comments__content"] span[class*="comments__text"]',
     );
     this.commentCommentsPanelText = page.locator(
-      'div[class*="comments__threads"] div[class*="comments__content"]',
+      'div[class*="sidebar"] div[class*="comments__threads"] div[class*="comments__content"]',
     );
     this.commentReplyText = page.locator(
       'div[class*="thread-content"] span[class*="comments__text"] >> nth=1',
@@ -27,10 +27,10 @@ exports.CommentsPanelPage = class CommentsPanelPage extends BasePage {
     );
     this.postCommentButton = page.locator('input[value="Post"]');
     this.commentThreadIcon = page.locator(
-      'div[class="comments-section"] div[class*="thread-bubble"]',
+      'div[class*="comments-container"] div[class*="thread-bubble"]',
     );
     this.commentResolvedThreadIcon = page.locator(
-      'div.comments-section div.main_ui_comments__resolved',
+      'div[class*="comments-container"] div.main_ui_comments__resolved',
     );
     this.commentReplyInput = page.locator('textarea[placeholder="Reply"]');
     this.commentOptionsButton = page.locator(

pages/workspace/main-page.js

@@ -129,13 +129,13 @@ exports.MainPage = class MainPage extends BasePage {
     this.addPageButton = page.locator('button[class*="add-page"]');
     this.pagesBlock = page.locator('div.main_ui_workspace_sidebar_sitemap__sitemap');
     this.firstPageListItem = page.locator(
-      'ul[class*="pages-list"] div[class*="element-list-body"] >>nth=0',
+      'ul[class*="page-list"] div[class*="element-list-body"] >>nth=0',
     );
     this.secondPageListItem = page.locator(
-      'ul[class*="pages-list"] div[class*="element-list-body"] >>nth=1',
+      'ul[class*="page-list"] div[class*="element-list-body"] >>nth=1',
     );
     this.pageNameInput = page.locator(
-      'ul[class*="pages-list"] div[class*="element-list-body"] input',
+      'ul[class*="page-list"] div[class*="element-list-body"] input',
     );
     this.renamePageMenuItem = page.locator(
       'ul[class*="workspace-context-menu"] li span:has-text("Rename")',
@@ -239,23 +239,24 @@ exports.MainPage = class MainPage extends BasePage {
   }
 
   async clickViewportTwice() {
+    await this.page.waitForTimeout(100)
     await this.viewport.hover();
-    await this.viewport.click({ delay: 300, force: true });
-    await this.viewport.click({ delay: 300, force: true });
+    await this.viewport.click({ delay: 100, force: true });
+    await this.page.waitForTimeout(100)
+    await this.viewport.click({ delay: 100, force: true });
   }
 
-  async clickViewportByCoordinates(x, y) {
+  async clickViewportByCoordinates(x, y, count = 1) {
+    await this.page.waitForTimeout(100)
     await this.viewport.hover();
-    await this.viewport.click({
-      position: { x: x, y: y },
-      delay: 300,
-      force: true,
-    });
-    await this.viewport.click({
-      position: { x: x, y: y },
-      delay: 300,
-      force: true,
-    });
+    for (let i = 0; i < count; i++) {
+      await this.page.waitForTimeout(100)
+      await this.viewport.click({
+        position: {x: x, y: y},
+        force: true,
+        delay: 200,
+      });
+    }
   }
 
   async isUnSavedChangesDisplayed() {
@@ -290,6 +291,7 @@ exports.MainPage = class MainPage extends BasePage {
   }
 
   async drawCurve(x1, y1, x2, y2) {
+    await this.page.waitForTimeout(100)
     await this.viewport.hover();
     await this.page.mouse.move(x1, y1);
     await this.page.mouse.down();
@@ -725,21 +727,24 @@ exports.MainPage = class MainPage extends BasePage {
     await this.waitForBottomPaletteIsOpened();
   }
 
-  async createDefaultBoardByCoordinates(x, y) {
+  async createDefaultBoardByCoordinates(x, y, double = false) {
     await this.clickCreateBoardButton();
     await this.clickViewportByCoordinates(x, y);
+    double === true ? await this.clickViewportByCoordinates(x, y) :
     await this.waitForChangeIsSaved();
   }
 
-  async createDefaultRectangleByCoordinates(x, y) {
+  async createDefaultRectangleByCoordinates(x, y, double = false) {
     await this.clickCreateRectangleButton();
     await this.clickViewportByCoordinates(x, y);
+    double === true ? await this.clickViewportByCoordinates(x, y) :
     await this.waitForChangeIsSaved();
   }
 
-  async createDefaultEllipseByCoordinates(x, y) {
+  async createDefaultEllipseByCoordinates(x, y, double = false) {
     await this.clickCreateEllipseButton();
     await this.clickViewportByCoordinates(x, y);
+    double === true ? await this.clickViewportByCoordinates(x, y) :
     await this.waitForChangeIsSaved();
   }
 

pages/workspace/prototype-panel-page.js

@@ -28,7 +28,7 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
     this.interactionDestinationField = page.locator(
       '//*[text()="Destination"]//parent::div//div[contains(@class, "custom-select")]',
     );
-    this.removeFlowButton = page.locator('div[class*="remove-flow-btn"]');
+    this.removeFlowButton = page.locator('button[class*="remove-flow-btn"]');
   }
 
   async clickPrototypeTab() {
@@ -36,7 +36,9 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
   }
 
   async dragAndDropPrototypeArrowConnector(x, y) {
+    await this.page.waitForTimeout(200)
     await this.prototypeArrowConnector.hover();
+    await this.viewport.click()
     await this.prototypeArrowConnector.dragTo(this.viewport, {
       force: false,
       targetPosition: { x: x, y: y },
@@ -44,11 +46,11 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
   }
 
   async isFlowNameDisplayedOnPrototypePanel(name) {
-    await expect(this.prototypePanelFlowNameText).toHaveText(name);
+    await expect(this.prototypePanelFlowNameInput).toHaveValue(name);
   }
 
   async isFlowNameNotDisplayedOnPrototypePanel() {
-    await expect(this.prototypePanelFlowNameText).not.toBeVisible();
+    await expect(this.prototypePanelFlowNameInput).not.toBeVisible();
   }
 
   async clickAddInteractionButton() {
@@ -72,7 +74,7 @@ exports.PrototypePanelPage = class PrototypePanelPage extends BasePage {
   }
 
   async renameFlow(newName) {
-    await this.prototypePanelFlowNameText.dblclick();
+    await this.prototypePanelFlowNameInput.dblclick();
     await this.prototypePanelFlowNameInput.fill(newName);
     await this.clickOnEnter();
   }

tests/assets/assets-colors.spec.js

@@ -148,7 +148,7 @@ test.describe(() => {
     await designPanelPage.clickAddStrokeButton();
     await assetsPanelPage.clickAndPressAltFileLibraryColorsColorBullet();
     await mainPage.waitForChangeIsSaved();
-    await mainPage.clickViewportByCoordinates(900, 100);
+    await mainPage.clickViewportByCoordinates(900, 100, 3);
     await expect(mainPage.createdLayer).toHaveScreenshot(
       'apply-color-to-stroke-board.png',
     );

tests/components/main-components/context-menu-options.spec.js

@@ -225,7 +225,7 @@ test.describe(() => {
   mainTest('Components - change view list tile', async ({ page }) => {
     const mainPage = new MainPage(page);
     const assetsPanelPage = new AssetsPanelPage(page);
-    await mainPage.createDefaultEllipseByCoordinates(100, 200);
+    await mainPage.createDefaultEllipseByCoordinates(100, 200, true);
     await mainPage.createComponentViaRightClick();
     await mainPage.waitForChangeIsSaved();
     await mainPage.uploadImage('images/sample.jpeg');