chore: cypress snapshot types (#34722)

## Description
1. Add scripts for local e2e testing in the docker container. 
2. Add types for cypress-image-snapshot

In this PR, I also added the following PRS as they affect screenshot
tests as well. I did this to speed up the process and unblock the team.

#34528
#34546
#34676
#34729
#34638
#34639
#34511

To run E2E tests locally in docker, you need to do the following:
1. Run FE locally and prepare the tests for local launch. See the
instructions
[here](https://github.com/appsmithorg/appsmith/blob/release/contributions/ClientSetup.md).
2. Run `yarn cypress:snapshot:docker:build` — this will create a docker
container with the necessary environment.
3. Run `yarn cypress:snapshot:docker
"./cypress/e2e/Regression/ClientSide/Anvil/Widgets/*_spec.ts"
updateSnapshots=false`. Here we can use the path to a specific file, or
set `updateSnapshots=true` flag to update the screenshots.

## Automation

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

### :mag: 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/9844579277>
> Commit: 75f2659
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9844579277&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 08 Jul 2024 18:37:36 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 image snapshot testing with the
`@types/cypress-image-snapshot` dependency.

- **Refactor**
- Updated test specifications by removing unnecessary
`triggerInputInvalidState()` calls.
- Reorganized and improved efficiency of image snapshot methods for
various devices.

- **Chores**
- Updated `Dockerfile` to configure the Cypress environment with
specific versions for dependencies.
  - Changed import paths in `e2e.js` for better module resolution. 

- **Style**
  - Fixed a comment typo in Cypress plugin configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <[email protected]>
Co-authored-by: unknown <[email protected]>

app/client/cypress/Dockerfile

@@ -0,0 +1,11 @@
+#ARG CHROME_VERSION="126.0.6478.114-1"
+ARG YARN_VERSION='1.22.22'
+ARG NODE_VERSION='20.11.1'
+ARG CYPRESS_VERSION='13.5.1'
+FROM cypress/factory:4.0.2
+
+# Install chromium in this way since there is no browsers in the docker container for the arm64 architecture
+# https://github.com/cypress-io/cypress-docker-images/issues/695
+RUN apt update && apt install -y chromium
+
+ENTRYPOINT ["yarn", "cypress:snapshot"]

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

@@ -0,0 +1,28 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Checkbox Group Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilCheckboxGroupWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.triggerCheckboxGroupInvalidState();
+      anvilSnapshot.verifyCanvasMode("CheckboxGroupWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("CheckboxGroupWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("CheckboxGroupWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Checkbox Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilCheckboxWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("CheckboxWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("CheckboxWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("CheckboxWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Heading Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilHeadingWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("HeadingWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("HeadingWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("HeadingWidget");
+    });
+  },
+);

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

@@ -5,7 +5,7 @@ import {
 } from "../../../../../support/Objects/ObjectsCore";
 
 describe(
-  `${ANVIL_EDITOR_TEST}: Anvil tests for Button Widget`,
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Input Widget`,
   { tags: ["@tag.Anvil"] },
   () => {
     before(() => {

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Paragraph Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilParagraphWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("ParagraphWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("ParagraphWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("ParagraphWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Radio Group Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilRadioGroupWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("RadioGroupWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("RadioGroupWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("RadioGroupWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Stats Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilStatsWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("StatsWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("StatsWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("StatsWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Switch Group Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilSwitchGroupWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("SwitchGroupWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("SwitchoGroupWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("SwitchGroupWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Switch Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilSwitchWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("SwitchWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("SwitchWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("SwitchWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Table Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilTableWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("TableWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("TableWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("TableWidget");
+    });
+  },
+);

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

@@ -0,0 +1,27 @@
+import { ANVIL_EDITOR_TEST } from "../../../../../support/Constants";
+import {
+  agHelper,
+  anvilSnapshot,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  `${ANVIL_EDITOR_TEST}: Anvil tests for Zone and Section Widget`,
+  { tags: ["@tag.Anvil"] },
+  () => {
+    before(() => {
+      agHelper.AddDsl("anvilZoneSectionWidget");
+    });
+
+    it("1. Canvas Mode", () => {
+      anvilSnapshot.verifyCanvasMode("ZoneSectionWidget");
+    });
+
+    it("2. Preview Mode", () => {
+      anvilSnapshot.verifyPreviewMode("ZoneSectionWidget");
+    });
+
+    it("3. Deploy Mode", () => {
+      anvilSnapshot.verifyDeployMode("ZoneSectionWidget");
+    });
+  },
+);