Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test Replay: [Shadow DOM] Support manual slotted elements. #29107

Open
jennifer-shehane opened this issue Mar 11, 2024 · 0 comments
Open

Test Replay: [Shadow DOM] Support manual slotted elements. #29107

jennifer-shehane opened this issue Mar 11, 2024 · 0 comments
Labels
Test Replay topic: shadow dom Issues when testing shadow dom type: feature New feature that does not currently exist

Comments

@jennifer-shehane
Copy link
Member

jennifer-shehane commented Mar 11, 2024 •
edited
Loading

What would you like?

Test Replay now supports displaying all Shadow DOM elements with the exception of manual slotted elements.

We need to add support for a Shadow DOM with slotAssignment: 'manual'. Currently, we don't capture when the nodes in the slot have changed. We may need to start listening to slotchange event.

We would then need to display these events in Test Replay for users to get an accurate representation of the DOM.

We did not prioritize this work since the amount of customers needing this was unknown. If you need this feature, please comment on this issue so we can better prioritize this.

Sample html:

<html>
  <template id="main">
    <ol>
      <slot></slot>
    </ol>
  </template>
  <head>
    <title>Shadow DOM Fixture</title>
    <script>
      customElements.define("todo-list", class extends HTMLElement {
        connectedCallback(){
          const button = (props) => Object.assign(document.createElement("button"), props)
          const root = this.attachShadow({mode: "open", slotAssignment: "manual" })
          const groceriesButton = button({ innerHTML: "Groceries", onclick: () => this.showList("grocery") })
          const homeButton = button({ innerHTML: "Home", onclick: () => this.showList("home") })
          root.append(groceriesButton, homeButton, document.getElementById("main").content.cloneNode(true))

          let slots = this.shadowRoot.querySelectorAll("slot")
          slots.forEach(slot => {
            slot.addEventListener("slotchange", (e) => {
              let nodes = slot.assignedNodes()
              console.log(`Element in Slot "${slot.name}" changed to "${nodes.map((n) => n.innerHTML)}".`)
            })
          })
        }

        showList(list){
          const li = this.querySelectorAll(`li[list="${list}"]`)
          this.shadowRoot.querySelector("slot").assign(...li)
        }
      });
    </script>
  </head>
  <body>
    <todo-list>
      <li list="grocery">Spinach</li>
      <li list="grocery">Olives</li>
      <li list="home">Hammer</li>
      <li list="grocery">Chicken</li>
      <li list="home">Shelves</li>
      <li list="home">Screws</li>
    </todo-list>
  </body>
</html>

Sample test:

describe('Shadow DOM', () => {
  it('captures shadow dom with manual slots', () => {
    cy.visit('/cypress/fixtures/shadow-dom-manual-slots.html')

    cy.get('button', { includeShadowDom: true }).contains('Groceries').click()
    cy.get('li').contains('Spinach')
    cy.get('li').contains('Olives')
    cy.get('li').contains('Chicken')
    cy.get('li').contains('Hammer').should('not.be.visible')
    cy.get('li').contains('Shelves').should('not.be.visible')
    cy.get('li').contains('Screws').should('not.be.visible')

    cy.get('button', { includeShadowDom: true }).contains('Home').click()
    cy.get('li').contains('Hammer')
    cy.get('li').contains('Shelves')
    cy.get('li').contains('Screws')
    cy.get('li').contains('Spinach').should('not.be.visible')
    cy.get('li').contains('Olives').should('not.be.visible')
    cy.get('li').contains('Chicken').should('not.be.visible')
  })
})
@jennifer-shehane jennifer-shehane added topic: shadow dom Issues when testing shadow dom Test Replay labels Mar 11, 2024
@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label Sep 8, 2024
@jennifer-shehane jennifer-shehane added prevent-stale mark an issue so it is ignored by stale[bot] type: feature New feature that does not currently exist and removed stale no activity on this issue for a long period prevent-stale mark an issue so it is ignored by stale[bot] labels Sep 18, 2024
@cypress-io cypress-io deleted a comment from cypress-app-bot Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Test Replay topic: shadow dom Issues when testing shadow dom type: feature New feature that does not currently exist
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @cypress-app-bot