[Cypress 14] Change of should('be.visible') assertion behavior #31015
Description
Discussed in #31014
Originally posted by mmisty February 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}
.block1 { background-color: red; }
.block2 { background-color: green; }
.block3 { background-color: blue; }
.block4 { background-color: yellow; }
</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?