Cypress get() 最佳实践和性能问题

Question

创建 cypress 测试时，我使用 get 函数来检索 DOM 元素。 我看到他们在文档中写道，最佳实践是使用 data-test 属性，但从性能角度来看，使用什么会更好：

cy.get(`div[data-testid*=${testid}]`)

或

cy.get('[data-testid=${testid}]')

如果添加元素类型，性能会更好吗？

Answer 1

我认为这没有那么大的区别，但在文档中所有示例都使用

cy.get('[data-testid=${testid}]')

请参阅此处了解更多最佳实践

https://docs.cypress.io/guides/references/best-practices

Answer 2

添加元素类型（div）：在选择器中包含元素类型（div[data-testid*=${testid}]）可以稍微缩小搜索范围，因为它在检查数据之前先过滤 div 元素-testid 属性。如果 DOM 非常大并且包含许多具有 data-testid 属性的元素但 div 元素较少，这可能会略微提高性能

精确匹配 (=) 与子字符串匹配 (=)：精确匹配 (=) 通常比子字符串匹配 (=) 更高效，因为浏览器不需要扫描属性的整个字符串值 -它只是检查是否相等

为了获得最佳性能和可维护性，仅当测试需要清晰或消除歧义时才添加元素类型 (div) 或使用子字符串匹配 (*=)。

例如：cy.get(

[data-testid=${testid}]

)