fix: ensure consistent element selection by applying parent-child grouping

[RohitR311]

What this PR does?

Fixes the bug wherein the list selection highlighting was capturing child elements.

Summary by CodeRabbit

• Bug Fixes

  • Ensures consistent element selection by always applying parent-child grouping, reducing cases of incorrect targets on pages without links.
  • Improves reliability of click/selection behaviors across varied layouts.

• Refactor

  • Simplifies selection logic by removing a conditional branch, resulting in a single, consistent filtering path.

[coderabbitai]

Walkthrough

Removes a conditional check for anchor tags and always applies parent-child grouping filtering to grouped elements at point before sorting by DOM depth and selecting the first element. No exported signatures changed.

Changes

Cohort / File(s)	Summary
Element selection filtering src/helpers/clientSelectorGenerator.ts	Removed anchor-tag-based conditional. Always runs filterParentChildGroupedElements on groupedElementsAtPoint, then sorts by DOM depth and selects the first element. Control flow simplified by removing a branch.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant CS as ClientSelectorGenerator
  participant DOM as Document

  User->>CS: getElementAtPoint(x, y)
  CS->>DOM: query elements at (x, y)
  DOM-->>CS: elementsAtPoint
  CS->>CS: group elements (groupedElementsAtPoint)
  note over CS: Conditional branch removed
  CS->>CS: filterParentChildGroupedElements(groupedElementsAtPoint)
  CS->>CS: sort by DOM depth
  CS-->>User: first element from filtered, sorted list

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: improved overall selector generation #709 — Introduced filterParentChildGroupedElements and applied it only when anchor tags were present; this PR removes that condition to always apply it.
• feat: apply conditional visual containment #238 — Adjusted element-selection logic to reduce anchor-specific handling in favor of containment-based rules.
• feat: improve selector generation highlighting #591 — Modified selector-generation paths; related to how elements are chosen and filtered before selector construction.

Suggested labels

Type: Bug, Scope: Recorder

Suggested reviewers

• amhsirak

Poem

I hop through DOMs with gentle care,
No forks for anchors—filters everywhere.
I sort by depth, then pick the prize,
A tidy path before my eyes.
Thump-thump! Select, reflect, delight—
One clear warren, choices right.
🐇✨

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title concisely and accurately describes the primary change—always applying parent-child grouping to ensure consistent element selection—and matches the code change (filterParentChildGroupedElements is now applied unconditionally) and the PR objective of fixing list selection highlighting that captured child elements. It is specific and readable for team history.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/helpers/clientSelectorGenerator.ts (2)

960-962: Good fix: always de‑nest to avoid child capture

Applying parent/child filtering unconditionally matches the PR goal and should stop highlighting nested child nodes in list mode. Minor nit: filteredElements doesn’t need reassignment—use const.

-        let filteredElements = this.filterParentChildGroupedElements(
+        const filteredElements = this.filterParentChildGroupedElements(
           groupedElementsAtPoint
         );

---

981-997: Prefer “lowest parent” candidates to reduce ambiguity

Current filter returns all ancestors that contain any grouped child, then you sort by depth. Make the intent explicit by returning only the “lowest parents” (parents that don’t have another parent candidate above them). This shrinks the candidate set and avoids relying on sort stability.

   private filterParentChildGroupedElements(
     groupedElements: HTMLElement[]
   ): HTMLElement[] {
-    const result: HTMLElement[] = [];
-
-    for (const element of groupedElements) {
-      const hasGroupedChild = groupedElements.some(
-        (other) => other !== element && element.contains(other)
-      );
-
-      if (hasGroupedChild) {
-        result.push(element);
-      }
-    }
-
-    return result.length > 0 ? result : groupedElements;
+    // First, keep only elements that contain another grouped element (i.e., parents)
+    const parents = groupedElements.filter(el =>
+      groupedElements.some(other => other !== el && el.contains(other))
+    );
+    if (parents.length === 0) return groupedElements;
+
+    // Then, keep only the lowest parents (no other parent in the set contains them)
+    const lowestParents = parents.filter(el =>
+      !parents.some(other => other !== el && other.contains(el))
+    );
+    return lowestParents.length > 0 ? lowestParents : parents;
   }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 02f09e0 and 2a1b178.

📒 Files selected for processing (1)

• src/helpers/clientSelectorGenerator.ts (1 hunks)