Merge pull request #280 from psiinon/recorder/ignore-hidden

thc202 · web-flow · commit f421dbe2957b · 2025-12-11T08:09:14.000Z
Ignore events on hidden elements
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,11 @@ All notable changes to the full browser extension will be documented in this fil
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## Unreleased
+
+### Fixed
+- Ignore events on non-visible elements, which will fail on replay.
+
 ## 0.1.7 - 2025-11-28
 
 ### Added
diff --git a/CHANGELOG.rec.md b/CHANGELOG.rec.md
@@ -3,6 +3,11 @@ All notable changes to the recorder browser extension will be documented in this
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## Unreleased
+
+### Fixed
+- Ignore events on non-visible elements, which will fail on replay.
+
 ## 0.1.7 - 2025-11-28
 
 ### Added
diff --git a/source/ContentScript/recorder.ts b/source/ContentScript/recorder.ts
@@ -396,10 +396,37 @@ class Recorder {
     });
   }
 
+  isVisible(el: HTMLElement): boolean {
+    const style = window.getComputedStyle(el);
+
+    if (
+      style.display === 'none' ||
+      style.visibility === 'hidden' ||
+      style.opacity === '0'
+    ) {
+      return false;
+    }
+
+    // Check layout dimensions
+    if (el.offsetWidth <= 0 && el.offsetHeight <= 0) {
+      return false;
+    }
+
+    const rect = el.getBoundingClientRect();
+
+    // Check rendered size
+    if (rect.width === 0 || rect.height === 0) {
+      return false;
+    }
+
+    // The element is rendered and visible in layout (may still be off-screen)
+    return true;
+  }
+
   shouldRecord(element: HTMLElement): boolean {
     if (!this.active) return this.active;
     if (element.className === ZAP_FLOATING_DIV_ELEMENTS) return false;
-    return true;
+    return this.isVisible(element);
   }
 
   getBrowserName(): string {
diff --git a/test/ContentScript/integrationTests.test.ts b/test/ContentScript/integrationTests.test.ts
@@ -673,6 +673,29 @@ function integrationTests(
     ]);
   });
 
+  test('Should not record interactions on hidden element', async () => {
+    // Given / When
+    await driver.toggleRecording();
+    const wd = await driver.getWebDriver();
+    await wd.get(`http://localhost:${_HTTPPORT}/webpages/hiddenElement.html`);
+    await eventsProcessed();
+    await wd.findElement(By.id('visibleButton')).click();
+    await eventsProcessed();
+    // Then
+    expect(actualData).toEqual([
+      reportZestStatementComment(),
+      reportZestStatementLaunch(
+        'http://localhost:1801/webpages/hiddenElement.html'
+      ),
+      reportZestStatementScrollTo(3, 'visibleButton'),
+      reportZestStatementClick(4, 'visibleButton'),
+      reportZestStatementScrollTo(5, 'visibleCheckBox'),
+      reportZestStatementClick(6, 'visibleCheckBox'),
+      reportZestStatementScrollTo(7, 'visibleCheckBox'),
+      reportZestStatementSendKeys(8, 'visibleCheckBox', 'on', 'id'),
+    ]);
+  });
+
   test('Should record set localStorage', async () => {
     // Given
     await enableZapEvents(server, driver);
diff --git a/test/ContentScript/webpages/hiddenElement.html b/test/ContentScript/webpages/hiddenElement.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Hidden Element Event Demo</title>
+</head>
+<body>
+
+  <button id="visibleButton">Click Me</button>
+
+  <input id="visibleCheckBox" type="checkbox">
+
+  <input id="hiddenCheckBoxDisplay" type="checkbox" style="display:none">
+
+  <input id="hiddenCheckBoxVisibility" type="checkbox" style="visibility:hidden">
+
+  <input id="hiddenCheckBoxOpacity" type="checkbox" style="opacity:0">
+
+  <script>
+    document.getElementById("visibleButton").addEventListener("click", () => {
+      document.getElementById("visibleCheckBox").click();
+      document.getElementById("hiddenCheckBoxDisplay").click();
+      document.getElementById("hiddenCheckBoxVisibility").click();
+      document.getElementById("hiddenCheckBoxOpacity").click();
+    });
+  </script>
+
+</body>
+</html>
