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

rubenreyes2000 · 2019-12-13T21:13:56Z

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

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2019-12-16T07:30:01Z

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 · 2019-12-16T14:11:34Z

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 · 2019-12-16T16:46:01Z

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

jennifer-shehane · 2019-12-17T09:24:01Z

@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

<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 · 2020-07-07T07:33:51Z

This issue was actually resolved in 4.0.0 or 4.0.1 of Cypress. Closing as resolved.

cypress-bot bot added the stage: awaiting response Potential fix was proposed; awaiting response label Dec 16, 2019

cypress-bot bot added stage: ready for work The issue is reproducible and in scope and removed stage: awaiting response Potential fix was proposed; awaiting response labels Dec 17, 2019

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 mentioned this issue Dec 17, 2019

Element visibility fixes #1242

Closed

15 tasks

JessicaSachs added the internal-priority label Jul 7, 2020

jennifer-shehane closed this as completed Jul 7, 2020

jennifer-shehane removed the stage: ready for work The issue is reproducible and in scope label Jul 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rubenreyes2000 commented Dec 13, 2019 •

edited by sync-by-unito bot

Loading

jennifer-shehane commented Dec 16, 2019

rubenreyes2000 commented Dec 16, 2019

rubenreyes2000 commented Dec 16, 2019

jennifer-shehane commented Dec 17, 2019 •

edited

Loading

jennifer-shehane commented Jul 7, 2020

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

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

Comments

rubenreyes2000 commented Dec 13, 2019 • edited by sync-by-unito bot Loading

Current behavior:

Desired behavior:

Steps to reproduce: (app code and test code)

Versions

jennifer-shehane commented Dec 16, 2019

rubenreyes2000 commented Dec 16, 2019

rubenreyes2000 commented Dec 16, 2019

jennifer-shehane commented Dec 17, 2019 • edited Loading

jennifer-shehane commented Jul 7, 2020

rubenreyes2000 commented Dec 13, 2019 •

edited by sync-by-unito bot

Loading

jennifer-shehane commented Dec 17, 2019 •

edited

Loading