Cypress: Cypress doesn't handle visibility assertions for fixed or/and transform: translate

Created on 3 Oct 2018 · 9Comments · Source: cypress-io/cypress

Current behavior:

Cypress is telling me

CypressError: Timed out retrying: expected '<div#header-panel-login.panel.login-panel.show>' to be 'visible'

This element '<div#header-panel-login.panel.login-panel.show>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

<div class="article-box heading-section-box">...</div>

However, when you check the display, the form in the header with "contexte" is visible.

Desired behavior:

No error, assertion should be "true".

Steps to reproduce:

Try a test on contexte.com and do:

  it.only(`shows login form when clicking on login button in the header after scrolling`, function() {
    // # GIVEN visiting the home and scrolling, the login form shouldn't be visible
    cy.visit('/')

    cy.contains('Voir tous les articles et brèves').scrollIntoView()

    cy.get('#header-panel-login')
      .should('not.be.visible')

    // # WHEN clicking on "login" button
    cy.get('.account-menu-toggle')
      .contains('Se connecter')
      .click()

    // # THEN the login form must be visible
    cy.get('#header-panel-login')
      .should('be.visible')
  })

Versions

cypress: 3.0.2

pkdriver visibility 👁 bug

Source

kud

👍12 😕1

All 9 comments

Same problem on Cypress 3.1.0.

kud on 26 Oct 2018

Experiencing similar issue on 3.1.0 as well. I am using flexbox in my application that causes clipping issues with certain elements.

stephenchan9 on 14 Nov 2018

Experiencing the same issue on Cypress 3.1.2

jon-thompson on 20 Nov 2018

Can anyone provide a reproducible example? Test code + app code.

jennifer-shehane on 19 Feb 2019

Running into the same issue here. Too pressed for time to provide a self-contained example, but in my case it happens with a simple mobile slide-over menu.

When my menu has transform: translateX(-100%); and is completely offscreen, my should('not.be.visible') assertion fails. Cypress 3.1.5

justinpincar on 24 Feb 2019

👍1

Hi @jennifer-shehane,

I've created an example repository on https://github.com/rwam/cypress-test where you can see the problem in action. The error occurs in headless mode too (using yarn test:e2e --headless). At the moment I use a custom command to hide the sticky header:

Cypress.Commands.add('hide', { prevSubject: 'element' }, (subject) => {
  subject.css('visibility', 'hidden');
});

and in my test:

cy.get('header').hide();

Ok, I can use this in a beforeEach() hook on every tests where the header interferes. But why not having an option like "scrollOffset": "60px" in cypress.json or so?

Ciao
Ralf

rwam on 21 May 2019

@rwam I've recreated your repo to the minimal amount of code necessary to reproduce.

HTML

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <header style="left: 0;  right: 0; height: 60px; position: absolute;"></header>
    <input id="myInput">
  </body>
</html>

Spec file

Cypress.Commands.add('hide', { prevSubject: 'element' }, (subject) => {
  subject.css('visibility', 'hidden');
})

it('Successful test', () => {
  cy.visit('index.html');
  cy.get('header')
    .hide();
  cy.get('#myInput')
    .should('be.visible')
    .type('John Smith')
})

it('Failed test', () => {
  cy.visit('index.html');
  cy.get('#myInput')
    .should('be.visible')
    .type('John Smith')
})

Your reproduction is not a bug in Cypress. Elements with visibility: hidden do take up space within the DOM tree, so when a user attempts to click into the input, the input will not gain focus nor be typeable. You can test this by manually clicking on the input - nothing happens. This is expected behavior.

The input is visible since the header covering it up has visiblity: hidden, so it should still pass the visibility assertion, which is does. Still no bugs here.

You can however use the tab key to get focus of the input and type within the input. We don't currently have tab key support however - and it appears that the .type() is still attempting to check the visibility before typing - which is a bug.

None of this reproduction though actually has anything to do with the original issue that was opened concerning elements with fixed / transform: translate being evaluated incorrectly for visibility.

@rwam I've created a separate issue for you here: https://github.com/cypress-io/cypress/issues/4420

NEED A REPRODUCIBLE EXAMPLE

@kud @justinpincar @stephenchan9 @jon-thompson Everyone that is still experiencing the issue with transform / translate, no one has provided a reproducible example. A simple index.html with a cy.visit('index.html') where you have a failing test on the element will do.

I was planning to start work on this, but cannot until this is provided. Thanks.

jennifer-shehane on 10 Jun 2019

Unfortunately we have to close this issue as there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will reopen the issue. 🙏

jennifer-shehane on 11 Jul 2019

For me this was caused by an incorrect z-index on the element. When I changed the z-index, everything was fine.