chore: protocol shadow dom support

[AtofStryker]

• Closes N/A

Additional details

This PR changes the expected structure of elementsToHighlight in the snapshot code to support shadowDom.

Instead of just returning a selector key with a frameId, the JSON structure now follows an array structure of selectors, starting with the first index being the node element that lives inside the root document, while the last element is the node contained inside the shadow DOM. Any element in between is a shadow DOM host element where the document/ shadow DOM ends and the next shadowDOM begins. This is in order to support N layers deep of shadow DOM.

That structure would look something like this:

{
  "elementsToHighlight": [
    {
      "selector": ["#shadow-root", "#nested-shadow", "#foo"],
      "frameId": "bar"
    }
  ]
}

In the event an element is not within the shadow DOM (i.e. what is supported today), the structure might look something like this:

{
  "elementsToHighlight": [
    {
      "selector": ["#foo"],
      "frameId": "bar",
    }
  ]
}

In addition to changing the selector structure, element scroll within the shadow DOM is also supported in this PR. This is done by decorating the attachShadow method on the element, which attaches a scroll listener. When the scroll is emitted from the element, a custom event, cypress:protocol:shadow-dom:element:scroll, is sent to the document which is then allowed to be intercepted.

we can't add listeners on closed shadow DOM nodes, so we need to check if the shadowRoot exists within a javascript context first before proceeding

Steps to test

E2E tests inside the driver have been added to verify the new snapshot structure, as well as a system test in the protocol code to make sure the correct structure is generated.

For the scroll behavior, only an E2E test was added to verify the happy path.

How has the user experience changed?

PR Tasks

• [x] Have tests been added/updated?
• [ ] Has a PR for user-facing changes been opened in cypress-documentation? N/A
• [ ] Have API changes been updated in the type definitions? N/A

[AtofStryker]

I also looked into possibly supporting the shadow DOM for snapshots in open mode in a68faa5464, which could be used to address https://github.com/cypress-io/cypress/issues/8843. The trick is we need to hydrate the shadow DOM state after a given snapshot from the actual body reference, which means iterating through and cloning the shadow DOM elements. In addition, this has basic support for adoptedStyleSheets. Since we cant created CSSStyleSheets in a detached document or push references from different origin documents (see exceptions, we have to store the style sheets for a later time to be hydrated onto the page after the snapshot document is attached.

shadow dom snapshots not working

shadow dom snapshots working

[cypress[bot]]

1 failed and 8 flaky tests on run #54477 ↗︎

1

29104

1324

11

8

Details:

Merge branch 'develop' of github.com:cypress-io/cypress into feat/protocol_shado...
Project: cypress	Commit: baf229bfad
Status: Failed	Duration: 18:54 💡
Started: Mar 12, 2024 4:33 PM	Ended: Mar 12, 2024 4:52 PM

  cypress/e2e/create-react-app.cy.ts • 1 failed test • webpack-dev-server

View Output

Test		Artifacts
Working with cra-4 > should mount a passing test		Test Replay Screenshots

  specs_list_latest_runs.cy.ts • 1 flaky test • app-e2e

View Output

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		Test Replay Screenshots

  project-setup.cy.ts • 1 flaky test • launchpad-e2e

View Output

Test		Artifacts
... > can reconfigure config after CT has been set up		Test Replay Screenshots

  commands/waiting.cy.js • 1 flaky test • 5x-driver-chrome

View Output

Test		Artifacts
... > errors > throws when waiting for 2nd response to route		Test Replay

  e2e/origin/commands/waiting.cy.ts • 1 flaky test • 5x-driver-chrome

View Output

Test		Artifacts
... > throws when foo cannot resolve		Test Replay

  e2e/origin/basic_login.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test		Artifacts
Multi-step Auth > final auth redirects back to approval page - flat		</td> </tr></table> The first 5 flaky specs are shown, see all 8 specs in Cypress Cloud. Review all test suite changes for PR #28823 ↗︎

[AtofStryker]

@ryanthemanuel @mschile not sure if we want to make this a feat or a chore since it doesn't really have an effect on the app?

[ryanthemanuel]

@ryanthemanuel @mschile not sure if we want to make this a feat or a chore since it doesn't really have an effect on the app?

I'd make it a feature. We've called out Test Replay functionality changes before in that regard.

[cypress-bot[bot]]

Released in 13.7.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to Cypress v13.7.0, please open a new issue.