如何使用 cypress 选择带有标题的 svg 元素？

Question

我想将鼠标悬停在带有 class 的元素svg内的元素上。该元素有标题标签divmainsvgHeader element

这是代码：

<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>

从上面的代码可以看出，我想将鼠标悬停在包含title 的span元素上。svgHeader element

我尝试过使用代码：

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

但这不起作用。

有人可以帮我使用 Cypress 找到这个 span 元素吗？谢谢。

Answer 1

您正在选择 svg 但想要悬停跨度，因此添加父选择器

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