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

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

Closed
kud opened this issue Oct 3, 2018 · 9 comments
Closed

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

kud opened this issue Oct 3, 2018 · 9 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug

Comments

@kud
Copy link

kud commented Oct 3, 2018 •
edited by jennifer-shehane
Loading

Current behavior:

image

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
@kud kud mentioned this issue Oct 26, 2018
Closed
@kud
Copy link
Author

kud commented Oct 26, 2018

Same problem on Cypress 3.1.0.

@stephenchan9
Copy link

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

@jon-thompson
Copy link

Experiencing the same issue on Cypress 3.1.2

@jennifer-shehane jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Feb 19, 2019
@jennifer-shehane
Copy link
Member

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

@justinpincar
Copy link

justinpincar commented Feb 24, 2019 •
edited
Loading

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

@jennifer-shehane jennifer-shehane changed the title Cypress doesn't handle well position: fixed or/and transform: translate Cypress doesn't handle visibility assertions for fixed or/and transform: translate May 8, 2019
@rwam
Copy link

rwam commented May 21, 2019 •
edited by jennifer-shehane
Loading

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

@schmidtk schmidtk mentioned this issue Jun 5, 2019
Merged
This was referenced Jun 10, 2019
Closed
Closed
@jennifer-shehane
Copy link
Member

@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: #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.

@cypress-bot cypress-bot bot added stage: needs information Not enough info to reproduce the issue and removed stage: needs investigating Someone from Cypress needs to look at this labels Jun 10, 2019
@jennifer-shehane jennifer-shehane added the pkg/driver This is due to an issue in the packages/driver directory label Jun 10, 2019
@jennifer-shehane
Copy link
Member

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 jennifer-shehane removed the stage: needs information Not enough info to reproduce the issue label Jul 11, 2019
@Aeolun
Copy link

Aeolun commented Jul 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@kud @justinpincar @Aeolun @jennifer-shehane @jon-thompson @rwam @stephenchan9