update snapshots

pages/workspace/main-page.js

@@ -22,6 +22,9 @@ exports.MainPage = class MainPage extends BasePage {
     this.mainToolBar = page.locator(
       '[class*="main-toolbar"] button[class*="toolbar-handler"]',
     );
+    this.toolBarWindow = page.locator(
+      'aside[class*="main-toolbar"]',
+    ).first();
     this.designTab = page.getByRole("tab", { name: "design" });
 
     //Viewport

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

@@ -583,7 +583,9 @@ mainTest.describe(() => {
       await designPanelPage.isFillHexCodeSet('0B33A9');
 
       await expect(mainPage.viewport).toHaveScreenshot(
-        'main-copies-component-change-color.png',
+        'main-copies-component-change-color.png', {
+          mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow]
+        },
       );
     },
   );

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

@@ -220,8 +220,9 @@ mainTest(qase(1437,'Create component from curve by right-click'), async ({ page
   await layersPanelPage.createComponentViaRightClickLayers();
   await mainPage.waitForChangeIsSaved();
   await expect(mainPage.viewport).toHaveScreenshot(
-    'curve-main-component-canvas.png',
-  );
+    'curve-main-component-canvas.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow]
+    });
   await expect(layersPanelPage.layersSidebar).toHaveScreenshot(
     'curve-main-component-layer.png',
   );

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

@@ -136,7 +136,10 @@ mainTest.describe(() => {
       await mainPage.clickViewportByCoordinates(400, 400);
       await mainPage.waitForChangeIsSaved();
       await expect(mainPage.viewport).toHaveScreenshot(
-        'main-copies-component-add-stroke.png',
+        'main-copies-component-add-stroke.png', {
+          mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+          maxDiffPixels: 0,
+        }
       );
     },
   );
@@ -172,9 +175,8 @@ mainTest.describe(() => {
       await mainPage.refreshPage();
       await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot(
-        'main-copies-component-shadow-default.png',
-        {
-          mask: [mainPage.guides, mainPage.guidesFragment],
+        'main-copies-component-shadow-default.png', {
+          mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
           maxDiffPixels: 0,
         },
       );
@@ -205,7 +207,7 @@ mainTest.describe(() => {
       await mainPage.waitForChangeIsSaved();
       await mainPage.refreshPage();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-blur.png', {
-        mask: [mainPage.guides, mainPage.guidesFragment],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
         maxDiffPixels: 0,
       });
     },
@@ -221,7 +223,7 @@ mainTest.describe(() => {
       await mainPage.waitForChangeIsUnsaved();
       await mainPage.waitForChangeIsSaved();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-grid-default.png', {
-        mask: [mainPage.guides, mainPage.guidesFragment],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
         maxDiffPixels: 0,
       });
       await designPanelPage.changeSizeForGrid('4');
@@ -230,7 +232,7 @@ mainTest.describe(() => {
       await mainPage.waitForChangeIsSaved();
       await expect(mainPage.viewport).toHaveScreenshot(
         'main-copies-component-grid-updated.png', {
-          mask: [mainPage.guides, mainPage.guidesFragment],
+          mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
           maxDiffPixels: 0,
         }
       );
@@ -270,7 +272,7 @@ mainTest.describe("Text", () => {
       browserName === 'webkit' ? null : await mainPage.refreshPage();
       await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-text.png', {
-        mask: [mainPage.guides, mainPage.guidesFragment],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
         maxDiffPixels: 0,
       });
     },
@@ -360,7 +362,7 @@ mainTest.describe(() => {
       await layersPanelPage.clickMainComponentOnLayersTab();
       await mainPage.waitForChangeIsSaved();
       await expect(mainPage.viewport).toHaveScreenshot('main-copies-component-change-grid.png', {
-        mask: [mainPage.guides, mainPage.guidesFragment],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
         maxDiffPixels: 0,
       });
     },

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

@@ -504,9 +504,10 @@ mainTest.describe(() => {
       await layersPanelPage.selectBoardChildLayer('Ellipse');
       await designPanelPage.isFlexElementSectionOpened();
       await designPanelPage.setFlexElementPositionAbsolute();
+      await mainPage.waitForChangeIsUnsaved();
       await mainPage.waitForChangeIsSaved();
       await expect(page).toHaveScreenshot('flex-element-position-absolute.png', {
-        mask: [mainPage.guides, mainPage.usersSection],
+        mask: [mainPage.guides, mainPage.usersSection, mainPage.toolBarWindow],
       });
     },
   );

tests/composition/composition-image.spec.js

@@ -267,33 +267,61 @@ mainTest.describe(() => {
     const designPanelPage = new DesignPanelPage(page);
     await designPanelPage.changeGeneralCornerRadiusForLayer('30');
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-corners-30.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-corners-30.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+        maxDiffPixels: 0,
+    });
     await designPanelPage.changeGeneralCornerRadiusForLayer('90');
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-corners-90.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-corners-90.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
     await designPanelPage.changeGeneralCornerRadiusForLayer('180');
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-corners-180.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-corners-180.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
     await designPanelPage.changeGeneralCornerRadiusForLayer('0');
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-corners-0.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-corners-0.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
   });
 
   mainTest(qase(1270,'CO-412 Add rotation to image'), async ({ page }) => {
     const mainPage = new MainPage(page);
     const designPanelPage = new DesignPanelPage(page);
     await designPanelPage.changeRotationForLayer('90');
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-90.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-90.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
     await designPanelPage.changeRotationForLayer('120');
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-120.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-120.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
     await designPanelPage.changeRotationForLayer('45');
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-45.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-45.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
     await designPanelPage.changeRotationForLayer('360');
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
-    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-359.png');
+    await expect(mainPage.viewport).toHaveScreenshot('image-rotated-359.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+      maxDiffPixels: 0,
+    });
   });
 
   mainTest(qase(474,'CO-259 Flip Vertical and Flip Horizontal image'), async ({ page }) => {

tests/composition/composition-rectangle.spec.js

@@ -318,9 +318,10 @@ mainTest.describe(() => {
   mainTest(qase(319,'CO-104 Transform rectangle to path'), async ({ page }) => {
     const mainPage = new MainPage(page);
     await mainPage.transformToPathViaRightClick();
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
     await expect(page).toHaveScreenshot('rectangle-to-path.png', {
-      mask: [mainPage.usersSection],
+      mask: [mainPage.usersSection, mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
     });
   });
 

tests/composition/composition-text.spec.js

@@ -278,11 +278,13 @@ mainTest.describe(() => {
     await designPanelPage.changeTextDirection('RTL');
     await mainPage.waitForChangeIsSaved();
     await expect(mainPage.viewport).toHaveScreenshot('text-rtl.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
       maxDiffPixels: 30,
     });
     await designPanelPage.changeTextDirection('LTR');
     await mainPage.waitForChangeIsSaved();
     await expect(mainPage.viewport).toHaveScreenshot('text-ltr.png', {
+      mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
       maxDiffPixels: 40,
     });
   });

tests/panels-features/panels-features-prototype.spec.js

@@ -60,10 +60,11 @@ mainTest.describe(() => {
     const mainPage = new MainPage(page);
     const prototypePanelPage = new PrototypePanelPage(page);
     await prototypePanelPage.clickAddInteractionButton();
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
     await prototypePanelPage.isPrototypeArrowSecondConnectorDisplayed();
     await expect(page).toHaveScreenshot('add-interaction.png', {
-      mask: [mainPage.usersSection],
+      mask: [mainPage.usersSection, mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
     });
   });
 
@@ -91,7 +92,7 @@ mainTest.describe(() => {
     await prototypePanelPage.isFlowNameDisplayedOnPrototypePanel('Flow 2');
     await mainPage.clickViewportByCoordinates(300, 700);
     await expect(page).toHaveScreenshot('add-2nd-flow.png', {
-      mask: [mainPage.usersSection],
+      mask: [mainPage.usersSection, mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
     });
   });
 

tests/panels-features/panels-features-zoom.spec.js

@@ -78,6 +78,6 @@ mainTest(qase(856,'PF-138 Zoom to selected via top right menu'), async ({ page }
   await mainPage.zoomToFitSelected();
   await mainPage.clickViewportTwice();
   await expect(page).toHaveScreenshot('canvas-zoom-to-selected.png', {
-    mask: [mainPage.usersSection],
+    mask: [mainPage.usersSection, mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
   });
 });