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.

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

Elements inside shadow dom are hidden by its host (causing them to not be interactable) #18008

Closed
TomCaserta opened this issue Sep 7, 2021 · 4 comments · Fixed by #18908
Closed
Labels
topic: shadow dom Issues when testing shadow dom

Comments

@TomCaserta
Copy link

TomCaserta commented Sep 7, 2021

Current behavior

Currently when trying to click an element inside slotted shadow DOM Cypress incorrectly believes the element is covered by its host element.

Timed out retrying after 4050ms: cy.click() failed because this element:

<button data-test-id="my-button">...</button>

is being covered by another element:

<my-custom-element id="element">Click me!</my-custom-element>

Fix this problem, or use {force: true} to disable error checking.Learn more

Desired behavior

Cypress should correctly be able to figure out if the shadow dom element is a descendent of the element that is covering it.

Test code to reproduce

https://github.com/TomCaserta/cypress-shadow-reproduction

You can find all the test case code in the index.html file (which can be run via npm run start). The failing tests can be found in the error.spec.js file.

Cypress Version

8.3.1

Other

All cypress versions prior to 8.3.1 (and after Shadow DOM support was added) have been problematic.

@TomCaserta TomCaserta changed the title Elements inside shadow dom are not interactable Elements inside shadow dom are hidden by its host (causing them to not be interactable) Sep 7, 2021
@sainthkh
Copy link
Contributor

Confirmed with the provided code.

<!DOCTYPE html>
<html>
    <head>
      <title>Cypress Visibility Repro</title>
    </head>

    <body>
      <my-custom-element id='element'>Click me!</my-custom-element>
      <script>
        class MyCustomElement 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', () => console.log('Clicked'));

            this.shadowRoot.appendChild(
                button
            );
          }
        }

        console.log('Defining element');
        customElements.define('my-custom-element', MyCustomElement);
      </script>
    </body>
</html>
it('should allow me to click this element', () => {
  cy.visit('/fixtures/a.html')
  cy.get('#element').shadow().find('[data-test-id="my-button"]').click()
})

@sainthkh sainthkh added stage: ready for work The issue is reproducible and in scope topic: shadow dom Issues when testing shadow dom labels Oct 18, 2021
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: ready for work The issue is reproducible and in scope stage: needs review The PR code is done & tested, needs review labels Nov 15, 2021
@sainthkh
Copy link
Contributor

The "covering" problem will be fixed by #18908. But there are still some behavior differences because events are not sent to elements inside shadow roots.

It'll be fixed with #17531.

@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: work in progress stage: needs review The PR code is done & tested, needs review labels Nov 16, 2021
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Nov 23, 2021
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 23, 2021

The code for this is done in cypress-io/cypress#18908, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Dec 4, 2021

Released in 9.1.1.

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

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Dec 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
topic: shadow dom Issues when testing shadow dom
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants