fix(html-analyzer): narrow Google Maps filtering

Preserve authored gmp-map and InfoWindow content while removing exact Google runtime roots and detached controls. Add coverage for similar customer classes, both filtering paths, markdown output, and Repsol-style partial DOM snapshots.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: anuj-adobe

packages/spacecat-shared-html-analyzer/src/html-filter.js

@@ -101,33 +101,55 @@ const VIDEO_PLAYER_SELECTORS = [
   '.playkit-player', // Kaltura PlayKit
 ].join(', ');
 
-// Google Maps runtime DOM includes tile fallback/control text that pollutes extracted content.
-// Keep customer-authored location data around the map; strip only Google-owned widget nodes.
-const MAPS_WIDGET_SELECTORS = [
-  '.gm-style', // Google Maps JS API root container
-  // Controls can be detached from .gm-style in serialized or partial DOM snapshots.
+// Exact Google Maps runtime classes only; never match customer map wrappers by name or substring.
+// Open InfoWindow content is preserved before the runtime root is removed.
+const MAPS_RUNTIME_ROOT_SELECTOR = '.gm-style';
+const MAPS_CONTROL_SELECTORS = [
+  // These controls can be detached from .gm-style in serialized or partial DOM snapshots.
   '.LGLeeN-keyboard-shortcuts-view',
   '.gm-style-cc',
   '.gm-bundled-control',
   '.gm-svpc',
   '.gmnoprint',
-  'gmp-map', // Google Maps Web Component (Maps JS API v4+)
 ].join(', ');
 
 /**
  * Remove Google Maps widget containers (browser environment)
  * @param {Element} element - DOM element to filter
  */
 function removeMapWidgets(element) {
-  element.querySelectorAll(MAPS_WIDGET_SELECTORS).forEach((n) => n.remove());
+  element.querySelectorAll(MAPS_RUNTIME_ROOT_SELECTOR).forEach((mapRoot) => {
+    const detailedInfoWindows = mapRoot.querySelectorAll('.gm-style-iw-d');
+    const infoWindows = detailedInfoWindows.length
+      ? detailedInfoWindows
+      : mapRoot.querySelectorAll('.gm-style-iw');
+
+    infoWindows.forEach((infoWindow) => {
+      mapRoot.parentNode?.insertBefore(infoWindow, mapRoot);
+    });
+    mapRoot.remove();
+  });
+  element.querySelectorAll(MAPS_CONTROL_SELECTORS).forEach((n) => n.remove());
 }
 
 /**
  * Remove Google Maps widget containers (Node.js / Cheerio environment)
  * @param {CheerioAPI} $ - Cheerio instance
  */
 function removeMapWidgetsCheerio($) {
-  $(MAPS_WIDGET_SELECTORS).remove();
+  $(MAPS_RUNTIME_ROOT_SELECTOR).each((i, mapRoot) => {
+    const $mapRoot = $(mapRoot);
+    const $detailedInfoWindows = $mapRoot.find('.gm-style-iw-d');
+    const $infoWindows = $detailedInfoWindows.length
+      ? $detailedInfoWindows
+      : $mapRoot.find('.gm-style-iw');
+
+    $infoWindows.each((j, infoWindow) => {
+      $mapRoot.before(infoWindow);
+    });
+    $mapRoot.remove();
+  });
+  $(MAPS_CONTROL_SELECTORS).remove();
 }
 
 /**

packages/spacecat-shared-html-analyzer/test/index.test.js

@@ -24,6 +24,9 @@ import {
 
 function installBrowserDomParserShim() {
   // This minimal shim supports selector/removal behavior only; fixtures must not include scripts.
+  const hadWindow = Object.hasOwn(globalThis, 'window');
+  const hadDocument = Object.hasOwn(globalThis, 'document');
+  const hadDOMParser = Object.hasOwn(globalThis, 'DOMParser');
   const previous = {
     window: globalThis.window,
     document: globalThis.document,
@@ -43,6 +46,21 @@ function installBrowserDomParserShim() {
       },
     };
     Object.defineProperties(node, {
+      cheerioElement: {
+        value: element,
+      },
+      parentNode: {
+        get: () => {
+          if (!element || !$(element).parent().length) {
+            return null;
+          }
+          return {
+            insertBefore(child, reference) {
+              $(reference.cheerioElement).before(child.cheerioElement);
+            },
+          };
+        },
+      },
       textContent: {
         get: () => (element ? $(element).text() : $('html').text()),
       },
@@ -65,9 +83,12 @@ function installBrowserDomParserShim() {
   };
 
   return () => {
-    globalThis.window = previous.window;
-    globalThis.document = previous.document;
-    globalThis.DOMParser = previous.DOMParser;
+    if (hadWindow) globalThis.window = previous.window;
+    else delete globalThis.window;
+    if (hadDocument) globalThis.document = previous.document;
+    else delete globalThis.document;
+    if (hadDOMParser) globalThis.DOMParser = previous.DOMParser;
+    else delete globalThis.DOMParser;
   };
 }
 
@@ -381,15 +402,20 @@ describe('HTML Visibility Analyzer', () => {
         <p>Encuentra tu estación más cercana.</p>
         <div id="map-container">
           <div class="gm-style">
-            <div class="gm-style-iw">Map data ©2026 Google</div>
+            <div class="gm-style-iw">
+              <div class="gm-style-iw-d">
+                <h2>Estación Repsol Centro</h2>
+                <p>Calle Mayor 1, Madrid</p>
+              </div>
+            </div>
             <div class="gm-bundled-control">
               <div class="gmnoprint">
                 <div class="gm-svpc">Pegman</div>
                 <div>40.4168° N, 3.7038° W</div>
                 <button>Zoom in</button>
               </div>
             </div>
-            <div class="gm-style-cc">Terms of Use Report a map error</div>
+            <div class="gm-style-cc">Map data ©2026 Google Terms of Use Report a map error</div>
           </div>
         </div>
         <p>Horario: Lunes a viernes 8:00 - 20:00</p>
@@ -400,6 +426,8 @@ describe('HTML Visibility Analyzer', () => {
       expect(text).to.include('Estaciones de servicio');
       expect(text).to.include('Encuentra tu estación más cercana.');
       expect(text).to.include('Horario');
+      expect(text).to.include('Estación Repsol Centro');
+      expect(text).to.include('Calle Mayor 1, Madrid');
       expect(text).to.not.include('Map data');
       expect(text).to.not.include('Pegman');
       expect(text).to.not.include('40.4168');
@@ -426,12 +454,16 @@ describe('HTML Visibility Analyzer', () => {
                 <span>Keyboard shortcuts</span>
               </div>
             </div>
+            <div class="gm-style-cc">Detached attribution</div>
+            <div class="gm-bundled-control">Detached bundled control</div>
+            <div class="gm-svpc">Detached Street View control</div>
+            <div class="gmnoprint">Detached non-printing control</div>
           </div>
         </div>
         <p>Productos Diesel e+ Agrodiesel e+10</p>
       </body></html>`;
 
-      const text = await stripTagsToText(html, true);
+      const text = await stripTagsToText(html, false);
 
       expect(text).to.include('Buscador de Agencias Distribuidoras de gasóleo');
       expect(text).to.include('GASOLEOS PECES E HIJOS S.L.');
@@ -442,6 +474,10 @@ describe('HTML Visibility Analyzer', () => {
       expect(text).to.not.include('Report a map error');
       expect(text).to.not.include('Zoom in');
       expect(text).to.not.include('Keyboard shortcuts');
+      expect(text).to.not.include('Detached attribution');
+      expect(text).to.not.include('Detached bundled control');
+      expect(text).to.not.include('Detached Street View control');
+      expect(text).to.not.include('Detached non-printing control');
     });
 
     it('should avoid removing customer-authored Google Maps wrapper content', async () => {
@@ -459,6 +495,17 @@ describe('HTML Visibility Analyzer', () => {
         <div data-google-maps>
           <span>Customer-authored store locator content.</span>
         </div>
+        <gmp-map>
+          <gmp-advanced-marker>
+            <span>Madrid showroom: Calle de Alcalá 10.</span>
+          </gmp-advanced-marker>
+        </gmp-map>
+        <div class="custom-gm-style">
+          <span>Customer content with a similar class name.</span>
+        </div>
+        <div class="gmnoprint-content">
+          <span>Printable customer directions.</span>
+        </div>
         <p>Visit us at our office.</p>
       </body></html>`;
 
@@ -470,6 +517,9 @@ describe('HTML Visibility Analyzer', () => {
       expect(text).to.include('Our office locations are shown on a Google map.');
       expect(text).to.include('Store locator fallback copy for visitors.');
       expect(text).to.include('Customer-authored store locator content.');
+      expect(text).to.include('Madrid showroom: Calle de Alcalá 10.');
+      expect(text).to.include('Customer content with a similar class name.');
+      expect(text).to.include('Printable customer directions.');
     });
 
     it('should remove Google Maps widgets in browser DOMParser mode', async () => {
@@ -480,18 +530,22 @@ describe('HTML Visibility Analyzer', () => {
           <div class="gm-style">
             <div>Sorry, we have no imagery here.</div>
             <div class="gm-style-cc">Map Data Terms</div>
+            <div class="gm-style-iw">Open Madrid location details.</div>
           </div>
-          <gmp-map>Zoom in Map data ©Google</gmp-map>
+          <gmp-map>
+            <gmp-advanced-marker>Customer-authored marker details.</gmp-advanced-marker>
+          </gmp-map>
           <p>Real office content.</p>
         </body></html>`;
 
         const text = await filterHtmlContent(html, true, true);
 
         expect(text).to.include('Office locations');
         expect(text).to.include('Real office content.');
+        expect(text).to.include('Open Madrid location details.');
+        expect(text).to.include('Customer-authored marker details.');
         expect(text).to.not.include('Sorry, we have no imagery here');
         expect(text).to.not.include('Map Data');
-        expect(text).to.not.include('Zoom in');
       } finally {
         restoreBrowser();
       }
@@ -549,6 +603,24 @@ describe('HTML Visibility Analyzer', () => {
   });
 
   describe('generateMarkdownDiff + getAddedMarkdownBlocks', () => {
+    it('should exclude Google Maps runtime text from rendered markdown', async () => {
+      const serverHtml = '<html><body><h1>Locations</h1></body></html>';
+      const clientHtml = `<html><body>
+        <h1>Locations</h1>
+        <div class="gm-style">
+          <div>Sorry, we have no imagery here.</div>
+          <div class="gm-style-cc">Map data ©2026 Google</div>
+        </div>
+        <p>Madrid office details.</p>
+      </body></html>`;
+
+      const { currentRenderedHtml } = await generateMarkdownDiff(serverHtml, clientHtml, false);
+
+      expect(currentRenderedHtml).to.include('Madrid office details.');
+      expect(currentRenderedHtml).to.not.include('Sorry, we have no imagery here.');
+      expect(currentRenderedHtml).to.not.include('Map data');
+    });
+
     it('should not show JSON-LD as added when content is identical but DOM nesting differs', async () => {
       const jsonLd = JSON.stringify({ '@context': 'https://schema.org', '@type': 'WebPage', name: 'Test' });
       // Server-side: skip button has 3-space indentation (from DOM nesting)