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

Unable to capture the dialog web component when it is nested inside a shadow DOM #1670

Closed
hoaiduc87 opened this issue Jul 22, 2024 · 5 comments
Closed

Unable to capture the dialog web component when it is nested inside a shadow DOM #1670

hoaiduc87 opened this issue Jul 22, 2024 · 5 comments
Labels
🍞 stale Closed due to inactivity

Comments

@hoaiduc87
Copy link

The problem

We are using a micro-frontend architecture, where each sub-project is mounted inside a Shadow DOM. Our UI library is built with web components, with each component also attached inside its own Shadow DOM. We are using Cypress for functional testing and integrating with Percy for visual testing.

In this example, I have a button and a dialog, both built as web components and attached inside their respective Shadow DOMs. I want to render this dialog in my sub-project, which is itself attached inside a parent Shadow DOM. When I click the button, the dialog should open.

However, the problem is that the dialog does not appear in the snapshot captured by Percy, although the button remains visible. I have found that the dialog appears correctly when it is wrapped by only one Shadow DOM. I also perform some assertions with Cypress to ensure the elements are visible. It seems like Cypress handles nested Shadow DOMs properly, except for Percy.

Could you help me determine the reason for this issue and suggest how to fix it? Does it require any additional configuration?

Environment

  • Node version: 18.16.0
  • @percy/cli version: 1.29.0 (latest)
  • @percy/cypress version: 3.1.2
  • cypress version: 13.13.1 (latest)
  • Version of Percy SDK you’re using:
  • If needed, a build ID: 35431593
  • OS version: MacOS 14.5 (23F79)
  • Type of shell command-line [interface]: zsh 5.9

Debug logs

35431593_build_35431593_cli_f357c65217906f7679bd4ebbf77e9a2818531084

Code to reproduce issue

<html>
  <head>
    <script>
      class MyDialog extends HTMLElement {
        constructor() {
          super()
          this.attachShadow({ mode: 'open' })

          const template = document.createElement('template')
          template.innerHTML = `
            <dialog>
              <h2>My dialog</h2>
              <button id="close">Close</button>
            </dialog>
          `
          this.shadowRoot.appendChild(template.content.cloneNode(true))

          this.dialog = this.shadowRoot.querySelector('dialog')

          this.shadowRoot.getElementById('close').addEventListener('click', () => {
            this.close()
          })
        }

        open() {
          this.dialog.showModal()
        }

        close() {
          this.dialog.close()
        }
      }

      customElements.define('my-dialog', MyDialog)
    </script>
    <script>
      class MyButton extends HTMLElement {
        constructor() {
          super()
          this.attachShadow({ mode: 'open' })

          const template = document.createElement('template')
          template.innerHTML = '<button>Open dialog</button>'
          this.shadowRoot.appendChild(template.content.cloneNode(true))

          this.button = this.shadowRoot.querySelector('button')
        }

        connectedCallback() {
          this.button.addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('my-click-event'))
          })
        }

        disconnectedCallback() {
          this.button.removeEventListener('click')
        }
      }

      customElements.define('my-button', MyButton)
    </script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const root = document.querySelector('#root')
        const shadowRoot = root.attachShadow({ mode: 'open' })

        const myDialog = document.createElement('my-dialog')

        const button = document.createElement('my-button')
        button.addEventListener('my-click-event', () => {
          myDialog.open()
        })

        shadowRoot.appendChild(button)
        shadowRoot.appendChild(myDialog)
      })
    </script>
  </head>
  <body>
    <div>
      <h1>Dialog nested in Shadow DOM</h1>
      <div id="root"></div>
    </div>
  </body>
</html>
describe('Simple Cypress Test', () => {
  it.only('Take snapshot', () => {
    cy.visit('http://localhost:8008')
    cy.contains('Dialog nested in Shadow DOM').should('be.visible')
    cy.contains('My dialog').should('not.be.visible')
    cy.wait(2000)
    cy.contains('Open dialog').should('be.visible').click()
    cy.contains('My dialog').should('be.visible')
    cy.wait(2000)
    cy.screenshot() // Can see the dialog in the snapshot
    cy.percySnapshot() // Can't see the dialog in Percy build although the button is visible
  })
})
@github-actions GitHub Actions
Copy link

github-actions bot commented Aug 6, 2024

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

@github-actions github-actions bot added the 🍞 stale Closed due to inactivity label Aug 6, 2024
@hoaiduc87
Copy link
Author

It’s waiting for someone to take a look

@ninadbstack
Copy link
Contributor

Hey @hoaiduc87, From the build logs that you have attached I see the snapshot is javascript enabled.
When you have javascript enabled snapshots, percy would run javascript in percy's browser - which means java script [ especially what you have added in domContentLoaded event would rerun and reconstuct the DOM - and this reconstruction would put dom in default state where button is not pressed.

You can use with javascript disabled and it would work fine. [ but in my testing backdrop and the location of popup does not seem correct ]

Another note being percy currently does not support CustomElements specifically in js disabled case - so any kind of css that relies on defined? will not work. and the custom elements would be treated as divs [ as browser does when element is not defined ]

@hoaiduc87
Copy link
Author

Thanks for the explaination @ninadbstack
I’m not sure why, but the last time I tried with JavaScript disabled, it was unable to capture the dialog element.
I tried again today, and it seems to work, except for the backdrop and position. It might be sufficient for verifying the dialog content.
Is it impossible to get the screenshot as the browser does when javascript is disabled 🥲

@ninadbstack
Copy link
Contributor

@hoaiduc87 no, currently percy by default works in Snapshot mode where we capture and replicate DOM across multiple browsers. If you want to take screenshot of your test browser - its currently only supported when you are using percy with Browserstack Automate [ it comes with some other restrictions ]

@raoufswe raoufswe mentioned this issue Jan 14, 2025
Merged
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🍞 stale Closed due to inactivity
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hoaiduc87 @ninadbstack