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

【问题标题】：How to select an svg element with title using cypress?如何使用 cypress 选择带有标题的 svg 元素？
【发布时间】：2023-04-07 06:06:03
【问题描述】：

我想将鼠标悬停在具有 main 类的 div 元素内的 svg 元素上。这个 svg 元素有标题标签“标题元素”

下面是代码

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

从上面的代码中可以看出，我想将鼠标悬停在包含带有标题 Header 元素的 svg 的 span 元素上。

我尝试过使用下面

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

但这不起作用

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

【问题讨论】：

标签： cypress

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我认为您缺少.（类选择器）

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

【讨论】：