Add support for pseudo-class enabled elements in DOM serialization

[pankaj443]

Summary of the change:

• In this PR, we are adding the support to capture the css of the pseudo elements
• User will path the pseudo element selectors to capture (id, class, xpath) and then we will capture those css and render it

This pull request introduces support for serializing pseudo-class enabled elements in the DOM snapshot process. It allows users to specify elements (by ID, class name, or XPath) whose computed styles—including those affected by pseudo-classes—should be captured and inlined into the snapshot. This ensures more accurate visual testing of states like :hover or :active. The changes include updates to configuration schemas, the serialization pipeline, and the addition of a new module to handle pseudo-class serialization.

Pseudo-class serialization support:

• Added a new configuration option pseudoClassEnabledElements to both the config and snapshot schemas, allowing users to specify elements by id, className, or xpath for pseudo-class serialization. [1] [2]
• Integrated handling of the pseudoClassEnabledElements option throughout the snapshot pipeline, including passing it through the snapshot process and logging it in debug output. [1] [2] [3] [4]

DOM serialization pipeline enhancements:

• Updated serialize-dom.js to extract the pseudoClassEnabledElements option, mark relevant elements before cloning, and inject computed styles as inline CSS after cloning for accurate pseudo-class rendering. [1] [2] [3]

New pseudo-class serialization module:

• Added serialize-pseudo-classes.js module, which:
  • Finds and marks elements to process based on config.
  • Extracts computed styles (including pseudo-classes) and injects them as inline CSS into the cloned DOM.
  • Handles errors and warnings for unmatched selectors or invalid XPath.

Test and ignore file updates:

• Added a new test file for pseudo-class serialization to .semgrepignore.

These changes collectively enable more accurate visual testing of dynamic element states by capturing and replaying pseudo-class styles in DOM snapshots.

[Copilot]

Pull request overview

This pull request adds support for pseudo-class enabled elements in DOM serialization by introducing a new feature that captures computed styles of specified elements and applies them as inline styles with !important declarations in the serialized DOM. The feature allows elements to be selected by ID or XPath and preserves their styles during serialization.

Key changes:

• New serialize-pseudo-classes.js module for marking and serializing pseudo-class enabled elements
• Integration into the DOM serialization pipeline with pre-clone marking and post-clone style injection
• Configuration schema additions to support pseudoClassEnabledElements option with id and xpath arrays

Reviewed changes

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

Show a summary per file

File	Description
packages/dom/src/serialize-pseudo-classes.js	New module implementing element selection (by ID/XPath), marking with data attributes, and computed style serialization with !important injection
packages/dom/src/serialize-dom.js	Integrates pseudo-class serialization into the main DOM serialization flow: marks elements before cloning and processes them after element serialization
packages/core/src/page.js	Propagates pseudoClassEnabledElements configuration parameter through the snapshot process to the serialization layer
packages/core/src/discovery.js	Adds debug logging for the pseudoClassEnabledElements configuration option
packages/core/src/config.js	Defines JSON schema for pseudoClassEnabledElements configuration with id and xpath array properties

---

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

[pankaj443]

LGTM