appsmithorg · KelvinOm · Jun 27, 2024 · Jul 1, 2024 · Jul 3, 2024 · coderabbitai
@@ -13,7 +13,6 @@ describe(
     });
 
     it("1. Canvas Mode", () => {
-      anvilSnapshot.triggerInputInvalidState();
       anvilSnapshot.verifyCanvasMode("CurrencyInputWidget");
     });
 

@@ -13,6 +13,7 @@ describe(
     });
 
     it("1. Canvas Mode", () => {
+      cy.wait(5000);
-      cy.wait(5000);
+      cy.get('[data-testid="IconButtonWidget"]').should('be.visible');
-      cy.wait(5000);
+      cy.get('[data-testid="IconButtonWidget"]').should('be.visible');
       anvilSnapshot.verifyCanvasMode("IconButtonWidget");
     });
 

@@ -13,7 +13,6 @@ describe(
     });
 
     it("1. Canvas Mode", () => {
-      anvilSnapshot.triggerInputInvalidState();
       anvilSnapshot.verifyCanvasMode("InputWidget");
     });
 

@@ -13,7 +13,6 @@ describe(
     });
 
     it("1. Canvas Mode", () => {
-      anvilSnapshot.triggerInputInvalidState();
       anvilSnapshot.verifyCanvasMode("PhoneInputWidget");
     });
 

@@ -1,3 +1,4 @@
+import { agHelper } from "../../Objects/ObjectsCore";
 import { ObjectsRegistry } from "../../Objects/Registry";
 
 export class AnvilSnapshot {
@@ -9,20 +10,24 @@ export class AnvilSnapshot {
     exitPreviewMode: ObjectsRegistry.CommonLocators._exitPreviewMode,
     canvas: "[data-testid=t--canvas-artboard]",
     colorMode: "[data-testid=t--anvil-theme-settings-color-mode]",
-    appViewerPage: "[data-testid=t--app-viewer-page-body]",
+    appViewerPage: "[data-testid=t--app-viewer-page]",
     propertyPaneSidebar: "[data-testid=t--property-pane-sidebar]",
   };
 
   public verifyCanvasMode = async (widgetName: string) => {
     this.agHelper
       .GetElement(this.locators.canvas)
-      .matchImageSnapshot(`anvil${widgetName}Canvas`);
+      .matchImageSnapshot(`anvil${widgetName}Canvas`, {
+        comparisonMethod: "ssim",
+      });
 
     this.setTheme("dark");
 
     this.agHelper
       .GetElement(this.locators.canvas)
-      .matchImageSnapshot(`anvil${widgetName}CanvasDark`);
+      .matchImageSnapshot(`anvil${widgetName}CanvasDark`, {
+        comparisonMethod: "ssim",
+      });
 
     this.setTheme("light");
   };
@@ -34,7 +39,9 @@ export class AnvilSnapshot {
 
     this.agHelper
       .GetElement(this.locators.canvas)
-      .matchImageSnapshot(`anvil${widgetName}Preview`);
+      .matchImageSnapshot(`anvil${widgetName}Preview`, {
+        comparisonMethod: "ssim",
+      });
 
     this.exitPreviewMode();
   };
@@ -59,8 +66,9 @@ export class AnvilSnapshot {
       this.agHelper
         .GetElement(this.locators.appViewerPage)
         .matchImageSnapshot(`anvil${widgetName}Deploy${device}`, {
-          capture: "fullPage",
+          comparisonMethod: "ssim",
         });
+      agHelper.Sleep(500);
     });
   };
 
@@ -82,12 +90,4 @@ export class AnvilSnapshot {
 
     this.appSettings.ClosePane();
   };
-
-  public triggerInputInvalidState = () => {
-    this.enterPreviewMode();
-    cy.get("input[aria-required=true]").first().type("123");
-    cy.get("input[aria-required=true]").first().clear();
-    this.exitPreviewMode();
-    this.agHelper.GetNClick(this.locators.propertyPaneSidebar);
-  };
 }
@@ -32,6 +32,7 @@
     "g:jest": "cd $INIT_CWD && jest --colors --no-cache --silent --maxWorkers=50%",
     "test:unit:ci": "yarn workspaces foreach -tv run test:unit",
     "generate:widget": "plop --plopfile generators/index.js",
+    "generate:anvil-snapshots": "rm -rf cypress/snapshots/Anvil* && npx cypress run --spec cypress/e2e/Regression/ClientSide/Anvil/Widgets/** --browser chrome --reporter cypress-image-snapshot/reporter",
     "postinstall": "node cypress/apply-patches.js && yarn init-husky",
     "storybook": "yarn workspace @design-system/storybook storybook",
     "lint": "eslint --cache ./src && cd ./cypress && eslint -c .eslintrc.json --cache ./",
@@ -82,6 +83,7 @@
     "@tanstack/virtual-core": "^3.0.0-beta.18",
     "@tinymce/tinymce-react": "^5.0.0",
     "@types/babel__standalone": "^7.1.7",
+    "@types/cypress-image-snapshot": "^3.1.9",
     "@types/d3-geo": "^3.1.0",
     "@types/google.maps": "^3.51.0",
     "@types/react-page-visibility": "^6.4.1",

diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
@@ -218,7 +218,6 @@ function AppViewer(props: Props) {
           <AppViewerBody
             $contain={isAutoLayout ? "content" : "strict"}
             className={CANVAS_SELECTOR}
-            data-testid="t--app-viewer-page-body"
             hasPages={pages.length > 1}
             headerHeight={headerHeight}
             ref={focusRef}

diff --git a/app/client/yarn.lock b/app/client/yarn.lock
@@ -10547,6 +10547,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cypress-image-snapshot@npm:^3.1.9":
+  version: 3.1.9
+  resolution: "@types/cypress-image-snapshot@npm:3.1.9"
+  checksum: 8afbeb26c575275d02861cfafde5bfae3a7d25f35d0c18bbc1c70a72b45a8bc021ff73de3b5d4a36c7cb22bc86442fee14308ef096f9650dc5eddd941f923f2f
+  languageName: node
+  linkType: hard
+
 "@types/d3-geo@npm:^3.1.0":
   version: 3.1.0
   resolution: "@types/d3-geo@npm:3.1.0"
@@ -13128,6 +13135,7 @@ __metadata:
     "@tinymce/tinymce-react": ^5.0.0
     "@types/babel__standalone": ^7.1.7
     "@types/codemirror": ^0.0.96
+    "@types/cypress-image-snapshot": ^3.1.9
     "@types/d3-geo": ^3.1.0
     "@types/deep-diff": ^1.0.0
     "@types/dom-mediacapture-record": ^1.0.11