Cypress: Elements on screen not visible due to overflow parent element

[riboher]

• Operating System: Mac OSX 10.12
• Cypress Version: 0.20.0
• Browser Version: Chrome 60

Is this a Feature or Bug?

Bug

Current behavior:

Due to the new fix related to elements within parents with overflow properties, some elements that are clearly visible on the screen make the test fail when asserting should('be.visible')

Desired behavior:

Identify whether or not the element is actually on screen, so the test only fails when it's not

How to reproduce:

As for now, I can't make any test pass that checks the visibility of an element that is within a parent with any overflow property. That should be enough to reproduce.

Test code:

cy.get('.cy-box').click()
        .get('.cy-box-child-1').should('be.visible')
        .get('.cy-box-child-2').should('be.visible')

[jennifer-shehane]

What is the overflow property set to on the .cy-box? And the css properties of the 2 child elements? Do you have a repo of the code that we could reference? Or add the .cy-box html code and styles to a https://jsfiddle.net/?

[riboher]

The overflow property of the parent is hidden and the only css property relevant in the children is height: 100%. What I find that could be causing the problem is that between these two elements there are multiple containers. What I mean is that they're not direct childs of the container with the overflow property, but are deeply nested.

[jennifer-shehane]

We're going to need the code to reproduce the situation you are describing. This is not enough information to reproduce it.

[rgoupil]

I had a similar issue, with a similar setup, while testing a page with a generic slider we wrote in VanillaJS.

I stripped off as much as I could form the original code:
https://codepen.io/anon/pen/XeWXEg

The first test will pass while it should not and the second will fail while it should pass

describe('Visibility with overflow and transform - originally a generic slider', function(){
  beforeEach(function() {
    cy.visit('TestServerURL');

    // first slide is visible by default, nothing wrong here
    cy.get('[name="test0"]').should('be.visible');
    cy.get('[name="test1"]').should('not.be.visible');
    cy.get('[name="test2"]').should('not.be.visible');

    // ask for the second slide to become visible
    cy.get('#button-1').click();
  });

  it('will pass but it should not', function(){
    cy.get('[name="test0"]').should('be.visible');
    cy.get('[name="test1"]').should('not.be.visible');
    cy.get('[name="test2"]').should('not.be.visible');
  });

  it('will NOT pass but it should', function(){
    cy.get('[name="test0"]').should('not.be.visible');
    cy.get('[name="test1"]').should('be.visible');
    cy.get('[name="test2"]').should('not.be.visible');
  });
});

This is not the smallest replication code but it should at least help you reproduce the issue until someone come with a smaller code - I did my best with the time I had available.

[riboher]

Thanks @GoupilRobin for sharing some code. I couldn't get to it before so really appreciate it :)

[paulfalgout]

This change has unfortunately created multiple scenarios where cypress clearly highlights the correct element on the screen but it says it can't see it and it can't click it.
I have no idea what is going on with this screen. My app just never renders that way and didn't with 0.19.4.

Here's the after where the click happens off screen, but otherwise the content is in the correct place.

Our app definitely has elements that scroll internally, but the div that seems to get moved contains the scrollable overflow-y: auto element and it's styles are:

    backface-visibility: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translate3d(100%, 0px, 0px);

[brian-mann]

@chrisbreiding has been looking into this today.

Are you using { force: true } in the meantime?

I know this still borks the should(be.visible) assertions but hopefully your tests can still work around this for the moment.

[paulfalgout]

Force true works only in the cases where things haven't been scrolled into
the netherworld.

On Sep 14, 2017 4:09 AM, "Brian Mann" [e-mail] wrote:

@chrisbreiding https://github.com/chrisbreiding has been looking into
this today.

Are you using { force: true } in the meantime?

I know this still borks the should(be.visible) assertions but hopefully
your tests can still work around this for the moment.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/631#issuecomment-329267197,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB7ztnPovyW7UYrClcRd_CLtlxxJOJYSks5siChwgaJpZM4PTW6H
.

[brian-mann]

I think we are close to having this resolved. We'll continue to iron out the visibility algorithm. It has gotten quite complex but it's still manageable.

[brian-mann]

I had to tweak the @GoupilRobin codepen a bit, but we have a new visibility algorithm in and it'll pass the tests now. We'll need to run this against all the projects and tests to make sure there's not visibility regressions. This new algorithm takes into account CSS transforms and translations.

[brian-mann]

The code for this is merged, but it has not been released yet.

[brian-mann]

Fixed in 0.20.1.

[janusqa]

@brian-mann @jennifer-shehane
I seem to be having a similar issue. I took a screen shot to describe the issue but github cannot process the gif.

Basically I am unable to click on a visible link on the screen as its parent has display: 0
the parent has overflow: hidden as well

Cypress reports the element is hidden due to parent display:0

[jennifer-shehane]

Hi @facebookdevbim, could you open a new issue please?

I will be closing this issue to discussion due to no outstanding comments regarding the original issue in over a year.