Prevent overlapping...
Clear all

[Solved] Prevent overlapping elements in full page screenshot with cypress

New Member Guest
Joined: 1 year ago
Posts: 1
Topic starter  

We are trying ti implement Visual Testing with cypress and Imagium. The full page screen shot that we get contains multiple overlapping sticky headers. How can we handle this ?

Amrita Kaur
Member Admin
Joined: 3 years ago
Posts: 107

This is a typical problem with sticky headers. All you need to do is make a change to position css property of the sticky element as below:

cy.get('.sticky-header').invoke('css', 'position', 'absolute');
 cy.screenshot('Imagium/Image',{ overwrite: true });
cy.get('.sticky-header').invoke('css', 'position', null);


For more details see here