CODEWITHSUNDEEP
cypress
Indhu Nachadalingam
Indhu Nachadalingam

Reputation: 142

Is it possible to verify a Hover text using cypress?

I am new to cypress and exploring the tool. I would like to know if there is an option to verify a hovered text.

This is my scenario, My data is dynamic and changes every second. Imagine a table with Column city and city in charge. The city of incharge is dynamic and changes every minute.

This is clickable, hovered and holds a link. When hovered over it shows the full name while on the button it has the first name alone. Also, the name changes more frequently and not constant so cannot use contains to check.

I want to check if we store the hovered text, so in this way, I can assign it to a variable and check if the href holds the correct value.

example snippet:

<a href="/City/incharge/Mr.A" data-toggle="tooltip" title="" data-original-title="Mr.ABCDEFGH" "MR.ABCD">
</a>

So the actual text displayed will be Mr.ABCD but the hovered text will be MR.ABCD EFGH. I want to store the whole text that is MR.ABCD EFGH to some variable and check that with href if it is same.

Part of cypress code which I tried:

it('Check click function on inchargename', () => {
let name = ''
cy.get('td').eq(1)
  .then(incharge => {
name = incharge.text()
cy.get('td').eq(1).click()
cy.url().should('eq',`https://worldmap.com/city/${name}`)

}) })

However, this verifies only the first part of the name. I.e. the name holds Mr.ABCD but the actual result should be MR.ABCD EFGH. The part I wanted to access lies on data-original-title and I dont know how to access that. and the actual href will be 'https://worldmap.com/city/Mr.ABCDEFGH'

Note: I know we can access data-original-title using [data-original-title="Mr.ABCD EFGH"] but here the problem is the name is dynamic and we can't access it directly.

Upvotes: 1

Views: 6890

Answers (1)

kuceb
kuceb

Reputation: 18043

This will be fixed in a future version of Cypress, but at the moment a .click will not send all the mouse events for hovering, which includes mouseover, mouseenter, and mousemove

However you can simulate those events yourself with:

cy.get('td').eq(1).trigger('mouseover')

Upvotes: 1

Related Questions