chore: change snapshot package

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");
     });
   },
 );