How to select an svg element with title using cypress?

Question

I want to hover on a svg element inside a div element with class main. This svg element has the title tag Header element

Here is the code:

<div class="main">
    <div class="box">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell">
            <div>
                <svg></svg>
                <span> //want to hover on this element
                    <svg>
                        <title>Header element</title>
                    </svg>
                </span>
            </div>
        </div>
    </div>
</div>

As seen from the code above, I want to hover on span element that contains the svg with the title Header element.

I have tried using the code:

cy.get(`.main>div`)
    .contains('svg', 'Header element')
    .trigger('mouseover')

but this is not working.

Could someone help me locate this span element using Cypress. Thanks.

Answer 1

You are selecting the svg but want to hover the span, so add a parent selector

cy.get(`.main>div`)
  .contains('svg', 'Header element')
  .parent('span')
  .trigger('mouseover')