use linux locally as well

Dockerfile.test

@@ -0,0 +1,51 @@
+FROM node:18
+
+WORKDIR /app
+
+# Install Playwright dependencies for Chromium only
+RUN apt-get update && \
+    apt-get install -y \
+    libglib2.0-0 \
+    libnss3 \
+    libnspr4 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libcups2 \
+    libdrm2 \
+    libdbus-1-3 \
+    libxcb1 \
+    libxkbcommon0 \
+    libx11-6 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxext6 \
+    libxfixes3 \
+    libxrandr2 \
+    libgbm1 \
+    libpango-1.0-0 \
+    libcairo2 \
+    libasound2 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies and Chromium
+RUN npm install --no-fund --ignore-scripts && \
+    # Force install platform-specific Rollup
+    npm install --platform=linux --arch=arm64 @rollup/rollup-linux-arm64-gnu && \
+    # Install only Chromium with no sandbox
+    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install playwright-core && \
+    npx playwright install --with-deps chromium
+
+# Copy source files
+COPY . .
+
+# Build the app with explicit NODE_ENV
+RUN NODE_ENV=production npm run build
+
+# Set environment variable to use no sandbox
+ENV PLAYWRIGHT_SKIP_BROWSER_SANDBOX=1
+
+# Command to run tests
+CMD ["npm", "run", "test:visual:update-snapshots"] 

package.json

@@ -18,7 +18,8 @@
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "test:visual:update-snapshots": "bash ./scripts/update-visual-snapshots.sh"
+    "test:visual:update-snapshots": "bash ./scripts/update-visual-snapshots.sh",
+    "test:visual:update-snapshots:docker": "bash ./scripts/docker-test.sh"
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.0",

playwright.config.ts

@@ -12,18 +12,24 @@ export default defineConfig({
     trace: "on-first-retry",
     screenshot: "only-on-failure",
   },
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.1,
+    },
+  },
   projects: [
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+    // Commenting out other browsers since we're only using Chromium
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
   ],
 });

scripts/docker-test.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+# Enable error handling
+set -e
+
+# Function to check Docker connection
+check_docker() {
+    local max_attempts=5
+    local attempt=1
+    local wait_time=5
+
+    while [ $attempt -le $max_attempts ]; do
+        echo "Attempt $attempt of $max_attempts: Checking Docker connection..."
+        if $CLI info > /dev/null 2>&1; then
+            echo "Docker connection successful!"
+            return 0
+        fi
+        echo "Docker connection failed. Waiting $wait_time seconds before retry..."
+        sleep $wait_time
+        attempt=$((attempt + 1))
+    done
+
+    echo "Failed to connect to Docker after $max_attempts attempts"
+    return 1
+}
+
+echo "🚀 Starting container build process..."
+
+# Use full path to Docker from Rancher Desktop
+CLI="${HOME}/.rd/bin/docker"
+
+# Switch to Rancher Desktop context
+echo "Switching to Rancher Desktop context..."
+$CLI context use rancher-desktop
+
+# Check Docker connection
+if ! check_docker; then
+    echo "❌ Error: Could not establish connection to Docker daemon"
+    exit 1
+fi
+
+# Clean up any existing containers and images
+echo "🧹 Cleaning up any existing containers and images..."
+$CLI rm -f react-gravity-test-run 2>/dev/null || true
+$CLI rmi -f react-gravity-test 2>/dev/null || true
+
+# Build the container image with build progress
+echo "🏗️  Building container image..."
+$CLI build \
+    --progress=plain \
+    --no-cache \
+    --network=host \
+    --platform linux/arm64 \
+    --build-arg BUILDPLATFORM=linux/arm64 \
+    --build-arg TARGETPLATFORM=linux/arm64 \
+    -t react-gravity-test \
+    -f Dockerfile.test .
+
+# Run the container and copy the snapshots back
+echo "🏃 Running tests in container..."
+$CLI run --platform linux/arm64 --name react-gravity-test-run react-gravity-test
+
+echo "📸 Copying snapshots from container..."
+$CLI cp react-gravity-test-run:/app/src/e2e/visual.spec.ts-snapshots ./src/e2e/
+
+echo "🧹 Cleaning up container..."
+$CLI rm react-gravity-test-run
+
+echo "✅ Done!"

src/e2e/visual.spec.ts

@@ -13,15 +13,12 @@ test.describe("Gravity Simulator Visual Tests", () => {
     "Binary Pulsar",
   ];
 
-  const getSnapshotName = (name: string, browserName: string) => {
-    // In CI (Linux), Playwright adds -linux suffix
-    const platformSuffix = process.env.CI
-      ? `-${browserName}-linux`
-      : `-${browserName}`;
-    return `${name}${platformSuffix}.png`;
+  const getSnapshotName = (name: string) => {
+    // Since we're only using Chromium, we don't need browser-specific names
+    return `${name}-chromium.png`;
   };
 
-  test("Main app layout visual test", async ({ page, browserName }) => {
+  test("Main app layout visual test", async ({ page }) => {
     // Navigate to the app
     await page.goto("/");
 
@@ -39,15 +36,12 @@ test.describe("Gravity Simulator Visual Tests", () => {
     });
 
     await expect(screenshot).toMatchSnapshot(
-      getSnapshotName("main-app-layout", browserName)
+      getSnapshotName("main-app-layout")
     );
   });
 
   for (const scenario of scenarios) {
-    test(`Screenshot test for ${scenario} scenario`, async ({
-      page,
-      browserName,
-    }) => {
+    test(`Screenshot test for ${scenario} scenario`, async ({ page }) => {
       // Navigate to the app
       await page.goto("/");
 
@@ -76,8 +70,7 @@ test.describe("Gravity Simulator Visual Tests", () => {
 
       // Compare with baseline
       const snapshotName = getSnapshotName(
-        `scenario-${scenario.toLowerCase().replace(/\s+/g, "-")}`,
-        browserName
+        `scenario-${scenario.toLowerCase().replace(/\s+/g, "-")}`
       );
 
       await expect(screenshot).toMatchSnapshot(snapshotName);