Our test clicked a button our users couldn't reach
We shipped a small blog editor inside our dashboard. The same evening I opened it and the form was cut off at the bottom of the screen. The body field was half visible. Everything under it, the FAQ section and the publish options, was simply gone. The mouse wheel did nothing. Page Down did nothing. The end-to-end test for that exact form was green. It filled the form, clicked "Add question" at…
A new blog editor was added to the dashboard dashboard, but the implementation caused a bug. The form inside the editor was taller than the screen, causing the bottom portion to be cut off and inaccessible. The overflow:hidden property was used to hide elements that overflowed the container, but it didn't prevent scrolling. Playwright's click() function attempted to scroll the form into view, successfully clicking the "Add question" button despite the clipping.
The issue arose because the test assumed the form would be scrollable, while the fix overlooked the fact that overflow:hidden containers do not allow scrolling. The correct test would need to verify that the form is within a scrollable container, not a fixed one.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.