chore: change snapshot package (#35867)

/ok-to-test tags="@tag.All"

## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10815637874>
> Commit: 54937a7a64e755959e3420a0a20abcc30ee10d78
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10815637874&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 11 Sep 2024 17:30:00 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added support for visual regression testing through new tagging in
various test suites.
- Integrated a new image snapshot plugin to enhance testing
capabilities.

- **Bug Fixes**
- Removed outdated image snapshot assertions to streamline testing
processes.

- **Documentation**
- Updated tags in multiple test suites to improve organization and
clarity regarding visual testing.

- **Chores**
- Upgraded Node.js version in the Cypress Dockerfile for improved
performance and compatibility.
- Simplified Cypress plugin configuration by removing unnecessary
functions and enhancing browser compatibility.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>

app/client/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "cypress";
+import { addMatchImageSnapshotPlugin } from "@simonsmith/cypress-image-snapshot/plugin";
 
 export default defineConfig({
   watchForFileChanges: false,
@@ -32,6 +33,7 @@ export default defineConfig({
       grepOmitFiltered: true,
     },
     setupNodeEvents(on, config) {
+      addMatchImageSnapshotPlugin(on);
       require("@cypress/grep/src/plugin")(config);
       require("./cypress/plugins/index.js")(on, config);
       return config;

app/client/cypress/Dockerfile

@@ -1,6 +1,6 @@
 #ARG CHROME_VERSION="126.0.6478.114-1"
 ARG YARN_VERSION='1.22.22'
-ARG NODE_VERSION='20.11.1'
+ARG NODE_VERSION='20.13.1'
 ARG CYPRESS_VERSION='13.13.0'
 FROM cypress/factory:4.0.2
 

app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilModal_spec.ts

@@ -12,7 +12,7 @@ import EditorNavigation, {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Modals`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       // Cleanup the canvas before each test

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Button Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilButtonWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Checkbox Group Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilCheckboxGroupWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Checkbox Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilCheckboxWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Currency Input Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilCurrencyInputWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Heading Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilHeadingWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Icon Button Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilIconButtonWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Inline Button Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilInlineButtonWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Input Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilInputWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Paragraph Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilParagraphWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Phone Input Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilPhoneInputWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Radio Group Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilRadioGroupWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Stats Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilStatsWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchGroupWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Switch Group Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilSwitchGroupWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Switch Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilSwitchWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Table Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilTableWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Toolbar Button Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilToolbarButtonWidget");

app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilZoneSectionWidgetSnapshot_spec.ts

@@ -6,7 +6,7 @@ import {
 
 describe(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Zone and Section Widget`,
-  { tags: ["@tag.Anvil"] },
+  { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {
     before(() => {
       agHelper.AddDsl("anvilZoneSectionWidget");

app/client/cypress/e2e/Regression/ClientSide/FormLogin/EmailVerfication_spec.ts

@@ -1,7 +1,7 @@
 import adminsSettings from "../../../../locators/AdminsSettings";
 import { adminSettings as adminSettingsHelper } from "../../../../support/Objects/ObjectsCore";
 
-describe("Email verification", () => {
+describe("Email verification", { tags: ["@tag.Visual"] }, () => {
   it("1. Shows the email verification pending page correctly", () => {
     cy.LogOut();
     cy.visit("/user/verificationPending?email=test@appsmith.com");

app/client/cypress/e2e/Regression/ClientSide/VisualTests/DatasourcePageLayout_spec.js

@@ -20,90 +20,4 @@ describe("Visual tests for datasources", { tags: ["@tag.Visual"] }, () => {
     AppSidebar.navigate(AppSidebarButton.Data);
     cy.get(".t--data-blank-state").matchImageSnapshot("emptydatasourcepage");
   });
-  /* cy.NavigateToDatasourceEditor();
-    cy.wait(2000);
-    cy.get("#new-api").matchImageSnapshot("apiSection");
-    cy.get("span:contains('Database')")
-      .first()
-      .click();
-    cy.get("#new-datasources").matchImageSnapshot("databaseSection");
-    cy.get("#mock-database")
-      .scrollIntoView()
-      .matchImageSnapshot("sampleDatabasesSection");
-  });
-  it("Layout validation for postgres page", () => {
-    cy.get(datasource.PostgreSQL).click();
-    cy.get(".t--edit-datasource-name").click();
-    cy.get(".t--edit-datasource-name input")
-      .clear()
-      .type(postgres, { force: true })
-      .should("have.value", postgres)
-      .blur();
-    cy.get('[data-testid="section-Connection"]')
-      .next()
-      .matchImageSnapshot("postgresConnectionSection2");
-    cy.get('[data-testid="section-Connection"]').click();
-    cy.get('[data-testid="section-Authentication"]')
-      .scrollIntoView()
-      .click();
-    cy.wait(1000);
-    cy.get('[data-testid="section-Authentication"]')
-      .next()
-      .matchImageSnapshot("postgresAuthenticationSection2");
-    cy.get('[data-testid="section-Authentication"]').click();
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .scrollIntoView()
-      .click();
-    cy.wait(1000);
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .next()
-      .matchImageSnapshot("postgresSSLSection2");
-    cy.get('[data-testid="section-SSL (optional)"]').click();
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .next()
-      .next()
-      .matchImageSnapshot("ctaButtons");
-    cy.get(".t--close-editor").click();
-    cy.contains(".t--datasource-name", postgres).matchImageSnapshot(
-      "PostgresActivetab",
-    );
-  });
-  it("Layout validation for mongodb page", () => {
-    cy.NavigateToDatasourceEditor();
-    cy.get(datasource.MongoDB).click({ force: true });
-    cy.get(".t--edit-datasource-name").click();
-    cy.get(".t--edit-datasource-name input")
-      .clear()
-      .type(mongo, { force: true })
-      .should("have.value", mongo)
-      .blur();
-    cy.get('[data-testid="section-Connection"]')
-      .next()
-      .matchImageSnapshot("mongoConnectionSection2");
-    cy.get('[data-testid="section-Connection"]').click();
-    cy.get('[data-testid="section-Authentication"]')
-      .scrollIntoView()
-      .click();
-    cy.wait(1000);
-    cy.get('[data-testid="section-Authentication"]')
-      .next()
-      .matchImageSnapshot("mongoAuthenticationSection2");
-    cy.get('[data-testid="section-Authentication"]').click();
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .scrollIntoView()
-      .click();
-    cy.wait(1000);
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .next()
-      .matchImageSnapshot("mongoSSLSection2");
-    cy.get('[data-testid="section-SSL (optional)"]').click();
-    cy.get('[data-testid="section-SSL (optional)"]')
-      .next()
-      .next()
-      .matchImageSnapshot("ctaButtons");
-    cy.get(".t--close-editor").click();
-    cy.contains(".t--datasource-name", mongo).matchImageSnapshot(
-      "MongoDBActivetab",
-    );
-  }); */
 });

app/client/cypress/e2e/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js

@@ -61,18 +61,15 @@ myFun2: async () => {
 
       agHelper.ActionContextMenuWithInPane({ action: "Prettify code" });
       agHelper.Sleep(2000); //allowing time to prettify!
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify6");
 
       // taking a snap after clicking inside the editor to make sure prettify has not reverted
       agHelper.Sleep(110);
       agHelper.GetNClick(jsEditor._lineinJsEditor(26));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify6");
 
       homePage.NavigateToHome();
       homePage.FilterApplication(workspaceName);
       homePage.ForkApplication(appName);
       EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject);
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify6");
     });
 
     it("7. TC 1933 - JSEditor prettify verification on cloned page", () => {
@@ -119,17 +116,14 @@ myFun2: async () => {
 
       agHelper.ActionContextMenuWithInPane({ action: "Prettify code" });
       agHelper.Sleep(); //allowing time to prettify!
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify7");
 
       // taking a snap after clicking inside the editor to make sure prettify has not reverted
       agHelper.Sleep(110);
       agHelper.GetNClick(jsEditor._lineinJsEditor(26));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify7");
 
       PageList.ClonePage("Page1");
       EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject);
       agHelper.Sleep(3000);
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify7");
     });
 
     it("1. TC 1864 : JSEditor validation for Prettify code with lint errors, triggered by menu option", () => {
@@ -208,27 +202,21 @@ myFun2: async () => {
         },
       );
 
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjBeforePrettify2");
-
       agHelper.ActionContextMenuWithInPane({ action: "Prettify code" });
       agHelper.Sleep(2000); //allowing time to prettify!
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify2");
 
       // taking a snap after clicking inside the editor to make sure prettify has not reverted
       agHelper.Sleep(110);
       agHelper.GetNClick(jsEditor._lineinJsEditor(26));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify2");
 
       // click run button and take a snap to make sure prettify did not revert
       agHelper.GetNClick(jsEditor._runButton);
       agHelper.Sleep(); // allow time to run
       //Close bottom bar after execution.
       debuggerHelper.CloseBottomBar();
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify2");
 
       // click dropdown to change function and make sure prettify has not reverted
       jsEditor.SelectFunctionDropdown("myFun2");
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify2");
       agHelper.AssertContains("ran successfully", "not.exist");
     });
 
@@ -323,18 +311,15 @@ myFun2: async () => {
       // taking a snap after clicking inside the editor to make sure prettify has not reverted
       agHelper.Sleep(110);
       agHelper.GetNClick(jsEditor._lineinJsEditor(26));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify4_1");
 
       // click run button and take a snap to make sure prettify did not revert
       agHelper.GetNClick(jsEditor._runButton);
       agHelper.Sleep(); // allow time to run
       //Close bottom bar after execution.
       debuggerHelper.CloseBottomBar();
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify4_1");
 
       // click dropdown to change function and make sure prettify has not reverted
       jsEditor.SelectFunctionDropdown("myFun2");
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterPrettify4_1");
       agHelper.AssertContains("ran successfully", "not.exist");
     });
 

app/client/cypress/e2e/Regression/ClientSide/VisualTests/JSEditorSaveAndAutoIndent_spec.js

@@ -48,13 +48,11 @@ myFun2: async () => {
 
       cy.get("div.CodeMirror").type("{cmd+s}").wait(2000);
       _.agHelper.GetNClick(_.jsEditor._lineinJsEditor(5));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterSaveAndPrettify");
       _.agHelper.AssertAutoSave();
 
       // taking a snap after clicking inside the editor to make sure prettify has not reverted
       _.agHelper.Sleep(110);
       _.agHelper.GetNClick(_.jsEditor._lineinJsEditor(25));
-      cy.get("div.CodeMirror").matchImageSnapshot("jsObjAfterSaveAndPrettify");
     });
   },
 );

app/client/cypress/e2e/Regression/ClientSide/VisualTests/WidgetsLayout_spec.js

@@ -5,44 +5,48 @@ describe("Visual regression tests", { tags: ["@tag.Visual"] }, () => {
   //      command: "npx cypress run --spec cypress/e2e/Regression_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js  --browser chrome"
   //  3. New screenshot will be generated in the snapshot folder
 
-  it("Verify SwitchGroup inline enable/disbale", () => {
-    cy.dragAndDropToCanvas("switchgroupwidget", { x: 300, y: 300 });
-    cy.wait(1000);
+  it(
+    "Verify SwitchGroup inline enable/disbale",
+    { tags: ["@tag.Visual"] },
+    () => {
+      cy.dragAndDropToCanvas("switchgroupwidget", { x: 300, y: 300 });
+      cy.wait(1000);
 
-    //Verify default check
-    cy.get(".t--property-control-inline input").should("be.checked");
-    // taking screenshot of switch container
-    cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
-      "inlineEnabled",
-    );
+      //Verify default check
+      cy.get(".t--property-control-inline input").should("be.checked");
+      // taking screenshot of switch container
+      cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
+        "inlineEnabled",
+      );
 
-    //Unchecking & verify snap
-    cy.get(".t--property-control-inline input")
-      .uncheck({ force: true })
-      .wait(2000)
-      .should("not.be.checked");
-    cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
-      "inlineDisabled",
-    );
+      //Unchecking & verify snap
+      cy.get(".t--property-control-inline input")
+        .uncheck({ force: true })
+        .wait(2000)
+        .should("not.be.checked");
+      cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
+        "inlineDisabled",
+      );
 
-    //Checking again & verify snap
-    cy.get(".t--property-control-inline input")
-      .check({ force: true })
-      .wait(2000)
-      .should("be.checked");
+      //Checking again & verify snap
+      cy.get(".t--property-control-inline input")
+        .check({ force: true })
+        .wait(2000)
+        .should("be.checked");
 
-    cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
-      "inlineEnabled",
-    );
+      cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
+        "inlineEnabled",
+      );
 
-    //Unchecking again & verify snap
-    cy.get(".t--property-control-inline input")
-      .uncheck({ force: true })
-      .wait(2000)
-      .should("not.be.checked");
-    // taking screenshot of app home page in edit mode
-    cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
-      "inlineDisabled",
-    );
-  });
+      //Unchecking again & verify snap
+      cy.get(".t--property-control-inline input")
+        .uncheck({ force: true })
+        .wait(2000)
+        .should("not.be.checked");
+      // taking screenshot of app home page in edit mode
+      cy.get("[data-testid=switchgroup-container]").matchImageSnapshot(
+        "inlineDisabled",
+      );
+    },
+  );
 });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Camera/CameraImage_Spec.ts

@@ -15,7 +15,7 @@ import PageList from "../../../../../support/Pages/PageList";
 
 describe(
   "Camera widget - Image test",
-  { tags: ["@tag.Widget", "@tag.Camera"] },
+  { tags: ["@tag.Widget", "@tag.Camera", "@tag.Visual"] },
   () => {
     before(() => {
       //Reset video source to default incase it got changed in other specs
@@ -86,13 +86,6 @@ describe(
       agHelper.AssertExistingToggleState("Mirrored", "true");
       propPane.EnterJSContext("Mirrored", "{{(55>45)?false:true}}", true, true);
       deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.CAMERA));
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraImageMirroredScreen", {
-          failureThreshold: 0.15,
-          failureThresholdType: "percent",
-          customDiffConfig: { threshold: 0.15 },
-        });
       deployMode.NavigateBacktoEditor();
       EditorNavigation.SelectEntityByName("Camera1", EntityType.Widget);
       propPane.EnterJSContext("Mirrored", "", false);
@@ -125,29 +118,16 @@ describe(
       //Validate camera screen & icons
       agHelper.AssertElementVisibility(widgetLocators.cameraImageVideoOnOffBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraImageVideoDropdown);
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraImageScreen");
 
       //Capture image
       agHelper.GetNClick(widgetLocators.cameraCaptureBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraSaveBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraImageDiscardBtn);
 
-      //Validate image in preview screen
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraImagePreviewScreen");
-
       //Save image
       agHelper.GetNClick(widgetLocators.cameraSaveBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraRefreshBtn);
 
-      //Validate image in refresh screen
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraImageSavedScreen");
-
       //Refresh image
       agHelper.GetNClick(widgetLocators.cameraRefreshBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraCaptureBtn);

app/client/cypress/e2e/Regression/ClientSide/Widgets/Camera/CameraVideo_Spec.ts

@@ -14,7 +14,7 @@ import EditorNavigation, {
 
 describe(
   "Camera widget - Video test",
-  { tags: ["@tag.Widget", "@tag.Camera"] },
+  { tags: ["@tag.Widget", "@tag.Camera", "@tag.Visual"] },
   () => {
     before(() => {
       //Reset video source to default incase it got changed in other specs
@@ -68,9 +68,6 @@ describe(
       agHelper.AssertExistingToggleState("Mirrored", "true");
       propPane.EnterJSContext("Mirrored", "{{(55>45)?false:true}}", true, true);
       deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.CAMERA));
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraVideoMirroredScreen");
       deployMode.NavigateBacktoEditor();
       EditorNavigation.SelectEntityByName("Camera1", EntityType.Widget);
       propPane.EnterJSContext("Mirrored", "", false);
@@ -105,9 +102,6 @@ describe(
       agHelper.AssertElementVisibility(widgetLocators.cameraMicrophoneDropdown);
       agHelper.AssertElementVisibility(widgetLocators.cameraVideoOnOffBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraVideoDropdown);
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraVideoScreen");
 
       //Start video recording
       agHelper.GetNClick(widgetLocators.cameraCaptureBtn);
@@ -119,19 +113,11 @@ describe(
       agHelper.AssertElementVisibility(widgetLocators.cameraVideodiscardBtn);
       agHelper.AssertElementVisibility(widgetLocators.cameraVideoPlayBtn);
 
-      //Validate video in preview screen
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraVideoPreviewScreen");
-
       //Save video
       agHelper.GetNClick(widgetLocators.cameraSaveBtn);
 
       //Validate video in refresh screen
       agHelper.AssertElementVisibility(widgetLocators.cameraRefreshBtn);
-      agHelper
-        .GetElement(locators._widgetInDeployed(draggableWidgets.CAMERA))
-        .matchImageSnapshot("cameraVideoSavedScreen");
 
       //Refresh video
       agHelper.GetNClick(widgetLocators.cameraRefreshBtn);
@@ -163,111 +149,5 @@ describe(
       table.ValidateDownloadNVerify("video1.mp4");
       table.ValidateDownloadNVerify("video.mp4");
     });
-
-    //Tests to Validate camera to video widget binding
-    //Skipping below tests due to issue - https://github.com/appsmithorg/appsmith/issues/26166
-    // it("7. Video Recording test - Disabled Camera but Enabled Microphone", () => {
-    //   deployMode.NavigateBacktoEditor();
-    //   entityExplorer.SelectEntityByName("Camera1");
-    //   agHelper.GetNClick(propPane._mode("Video"), 1);
-    //   entityExplorer.DragNDropWidget(draggableWidgets.VIDEO);
-    //   propPane.TypeTextIntoField("URL", "{{Camera1.videoBlobURL}}");
-
-    //   deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.CAMERA));
-    //   agHelper.GetNClick(widgetLocators.cameraVideoOnOffBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraCaptureBtn);
-    //   agHelper.Sleep(3000);
-    //   agHelper.GetNClick(widgetLocators.cameraStopRecordingBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraSaveBtn);
-    //   agHelper.GetNClick(draggableWidgets.VIDEO);
-    //   agHelper.Sleep(5000);
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitAudioDecodedByteCount;
-
-    //       //Threshold greater than 30000 shows that the audio is playing
-    //       expect(attrValue).be.greaterThan(30000);
-    //     });
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitVideoDecodedByteCount;
-
-    //       //Threshold less than 10000 shows that the video is not playing
-    //       expect(attrValue).be.lessThan(10000);
-    //     });
-    // });
-
-    // it("8. Video Recording test - Enabled Camera but Disabled Microphone", () => {
-    //   entityExplorer.SelectEntityByName("Camera1");
-    //   agHelper.GetNClick(propPane._mode("Video"), 1);
-    //   entityExplorer.DragNDropWidget(draggableWidgets.VIDEO);
-    //   propPane.TypeTextIntoField("URL", "{{Camera1.videoBlobURL}}");
-
-    //   deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.CAMERA));
-    //   agHelper.GetNClick(widgetLocators.cameraVideoOnOffBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraMicrophoneBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraCaptureBtn);
-    //   agHelper.Sleep(3000);
-    //   agHelper.GetNClick(widgetLocators.cameraStopRecordingBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraSaveBtn);
-    //   agHelper.GetNClick(draggableWidgets.VIDEO);
-    //   agHelper.Sleep(5000);
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitAudioDecodedByteCount;
-
-    //       //Threshold less than 1000 shows that the audio is not playing
-    //       expect(attrValue).be.lessThan(1000);
-    //     });
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitVideoDecodedByteCount;
-
-    //       //Threshold greater than 30000 shows that the video is playing
-    //       expect(attrValue).be.greaterThan(30000);
-    //     });
-    // });
-
-    // it("9. Video Recording test - Enabled Camera but Enabled Microphone", () => {
-    //   entityExplorer.SelectEntityByName("Camera1");
-    //   agHelper.GetNClick(propPane._mode("Video"), 1);
-    //   entityExplorer.DragNDropWidget(draggableWidgets.VIDEO);
-    //   propPane.TypeTextIntoField("URL", "{{Camera1.videoBlobURL}}");
-
-    //   deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.CAMERA));
-    //   agHelper.GetNClick(widgetLocators.cameraMicrophoneBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraCaptureBtn);
-    //   agHelper.Sleep(3000);
-    //   agHelper.GetNClick(widgetLocators.cameraStopRecordingBtn);
-    //   agHelper.GetNClick(widgetLocators.cameraSaveBtn);
-    //   agHelper.GetNClick(draggableWidgets.VIDEO);
-    //   agHelper.Sleep(5000);
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitAudioDecodedByteCount;
-
-    //       //Threshold greater than 30000 shows that the audio is playing
-    //       expect(attrValue).be.greaterThan(30000);
-    //     });
-    //   agHelper
-    //     .GetElement(widgetLocators.cameraVideo)
-    //     .eq(1)
-    //     .should(($el) => {
-    //       const attrValue = $el[0].webkitVideoDecodedByteCount;
-
-    //       //Threshold greater than 30000 shows that the video is playing
-    //       expect(attrValue).be.greaterThan(30000);
-    //     });
-    // });
   },
 );

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Chart_widget_spec_1.ts

@@ -10,7 +10,7 @@ import EditorNavigation, {
   EntityType,
 } from "../../../../../support/Pages/EditorNavigation";
 
-describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
+describe("", { tags: ["@tag.Widget", "@tag.Chart", "@tag.Visual"] }, () => {
   before(() => {
     entityExplorer.DragDropWidgetNVerify(draggableWidgets.CHART);
   });
@@ -24,16 +24,10 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
     propPane.SelectPropertiesDropDown("Chart Type", "Pie chart");
     agHelper.AssertAutoSave();
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/piechartsnapshot");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.TogglePropertyState("Show Labels", "On");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/piechartsnapshotwithlabels");
   });
 
   it("2. Test line chart", () => {
@@ -41,32 +35,20 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
     propPane.SelectPropertiesDropDown("Chart Type", "Line chart");
     agHelper.AssertAutoSave();
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/linechartsnapshot");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.TogglePropertyState("Show Labels", "On");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/linechartsnapshotwithlabels");
   });
 
   it("3. Test column chart", () => {
     propPane.TogglePropertyState("Show Labels", "Off");
     propPane.SelectPropertiesDropDown("Chart Type", "Column chart");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/columnchartsnapshot");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.TogglePropertyState("Show Labels", "On");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/columnchartsnapshotwithlabels");
   });
 
   it("4. Test area chart", () => {
@@ -74,15 +56,9 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
     propPane.SelectPropertiesDropDown("Chart Type", "Area chart");
     agHelper.AssertAutoSave();
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/areachartsnapshot");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.TogglePropertyState("Show Labels", "On");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/areachartsnapshotwithlabels");
   });
 });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Chart_widget_spec_2.ts

@@ -10,7 +10,7 @@ import EditorNavigation, {
   EntityType,
 } from "../../../../../support/Pages/EditorNavigation";
 
-describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
+describe("", { tags: ["@tag.Widget", "@tag.Chart", "@tag.Visual"] }, () => {
   before(() => {
     entityExplorer.DragDropWidgetNVerify(draggableWidgets.CHART);
   });
@@ -23,9 +23,6 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
     );
     agHelper.AssertAutoSave();
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/piechartsnapshotwithtitle");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
   });
@@ -34,16 +31,10 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
     propPane.SelectPropertiesDropDown("Chart Type", "Column chart");
     agHelper.AssertAutoSave();
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/columnchartsnapshotwithoutadaptiveaxis");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.TogglePropertyState("Adaptive axis", "On");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/columnchartsnapshotwithadaptiveaxis");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
   });
@@ -51,27 +42,14 @@ describe("", { tags: ["@tag.Widget", "@tag.Chart"] }, () => {
   it("3. Test x axis label orientation chart", () => {
     propPane.SelectPropertiesDropDown("Chart Type", "Line chart");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot("chartwidget/linechartWithAutoXAxisLabelOrientation");
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.SelectPropertiesDropDown("x-axis label orientation", "Slant");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot(
-        "chartwidget/linechartWithSlantXAxisLabelOrientation",
-      );
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
     propPane.SelectPropertiesDropDown("x-axis label orientation", "Rotate");
     deployMode.DeployApp();
-    agHelper
-      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
-      .matchImageSnapshot(
-        "chartwidget/linechartWithRotateXAxisLabelOrientation",
-      );
     deployMode.NavigateBacktoEditor();
     EditorNavigation.SelectEntityByName("Chart1", EntityType.Widget);
   });

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Custom3DChartSpec.ts

@@ -5,9 +5,9 @@ import EditorNavigation, {
 } from "../../../../../support/Pages/EditorNavigation";
 const publicWidgetsPage = require("../../../../../locators/publishWidgetspage.json");
 
-describe(
+describe.skip(
   "3D Custom EChart feature",
-  { tags: ["@tag.Widget", "@tag.Chart"] },
+  { tags: ["@tag.Widget", "@tag.Chart", "@tag.Visual"] },
   function () {
     it("1. 3D EChart Custom Chart Widget Functionality", function () {
       _.agHelper.RefreshPage();

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts

@@ -18,7 +18,7 @@ const _mapChartPlot = (text: string) =>
 
 describe(
   "Map Chart Widget Functionality",
-  { tags: ["@tag.Widget", "@tag.Maps"] },
+  { tags: ["@tag.Widget", "@tag.Maps", "@tag.Visual"] },
   function () {
     it("1. Drag and drop a Map Chart widget and verify", function () {
       entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200);

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts

@@ -29,139 +29,143 @@ const location = [
   },
 ];
 
-describe("Map Widget", { tags: ["@tag.Widget", "@tag.Maps"] }, function () {
-  it("1.Drag Map Widget and Verify the Map Widget with Initial Location", () => {
-    //Add map and verify
-    entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAP, 200, 200);
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapsimple");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+describe(
+  "Map Widget",
+  { tags: ["@tag.Widget", "@tag.Maps", "@tag.Visual"] },
+  function () {
+    it("1.Drag Map Widget and Verify the Map Widget with Initial Location", () => {
+      //Add map and verify
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAP, 200, 200);
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapsimple");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Add Initial location and verify
-    propPane.TypeTextIntoField("Initial location", "New York, NY, USA");
-    agHelper.PressEnter();
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithInitalLocation");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+      // Add Initial location and verify
+      propPane.TypeTextIntoField("Initial location", "New York, NY, USA");
+      agHelper.PressEnter();
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithInitalLocation");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // convert Initial location to JS, update and verify
-    propPane.EnterJSContext("Initial location", JSON.stringify(location[0]));
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithinItalLocationAsJS");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
+      // convert Initial location to JS, update and verify
+      propPane.EnterJSContext("Initial location", JSON.stringify(location[0]));
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithinItalLocationAsJS");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
 
-  it("2.Verify the Map Widget with Default markers", () => {
-    // With single default marker
-    propPane.TypeTextIntoField(
-      "Default Markers",
-      JSON.stringify(location.slice(0, 1)),
-    );
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker1");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    it("2.Verify the Map Widget with Default markers", () => {
+      // With single default marker
+      propPane.TypeTextIntoField(
+        "Default Markers",
+        JSON.stringify(location.slice(0, 1)),
+      );
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker1");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // With multiple default marker
-    propPane.TypeTextIntoField(
-      "Default Markers",
-      JSON.stringify(location.slice(0, 2)),
-    );
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker2");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
+      // With multiple default marker
+      propPane.TypeTextIntoField(
+        "Default Markers",
+        JSON.stringify(location.slice(0, 2)),
+      );
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker2");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
 
-  it("3.Verify the Map Widget with zoom level", () => {
-    // With multiple default marker
-    propPane.SetZoomLevel(70);
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomOut");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    it("3.Verify the Map Widget with zoom level", () => {
+      // With multiple default marker
+      propPane.SetZoomLevel(70);
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomOut");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Zoom in and verify
-    propPane.SetZoomLevel(30);
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomIn");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
+      // Zoom in and verify
+      propPane.SetZoomLevel(30);
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomIn");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
 
-  it("4.1 Verify the Map Widget with different general settings", () => {
-    // With visibility off
-    propPane.TogglePropertyState("Visible", "Off");
-    deployMode.DeployApp();
-    agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOff");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    it("4.1 Verify the Map Widget with different general settings", () => {
+      // With visibility off
+      propPane.TogglePropertyState("Visible", "Off");
+      deployMode.DeployApp();
+      agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOff");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Convert visibility to JS and set the visibility "On" and verify
-    propPane.EnterJSContext("Visible", "true");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOnWithJS");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+      // Convert visibility to JS and set the visibility "On" and verify
+      propPane.EnterJSContext("Visible", "true");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOnWithJS");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Toggle off Enable pick location and verify
-    propPane.TogglePropertyState("Enable pick location", "Off");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithPickLocationOff");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+      // Toggle off Enable pick location and verify
+      propPane.TogglePropertyState("Enable pick location", "Off");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithPickLocationOff");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Toggle off Map & marker centering and verify
-    propPane.TogglePropertyState("Map & marker centering", "Off");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithMapNMarkerCenteringOff");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
+      // Toggle off Map & marker centering and verify
+      propPane.TogglePropertyState("Map & marker centering", "Off");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithMapNMarkerCenteringOff");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
 
-  it("4.2 Verify the Map Widget with different general settings", () => {
-    // Toggle On Enabling clustering and verify
-    propPane.TogglePropertyState("Enable clustering", "On");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringON");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    it("4.2 Verify the Map Widget with different general settings", () => {
+      // Toggle On Enabling clustering and verify
+      propPane.TogglePropertyState("Enable clustering", "On");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringON");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Convert Enabling clustering and disable it and verify
-    propPane.EnterJSContext("Enable clustering", "false");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringOff");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+      // Convert Enabling clustering and disable it and verify
+      propPane.EnterJSContext("Enable clustering", "false");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringOff");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Toggle off Enable search location and verify
-    propPane.TogglePropertyState("Enable search location", "Off");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithEnableSearchLocationOff");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
+      // Toggle off Enable search location and verify
+      propPane.TogglePropertyState("Enable search location", "Off");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithEnableSearchLocationOff");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
 
-  it("5 Verify the style changes", () => {
-    // Change border radius and verify
-    propPane.MoveToTab("Style");
-    propPane.EnterJSContext("Border radius", "1.5rem");
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithBorderRadius");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    it("5 Verify the style changes", () => {
+      // Change border radius and verify
+      propPane.MoveToTab("Style");
+      propPane.EnterJSContext("Border radius", "1.5rem");
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithBorderRadius");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
 
-    // Change box shadow and verify
-    const boxShadow =
-      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
-    propPane.MoveToTab("Style");
-    propPane.EnterJSContext("Box shadow", boxShadow);
-    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
-    agHelper.VerifySnapshot(locators._root, "mapWithBoxShadow");
-    deployMode.NavigateBacktoEditor();
-    EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
-  });
-});
+      // Change box shadow and verify
+      const boxShadow =
+        "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+      propPane.MoveToTab("Style");
+      propPane.EnterJSContext("Box shadow", boxShadow);
+      deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+      agHelper.VerifySnapshot(locators._root, "mapWithBoxShadow");
+      deployMode.NavigateBacktoEditor();
+      EditorNavigation.SelectEntityByName("Map1", EntityType.Widget);
+    });
+  },
+);

app/client/cypress/plugins/index.js

@@ -5,9 +5,6 @@ const dotenv = require("dotenv");
 const chalk = require("chalk");
 const cypressLogToOutput = require("cypress-log-to-output");
 const installLogsPrinter = require("cypress-terminal-report/src/installLogsPrinter");
-const {
-  addMatchImageSnapshotPlugin,
-} = require("cypress-image-snapshot/plugin");
 const { tagify } = require("cypress-tags");
 const { cypressHooks } = require("../scripts/cypress-hooks");
 const { dynamicSplit } = require("../scripts/cypress-split-dynamic");
@@ -30,12 +27,6 @@ const { staticSplit } = require("../scripts/cypress-split-static");
  */
 
 module.exports = async (on, config) => {
-  // on("task", {
-  //   isFileExist,
-  // });
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-
   cypressLogToOutput.install(on, (type, event) => {
     if (event.level === "error" || event.type === "error") {
       return true;
@@ -54,7 +45,6 @@ module.exports = async (on, config) => {
   installLogsPrinter(on, logsPrinterOptions);
 
   on("file:preprocessor", tagify(config));
-  addMatchImageSnapshotPlugin(on, config);
 
   on("before:browser:launch", (browser = {}, launchOptions) => {
     /*
@@ -65,7 +55,7 @@ module.exports = async (on, config) => {
       browser,
       launchOptions.args,
     );
-    if (browser.name === "chrome") {
+    if (browser.name === "chrome" || browser.name === "chromium") {
       const video = path.join(
         "cypress",
         "fixtures",
@@ -81,11 +71,6 @@ module.exports = async (on, config) => {
       return launchOptions;
     }
 
-    if (browser.name === "chromium") {
-      launchOptions.args.push("--window-size=1400,1100");
-      return launchOptions;
-    }
-
     if (browser.name === "electron") {
       // && browser.isHeadless) {
       launchOptions.preferences.fullscreen = true;
@@ -96,20 +81,6 @@ module.exports = async (on, config) => {
       return launchOptions;
     }
   });
-  // module.exports = (on, config) => {
-  //   on("after:spec", (spec, results) => {
-  //     if (results && results.video) {
-  //       // Do we have failures for any retry attempts?
-  //       const failures = _.some(results.tests, (test) => {
-  //         return _.some(test.attempts, { state: "failed" });
-  //       });
-  //       if (!failures) {
-  //         // delete the video if the spec passed and no tests retried
-  //         return del(results.video);
-  //       }
-  //     }
-  //   });
-  // };
 
   /**
    * Fallback to APPSMITH_* env variables for Cypress.env if config.env doesn't already have it.