How to select an svg element with title using cypress?

user_14793051 0
Viewed 3977

i want to hover on a svg element inside div element with class main. this svg element has title tag "Header element"

below 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 code above, i want to hover on span element that contains svg with title Header element.

i have tried using below

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

but this is not working

could someone help me locating this span element using cypress. thanks.

cypress
2 Answers

I think you are missing . (class selector)

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

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')
user_17817720
Related