how to deal with sticky CSS?

[Pomax]

It looks like screenshots are based on "scrolling the page", which doesn't work for pages with sticky and fixed CSS positioning, leading to hilariously wrong screenshots like this one:

Is there any way to tell the screenshooter to not scroll, but use the browser's built in "take a full page screenshot" function?

[narinluangrath]

You might find this useful. https://docs.cypress.io/api/commands/screenshot#Full-page-captures-and-fixed-sticky-elements
An alternative I've found is to make the viewport height huge (like 5000px).

[PippoRaimondi]

This should work:

cy.get('.sticky-header').invoke('css', 'position', 'absolute').compareSnapshot('yourVisualRegressionTestName')

otherwise a big resolution so it fits the entire page should do.

[Pomax]

Having to manually alter the page in order to get a screenshot of what the page is supposed to look like kind of defeats the purpose =)

Chrome and FF both have "take a full page screenshot" functionality built in, is there a way to tap into that instead? e.g. in Chrome it's under dev tools -> [⋮] menu -> "run command" and then type screenshot; in FF there's a "take screenshot" icon on the main UI button bar that lets you pick "full page", both of which I would assume are actions that can be triggered by Cypress? (or... I hope? It would be weird if they didn't tap into those functions)

[Pomax]

Ah, according to https://docs.cypress.io/api/cypress-api/screenshot-api#Arguments this is just a standard option.

[Pomax]

hm, nope - after testing, that's still a very weird "scroll and tesselate", so I guess that won't get us actual real screenshots still =(

[PippoRaimondi]

this seems to be a none issue now, closing