fix(tests): fix flaky tests

pages/base-page.js

@@ -263,7 +263,7 @@ exports.BasePage = class BasePage {
       `span[class*="workspace_sidebar_layer_name"]:has-text("${title}")`,
     );
     await boardSel.click({ button: 'right', force: true });
-    browserName === 'chrome'
+    browserName === 'chromium'
       ? await this.focusOnLayerMenuItem.click()
       : await this.focusOnLayerMenuItem.locator('span').first().click();
   }

pages/workspace/design-panel-page.js

@@ -380,7 +380,7 @@ exports.DesignPanelPage = class DesignPanelPage extends BasePage {
 
   async setComponentColor(color) {
     await this.componentColorInput.clear();
-    await this.componentColorInput.pressSequentially(color);
+    await this.componentColorInput.fill(color);
   }
 
   async setFlexElementPositionAbsolute() {

pages/workspace/layers-panel-page.js

@@ -179,7 +179,7 @@ exports.LayersPanelPage = class LayersPanelPage extends MainPage {
       button: 'right',
       force: true,
     });
-    browserName === 'chrome'
+    browserName === 'chromium'
       ? await this.createComponentMenuItem.click()
       : await this.createComponentMenuItem.locator('span').first().click();
   }
@@ -289,7 +289,7 @@ exports.LayersPanelPage = class LayersPanelPage extends MainPage {
       button: 'right',
       force: true,
     });
-    browserName === 'chrome'
+    browserName === 'chromium'
       ? await this.copyOption.click()
       : await this.copyOption.locator('span').first().click();
   }

pages/workspace/view-mode-page.js

@@ -263,7 +263,7 @@ exports.ViewModePage = class ViewModePage extends BasePage {
   }
 
   async checkBuffer(expectedValue, page, browserName) {
-    if (browserName === 'chrome') {
+    if (browserName === 'chromium') {
       const clipboardText = await page.evaluate(async () => {
         return await navigator.clipboard.readText();
       });

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

@@ -352,20 +352,22 @@ mainTest.describe(() => {
       1404,
       'PENPOT-1404 Change copy components shadow and update main components color',
     ),
-    async () => {
+    async ({ browserName }) => {
       await layersPanelPage.clickCopyComponentOnLayersTab();
       await designPanelPage.clickAddShadowButton();
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.clickMainComponentOnLayersTab();
       await designPanelPage.setComponentColor('#0538D1');
-      await layersPanelPage.clickMainComponentOnLayersTab();
+      browserName === 'chromium' ? await mainPage.waitForChangeIsUnsaved() : null;
       await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.clickMainComponentOnLayersTab();
       await designPanelPage.isFillHexCodeSetComponent('0538d1');
-      await mainPage.waitForChangeIsSaved();
-      await mainPage.refreshPage();
-      await mainPage.waitForViewportVisible();
       await expect(mainPage.viewport).toHaveScreenshot(
         'main-copies-component-change-shadow.png',
+        {
+          mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
+          maxDiffPixels: 0,
+        },
       );
     },
   );
@@ -375,20 +377,19 @@ mainTest.describe(() => {
       1403,
       'PENPOT-1403 Change copy components color and update main components color',
     ),
-    async () => {
+    async ({ browserName }) => {
       await layersPanelPage.clickCopyComponentOnLayersTab();
       await mainPage.waitForChangeIsSaved();
       await designPanelPage.setComponentColor('#050E23');
       await mainPage.waitForChangeIsSaved();
       await layersPanelPage.clickMainComponentOnLayersTab();
       await mainPage.waitForChangeIsSaved();
       await designPanelPage.setComponentColor('#C10C43');
-      await layersPanelPage.clickCopyComponentOnLayersTab();
+      await mainPage.clickViewportTwice();
+      browserName === 'chromium' ? await mainPage.waitForChangeIsUnsaved() : null;
       await mainPage.waitForChangeIsSaved();
+      await layersPanelPage.clickCopyComponentOnLayersTab();
       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

@@ -251,6 +251,7 @@ mainTest(
   async ({ browserName }) => {
     await mainPage.createDefaultBoardByCoordinates(200, 200);
     await designPanelPage.changeHeightAndWidthForLayer('300', '400');
+    await mainPage.waitForChangeIsUnsaved();
     await mainPage.waitForChangeIsSaved();
     await mainPage.addGridLayoutViaRightClick();
     await mainPage.waitForChangeIsSaved();
@@ -263,7 +264,7 @@ mainTest(
     await expect(mainPage.viewport).toHaveScreenshot(
       'resized-board-with-grid-layout.png',
       {
-        mask: [mainPage.guides],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
       },
     );
     await mainPage.createDefaultRectangleByCoordinates(210, 210, true);
@@ -277,7 +278,7 @@ mainTest(
     await expect(mainPage.viewport).toHaveScreenshot(
       'resized-board-with-rectangle.png',
       {
-        mask: [mainPage.guides],
+        mask: [mainPage.guides, mainPage.guidesFragment, mainPage.toolBarWindow],
       },
     );
   },