feat: Popover element handling via pseudoClassEnabledElements and selectors

[Manoj-Katta]

Summary

This PR enhances Percy's DOM serialization to properly handle HTML popover elements by introducing new configuration options and stamping attributes for renderer reconstruction.

What's Changed

New Features

• Popover Element Detection & Marking
• Automatically detects elements with the popover attribute during pseudo-class serialization
• Stamps a data-percy-popover-open="true" attribute on open popover elements so the renderer can restore their native top-layer state by calling showPopover()
• New selector Configuration Option
• Added a new selector array field to the pseudoClassEnabledElements configuration schema
• Allows users to specify CSS selectors to target elements for pseudo-class serialization
• Complements existing id, className, and xpath targeting methods

Implementation Details

• Config Schema (packages/core/src/config.js)
  • Added selector array field to allow flexible CSS selector-based element targeting
    Core Logic (packages/dom/src/serialize-pseudo-classes.js)
  • Introduced POPOVER_OPEN_ATTR constant for the new data attribute
  • Enhanced markElementIfNeeded() to detect and stamp popover elements with data-percy-popover-open="true"
  • Added selector processing logic in getElementsToProcess():
  • Iterates through provided CSS selectors
  • Queries matching elements and marks them appropriately

Testing (packages/dom/test/serialize-pseudo-classes.test.js)

• Added comprehensive test suite covering:
• Popover attribute stamping for elements matched by id, className, and xpath
• Idempotent marking (no duplicate attributes)
• Conditional stamping (only popovers get data-percy-popover-open)
• Selector-based matching including [popover] attribute selectors
• Edge cases: invalid selectors, no matches, non-popover elements

Jira: https://browserstack.atlassian.net/browse/PPLT-5016

[Copilot]

Pull request overview

This PR updates Percy’s DOM pseudo-class serialization pipeline to support HTML popover elements and adds a new selector-based targeting mechanism in pseudoClassEnabledElements.

Changes:

• Add selector: string[] to the pseudoClassEnabledElements config schema for CSS selector-based targeting.
• Extend pseudo-class element marking to also stamp a popover reconstruction attribute (data-percy-popover-open).
• Add tests for popover stamping and the new selector-based targeting branch.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/dom/src/serialize-pseudo-classes.js	Adds popover stamping during marking and implements selector-based element collection.
packages/core/src/config.js	Extends config schema to allow pseudoClassEnabledElements.selector.
packages/dom/test/serialize-pseudo-classes.test.js	Adds tests for popover handling and selector matching/warnings.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Enhances Percy’s DOM serialization to better support HTML popover elements and expands pseudo-class element targeting by adding CSS selector-based configuration.

Changes:

• Stamp a data-percy-popover-open="true" attribute on elements that are currently :popover-open during pseudo-class element marking.
• Add selector: string[] support to pseudoClassEnabledElements config and process matching elements via querySelectorAll.
• Add/extend tests for popover stamping and selector-based matching.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
packages/dom/src/serialize-pseudo-classes.js	Adds popover-open detection/stamping and selector-based element discovery for pseudo-class processing.
packages/core/src/config.js	Extends config schema for pseudoClassEnabledElements with a selector array.
packages/dom/test/serialize-pseudo-classes.test.js	Adds tests covering popover stamping behavior and selector handling, including invalid selector warnings.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

This PR updates Percy’s DOM pseudo-class serialization flow to better support native HTML popovers by marking open popover elements for renderer-side restoration, and expands pseudoClassEnabledElements targeting to include CSS selectors.

Changes:

• Stamp a data-percy-popover-open="true" attribute on elements that are popovers and currently :popover-open.
• Add selector: string[] support to pseudoClassEnabledElements, enabling CSS selector-based targeting.
• Extend the DOM unit tests to cover popover stamping and selector-based element matching/warnings.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
packages/dom/src/serialize-pseudo-classes.js	Adds popover-open detection/stamping and selector-based element discovery.
packages/core/src/config.js	Extends config schema to allow pseudoClassEnabledElements.selector.
packages/dom/test/serialize-pseudo-classes.test.js	Adds tests for popover marking behavior and selector handling (including invalid/no-match cases).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.