En mi prueba Cypress end 2 end, aparece el siguiente error:

Este elemento <h4> no está visible porque su contenido está siendo recortado por uno de sus elementos principales, que tiene una propiedad CSS de desbordamiento: hidden , scroll o auto

De hecho, un elemento padre tiene overflow: hidden . Esta etiqueta h4 no es un elemento secundario directo sino un elemento anidado profundo con algunos contenedores en el medio.

En mi local, la prueba pasó pero en el servidor, ¿está fallando en la canalización debido al error anterior? ¿Cómo resolver esto? ¿Y por qué la prueba pasa en mi local pero falla en la canalización?

Actualizar:

La afirmación en mi código:

 cy.dataCy('cta-text').should('be.visible');

El HTML se ve así:

 <div> <div> <header> <h3 data-cy="title">My banner title</h3> <p data-cy="lead">This is the banner lead text.</p> </header> <footer> <div data-cy="cta"> <h4 data-cy="cta-text">This is the cta text</h4> </div> </footer> </div> <figure data-cy="image"> <img src="path-to-image"> </figure> </div>

El primer div está configurado para overflow: hidden .

Actualización 2: cuando cambio el tamaño de la ventana de mi navegador para que sea más estrecha, puedo ver que este elemento desaparece. Lo único que no entiendo es ¿por qué en mi local pasa la prueba?