Fix e2e tests (#2542)

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-3.aria.yml

@@ -21,9 +21,11 @@
 - paragraph:
   - text: "Fix error: Error Line 6 error Stack trace: Index ("
   - link /http:\/\/localhost:\d+\/src\/pages\/Index\.tsx:6:6/:
-    - /url: http://localhost:53524/src/pages/Index.tsx:6:6
+    - /url: /http:\/\/localhost:\d+\/src\/pages\/Index\.tsx:6:6/
   - text: )
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: Fixing the error...
 - button "Index.tsx src/pages/Index.tsx Edit":
   - img

e2e-tests/snapshots/fix_error.spec.ts_fix-error-with-AI-4.aria.yml

+- heading "No more errors!" [level=1]

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-1.aria.yml

@@ -20,7 +20,7 @@
   - text: ""
 - paragraph: tc=local-agent/grep-search
 - paragraph: I'll search for 'createRoot' in the codebase to find where the React app is initialized.
-- 'button "GREP \"createRoot\" (2 matches) log Copy log src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
+- 'button "GREP \"createRoot\" (2 matches) log Copy src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
   - text: ""
   - img
@@ -28,10 +28,9 @@
   - button "Copy":
     - img
     - text: ""
-  - text: ""
   - code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
 - paragraph: Now I'll search specifically in .tsx files for 'App' to find component references.
-- 'button "GREP \"App\" in *.tsx (4 matches) log Copy log src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
+- 'button "GREP \"App\" in *.tsx (4 matches) log Copy src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
   - text: ""
   - img
@@ -39,7 +38,6 @@
   - button "Copy":
     - img
     - text: ""
-  - text: ""
   - code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
 - paragraph: I found the matches! The React app is initialized in src/main.tsx using createRoot, and the App component is defined in src/App.tsx and imported in src/main.tsx.
 - button "Copy":

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-2.aria.yml

-- 'button "GREP \"createRoot\" (2 matches) log Copy log src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
+- 'button "GREP \"createRoot\" (2 matches) log Copy src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
   - text: ""
   - img
@@ -6,5 +6,4 @@
   - button "Copy":
     - img
     - text: ""
-  - text: ""
   - code: "src/main.tsx:1: import { createRoot } from \"react-dom/client\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
\ No newline at end of file

e2e-tests/snapshots/local_agent_grep.spec.ts_local-agent---grep-search-3.aria.yml

-- 'button "GREP \"App\" in *.tsx (4 matches) log Copy log src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
+- 'button "GREP \"App\" in *.tsx (4 matches) log Copy src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);" [expanded]':
   - img
   - text: ""
   - img
@@ -6,5 +6,4 @@
   - button "Copy":
     - img
     - text: ""
-  - text: ""
   - code: "src/App.tsx:1: const App = () => <div>Minimal imported app</div>; src/App.tsx:3: export default App; src/main.tsx:2: import App from \"./App.tsx\"; src/main.tsx:4: createRoot(document.getElementById(\"root\")!).render(<App />);"
\ No newline at end of file

e2e-tests/snapshots/problems.spec.ts_problems---fix-all-1.aria.yml

@@ -44,15 +44,21 @@
 - paragraph: "Fix these 3 TypeScript compile-time errors:"
 - list:
   - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304)
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: const App = () => <div>Minimal imported app</div>; nonExistentFunction1(); // <-- TypeScript compiler error here nonExistentFunction2();
 - list:
   - listitem: src/bad-file.tsx:3:1 - Cannot find name 'nonExistentFunction2'. (TS2304)
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: nonExistentFunction1(); nonExistentFunction2(); // <-- TypeScript compiler error here nonExistentFunction3();
 - list:
   - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304)
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: nonExistentFunction2(); nonExistentFunction3(); // <-- TypeScript compiler error here
 - paragraph: Please fix all errors in a concise way.
 - button "file1.txt file1.txt Edit":

e2e-tests/snapshots/problems.spec.ts_problems---select-specific-problems-and-fix-1.aria.yml

 - paragraph: "Fix these 2 TypeScript compile-time errors:"
 - list:
   - listitem: src/bad-file.tsx:2:1 - Cannot find name 'nonExistentFunction1'. (TS2304)
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: const App = () => <div>Minimal imported app</div>; nonExistentFunction1(); // <-- TypeScript compiler error here nonExistentFunction2();
 - list:
   - listitem: src/bad-file.tsx:4:1 - Cannot find name 'nonExistentFunction3'. (TS2304)
-- text: plaintext
+- button "Copy":
+  - img
+  - text: ""
 - code: nonExistentFunction2(); nonExistentFunction3(); // <-- TypeScript compiler error here
 - paragraph: Please fix all errors in a concise way.
 - 'button "bad-file.ts src/bad-file.ts Edit Summary: Fix 2 errors and introduce a new error."':

rules/e2e-testing.md

@@ -56,6 +56,19 @@ await po.clearChatInput();
 await po.openChatHistoryMenu();
 ```
 
+## Snapshot testing
+
+**NEVER update snapshot files (e.g. `.txt`, `.yml`) by hand.** Always use `--update-snapshots` to regenerate them.
+
+Snapshots must be **deterministic** and **platform-agnostic**. They must not contain:
+
+- Timestamps
+- Temporary folder paths (e.g. `/tmp/...`, `/var/folders/...`)
+- Randomly generated values (UUIDs, nonces, etc.)
+- OS-specific paths or line endings
+
+If the output under test contains non-deterministic or platform-specific content, add sanitization logic in the test helper (e.g. in `test_helper.ts`) to normalize it before snapshotting.
+
 ## E2E test fixtures with .dyad directories
 
 When adding E2E test fixtures that need a `.dyad` directory for testing: