时间戳

首页 > 解决方案 > 如何使用 cypress 选择带有标题的 svg 元素？

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

问题描述

我想将鼠标悬停在具有 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

解决方案

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

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

推荐阅读