I have got a calendar then when i move the mouse a bit down from a date i need to get a button, that is the button will appear upon hovering..
i have this code:
const myDate = dayjs().subtract(5, 'day')
cy.get('.calendar-row').contains(myDate.format('DD / MM')).trigger('mouseout').trigger('mousemove', 50, 50).within(() => {
cy.get('.mybutton').should('be.visible')
})
})
})
The test is failing with the below error:
Timed out retrying after 4000ms: cy.trigger() failed because this element:
<div class="calendar-row">08 / 07</div>is being covered by another element:<button type="button" class="mybutton" title="mybutton">...</button>
Fix this problem, or use {force: true} to disable error checking
The error happens at the step: trigger mousemove, 50, 50
When the mouse move down i need it to find the button "mybutton" for this specific date. Can someone pls advise what i am doing wrong. thanks
Try adding force: true to trigger.
const myDate = dayjs().subtract(5, 'day')
cy.get('.calendar-row')
.contains(myDate.format('DD / MM'))
.trigger('mouseout', {force: true})
.trigger('mousemove', 50, 50, {force: true})
cy.get('.mybutton').should('be.visible')
At the end this worked:
const myDate = dayjs().subtract(5, 'day')
cy.get('.calendar-row').contains(myDate.format('DD / MM')).parent().trigger('mouseout',50, 50).trigger('mousemove').within(() => {
cy.get('.mybutton').should('be.visible')
})
})
Thanks
Remove the mouseout, it already causes the hover button to appear.
const myDate = dayjs().subtract(5, 'day')
cy.get('.calendar-row')
.contains(myDate.format('DD / MM'))
//.trigger('mouseout') // comment this out
.trigger('mousemove', 50, 50) // OR this one
cy.get('.mybutton').should('be.visible')
The message is telling you that <button type="button" class="mybutton" title="mybutton">...</button> has appeared already, so it is the 2nd .trigger() that throws the error.
You would only need one or other mouse action - I would try commenting out one then the other and see which gives the result.