乐闻世界logo
搜索文章和话题

Cypress 如何通过 title 属性选择 svg 标签元素?

4 个月前提问
3 个月前修改
浏览次数27

1个答案

1

在使用 Cypress 进行测试时,如果你想要通过 title 属性选择 SVG 标签元素,可以使用 cy.get() 命令结合属性选择器来实现。这里是一个实际的例子,假设你有一个 SVG 元素包含了一个 title 属性,像这样:

html
<svg> <title id="uniqueTitleId">Example SVG</title> <!-- 其他 SVG 内容 --> </svg>

为了选择这个 SVG 标签,你可以使用以下 Cypress 命令:

javascript
cy.get('svg title[title="Example SVG"]')

在这个例子中,cy.get() 使用了一个选择器字符串来寻找匹配的元素。这个选择器指定了元素类型 title,然后通过中括号语法 [title="Example SVG"] 指定了 title 属性应该等于 "Example SVG"

然而,上述的选择器假设 SVG 的 title 是一个属性而不是一个子元素。如果 title 实际上是一个子元素,那么你需要选择到这个 title 标签,而不是使用它的属性。这种情况下,你可以通过内容来选择 title 标签:

javascript
cy.get('svg title').contains('Example SVG')

另外,如果 title 标签有一个唯一的 ID 或者其他可以唯一标识它的属性,你也可以使用那个属性来选择元素。例如:

javascript
cy.get('svg #uniqueTitleId') // 通过 ID 选择 cy.get('svg [id="uniqueTitleId"]') // 通过属性选择器选择 ID

请注意,当你在 SVG 元素内部查找元素时,可能需要确保你的选择器正确地考虑到了 SVG 的命名空间。SVG 元素和常规的 HTML 元素可能会有一些不同的行为。在大多数情况下,Cypress 应该能够正常地处理 SVG 元素的选择,但有时可能需要额外的处理来正确地选择和交互。

2024年6月29日 12:07 回复

你的答案