fix(web-integration): reserve the visible nodes of invisible elements (#840)

Author: quanru

apps/report/test-data/ai-shop.json

@@ -26,7 +26,8 @@
       "**/visualizer/scripts/fixture/*",
       "**/unpacked-extension/*",
       "**/page-data/**",
-      "**/dump.json"
+      "**/dump.json",
+      "**/dump-with-invisible.json"
     ]
   },
   "javascript": {

apps/report/test-data/error.json

@@ -224,16 +224,33 @@ export function trimContextByViewport(execution: ExecutionDump) {
   function filterVisibleTree(
     node: ElementTreeNode<BaseElement>,
   ): ElementTreeNode<BaseElement> | null {
-    if (!node || !node.node || node.node.isVisible !== true) return null;
+    if (!node) return null;
+
+    // recursively process all children
     const filteredChildren = Array.isArray(node.children)
       ? (node.children
           .map(filterVisibleTree)
           .filter((child) => child !== null) as ElementTreeNode<BaseElement>[])
-      : undefined;
-    return {
-      ...node,
-      ...(filteredChildren ? { children: filteredChildren } : {}),
-    };
+      : [];
+
+    // if the current node is visible, keep it and the filtered children
+    if (node.node && node.node.isVisible === true) {
+      return {
+        ...node,
+        children: filteredChildren,
+      };
+    }
+
+    // if the current node is invisible, but has visible children, create an empty node to include these children
+    if (filteredChildren.length > 0) {
+      return {
+        node: null,
+        children: filteredChildren,
+      };
+    }
+
+    // if the current node is invisible and has no visible children, return null
+    return null;
   }
 
   return {

apps/report/test-data/online-order.json

@@ -1,8 +1,12 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import { getKeyCommands } from '@/common/ui-utils';
 import {
   getCurrentExecutionFile,
   replaceIllegalPathCharsAndSpace,
+  trimContextByViewport,
 } from '@/common/utils';
+import type { ExecutionDump } from '@midscene/core/.';
 import { describe, expect, it } from 'vitest';
 
 describe('TaskCache', () => {
@@ -151,3 +155,17 @@ describe('replaceIllegalPathCharsAndSpace', () => {
     expect(result).toBe('cache-id-with-special-chars-and-spaces--');
   });
 });
+
+describe('trimContextByViewport', () => {
+  it('should reserve the visible nodes of invisible elements', () => {
+    const dumpPath = path.join(
+      __dirname,
+      'fixtures',
+      'dump-with-invisible.json',
+    );
+    const dump = JSON.parse(fs.readFileSync(dumpPath, 'utf8'));
+    const result = trimContextByViewport(dump.executions[0]);
+    expect(result.tasks[0].pageContext?.tree?.node).toBeNull();
+    expect(result.tasks[0].pageContext?.tree?.children.length).toBe(28);
+  });
+});