first commit

files/e2e/cypress/e2e/full-screenshot.cy.ts

@@ -0,0 +1,33 @@
+describe("full page screenshot", () => {
+    const takeFullPageScreenshots = () => {
+        cy.visit("/");
+        cy.wait(500);
+        cy.window().toMatchImageSnapshot("first", {
+            threshold: 0.8
+        });
+        cy.wait(400);
+        cy.window().toMatchImageSnapshot("second", {
+            threshold: 0.8
+        });
+    };
+
+    it("Normal screen", () => {
+        cy.viewport(1280, 720);
+        takeFullPageScreenshots();
+    });
+
+    it("Old puter screen", () => {
+        cy.viewport(800, 600);
+        takeFullPageScreenshots();
+    });
+
+    it("iPhone8", () => {
+        cy.viewport("iphone-8");
+        takeFullPageScreenshots();
+    });
+
+    it("iPad2", () => {
+        cy.viewport("ipad-2");
+        takeFullPageScreenshots();
+    });
+});

files/e2e/cypress/support/commands.ts

@@ -0,0 +1,51 @@
+import "cypress-plugin-snapshots/commands";
+
+declare global {
+    namespace Cypress {
+        interface MatchSnapshotOptions {
+            /** Custom name for the snapshot */
+            name?: string;
+            /** Save snapshot as JSON instead of plain text */
+            json?: boolean;
+            /** Timeout in milliseconds */
+            timeout?: number;
+        }
+
+        interface MatchImageSnapshotOptions {
+            /** Custom name for the image snapshot */
+            name?: string;
+            /** Mismatch threshold for considering images different */
+            threshold?: number;
+            /** Type of threshold comparison */
+            thresholdType?: "pixel" | "percent";
+            /** Direction of the difference detection */
+            diffDirection?: "horizontal" | "vertical";
+            /** Allow different image sizes */
+            allowSizeMismatch?: boolean;
+            /** Custom configuration for pixelmatch */
+            customDiffConfig?: Record<string, unknown>;
+            /** Path to custom snapshots directory */
+            customSnapshotsDir?: string;
+            /** Path to custom diffs directory */
+            customDiffDir?: string;
+            /** Capture mode */
+            capture?: "viewport" | "fullPage" | "runner";
+        }
+
+        interface Chainable {
+            /**
+             * Take a text-based snapshot and compare with a baseline
+             * @param name - Name of the snapshot (optional)
+             * @param options - Snapshot options
+             */
+            toMatchSnapshot(name?: string, options?: MatchSnapshotOptions): Chainable;
+
+            /**
+             * Take an image snapshot and compare with a baseline
+             * @param name - Name of the snapshot (optional)
+             * @param options - Image snapshot options
+             */
+            toMatchImageSnapshot(name?: string, options?: MatchImageSnapshotOptions): Chainable;
+        }
+    }
+}

files/e2e/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import "./commands";

files/e2e/cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "sourceMap": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}