I’m having trouble with scroll height measurements in my Cypress automation tests. Here’s the code I’m using:
let elementHeight = targetDiv.prop('scrollHeight');
cy.get('@textContainer').should('contain.text', elementHeight);
The weird thing is that my tests pass most of the time, but occasionally the elementHeight value is off by exactly 1 pixel. This only happens when I execute the tests using:
cypress run --headless --browser firefox
When I run the same tests in headed mode or with Chrome, everything works perfectly. The height inconsistency seems random and I can’t figure out what’s causing it. Has anyone encountered this Firefox headless rendering issue before? Any suggestions for a workaround would be really helpful.
I’ve hit this same Firefox headless issue, though with different measurements. Firefox handles font rendering and subpixel calculations differently in headless vs headed mode - it rounds measurements weirdly when system font info is missing. Here’s what fixed it for me: ditch exact pixel checks and use a tolerance instead. Test if the height is within 1-2 pixels of what you expect rather than matching exactly. You can also force specific font settings in your cypress.config.js to standardize rendering. The inconsistency might be timing too - Firefox headless could be measuring before fonts finish loading.
Yeah, this Firefox headless scrollHeight thing is annoying but happens a lot. Firefox calculates line heights and text metrics weird without a display server. I hit the same issue last year - adding a small delay before measuring fixed it. Try cy.wait(100) or cy.then() to let the DOM settle completely. You can also force a reflow by reading another layout property first, then grab scrollHeight. Firefox headless needs that extra push sometimes. If timing doesn’t work consistently, just use a range check instead of exact matching.
firefox headless has this scrollHeight bug constantly - it’s a known rendering issue. wrap your measurement in cy.window().then() so the viewport stabilizes first. also check for any css transitions or animations still running when you measure. even tiny ones mess up the calculation by a pixel in headless mode.