Succeeds finding a button but says it's not visible

[jeremythille]

Current behavior

Cypress finds the button I want to click. It is visible on the snapshot and highlighted when hovering the corresponding line of test in the left part.

However, it says "This element is not visible" despite it being really visible and even highlighted by Cypress.

The next step, .click(), times out.

Desired behavior

Cypress should see a button or any other element which is unquestionably visible

Test code to reproduce

Unfortunately I can't provide a test URL or the full code to reproduce, because the app is under development and not yet released. But whatever the code is, the button is visible and clickable, both in the browser and in the Cypress snapshot.

Basically the two problematic lines of code are :

await cy.get("button[data-test-id=editSearch]").should('exist'); // --> Passes but says the button is not visible
await cy.get("button[data-test-id=editSearch]").click(); // --> Fails

// alternative :
await cy.get("button[data-test-id=editSearch]").trigger("click"); // --> Also fails, same timeout

Cypress Version

9.5.0

Other

I had opened a similar issue abour a year ago, with all the material I could find to troubleshoot it, which was never addressed and apparently diappeared. Back then, Cypress failed to see checkboxes, despite them totally being present and visible on the snapshot. This made me abandon working with Cypress. I'm giving it another go, and again I'm getting the same problem with a button.

[bahmutov]

1. NEVER use await in your Cypress tests, that's not how Cypress works, you chain your commands, not create promises https://docs.cypress.io/guides/core-concepts/introduction-to-Cypress#Commands-Are-Asynchronous
2. what happens when you simply do cy.get("button[data-test-id=editSearch]").should('be.visible')?

For debugging visibility problems, I suggest watching first https://www.youtube.com/watch?v=nSmHxxwceDU

[jeremythille]

Ha, I see, thanks for your answer.
I was wondering why I put await everywhere (this is old code), then I understood. It is because of cy.window().then(window => which I rewrote const window = await cy.window();. This forced me to add async to the function, and therefore I guess this ruined Cypress functioning. I removed all the async/await syntax and reverted to .then(), and now tests are performing much better. Thank you.

So, if I understand correctly, cy.window() is not a Promise? It is a thenable but not a true Promise...?
Anyway thank you very much, issue solved.

[bahmutov]

@jeremythille https://glebbahmutov.com/blog/replace-and-remove-cy-then-command/

[jeremythille]

Aaaaaaah, that explains a lot. Thank you

[jeremythille]

Sorry but I have to reopen this issue. This time, no await anywhere.

The button is found as existing in the DOM, but not visible.
The page gets scrolled downwards during the test, which makes the button go upwards, and its border gets cut out, which makes it not 100% visible, and I believe that's why the test fails.

I have tried { scrollBehavior: false }, no effect.
I have tried disabling overflow-y:auto in CSS (so it's impossible to scroll), the page still scrolls and the test still fails.

Code :

    it("Editing search", { scrollBehavior: false }, () => {
        cy.get("button[data-test-id=editSearch]").should('exist'); // --> Succeeds
        cy.get("button[data-test-id=editSearch]").should('be.visible'); // --> Fails, despite the button being clearly visible
        cy.get("button[data-test-id=editSearch]").click(); // --> Subsequently fails
    })

HTML code of the button as rendered in the DOM (Angular) :

<button w-button="" issecondary="true" size="small" data-test-id="editSearch" ng-reflect-is-secondary="true"
    ng-reflect-size="small" tabindex="0" ng-reflect-label="Edit your search" ng-reflect-router-link="/en/quicksearch"
    ng-reflect-query-params="[object Object]" type="button"
    class="b-button b-button--small b-button-small b-button--is-type_secondary">Edit your search</button>

Results in Cypress :

The images were resized down and are difficult to read, here are the original ones :
https://drive.google.com/file/d/1NQdiZtSMKWrMZCTpvl9F8hgm-oJADMqm/view?usp=sharing, https://drive.google.com/file/d/1ti1QYKE-Qlo_V_Z6J_VbcVGq2_S9vDJI/view?usp=sharing

[jeremythille]

... and another example. Next test, trying to check a checkbox, "This element is not visible" although it clearly is.

Tesed with and without { scrollBehavior: false }.

Cypress code :

    it(`Things change when checking a facet`, { scrollBehavior: false }, () => { 

        // Clicking the first facet (Registered)
        cy.get("w-input-checkbox-many:first-child w-nested-checkbox").first().click()

        cy.get("w-sidebar header a[facet-sidebar-option]").should('be.visible')

        cy.get("w-sidebar w-sidebar-section:nth-child(1) > div.b-sidebar-section__title.ng-star-inserted > span:nth-child(2)").should("have.text", "STATUS (1/5)")

        cy.get("queryparams2human ul li:nth-child(1) w-input-badge span:nth-child(2)").should("have.text", "Registered")

        // Clicking the second facet (Ended)
        cy.get("w-input-checkbox-many:first-child w-nested-checkbox:nth-child(2)").click()

        cy.get("queryparams2human ul li:nth-child(2) w-input-badge span:nth-child(2)").should("have.text", "Ended")
    })

This is what the view looks like in the browser, when it's not being scrolled down by Cypress :

Same behaviour when picking Chrome, Firefox or Edge.

[BlueWinds]

So looking at the error message it's generating more closely, it says that a parent element (<app-page-results>) has overflow: hidden and a height or width of 0px. In this case, we'd treat it as not visible (explained in these rules here: https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Visibility). It's hard to tell what's really going on here without being able to examine the CSS involved.

This rule may not be correct - not saying there isn't a bug, just that Cypress' visibility checks are fairly complicated, and the error message tries to explain why it thinks it's not visible.

I understand you can't release the full app, but without a reproducible example, it's hard to figure out exactly what's going on. Can you create a minimal example which shows it that you can share, such as via https://github.com/cypress-io/cypress-test-tiny?

[mjhenkes]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please open a new issue with a reproducible example and link to this issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.