fix: prevent form navigation (#427)

ojeytonwilliams · web-flow · commit 34440c59d532 · 2025-08-08T15:51:08.000+02:00
diff --git a/packages/dom-evaluator/src/dom-test-evaluator.ts b/packages/dom-evaluator/src/dom-test-evaluator.ts
@@ -50,6 +50,12 @@ const removeTestScripts = () => {
   hooksScript?.remove();
 };
 
+// Prevent form submissions from navigating the page. If we don't do this, the
+// iframe's browsing context could be replaced destroying the test runner.
+document.addEventListener("submit", (e) => {
+  e.preventDefault();
+});
+
 export class DOMTestEvaluator implements TestEvaluator {
   #runTest?: TestEvaluator["runTest"];
   #proxyConsole: ProxyConsole;
diff --git a/packages/tests/integration-tests/index.test.ts b/packages/tests/integration-tests/index.test.ts
@@ -1115,6 +1115,37 @@ assert(mocked.find('.greeting').length === 1);
         });
       },
     );
+
+    it("should prevent forms from triggering navigation", async () => {
+      const source = `<!DOCTYPE html>
+        <form>
+        <button id="check-btn">Check</button>
+        </form>
+  `;
+
+      const result = await page.evaluate(async (source) => {
+        const runner = await window.FCCTestRunner.createTestRunner({
+          source,
+          type: "dom",
+        });
+
+        await runner.runTest(`
+const checkBtn = document.getElementById('check-btn');
+checkBtn.click();`);
+
+        // Small delay to allow the page to navigate (if it does)
+        await new Promise((resolve) => {
+          setTimeout(resolve, 100);
+        });
+
+        return runner.runTest(`
+const checkBtn = document.getElementById('check-btn');
+checkBtn.click();
+       `);
+      }, source);
+
+      expect(result).toEqual({ pass: true });
+    });
   });
 
   describe("Javascript evaluator", () => {
