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.

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

should('not.be.visible') fails for non visible elements dur to overflow: hidden and set height #5959

Open
rubenreyes2000 opened this issue Dec 13, 2019 · 4 comments

Comments

@rubenreyes2000
Copy link

@rubenreyes2000 rubenreyes2000 commented Dec 13, 2019

Current behavior:

There continues to be issues with visibility tests. I saw the list of issues compiled at #1242 but I am not sure this is one of the issues still listed as open.

In summary: an element that is not visible due to parent overflow: hidden is still reported as visible.

Desired behavior:

Elements not visible due to parent overflow: hidden should be reported as not visible by cypress.

Steps to reproduce: (app code and test code)

Use this code:

describe('', () => {
  before(function() {
    let html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    * {
      box-sizing: border-box;
    }
    .flex-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;
    }
    .copy {
      margin-right: 50px;
      width: 60%;
    }
    .accordion-group {
      flex: 1;
    }
    .accordion {
      overflow: hidden;
    }
    .accordion-content {
      background: red;
    }
  </style>
</head>
<body>
  <div class="flex-container">
      <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum, velit at eleifend tempus, mi mauris dapibus nunc, vitae semper tellus augue non purus. Suspendisse potenti. Praesent laoreet ornare lorem. Quisque pellentesque tempor magna sit amet facilisis. Pellentesque eleifend dui in nunc tempor, lacinia ullamcorper nunc aliquam. Mauris pretium tincidunt nunc, quis vehicula purus volutpat non. Donec consequat erat velit, nec tincidunt mauris dignissim quis. Sed consectetur, diam dictum feugiat faucibus, dui ex ullamcorper odio, ac rhoncus risus lacus et eros. Sed et vestibulum neque, a viverra felis. Ut quam nisi, dapibus efficitur arcu quis, mollis rhoncus justo. Morbi tristique consectetur tortor. Phasellus posuere, nulla et tempus mollis, est lacus malesuada felis, ac tempor risus ipsum at sapien. Nam ac urna purus. Ut vitae urna ornare, convallis magna vitae, posuere tellus.</p>
      </div>
      <div class="accordion-group">
        <div class="accordion">
            <h2 class="accordion-header">Vestibulum</h2>
            <div class="accordion-content">
              <p>Morbi nisl nunc, tincidunt vel est eu, commodo venenatis lorem. Etiam malesuada sagittis magna, sed suscipit orci tristique vel. Proin vulputate rhoncus dictum. Suspendisse volutpat congue metus, ut egestas magna sollicitudin in. Morbi mollis malesuada urna, vitae laoreet elit rutrum rutrum. Cras at tincidunt justo. Donec varius nisi a dolor vehicula sodales. Quisque eu nisl hendrerit, cursus massa sit amet, convallis nulla. Phasellus dapibus facilisis tellus, sed faucibus mauris gravida ultricies. Sed facilisis efficitur nunc, et vehicula augue dictum ac. Nunc sed ante lorem. Vivamus dapibus ante quis urna dignissim rutrum quis a elit. Nam at mi sit amet felis eleifend ultrices.</p>
            </div>
        </div>
        <div class="accordion">
            <h2 class="accordion-header">Curabitur</h2>
            <div class="accordion-content">
              <p>In risus ligula, fermentum nec libero eget, faucibus rutrum libero. Proin ligula turpis, porttitor ac nisl pulvinar, aliquet pretium nulla. Aliquam vel porta ante. Nullam dictum enim a justo elementum, et accumsan magna malesuada. Suspendisse lacinia, urna sed egestas scelerisque, lectus arcu congue sapien, quis sollicitudin nibh massa ut lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed mattis aliquet libero, ac porta enim sagittis quis. Pellentesque interdum ipsum euismod, sollicitudin est eu, commodo orci. Sed a arcu justo. Sed dignissim, arcu vitae vehicula imperdiet, diam neque pellentesque leo, quis bibendum dolor lectus eu tellus. In faucibus, tellus nec malesuada consectetur, quam dolor pretium diam, at vehicula massa lacus nec ligula. Aliquam ornare, mi in vehicula commodo, sem magna dignissim felis, vel hendrerit erat elit quis nulla.</p>
            </div>
        </div>
      </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script>
    jQuery(document).ready(function () {
      jQuery('.accordion').each(function () {
        var elem = jQuery(this);
        elem.css('height', elem.find('.accordion-header').outerHeight(true));
      });
    });
  </script>
</body>
</html>
`;
    cy.document().then(document => {
      document.write(html);
      document.close();
    });
  });

  it('', function() {
    cy.get('.accordion-content').should('exist').should('not.be.visible');
  });
});

Versions

cypress 3.8.0

@jennifer-shehane

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Dec 16, 2019

I see that you are using an older version of Cypress. Before I dive in to completely recreate the issue, could you update to the current version of Cypress and let me know if this is still happening for you? Your issue may have already been fixed. Thanks!

@rubenreyes2000

This comment has been minimized.

Copy link
Author

@rubenreyes2000 rubenreyes2000 commented Dec 16, 2019

Hi @jennifer-shehane - I didn't realized I was so behind in versions!
However, unfortunately I am seeing the same issue on 3.8.0

@rubenreyes2000

This comment has been minimized.

Copy link
Author

@rubenreyes2000 rubenreyes2000 commented Dec 16, 2019

Looks like the overflow: hidden element is getting forcefully scrolled... is that the expected behavior?

@jennifer-shehane

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Dec 17, 2019

@rubenreyes2000 It's a bit tricky. We do scrolling whenever you time travel, so that we can highlight the DOM element for preview. We do not do scrolling for a simple assertion like this during the test run.

You can see the actual scroll behavior during the test run by adding .pause() command in and stepping through or watching a video of the run. In this case we are not scrolling.

This is incorrectly failing. I've created the smallest reproducible example of this behavior here:

index.html

<!DOCTYPE html>
<html>
<body>
  <div style="overflow: hidden; height: 67.84px;">
    <h2>Vestibulum</h2>
    <p class="content" style="background: red;">
      Morbi nisl nunc.
    </p>
  </div>
</body>
</html>

spec.js

it('is visible', function () {
  cy.visit('index.html')
  cy.get('.content').should('not.be.visible')
})

@jennifer-shehane jennifer-shehane changed the title should('not.be.visible') fails for non visible elements should('not.be.visible') fails for non visible elements dur to overflow: hidden and set height Dec 17, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Dec 17, 2019
6 of 11 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.