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

Elements within <details> are continuously determined to be visible, even when the <details> element is closed. #30555

Open
gnsoria opened this issue Nov 6, 2024 · 1 comment
Open

Elements within <details> are continuously determined to be visible, even when the <details> element is closed. #30555

gnsoria opened this issue Nov 6, 2024 · 1 comment
Labels
stage: needs investigating Someone from Cypress needs to look at this topic: visibility 👁

Comments

@gnsoria
Copy link

gnsoria commented Nov 6, 2024

Current behavior

The <details> element can be used to create native HTML dropdowns, where the contained <summary> element is always visible, and other children can be toggled between visible and not visible. Currently, Cypress will always determine all elements within a <details> tag to be visible, even when they are clearly not.

I was able to reproduce this in both Electron v118 and Firefox v130.

Desired behavior

In this situation, Cypress should only find elements visible if they are actually visible on the page. (i.e. when the <details> element has been toggled open.

Test code to reproduce

Here is a simple reproducing example:

<body>
    <details id="myDetails">
        <summary id="opener">This is a details element</summary>
        <p id="inner">This is hidden inside of it</p>
    </details>
</body>
it(`finds not-visible disclosure elements`, () => {
    cy.visit({ url: "/other_files/scratch_paper.html"})
    cy.get("#myDetails").should("be.visible")
    cy.get("#opener").should("be.visible")
    // This fails: "expected '<p#inner>' not to be 'visible'"
    cy.get("#inner").should("not.be.visible")
})

Here is what the test shows. In the first screenshot, you can see that the #inner element is not visible, but Cypress finds it.
image
image

Here is what it looks like when #myDetails is opened:
image

Cypress Version

13.9.0

Node version

v22.9.0

Operating System

macOS 13.4

Debug Logs

No response

Other

No response
@gnsoria
Copy link
Author

gnsoria commented Nov 6, 2024

For anyone else affected by this, I was able to get the tests to pass by adding a little bit of extra styling:

#myDetails:not([open]) *:not(summary) {
    display: none
}

@jennifer-shehane jennifer-shehane added topic: visibility 👁 stage: needs investigating Someone from Cypress needs to look at this labels Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stage: needs investigating Someone from Cypress needs to look at this topic: visibility 👁
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @gnsoria