first commit

.gitignore

@@ -0,0 +1,2 @@
+.idea
+.DS_Store

Dockerfile

@@ -0,0 +1,18 @@
+FROM cypress/base:22.13.1
+
+RUN npm config set @skydust:registry=https://gitea.skydust.fr/api/packages/skydust/npm/
+RUN npm install -g @skydust/toolkit@1.2.3
+RUN npm install -g corepack@latest
+
+RUN apt-get update
+RUN apt-get install --yes firefox-esr
+RUN apt-get clean
+
+COPY ./e2e /e2e
+
+RUN cd /e2e && npx cypress install
+
+COPY ./entrypoint.sh /
+RUN chmod +x /entrypoint.sh
+
+ENTRYPOINT ["/entrypoint.sh"]

action.yml

@@ -0,0 +1,13 @@
+name: Takes cypress screenshots
+description: Takes cypress screenshots
+author: Skydust
+
+# Define your inputs here.
+inputs:
+  baseUrl:
+    description: The server url
+    required: true
+
+runs:
+  using: docker
+  image: Dockerfile

e2e/cypress.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from "cypress";
+import { initPlugin } from "cypress-plugin-snapshots/plugin";
+
+export default defineConfig({
+    e2e: {
+        baseUrl: "http://127.0.0.1:5173/",
+        screenshotOnRunFailure: true, // Capture screenshots on test failure
+        setupNodeEvents(on, config) {
+            initPlugin(on, config);
+            return config;
+        },
+        excludeSpecPattern: [
+            "**/__snapshots__/*",
+            "**/__image_snapshots__/*"
+        ]
+    },
+    screenshotsFolder: "cypress/screenshots"
+});

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();
+    });
+});

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;
+        }
+    }
+}

e2e/cypress/support/e2e.ts

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

e2e/cypress/tsconfig.json

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

e2e/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "cypress-e2e",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "cy:open": "cypress open --e2e",
+    "cy:test": "cypress run --e2e -b firefox"
+  },
+  "devDependencies": {
+    "cypress": "^14.2.1",
+    "cypress-plugin-snapshots": "^1.4.4",
+    "typescript": "~5.8.0"
+  },
+  "packageManager": "pnpm@10.2.1+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
+}

entrypoint.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+INPUT_BASE_URL=$baseUrl
+
+set -e
+
+CY_ACTION_PATH="/e2e"
+
+cd "${CY_ACTION_PATH}"
+
+export CYPRESS_BASE_URL="${INPUT_BASE_URL}"
+
+log_info "Install cypress dependencies"
+corepack enable --install-directory "/usr/local/bin/"
+pnpm install
+
+log_info "Running cypress cy:test"
+
+npm run cy:test
+
+mkdir -p "${GITHUB_WORKSPACE}/artifacts"
+cp -r "${CY_ACTION_PATH}/cypress/e2e/__image_snapshots__/" "${GITHUB_WORKSPACE}/artifacts/"