Hey Cypress folks 👋
I'm trying to write a test that drags a divider element (the panel resizer) to resize the left side of a layout in my app — but it's proving tricky.
Here's what's happening:
The divider has no id, no data-* attributes, no accessible selectors — just this:
When I click it manually in the browser, a drag icon appears, and I can resize the panel by dragging left/right.
In Cypress, I can click() or mousedown() the element, but it doesn’t trigger the drag-resize behavior.
I’ve tried simulating mousedown, mousemove, and mouseup, but nothing happens visually.
I also tried checking if the style changes (like flex-basis or width) are applied to parent or sibling panels — no luck so far.
Here’s a simplified version of my code:
dragDivider = (startX, endX, button = 0) => {
this.getDividerSelector()
.trigger('mousedown', { which: button, clientX: startX })
.trigger('mousemove', { clientX: endX })
.trigger('mouseup');
};
filingCabinetPage.dragDivider(600, 320); // this is working fine when we drag from left to right
filingCabinetPage.dragDivider(320, 600); // this is Not working
dragDivider = (endX, button = 1) => {
this.getDividerSelector()
.invoke('attr', 'style') // Apply the correct style dynamically
.then((style) => {
this.getDividerSelector()
.invoke('attr', 'style', style)
.trigger('mousedown', { which: button }) // Use the correct button dynamically
.trigger('mousemove', { clientX: endX }) // Move the divider
.trigger('mouseup');
});
};
💡 My question:
Has anyone handled a situation like this where the only way to access the divider is by style?
Is there a better way to simulate dragging when the element has no handles or hooks other than inline styles?
Could this behavior be tied to some JavaScript event listeners (like pointer events) that Cypress doesn’t trigger by default?
Any help, suggestions, or debugging tricks would be appreciated! 🙏