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

cy.click() doesn't click the right element when used with shadow elements in Chrome. #19260

Closed
sainthkh opened this issue Dec 6, 2021 · 2 comments
Closed

cy.click() doesn't click the right element when used with shadow elements in Chrome. #19260

sainthkh opened this issue Dec 6, 2021 · 2 comments
Labels
existing workaround stage: awaiting external fix A 3rd party bug in Cypress - awaiting release stale no activity on this issue for a long period topic: shadow dom Issues when testing shadow dom

Comments

@sainthkh
Copy link
Contributor

sainthkh commented Dec 6, 2021 •
edited
Loading

Current behavior

cy.click() doesn't click the right element when used with cy.shadow() in Chrome.

Desired behavior

cy.click() should click the right element when used with shadow elements in Chrome.

Test code to reproduce

<!DOCTYPE html>
<html>
    <head>
      <title>Shadow DOM Button test</title>
    </head>

    <body>
      <cy-test-element id='element'>Click me!</cy-test-element>
      <script>
        class CyTestElement extends HTMLElement {
          constructor() {
            super();

            this.attachShadow({ mode: 'open' });
            const button = document.createElement('button');
            const slot = document.createElement('slot');

            button.setAttribute('data-test-id', 'my-button')

            button.appendChild(slot);

            button.addEventListener('click', () => {
              const div = document.createElement('div');
              div.className = 'test'
              div.textContent = 'Clicked'

              this.shadowRoot.appendChild(div);
            });

            this.shadowRoot.appendChild(
                button
            );
          }
        }

        customElements.define('cy-test-element', CyTestElement);
      </script>
    </body>
</html>
it('fail', () => {
  cy.visit('fixtures/shadow-dom-button.html')

  cy.get('#element').shadow().find('[data-test-id="my-button"]').click()

  cy.get('#element').shadow().find('.test').should('have.text', 'Clicked')
})

Cypress Version

9.1.1

Other

I found this problem when working for #18008. It's only happening in Chrome. This test passes in Firefox.

After some research, I learned that it's happening because the spec about elementFromPoint is ambiguous. Please check below:

Thankfully, there is a workaround.

Workaround

cy.get('#element').shadow().find('[data-test-id="my-button"]').click({ position: 'top' })

Passing { position: 'top' } would solve the problem.
@sainthkh sainthkh added existing workaround stage: awaiting external fix A 3rd party bug in Cypress - awaiting release topic: shadow dom Issues when testing shadow dom labels Dec 6, 2021
This was referenced Dec 6, 2021
Merged
Closed
@ogunb ogunb mentioned this issue Apr 6, 2023
Closed
@mschile mschile mentioned this issue Apr 27, 2023
Closed
@cypress-app-bot
Copy link
Collaborator

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label May 15, 2023
@cypress-app-bot
Copy link
Collaborator

This issue has been closed due to inactivity.

@cypress-app-bot cypress-app-bot closed this as not planned Won't fix, can't repro, duplicate, stale May 31, 2023
@JRJurman JRJurman mentioned this issue Aug 19, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
existing workaround stage: awaiting external fix A 3rd party bug in Cypress - awaiting release stale no activity on this issue for a long period topic: shadow dom Issues when testing shadow dom
Projects
None yet
Milestone
No milestone
Development

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