fix: stabilize e2e letter reveal spec, and optionally dockerize playwright execution

frontend/e2e/letter.spec.ts

@@ -186,23 +186,24 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/breaking the seal/i)).toBeHidden({
       timeout: 10000,
     });
-
     // Check recipient on the front of the envelope
     await expect(page.getByText(new RegExp(recipientName, "i"))).toBeVisible();
 
-    // Flip the envelope to the back (click the recipient name or the front div to flip)
+    // Flip the envelope to the back
     await page.getByText(new RegExp(recipientName, "i")).click();
+    // Wait for flip transition (2s)
+    await page.waitForTimeout(2500);
 
     // Reveal the letter: click seal then click letter
-    // Wait for flip animation to progress
+    await page.getByAltText("Seal").click();
-    await page.getByAltText("Seal").waitFor({ state: "visible" });
+    // Wait for flap transition
-    await page.getByAltText("Seal").click({ force: true });
+    await page.waitForTimeout(1500);
 
     // Click the letter to pull it out
-    await page.locator("#letter").click({ force: true });
+    await page.locator("#letter").click();
 
     // Wait for reveal transition
-    await expect(page.locator("#letter")).toBeHidden({ timeout: 15000 });
+    await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
 
     // Also check if we are redirected to the Reader if we manually go to the Editor URL
     const readerUrl = page.url();

frontend/package.json

@@ -16,7 +16,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
   },
   "dependencies": {
     "@fontsource-variable/jost": "^5.2.8",

frontend/playwright.config.ts

@@ -14,7 +14,6 @@ const baseUrl = getBaseUrl(
   env.FRONTEND_PORT,
 );
 
-console.log(baseUrl);
 export default defineConfig({
   timeout: 60000,
   expect: {
@@ -61,7 +60,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "bun run dev -- --mode e2e",
+    command: "npm run dev -- --mode e2e",
     url: getBaseUrl(
       process.env.SSL_ENABLED === "true",
       process.env.FRONTEND_DOMAIN,

frontend/src/components/ui/EnvelopeReveal.tsx

@@ -20,6 +20,7 @@ export function EnvelopeReveal({
   const flapCheckbox = useRef<HTMLInputElement>(null);
 
   const handleClick = () => {
+    if (revealLetter) return;
     setRevealLetter(true);
     setTimeout(() => {
       onRevealComplete();
@@ -45,7 +46,7 @@ export function EnvelopeReveal({
             </div>
             <img
               className={
-                "translate-y-24 delay-2000 absolute z-6 peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1500 cursor-pointer"
+                "translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1500 cursor-pointer"
               }
               src={waxSeal}
               alt="Seal"
@@ -53,22 +54,21 @@ export function EnvelopeReveal({
             />
             <button
               id="letter"
-              className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-63 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
+              className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-63 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen max-w-4xl h-screen  z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
               onClick={handleClick}
             ></button>
 
             <div
               id="env-right"
-              className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3"
+              className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3 pointer-events-none"
             ></div>
             <div
               id="env-left"
-              className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3"
+              className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3 pointer-events-none"
             ></div>
             <button
               id="env-bottom"
-              className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3"
+              className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3 pointer-events-none"
-              onClick={() => setIsFlipped((prev) => !prev)}
             ></button>
           </div>
 

scripts/run-e2e.sh

@@ -1,6 +1,8 @@
 #!/bin/bash
 set -e
 
+# Usage: ./run-e2e.sh [--docker] [--ui]
+
 # Use podman if available. Not everyone has it
 CONTAINER_BIN=$(command -v podman || command -v docker)
 if [ -z "$CONTAINER_BIN" ]; then
@@ -26,7 +28,7 @@ else
     exit 1
 fi
 
-# This cleans up containers. Very useful for local e2e to free system resources immediately.
+# This cleans up django backend process and containers. Very useful for local e2e to free system resources immediately.
 cleanup() {
     echo "Cleaning up..."
     $CONTAINER_BIN rm -f "$DB_NAME" 2>/dev/null || true
@@ -59,4 +61,22 @@ mkdir -p ./tmp/logs
 (cd backend && uv run manage.py serve) > ./tmp/logs/backend.log 2>&1 &
 BACKEND_PID=$!
 
-cd frontend && bun run test:e2e "$@"
+TEST_COMMAND="test:e2e"
+MODE="local"
+
+for arg in "$@"; do
+    echo "$arg"
+    if [ "$arg" = "--ui" ]; then
+        TEST_COMMAND="test:e2e:ui"
+    fi
+    if [ "$arg" = "--docker" ]; then
+        MODE="docker"
+    fi
+done
+
+# optionally using docker to run playwright since someone at microsoft thought it'd be nice to not support fedora :)
+if [ $MODE = "docker" ]; then
+    $CONTAINER_BIN run --rm -it --network host -v $(pwd):/e2e:Z -w /e2e/frontend -p 43008:43008 mcr.microsoft.com/playwright:v1.59.1-noble npm run $TEST_COMMAND
+else
+    cd frontend && bun run $TEST_COMMAND
+fi