[Cypress 14] Change of should('be.visible') assertion behavior #31014

mmisty · 2025-02-03T18:12:35Z

mmisty
Feb 3, 2025

Hello!
I noticed that behavior of should('be.visible') / should('not.be.visible') changed in Cypress 14.0.

The following tests work differently in version 13.17 and 14.0:

describe('Visibility assertions', () => {
  beforeEach(() => {
    cy.intercept('mytest.com**', {
      body: `<html>
            <head>
             <style>
                body {background-color: powderblue; font-size: 40pt}
                h1   {color: blue;}
                p    {color: #68e2c0;}
                .title{
                    background-color: rgba(98,220,220,0.75); 
                    margin-bottom: 30px;
                } 
            </style>
          </head>
          <body>
            <div class="block1">A</div>
            <div class="block2">B</div>
            <div class="block3">C</div>
            <div class="block4">D</div>
          </body>
       </html>`,
    });
    cy.visit('mytest.com');
  });

  it('should pass be.visible when height 0, non-zero width and display block', () => {
    // passes with cypress 14.0, fails with cypress 13.17
    cy.get('.block1')
      .then(el => {
        el.css('height', '0');
        el.css('width', '10px');
        el.css('display', 'block');

        return cy.wrap(el);
      })
      .should('be.visible');
  });

  it('should pass be.visible when width 0, non-zero height and display block', () => {
    // passes with cypress 14.0, fails with cypress 13.17
    cy.get('.block1')
      .then(el => {
        el.css('height', '10px');
        el.css('width', '0');
        el.css('display', 'block');

        return cy.wrap(el);
      })
      .should('be.visible');
  });

  it('should pass be.visible when width 0, height 0 and display block', () => {
    // passes with cypress 14.0, fails with cypress 13.17
    cy.get('.block1')
      .then(el => {
        el.css('height', '0');
        el.css('width', '0');
        el.css('display', 'block');

        return cy.wrap(el);
      })
      .should('be.visible');
  });

  it('should pass assertion be.visible when non-zero width and height, display block', () => {
    // passes with both
    cy.get('.block1')
      .then(el => {
        el.css('height', '10');
        el.css('width', '10');
        el.css('display', 'block');

        return cy.wrap(el);
      })
      .should('be.visible');
  });

  it('should pass not.be.visible when width non 0, height non 0 and display none', () => {
    // passes with both
    cy.get('.block1')
      .then(el => {
        el.css('height', '10');
        el.css('width', '10');
        el.css('display', 'none');

        return cy.wrap(el);
      })
      .should('not.be.visible');
  });
});

Could you please advise if this is the expected behavior? I tried checking the release notes but didn’t find it there. Are there more changes like this?

jennifer-shehane · 2025-02-03T20:03:28Z

jennifer-shehane
Feb 3, 2025
Maintainer

Transferring to an issue here: #31015

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cypress 14] Change of should('be.visible') assertion behavior #31014

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

[Cypress 14] Change of should('be.visible') assertion behavior #31014

mmisty Feb 3, 2025

Replies: 1 comment

jennifer-shehane Feb 3, 2025 Maintainer

mmisty
Feb 3, 2025

jennifer-shehane
Feb 3, 2025
Maintainer