I am trying to write a test in Cypress (v8):
- When the map loads, we hit an endpoint
/myFleet
to generate markers. - Then, the user drags the map. And
onDragEnd
, we display a button to "Search Area" - When user clicks "Drag Area" we again
cy.intercept
the/myFleet
endpoint.
When I attempt item 2, the Search Area button & the Google Maps zoom controls move "up" the X-axis the same amount as my mousemove
event & the click()
on the search button does not get triggered.
cy.get('#live-view-map')
.trigger('mousedown')
.trigger('mousemove', { x: 261, y: 0 })
.trigger('mouseup')
.wait(500); // just to allow google maps tiles to resettle after drag
cy.findByTestId('button-search-area').click();
Here is a GIF: https://recordit.co/B6H5iWEyK5
and Here is a screen shot of "AFTER":
Why does my button & google zoom control move up? I think it's interfering in being able to actually select & click the element.
Am I not selecting the correct element to drag (cy.get('#live-view-map')
)?